// build the nav javascript functionality
var DuwopDropMenu = {
	options: {},
	itemList: [],
	
	init: function(custOptions)
	{
		var me = this,
			options = {
				container:	'#primary_nav',
				menuClass:	'primary_container',
				butClass:	'primary_link',
				subClass:	'secondary_nav'
			}
		;
		jQuery.extend( options, custOptions );
		
		$(options.container).find('.'+options.menuClass).each(function(){
			me.itemList.push(this);
			$(this).bind('mouseenter', function(){
				me.tabOver(this);
			}).bind('mouseleave', function(){
				me.tabOut(this);
			});
		});
		
		me.options = options;
	},
	
	tabOver: function(elem)
	{
		var me = this;
		
		if (elem.removeTimeout) clearTimeout(elem.removeTimeout);
		
		// check for other visible tabs
		$(me.itemList).each(function(){
			if (this !== elem && this.isShown) {
				this.forceClose = true;
				me.tabOut(this, 1);
			}
		});
		
		elem.isShown = true;
		$(elem).find('.'+me.options.butClass).addClass('active');
		$(elem).find('.'+me.options.subClass).slideDown();
	},
	
	tabOut: function(elem, force)
	{
		var me = this;
		
		elem.removeTimeout = setTimeout(function(){
			if ( elem.forceClose ) {
				$(elem).find('.'+me.options.subClass).hide();
			}
			else {
				$(elem).find('.'+me.options.subClass).slideUp();
			}
			$(elem).find('.'+me.options.butClass).removeClass('active');
			elem.isShown = false;
			elem.forceClose = false;
		}, (elem.forceClose ? 1 : 800));
	}
};


// build the swatches stuff
function DuwopSwatchViewer( options )
{
	var me = this;
	
	/* PERFORM SOME INITIALIZATION */
	me.init = function( options )
	{
		// prepare the params / options
		me.params = {
			previewElem:	'#image_preview img',
			thumbsCont:		'#image_swatches ul',
			thumb:			'a',
			selectElem:		'#product_fields select',
			imgLoader:		'#image_loader div',
			currShadeLabel:	'#curr_shade span',
			activeSwatch:	'active',
			currentSwatch:	0,
			itemID:			'FF-001'
		};
		// extend with the custom options
		$.extend( me.params, options );
		
		// make sure there is a product ID
		if ( !me.params.itemID ) {
			alert('no product ID found');
			return;
		}
	
		// grab the actual preview image
		me.params.previewElem = $(me.params.previewElem)[0];
	
		// grab the actual select element & reset onchange
		me.params.selectElem = $(me.params.selectElem)[0];
		
		// grab the actual thumbs container
		me.params.thumbsCont = $(me.params.thumbsCont)[0];
	
		// loop through the options and build out swatches
		for( var x=1; x < me.params.selectElem.options.length; x++)
		{
			var opt = me.params.selectElem.options[x];
	
			// build the swatch element
			var node = $('<li></li>').appendTo(me.params.thumbsCont);
			node.tplAppend(
				{
					itemID:		me.params.itemID,
					swatchnum:	x,
					title:		opt.innerHTML || opt.getAttribute('value')
				},
				me.swatchItemTpl
			);
		
			// set the event listeners
			$(node).find(me.params.thumb)
				.click( function() {
					me.clickHandler(this);
					// fire off the handler for the select elem
					$(me.params.selectElem).trigger('change');
				} )
				.mouseenter( function() {
					me.overHandler(this);
				} )
				.mouseleave( function() {
					me.outHandler(this);
				} );
			
			// preload the preview images
			$('<img src="'+$(node).find(me.params.thumb).attr('previmg')+'">')
				.appendTo(me.params.imgLoader);
		}
		
		// update the swatch data
		me.selectUpdate();
	
		// set the change and key-up triggers
		$(me.params.selectElem)
			.change(function() {
				me.selectUpdate();
			})
			.keyup(function() {
				me.selectUpdate();
			});
	};
		
	/* FINISH INITIALIZATION */
		
		
	/*
	 * DEFINITIONS
	 */
	
	// swatch template 
	me.swatchItemTpl = function()
	{
		var tpl = [
			'a', {
				href:		'javascript: void(0)',
				title:		this.title,
				previmg:	'images/products/' + this.itemID + '/swatches/preview_' + this.swatchnum + '.jpg',
				swatchnum:	this.swatchnum
			},
			[
				'img', {
					src:	'images/products/' + this.itemID + '/swatches/thumb_' + this.swatchnum + '.jpg',
					border:	'0'
				}
			]
		];
		
		return tpl;
	};

	
	// click event handler
	me.clickHandler = function(elem)
	{
		var me = this;
		
		// update the selected option
		me.params.selectElem.options[elem.getAttribute('swatchnum')].selected = true;
		
		// update the swatch data
		me.selectUpdate();
	};
	
	// hover event handler
	me.overHandler = function(elem)
	{
		var me = this;
		
		// reset the timout if need be
		if ( me.rollTimeout ) {
			clearTimeout( me.rollTimeout );
		}
		
		me.updatePreview(parseInt(elem.getAttribute('swatchnum')) -1);
	};
	
	// mouseout event handler
	me.outHandler = function(elem)
	{
		var me = this;
		
		// set this as a timeout so it doesn't look all glitchy
		me.rollTimeout = setTimeout( function(){
			me.updatePreview(me.params.currentSwatch -1);
		}, 300 );
	};
	
	// handle any changing of the select element
	me.selectUpdate = function()
	{
		var selectedIndex = me.params.selectElem.selectedIndex;
		me.params.currentSwatch = selectedIndex;
		
		var swatchName = '';
		
		// add / remove active state from swatches
		$(me.params.thumbsCont).find(me.params.thumb).each(function(){
			var elem = this;
			if ( parseInt( elem.getAttribute('swatchnum') ) == selectedIndex ) {
				$(elem).addClass( me.params.activeSwatch );
				me.params.currentSwatch = parseInt( elem.getAttribute('swatchnum') );
				swatchName = elem.getAttribute('title');
			}
			else {
				$(elem).removeClass( me.params.activeSwatch );
			}
		});
		
		// update the shade title
		$(me.params.currShadeLabel).html(swatchName);
		
		// update preview
		me.updatePreview(me.params.currentSwatch -1);
	};
	
	me.updatePreview = function( indexNum )
	{
		// grab the swatch item
		var swatch = $(me.params.thumbsCont).find(me.params.thumb+':eq('+( indexNum >= 0 ? indexNum : 0 ) +')' );
	
		// update the preview image
		me.params.previewElem.src = swatch.attr('previmg');
		
		// update the shade title
		$(me.params.currShadeLabel).html(swatch.attr('title'));
	};
	
	// run the constructor / init function
	me.init( options );
};

