var ImageCycleDelayTL = 6;
var ImageCycleDelayTR = 5;
var ImageCycleDelayBL = 3;
var ImageCycleDelayBR = 4;
var ImageCycleFadeDuration = 2;
var ImageCycleAppearDuration = 1;
var CurSelectedProduct = 'ProductInfoSML';
var CurSelectedProductMenu = 'ProductInfoMenuSML';
var CurHeader = 0;
var BillboardDelay = 2;
var CyclePosition = 1;
var DebugEle;
var ToggleSubMenu = false;

var ImageOptions = new Array();
ImageOptions[0] = 'images/Index-WomanSlidingChest.jpg';
ImageOptions[1] = 'images/Index-WoodBG.jpg';
ImageOptions[2] = 'images/Index-SlideCarpet.jpg';
ImageOptions[3] = 'images/Index-SlideTile.jpg';
ImageOptions[4] = 'images/Index-SlideThreshold.jpg';
ImageOptions[5] = 'images/Index-SlideEverySize.jpg';

var OverlayOptions = new Array();
OverlayOptions[0] = 'images/Mainslideroverlay.jpg';
OverlayOptions[1] = 'images/Index-SlidingCabinetOverlay.png';
OverlayOptions[2] = '';
OverlayOptions[3] = '';
OverlayOptions[4] = '';
OverlayOptions[5] = '';

var AnimationOptions = new Array()
AnimationOptions[0] = function(AnimID) { new Effect.Appear(AnimID, {duration: 1, delay: 1.5, afterFinish: function(){ new Effect.Fade(AnimID, {duration: 1, delay: 2});}});};
AnimationOptions[1] = function(AnimID) { 
						new Effect.Appear(AnimID, {
							duration: 1,
							afterFinish: function(){
								new Effect.Move(AnimID, {
									delay: 1,
									x: 80,
									y: 0,
									mode: 'relative',
									queue: {
										position: 'end',
										scope: 'OverlayQ'
									}
								});
								new Effect.Fade(AnimID, {
									duration: 1,
									delay: 2,
									queue: {
										position: 'end',
										scope: 'OverlayQ'
									}
								});
							}
						});
						
					};
AnimationOptions[2] = null;
AnimationOptions[3] = null;
AnimationOptions[4] = null;
AnimationOptions[5] = null;


function WriteDebug(message)
{
	DebugEle.innerHTML += message + '<br/>';
}

function depressButton(buttonId)
{
	document.getElementById(buttonId).className = 'MainMenuButtonDown';
}

function unpressButton(buttonId)
{
	document.getElementById(buttonId).className = 'MainMenuButton';
}

function hoverButton(buttonId)
{
	document.getElementById(buttonId).className = 'MainMenuButtonHover';
}

function depressHButton(buttonId)
{
	document.getElementById(buttonId).className = 'HeaderMenuButtonDown LeftPadded LearnMore';
}

function unpressHButton(buttonId)
{
	document.getElementById(buttonId).className = 'HeaderMenuButton  LeftPadded LearnMore';
}

function hoverHButton(buttonId)
{
	document.getElementById(buttonId).className = 'HeaderMenuButtonHover  LeftPadded LearnMore';
}
function moveLogo()
{
	$('#MagicSlidersLogo').show('slow').animate({
		left: 0
	}, 1200);
}

function CycleHeader()
{	
    DebugEle = document.getElementById('Debug');

	var OverlayDiv = document.getElementById('SlidingChestOverlay');
	var Billboard = document.getElementById('UpperContentBillBoard');
	var CurContent = document.getElementById('UpperContentBillBoardHidden' + CurHeader);
	var ImageEle = document.getElementById('UpperContentImageImage');
	var OverlayEle = document.getElementById('UpperContentImageOverlay');
	var AllUpper = document.getElementById('UpperContentContent');
	
	if(CurHeader == 0)
	{
		AnimationOptions[0](OverlayDiv);
		CurHeader += 1;
		CycleHeader();
	}
	else
	{
		if(CurHeader <= 4)
		{
			new Effect.Fade(AllUpper, {
				delay: BillboardDelay, 
				duration: 2, 
				afterFinish: function()
					{
						OverlayDiv.className = 'SlidingChestOverlay' + CurHeader;
						Billboard.innerHTML = CurContent.innerHTML; 
						new Effect.Appear(AllUpper, {duration: 1}); 
						ImageEle.src = ImageOptions[CurHeader]; 
						OverlayEle.src = OverlayOptions[CurHeader]; 
						if(AnimationOptions[CurHeader] != null)
						{
							AnimationOptions[CurHeader](OverlayDiv);
						}
						CurHeader +=1;
						CycleHeader();
					}
				});
			
		}
		else // we're assuming we've hit #6, remove callback to CycleHeader and stop incrementing CurHeader
		{	
			new Effect.Fade(AllUpper, {
				delay: BillboardDelay, 
				duration: 2, 
				afterFinish: function()
					{
						OverlayDiv.className = 'SlidingChestOverlay' + CurHeader; 
						new Effect.Appear(AllUpper, {duration: 1}); 
						ImageEle.src = ImageOptions[CurHeader]; 
						OverlayEle.src = OverlayOptions[CurHeader]; 
						if(AnimationOptions[CurHeader] != null)
						{
							AnimationOptions[CurHeader](OverlayDiv);
						}
						
					}
				});
			ManageCycles2();  
		}
	}
	
	
}

