var StrActiveDiv; // Selected Div in the shift table
var StrDisplayDiv; // Div being displayed
var StrActiveArrow; // Arrow image in the "on" position due to its containing Div being active
var StrActiveBorder; // Border image in the "on" position due to its containing Div being active
var StrActiveDivImg; // Div image (left graphic) in the "on" position due to its containing Div being active
var StrActiveBenefitTitle; // Title of the active benefit in the blue header
var StrActiveBracketLineBtm; // Bracket image in "on" position at the bottom of the active Div
var StrActiveBracketLineTop; // Bracket image in "on" position at the top of the active Div

/* 
	arrSlide is a key-value array. The keys are strings representing id tags of shiftDivs.
	The values are Fx.Slide Objects attached to the Div.
*/
var FPS = 2000;
var DURATION = 250;
var arrSlide = new Object;

/* 
	initShiftDivs is to be called in the window.onload of the page.
	The ids of all the appropriate elements are to be passed in to be initialized.
*/

function openPopup(strUrl, strName, nWidth, nHeight, nLeft, nTop, nFullWindowFlag)
{
	nWidth = nWidth || 760;
	nHeight = nHeight || 600;
	nLeft = nLeft || 5;
	nFullWindowFlag = nFullWindowFlag || 0;
	
	var topPos = (window.outerHeight - window.innerHeight) || window.screenTop;
	if(window.statusbar && !window.statusbar.visible)
	{
		topPos = topPos + 20;
	}
	if($("bCrumbs"))
	{
		nTopCalculated = (topPos) + $("bCrumbs").offsetParent.offsetTop;
	}
	nTop = nTop || nTopCalculated;
	
	var strOptions = "left=" + nLeft + ", top=" + nTop + ", status=" + nFullWindowFlag + ", toolbar=" + nFullWindowFlag +", location=" + nFullWindowFlag + 
		", menubar=" + nFullWindowFlag + ", directories=" + nFullWindowFlag + ", resizable=1, scrollbars=1, width=" + nWidth + ", height=" + nHeight;
		window.open(strUrl, strName, strOptions);
}

function openFixedPopup(strUrl, strName, nWidth, nHeight, nLeft, nTop, nFullWindowFlag)
{
	nWidth = nWidth || 760;
	nHeight = nHeight || 600;
	nLeft = nLeft || 5;
	nFullWindowFlag = nFullWindowFlag || 0;
	
	var topPos = (window.outerHeight - window.innerHeight) || window.screenTop;
	if(window.statusbar && !window.statusbar.visible)
	{
		topPos = topPos + 20;
	}
	if($("bCrumbs"))
	{
		nTopCalculated = (topPos) + $("bCrumbs").offsetParent.offsetTop;
	}
	nTop = nTop || nTopCalculated;
	
	var strOptions = "left=" + nLeft + ", top=" + nTop + ", status=" + nFullWindowFlag + ", toolbar=" + nFullWindowFlag +", location=" + nFullWindowFlag + 
		", menubar=" + nFullWindowFlag + ", directories=" + nFullWindowFlag + ", resizable=0, scrollbars=1, width=" + nWidth + ", height=" + nHeight;
		window.open(strUrl, strName, strOptions);
}

function initShiftDivs(strActiveDiv, strDisplayDiv, strActiveArrow, strActiveBorder, strActiveDivImg, strActiveBenefitTitle, strActiveBracketLineBtm, strActiveBracketLineTop)
{
	StrActiveDiv = strActiveDiv;
	StrDisplayDiv = strDisplayDiv;
	StrActiveArrow = strActiveArrow;
	StrActiveBorder = strActiveBorder;
	StrActiveDivImg = strActiveDivImg;
	StrActiveBenefitTitle = strActiveBenefitTitle;
	if(strActiveBracketLineBtm)
	{ 
		StrActiveBracketLineBtm = strActiveBracketLineBtm; 
	}
	else
	{
		StrActiveBracketLineBtm = "";
	}
	if(strActiveBracketLineTop)
	{ 
		StrActiveBracketLineTop = strActiveBracketLineTop;
	}
	else
	{
		StrActiveBracketLineTop = "";
	}
}



