// *****************************************************************************
// toggle panel visibility behavior
// *****************************************************************************
var merchandisingPanel = $('merchcontainer');
function togglePanelVisibility(eventElement)
{
	var toggleButton = $$('div.merchclose img').first();

	// if the panel is already hidden, show it
	// otherwise, hide it
	if(merchandisingPanel.style.display == 'none')
	{
		//new Effect.SlideDown('merchandisingPanel');	// visually appealling, but clunky
		merchandisingPanel.show();	// cleaner, but less fluid
		<!--toggleButton.src = '/App_Themes/Default/images/2008/template/btn-collapsethis.gif';-->
		toggleButton.src = 'images1/btn-collapsethis.gif';
	}
	else
	{
		//new Effect.SlideUp('merchandisingPanel');	// visually appealling, but clunky
		merchandisingPanel.hide();	// cleaner, but less fluid
		<!--toggleButton.src = '/App_Themes/Default/images/2008/template/btn-expandthis.gif';-->
		toggleButton.src = 'images1/btn-collapsethis.gif';
	}
}
Event.observe($$('div.merchclose').first(), 'click', togglePanelVisibility);

// *****************************************************************************
// scroll panel behavior
// *****************************************************************************

   /***********************************************************
	* Use acc for scrolling value																		*
	* With each interval, acc is increased by INC, until reaching MAX_ACC.	*
	* When interval is cleared, acc is reset to DEF_ACC									*
	* On mousedown, scrolling increases to JUMP value									*
	***********************************************************/
var DEF_ACC = 7;
var INC = 0;
var MAX_ACC = 10;
var JUMP = 20;
var acc = DEF_ACC;
var scrollLeft = null, scrollRight = null, jumpLeft = null, jumpRight = null;

function toggleScrollLeft(eventElement)
{
	switch (eventElement.type)
	{
		case 'mouseover': //slow scrolling
			scrollLeft = setInterval(scrollPanelLeft, 40);
			break;
		case 'mousedown': //quick scrolling	
			if (scrollLeft != null)
				clearInterval(scrollLeft);
			jumpLeft = setInterval(jumpPanelLeft, 40);
			break;
		case 'mouseup': //terminate quick scrolling, resume slow scrolling
			if (jumpLeft != null)
				clearInterval(jumpLeft);
			scrollLeft = setInterval(scrollPanelLeft, 40);
			break;
		default : //terminate all scrolling
			if (scrollLeft != null)
				clearInterval(scrollLeft);
			if (jumpLeft != null)
				clearInterval(jumpLeft);
			acc = DEF_ACC;
			break;		
	}
}
function toggleScrollRight(eventElement)
{
	switch (eventElement.type)
	{
		case 'mouseover': //slow scrolling
			scrollRight = setInterval(scrollPanelRight, 40);
			break;
		case 'mousedown': //quick scrolling		
			if (scrollRight != null)	
				clearInterval(scrollRight);
			jumpRight = setInterval(jumpPanelRight, 40);
			break;
		case 'mouseup': //terminate quick scrolling, resume slow scrolling	
			if (jumpRight != null)		
				clearInterval(jumpRight);
			scrollRight = setInterval(scrollPanelRight, 40);
			break;
		default : //terminate all scrolling
			if (scrollRight != null)
				clearInterval(scrollRight);
			if (jumpRight != null)
				clearInterval(jumpRight);
			acc = DEF_ACC;
			break;		
	}
}
function scrollPanelLeft()
{
	visiblePanel.scrollLeft -= acc;
	if (acc <= MAX_ACC)
		acc += INC;
}
function scrollPanelRight()
{
	visiblePanel.scrollLeft += acc;
	if (acc <= MAX_ACC)
		acc += INC;
}
function jumpPanelLeft()
{
	visiblePanel.scrollLeft -= JUMP;
}
function jumpPanelRight()
{
	visiblePanel.scrollLeft += JUMP;
}