function ManageCycles1()
{
	if(CyclePosition == 1)
	{
		CycleTLImages('DivLCIBubbleImageTL', 0, 'DivLCIBubbleTextTL');
	}
	else if (CyclePosition == 2)
	{
		CycleTRImages('DivLCIBubbleImageTR', 0, 'DivLCIBubbleTextTR');
	}
	else if (CyclePosition == 3)
	{
		CycleBLImages('DivLCIBubbleImageBL', 0, 'DivLCIBubbleTextBL');
	}
	else if (CyclePosition == 4)
	{
		CycleBRImages('DivLCIBubbleImageBR', 0, 'DivLCIBubbleTextBR');
	}
	if(CyclePosition < 4)
	{
		CyclePosition += 1;
	}
	else
	{
		CyclePosition = 1;
	}
}

function ManageCycles2()  
{
	
		CycleTLImages('DivLCIBubbleImageTL', 0, 'DivLCIBubbleTextTL');
	
		CycleTRImages('DivLCIBubbleImageTR', 0, 'DivLCIBubbleTextTR');
	
		CycleBLImages('DivLCIBubbleImageBL', 0, 'DivLCIBubbleTextBL');
	
		CycleBRImages('DivLCIBubbleImageBR', 0, 'DivLCIBubbleTextBR');
	
}


function CycleTLImages(ImgId, CurIndex, TxtId)
{
	var NextIndex = 0;
	var ImageElement;
	var TLImages = new Array();
	TLImages[0] = 'images/ScrewsOn1.jpg';
	TLImages[1] = 'images/ScrewsOn2.jpg';
      TLImages[2] = 'images/ScrewsOn3.jpg';

	/** The TLImages and TLText arrays have to remain the same size. If we need more text options than image options, or vice versa, we'll have to recode this another way **/
	var TLText = new Array();
	TLText[0] = 'easy to install';
      TLText[1] = 'easy to install';
	TLText[2] = 'many sizes and types';
	var TextElement;
	
	ImageElement = document.getElementById(ImgId);
	TextElement = document.getElementById(TxtId);
	
	if(CurIndex >= TLImages.length - 1)
	{
		NextIndex = 0;
	}
	else
	{
		NextIndex = CurIndex + 1;
	}
	
	setTimeout(function() {
			$(ImageElement).fadeOut(ImageCycleFadeDuration * 1000,  function(){
				ImageElement.src = TLImages[NextIndex];
				TextElement.innerHTML = TLText[NextIndex];
				$(this).fadeIn(ImageCycleAppearDuration * 1000, function() {
					CycleTLImages(ImgId, NextIndex, TxtId);
				});
			});
		},
		ImageCycleDelayTL * 1000);
	
}
function CycleTRImages(ImgId, CurIndex, TxtId)
{
	var NextIndex = 0;
	var ImageElement;
	var TRImages = new Array();
	TRImages[0] = 'images/Immitators1.jpg';
	TRImages[1] = 'images/Immitators2.jpg';
	TRImages[2] = 'images/Immitators3.jpg';
	/** The TRImages and TRText arrays have to remain the same size. If we need more text options than image options, or vice versa, we'll have to recode this another way **/
	var TRText = new Array();
	TRText[0] = 'don\'t be fooled by imitators';
	TRText[1] = 'Magic Sliders are the original';
	TRText[2] = 'and still the best';
	var TextElement;
	
	ImageElement = document.getElementById(ImgId);
	TextElement = document.getElementById(TxtId);
	
	if(CurIndex >= TRImages.length - 1)
	{
		NextIndex = 0;
	}
	else
	{
		NextIndex = CurIndex + 1;
	}
	
	setTimeout(function() {
			$(ImageElement).fadeOut(ImageCycleFadeDuration * 1000,  function(){
				ImageElement.src = TRImages[NextIndex];
				TextElement.innerHTML = TRText[NextIndex];
				$(this).fadeIn(ImageCycleAppearDuration * 1000, function() {
					CycleTRImages(ImgId, NextIndex, TxtId);
				});
			});
		},
		ImageCycleDelayTR * 1000);
}
function CycleBLImages(ImgId, CurIndex, TxtId)
{
	var NextIndex = 0;
	var ImageElement;
	var BLImages = new Array();
	BLImages[0] = 'images/Floors1.jpg';
	BLImages[1] = 'images/Floors2.jpg';
	BLImages[2] = 'images/Floors3.jpg';
      BLImages[3] = 'images/Floors4.jpg';
      BLImages[4] = 'images/Floors5.jpg';
	/** The BLImages and BLText arrays have to remain the same size. If we need more text options than image options, or vice versa, we'll have to recode this another way **/
	var BLText = new Array();
	BLText[0] = 'works on any surface';
	BLText[1] = 'works on any surface';
	BLText[2] = 'works on any surface';
	BLText[3] = 'works on any surface';
      BLText[4] = 'works on any surface';
	var TextElement;
	
	ImageElement = document.getElementById(ImgId);
	TextElement = document.getElementById(TxtId);
	
	if(CurIndex >= BLImages.length - 1)
	{
		NextIndex = 0;
	}
	else
	{
		NextIndex = CurIndex + 1;
	}
	
	setTimeout(function() {
			$(ImageElement).fadeOut(ImageCycleFadeDuration * 1000,  function(){
				ImageElement.src = BLImages[NextIndex];
				TextElement.innerHTML = BLText[NextIndex];
				$(this).fadeIn(ImageCycleAppearDuration * 1000, function() {
					CycleBLImages(ImgId, NextIndex, TxtId);
				});
			});
		},
		ImageCycleDelayBL * 1000);
}
function CycleBRImages(ImgId, CurIndex, TxtId)
{
	var NextIndex = 0;
	var ImageElement;
	var BRImages = new Array();
	BRImages[0] = 'images/Chores1.jpg';
	BRImages[1] = 'images/Chores2.jpg';
	BRImages[2] = 'images/Chores3.jpg';
	BRImages[3] = 'images/Chores4.jpg';
	/** The BRImages and BRText arrays have to remain the same size. If we need more text options than image options, or vice versa, we'll have to recode this another way **/
	var BRText = new Array();
	BRText[0] = 'makes chores a breeze';
	BRText[1] = 'makes chores a breeze';
	BRText[2] = 'makes chores a breeze';
	BRText[3] = 'makes chores a breeze';
	var TextElement;
		
	ImageElement = document.getElementById(ImgId);	
	TextElement = document.getElementById(TxtId);
	
	if(CurIndex >= BRImages.length - 1)
	{
		NextIndex = 0;
	}
	else
	{
		NextIndex = CurIndex + 1;
	}
	
	setTimeout(function() {
			$(ImageElement).fadeOut(ImageCycleFadeDuration * 1000,  function(){
				ImageElement.src = BRImages[NextIndex];
				TextElement.innerHTML = BRText[NextIndex];
				$(this).fadeIn(ImageCycleAppearDuration * 1000, function() {
					CycleBRImages(ImgId, NextIndex, TxtId);
				});
			});
		},
		ImageCycleDelayBR * 1000);
}