/* 
	The shift functions take 1) [the shift button image object: objImage], 2) [the other shift buttom image: strOtherBtnImage],
	3) [the container object of the divs: strContainer], 4) [how many divs at a time are to be displayed: nDisplayCount], 
	and 5) [shift direction: strDirection] as arguments (5).
	No other divs should exist within the container except divs that are to be shifted.
	Subdivs should not be used within the divs to be shifted: use spans or tables instead.
*/


function shiftDiv(objImage, strOtherBtnImage, strContainer, nDisplayCount, strDirection) 
{
	var childNodes; // All Divs under the containing element
	var childDivs = new Array(); // All shiftDivCell Divs
	var curHiddenNode;
	var idxHiddenNode;
	var displayedCount = 0;
	var childDivCount = 0;
	var increase;
	var decrease;
	
	// Get all Divs within the container
	childNodes = $(strContainer).getElementsByTagName("div");
	
	for (i = 0; i < childNodes.length; i++)
	{
		// Add the Div to the childDivs array only if it's a shiftDivCell
		if(childNodes[i].tagName.toLowerCase() == "div" && childNodes[i].className.toLowerCase().indexOf("shiftdivcell") != -1)
		{
			childDivs[childDivCount] = childNodes[i];
			childDivCount++;
		}
	}
	
	/*
		The appropriate loop will run based on the direction parameter.
		The loop starts from the first hidden Div...if the shift is up, then it starts at the
		bottommost hidden Div, if the shift is down it starts at the topmost hidden Div.
		It keeps track of each hidden Div passed until it reaches a displayed Div. At that point
		the amount of displayed Divs are counted until the count matches the nDisplayCount parameter
		which specifies how many shiftDivs are being displayed in the table.
		Once that number is matched, the last hidden Div found is scrolled in and the current displayed
		Div is scrolled out and set to display:none.
	*/
	if(strDirection.toLowerCase() == "up")
	{
		for(var i = 0; i < childDivs.length; i++)
		{
			var curNode = childDivs[i];
			
			// If this node is hidden, make it the current hidden node.
			if(curNode.style.display.toLowerCase() == "none")
			{
				curHiddenNode = curNode;
				idxHiddenNode = i;
			}
			else
			{
				displayedCount++;

				// If the display count matches the passed in parameter, and there is a current
				// hidden node, do the slide.
				if( (displayedCount == nDisplayCount) && curHiddenNode)
				{
					// If there isn't already a Slide object associated with this Div, create one.
					if(!arrSlide[curHiddenNode.id])
					{
						arrSlide[curHiddenNode.id] = new Fx.Slide(curHiddenNode, {duration:DURATION, fps:FPS});
					}
					
					var increase = arrSlide[curHiddenNode.id];
					
					if(!arrSlide[curNode.id])
					{
						arrSlide[curNode.id] = new Fx.Slide(curNode, {duration:DURATION, fps:FPS});
					}
					
					var decrease = arrSlide[curNode.id];
					
					// Hide the Div first, then set display:block so when it's unhidden it will appear.
					increase.hide();
					curHiddenNode.setStyle("display", "block");										

					decrease.toggle(); // Scroll out
					increase.toggle(); // Scroll in
					
					// display:none is necessary for this algorithm to work.
					(function() {curNode.setStyle("display", "none");}).delay(DURATION);
					
					// If the other scroll button was disabled and we've gotten this far,
					// then it must be reenabled at this point. A Div has been shifted making
					// it's use valid again.
					if(isImageDisabled($(strOtherBtnImage)))
					{
						toggleImage($(strOtherBtnImage));
					}
					
					// If the last hidden node was uncovered, there are no more hidden nodes in this direction
					// so disable this scroll button
					if(idxHiddenNode == 0)
					{
						toggleImage(objImage);
					}
					
					break;
				} // if
			} // else
		} // for
	} // if
	
	else
	{
		/*
			This loop is identical to the one above, except it loops through the Divs
			in the opposite direction. Refer to comments in above loop.
		*/
		for(var i = childDivs.length - 1; i >= 0; i--)
		{
			var curNode = childDivs[i];
				
			if(curNode.style.display.toLowerCase() == "none")
			{
				curHiddenNode = curNode;
				idxHiddenNode = i;
			}
			else
			{
				displayedCount++;
				if( (displayedCount == nDisplayCount) && curHiddenNode)
				{
				
					if(!arrSlide[curHiddenNode.id])
					{
						arrSlide[curHiddenNode.id] = new Fx.Slide(curHiddenNode, {duration:DURATION, fps:FPS});
					}
					
					var increase = arrSlide[curHiddenNode.id];
					
					if(!arrSlide[curNode.id])
					{
						arrSlide[curNode.id] = new Fx.Slide(curNode, {duration:DURATION, fps:FPS});
					}
					
					var decrease = arrSlide[curNode.id];
					
					increase.hide();
					curHiddenNode.setStyle("display", "block");

					decrease.toggle();
					increase.toggle();
					
					(function() {curNode.setStyle("display", "none");}).delay(DURATION);
					
					if(isImageDisabled($(strOtherBtnImage)))
					{
						toggleImage($(strOtherBtnImage));
					}
					
					
					if(idxHiddenNode == childDivs.length - 1)
					{
						toggleImage(objImage);
					}
					
					break;
				} // if
			} // else
		} // for
	} // else
} // function