// the duwop notebook stuff
function DuwopNoteBook( options )
{
	var me = this;
	
	// prepare the params / options
	me.params = {
		container:	'.tabberlive',
		tabs:		'.tabbernav li',
		panes:		'.tabbertab',
		activetab:	'tabberactive',
		hidden:		'tabbertabhide',
		currentTab:	0
	};
	// extend with the custom options
	$(me.params).extend( options );
	
	// initiate
	var numTabs = 0;
	$(me.params.container).find(me.params.tabs).each( function() {
		var tab = this;
		tab.setAttribute('tabnum',numTabs);
		$(tab).click( function() {
			me.clickHandler(this);
		} );
		numTabs++;
	} );
	
	// handles tab click event
	me.clickHandler = function(elem)
	{
		var me = this;
		var tabNum = parseInt( elem.getAttribute('tabnum') );
		
		if ( tabNum != me.params.currentTab ) {
			me.params.currentTab = tabNum;
			
			// mark all tabs as inactive
			$(me.params.container)
				.find(me.params.tabs)
					.removeClass(me.params.activetab);
			
			// mark all panes as hidden
			$(me.params.container)
				.find(me.params.panes)
					.addClass(me.params.hidden);
			
			// mark active tab
			$(elem).addClass(me.params.activetab);
			
			// show active pane
			$(me.params.container)
				.find(me.params.panes+':eq('+tabNum+')')
					.removeClass(me.params.hidden);
		}
	}
};

// build the gallery items and init the lytebox stuff
var DuwopGallery = {
	init: function( options )
	{
		var me = this;
	
		if ( !options || !options.numImages || options.numImages <= 1 ) {
			return;
		}
		
		// build the container
		var node = $('<div id="gallery_images"></div>').appendTo('#product_images');
		
		// build the label
		$('<h3>More Images: (click to enlarge)</h3>').appendTo(node);
		
		// build the list
		node = $('<ul>More Images: (click to enlarge)</h3').appendTo(node);
		
		for( var x=1; x<options.numImages; x++ )
		{
			node.tplAppend(
				{
					itemNum:	x,
					prodName:	options.prodName
				},
				me.itemTpl
			);
		}
		
		// update the lytebox stuff
		// NOTE: I think this happens before the lytebox stuff fires anyhow...
		myLytebox.updateLyteboxItems();
	},
	
	itemTpl: function()
	{
		var tpl = [
			'li', {}, [
				'a', {
					href:		'images/products/' + this.prodName + '/gallery/large_' + this.itemNum + '.jpg',
					rel: 'lytebox[gallery]'
				},
				[
					'img', {
						src:	'images/products/' + this.prodName + '/gallery/thumb_' + this.itemNum + '.jpg',
						border:	'0'
					}
				]
			]
		];
		
		return tpl;
	}
};

// hack to fix IE background image caching
try {
  document.execCommand("BackgroundImageCache", false, true);
} catch(err) {};