function ProductInfoMenu(selectedProduct, selectedProductMenu)
{
	if(CurSelectedProduct != selectedProduct)
	{
		$('#' + CurSelectedProduct).hide('blind', {direction: "vertical"}, 1000);
		$('#' + selectedProduct).show('blind', {direction: "vertical"}, 1000);
//		new Effect.BlindUp(CurSelectedProduct);
//		new Effect.BlindDown(selectedProduct);
		CurSelectedProduct = selectedProduct;
		document.getElementById(CurSelectedProductMenu).className = 'ProductInfoSizeMenuItem';
		document.getElementById(selectedProductMenu).className = 'ProductInfoSizeMenuItemSelected';
		CurSelectedProductMenu = selectedProductMenu;
	}
	
}

function ShowProductSubMenu()
{
	if(ToggleSubMenu == false)
	{
		new Effect.BlindDown('ProductSubMenu');
		ToggleSubMenu = true;
	}

}

function HideProductSubMenu()
{
	if(ToggleSubMenu == true)
	{
		new Effect.BlindUp('ProductSubMenu');
		ToggleSubMenu = false;
	}
	
}


function ParseURL(name)
{
  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
  var regexS = "[\\?&]"+name+"=([^&#]*)";
  var regex = new RegExp( regexS );
  var results = regex.exec( window.location.href );
  if( results == null )
    return "";
  else
    return results[1];
}

function SetupProductInfo()
{
	if (ParseURL("Size") == "Med")
	{
		ProductInfoMenu('ProductInfoMED', 'ProductInfoMenuMED');
	}
	else if (ParseURL("Size") == "Large")
	{
		ProductInfoMenu('ProductInfoLRG', 'ProductInfoMenuLRG');
	}
	else if (ParseURL("Size") == "Spec")
	{
		ProductInfoMenu('ProductInfoSPEC', 'ProductInfoMenuSPEC');
	}
}

var timeout	= 500;
var closetimer	= 0;
var ddmenuitem	= 0;

// open hidden layer
function mopen(id)
{	
	// cancel close timer
	mcancelclosetime();

	// close old layer
	if(ddmenuitem)
	{
		if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
	} 

	// get new layer and show it
	ddmenuitem = document.getElementById(id);
	ddmenuitem.style.visibility = 'visible';

}
// close showed layer
function mclose()
{
	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}

// go close timer
function mclosetime()
{
	closetimer = window.setTimeout(mclose, timeout);
}

// cancel close timer
function mcancelclosetime()
{
	if(closetimer)
	{
		window.clearTimeout(closetimer);
		closetimer = null;
	}
}

// close layer when click-out
document.onclick = mclose;