/*
	The btnShift functions are to be called by shift image buttons.
	The functions take the calling image id as well as the other 4 arguments that the
	shift function takes (details of these parameters can be found above the shift function). 
	If the image is not disabled, the appropriate function will be called from the respective handler.
*/


function btnShiftClick(strImage, strOtherBtnImage, strContainer, nDisplayCount, strDirection)
{
	if(!(isImageDisabled($(strImage))))
	{
		shiftDiv($(strImage), strOtherBtnImage, strContainer, nDisplayCount, strDirection);
	}
} // function


// The MouseOver and MouseOut functions change the state of the effected button appropriately based on current state.

function btnShiftMouseOver(strImage)
{
	if(!(isImageDisabled($(strImage))))
	{
		$(strImage).src = $(strImage).src.replace("on.gif", "over.gif");
	}
} // function


function btnShiftMouseOut(strImage)
{
	if(!(isImageDisabled($(strImage))))
	{
		$(strImage).src = $(strImage).src.replace("over.gif", "on.gif");
	}
} // function


/*
	The toggleImage function toggles the image based on its current state.
	If it is currently the disabled image, it will toggle to the on image.
	If it is the on or over image, it will toggle to the disabled image.
*/
function toggleImage(objImage)
{
	if(!(isImageDisabled(objImage)))
	{
		if(objImage.src.lastIndexOf("on.gif") == -1)
		{
			objImage.src = objImage.src.replace("over.gif", "disabled.gif");
		}
		else
		{
			objImage.src = objImage.src.replace("on.gif", "disabled.gif");
		}
	}
	else
	{
		objImage.src = objImage.src.replace("disabled.gif", "on.gif");
	}
}


function isImageDisabled(objImage)
{
	return (objImage.src.lastIndexOf("disabled.gif") != -1)
}


/*
	shiftDivClick changes the clicked shiftDiv to the active Div and deactivates
	the previously active Div.
*/