Event.observe($$('#merchleft img').first(), 'mouseover', toggleScrollLeft);
Event.observe($$('#merchright img').first(), 'mouseover', toggleScrollRight);
Event.observe($$('#merchleft img').first(), 'mouseout', toggleScrollLeft);
Event.observe($$('#merchright img').first(), 'mouseout', toggleScrollRight);
Event.observe($$('#merchleft img').first(), 'mousedown', toggleScrollLeft);
Event.observe($$('#merchright img').first(), 'mousedown', toggleScrollRight);
Event.observe($$('#merchleft img').first(), 'mouseup', toggleScrollLeft);
Event.observe($$('#merchright img').first(), 'mouseup', toggleScrollRight);

// *****************************************************************************
// flip view behavior
// *****************************************************************************
var visiblePanel;
var visibleTab;
if($$('.merchandisingPanelScroller_FI').first().style.display != 'none')
{
	visiblePanel = $$('.merchandisingPanelScroller_FI').first();
	visibleTab = $$('.merchfeatured a').first();
}
else if($$('.merchandisingPanelScroller_TS').first().style.display != 'none')
{
	visiblePanel = $$('.merchandisingPanelScroller_TS').first();
	visibleTab = $$('.merchtopseller a').first();
}
else if($$('.merchandisingPanelScroller_NA').first().style.display != 'none')
{
	visiblePanel = $$('.merchandisingPanelScroller_NA').first();
	visibleTab = $$('.merchnewarrival a').first();
}

function flipVisiblePanel(eventElement)
{
	var target = $(eventElement.target);
	if(target.tagName.toLowerCase() == 'a')
	{
		 target = target.up('div');
	}

	// if we are clicking on the visible tab, do nothing
	if(target == visiblePanel && merchandisingPanel.style.display != 'none')
	{
		return;
	}

	// otherwise, hide the currently visible tab
	// and show the desired tab
	var desiredPanel;
	var desiredTab;
	switch(target.className)
	{
		case 'merchfeatured':
			desiredPanel = $$('.merchandisingPanelScroller_FI').first();
			desiredTab = $$('.merchfeatured a').first();
			break;
		case 'merchtopseller':
			desiredPanel = $$('.merchandisingPanelScroller_TS').first();
			desiredTab = $$('.merchtopseller a').first();
			break;
		case 'merchnewarrival':
			desiredPanel = $$('.merchandisingPanelScroller_NA').first();
			desiredTab = $$('.merchnewarrival a').first();
			break;
	}
	visiblePanel.hide();
	visibleTab.style.backgroundPosition = '';
	desiredPanel.show();
	desiredTab.style.backgroundPosition = '0px -34px';
	visiblePanel = desiredPanel;
	visibleTab = desiredTab;
	if(merchandisingPanel.style.display == 'none')
	{
		togglePanelVisibility(null);
	}
}
Event.observe($$('.merchfeatured').first(), 'click', flipVisiblePanel);
Event.observe($$('.merchtopseller').first(), 'click', flipVisiblePanel);
Event.observe($$('.merchnewarrival').first(), 'click', flipVisiblePanel);

// *****************************************************************************
// resize scrolling panels based on children
// *****************************************************************************
function resizeDynamicScrollingPanels()
{
	var scrollingWrappers = $$('div.scrollingWrapper');
	var productCells = $$('div.scrollingWrapper div.productCell');
	// we need to get this figure now, because the offset width of the visible product
	//  differs from the offsetWidth of the not-visible product
	var productOffsetWidth = productCells.first().offsetWidth;

	scrollingWrappers.each(
		function(currentElement)
		{
			if(currentElement.childElements().size() > 0)
			{
				// make the container big enough to handle all the children
				// the 1.1 is for margin of error
				currentElement.style.width = ((currentElement.childElements().size() * productOffsetWidth) * 1.02) + 'px';
			}
		}
	)
}
Event.observe(window, 'load', resizeDynamicScrollingPanels);