function shiftDivClick(strDiv, strDisplayDiv, strArrowImg, strBorderImg, strDivImg, strBenefitTitle, strBracketLineBtm, strBracketLineTop)
{
	if($(StrActiveDiv))
	{
		$(StrActiveDiv).setStyle("background-color", "#EFEEE9");
		$(StrActiveDiv).setStyle("color", "#464541");
		$(StrDisplayDiv).setStyle("display", "none");
		$(StrActiveBenefitTitle).setStyle("display", "none");		
		$(StrActiveArrow).src = $(StrActiveArrow).src.replace("arrow-caret-benefits-blue.png", "spacer.gif");
		$(StrActiveBorder).src = $(StrActiveBorder).src.replace("spacer.gif", "bg-benefits-shadow-grey.gif");
		$(StrActiveDivImg).src = $(StrActiveDivImg).src.replace("-on.gif", ".gif");
		if($(StrActiveBracketLineBtm)) { $(StrActiveBracketLineBtm).src = $(StrActiveBracketLineBtm).src.replace("on.gif", "off.gif"); }
		if($(StrActiveBracketLineTop)) { $(StrActiveBracketLineTop).src = $(StrActiveBracketLineBtm).src.replace("on.gif", "off.gif"); }
	}

	$(strDiv).setStyle("background-color", "#FFFFFF");
	$(strDiv).setStyle("color", "#29A1C1");
	$(strDisplayDiv).setStyle("display", "block");
	$(strBenefitTitle).setStyle("display", "block");
	$(strArrowImg).src = $(strArrowImg).src.replace("spacer.gif","arrow-caret-benefits-blue.png");
	$(strBorderImg).src = $(strBorderImg).src.replace("bg-benefits-shadow-grey.gif", "spacer.gif");
	$(strDivImg).src = $(strDivImg).src.replace(".gif", "-on.gif");
	$(strBracketLineBtm).src = $(strBracketLineBtm).src.replace("off.gif", "on.gif");
	if($(strBracketLineTop)) 
	{ 
		$(strBracketLineTop).src = $(strBracketLineTop).src.replace("off.gif", "on.gif");
	}
	
	StrActiveDiv = strDiv;
	StrDisplayDiv = strDisplayDiv;
	StrActiveArrow = strArrowImg;
	StrActiveBorder = strBorderImg;
	StrActiveDivImg = strDivImg;
	StrActiveBenefitTitle = strBenefitTitle;
	StrActiveBracketLineBtm = strBracketLineBtm;
	if($(strBracketLineTop)) { StrActiveBracketLineTop = strBracketLineTop; }
}

function shiftDivMouseToggle(strDiv, strArrowImage, strState)
{
	if(strArrowImage != StrActiveArrow)
	{
		if(strState.toLowerCase() == "on")
		{
			$(strArrowImage).src = $(strArrowImage).src.replace("spacer.gif", "arrow-caret-benefits-blue.png");
			$(strDiv).setStyle("color", "#29A1C1");
		}
		else
		{
			$(strArrowImage).src = $(strArrowImage).src.replace("arrow-caret-benefits-blue.png", "spacer.gif");
			$(strDiv).setStyle("color", "#464541");
		}
	}
	if(strState.toLowerCase() == "on")
	{
		$(strDiv).className = $(strDiv).className.replace("lookForShiftDiv", "lookForShiftDivOver");
	}
	else
	{
		$(strDiv).className = $(strDiv).className.replace("lookForShiftDivOver", "lookForShiftDiv");
	}
}


function toggleCell(strCell, strClass, strState)
{
	var strNewClass;
	var strNewClassName;
	if(strState == "over")
	{
		strNewClass = strClass + "Over";
		if($(strCell).className.indexOf(strNewClass) == -1)
		{
			strNewClassName = $(strCell).className.replace(strClass, strNewClass);
		}
	}
	else if(strState == "off")
	{
		strNewClassName = $(strCell).className.replace(strClass + "Over", strClass);
	}
	$(strCell).className = strNewClassName;
}

function toggleShopBorders(strState)
{
	if(strState =="over" )
	{
		if($("shopLeftBorderImg").src.indexOf("over.gif") == -1)
		{
			$("shopLeftBorderImg").src = $("shopLeftBorderImg").src.replace(".gif", "-over.gif");
		}
		if($("shopRightBorderImg").src.indexOf("over.gif") == -1)
		{
			$("shopRightBorderImg").src = $("shopRightBorderImg").src.replace(".gif", "-over.gif");
		}
		if($("shopHorSpacerImg").src.indexOf("over.gif") == -1)
		{
			$("shopHorSpacerImg").src = $("shopHorSpacerImg").src.replace(".gif", "-over.gif");
		}
	}
	else if(strState == "off")
	{
		$("shopLeftBorderImg").src = $("shopLeftBorderImg").src.replace("-over.gif", ".gif");
		$("shopRightBorderImg").src = $("shopRightBorderImg").src.replace("-over.gif", ".gif");
		$("shopHorSpacerImg").src = $("shopHorSpacerImg").src.replace("-over.gif", ".gif");
	}
}