var VMNavLeft;
var VMNavTop;
var newMargin;
var newMargin2;
var labelLeft;
var labelTop;
var bt1H;
var bt1W;
var bt1Y;
var bt1X;
var loaded = false;

/*
	this fucniton is called onload and on resize
	it aligns various elements of the page

*/

function align(){
	wh = parseInt(getWinHeight());
	ww = parseInt(getWinWidth());
	
	divH = parseInt(getHeight('main'));
	divW = parseInt(getWidth('main'));
	
	
	newMargin = parseInt((wh - divH)/2);
	newMargin = (newMargin<0 ? 0 : newMargin);
	
	newMargin2 = parseInt((ww - divW)/2);
	newMargin2 = (newMargin2<0 ? 0 : newMargin2);

	document.getElementById('main').style.margin = newMargin + "px 0px 0px " + newMargin2 + "px";
	
	document.getElementById('footer').style.margin = 4 + "px auto 0px auto";	
	
	headersAreaH = parseInt(getHeight('headers'));
	TI1H = parseInt(getHeight('ti1')) + 7;
	TI2H = parseInt(getHeight('ti2')) + 16;
	TI2MarginTop = headersAreaH - TI1H -TI2H;
	
	document.getElementById('ti2').style.marginTop = TI2MarginTop;

	
	VMNavTop = parseInt(getAbsY(document.getElementById('navPlaceHolder'))) + 'px';
	VMNavLeft = parseInt(getAbsX(document.getElementById('navPlaceHolder'))) + 'px';
	
	/*
	labelLeft = 790 + (browser.indexOf('ie')>=0 ? 0 : parseInt(getAbsX(document.getElementById('main')))) + "px";
	labelTop = 102 + (browser.indexOf('ie')>=0 ? 0 : parseInt(getAbsY(document.getElementById('main')))) + "px";
	*/
	labelLeft = 783;            /* new slider */
	labelTop = 102;
	
	
	
	document.getElementById('label').style.top = labelTop + "px";
	
	document.getElementById('label').scrollTop = 0;
	document.getElementById('label').scrollLeft = 0;
	
	document.getElementById('main').scrollTop = 0;
	document.getElementById('main').scrollLeft = 0;
	
	if(loaded == false || labelPosition == 'closed' || dir == -1){
		document.getElementById('label').style.left = labelLeft + "px";
		document.getElementById('label').style.width = 118 + "px";	    /* new slider, previous version: 110 */	
	}else{
		document.getElementById('label').style.left = 783 + "px";       /* new slider, previous version: 790 */
		document.getElementById('label').style.width = 877 + "px";
	}
	
	
	
	
		
	document.getElementById('label').style.visibility="visible";
	
	document.getElementById('container').style.visibility="visible";
	
	document.getElementById('nav').style.top = VMNavTop;
	document.getElementById('nav').style.left = VMNavLeft;
	
	bt1H = parseInt(getHeight('bt1'));
	bt1W = parseInt(getWidth('bt1'));
	bt1Y = parseInt(getAbsY(document.getElementById('bt1')));
	bt1X = parseInt(getAbsX(document.getElementById('bt1')));
	
	document.getElementById('chooseFlavorList').style.left = (bt1X + bt1W) + "px";
	document.getElementById('chooseFlavorList').style.top = (bt1H + 1) + "px";
	
	if(loaded=='align'){
		loaded = true;
	}else if(loaded==false){
		loaded='align';
		align();
	}
}






/*
	opens and closes the Vitamin Water label 
*/

var labelPosition = 'closed';
var dir = 0;
var slideInterval;
	
	function slider(condition){
		
		
		document.getElementById('labelFront').getElementsByTagName('img')[0].useMap="none";
		if(labelPosition == condition || condition == null){

			smooothnessModifier = 2*10//parseInt(document.forms[0].elements[1].options[document.forms[0].elements[1].selectedIndex].value);
			speedModifier = 5//parseInt(document.forms[0].elements[0].options[document.forms[0].elements[0].selectedIndex].value);
	
			speedModifier2 =  5//parseInt(document.forms[0].elements[2].value);
	
			speed = parseInt(10000/(speedModifier*(100+ (speedModifier2*30))));	
			
		
			//l = parseInt(getAbsX(document.getElementById('label'))) - (browser.indexOf('ie')>=0 ? newMargin2 : 0) ;
			
			l = parseInt(document.getElementById('label').style.left);
			
		
				
			if(l==labelLeft || l==(labelLeft-760)){
			
				if(l==(labelLeft-760)){
					labelShowing="Back";
					fade();
				}
			
				dir = (l==labelLeft ? 1 : -1)
				xModifier = smooothnessModifier*dir;
					
				slideInterval = setInterval("slide(" + dir + " , " + xModifier + ")" , speed);
			}	
		}			
	}
	




/*
	moves and resizes the vitamin Water label
*/
	
	function slide(dir, xModifier){
			
		l =  parseInt(document.getElementById('label').style.left);
		w = parseInt(getWidth('label'));
		
		newL = l - xModifier;
		newW = w + xModifier;
		
		//alert(newW)
		
		newL = (newL<(labelLeft-760) ? (labelLeft-760) : (newL>labelLeft ? labelLeft: newL))
		newW = (newW>877 ? 877 : (newW<110 ? 110: newW));
	
		document.getElementById('label').style.left = newL + "px";
		document.getElementById('label').style.width = newW + "px";
		
		
		if((newL==(labelLeft-760) && dir==1) || (newL==labelLeft && dir==-1)){
			clearInterval(slideInterval);
			if(newL==(labelLeft-760) && dir==1){
				document.getElementById('labelCloserImg').style.display="block";
				document.getElementById('labelFront').getElementsByTagName('img')[0].useMap="none";
				labelPosition = 'open';
				rollOutsOn();
				if(labelShowing == "Back"){
					
					insideSubdivs = document.getElementById('whatsInside').getElementsByTagName('div');
			
					for(x=0; x<insideSubdivs.length; x++){
						insideSubdivs[x].style.overflow = "auto";
					}
				}
			}else{
				document.getElementById('labelCloserImg').style.display="none";
				document.getElementById('labelFront').getElementsByTagName('img')[0].useMap="#labelMap";
				labelPosition = 'closed';
				rollOutsOff();
			}
		}
		
		
		
		
		
	}
	




/*

	fades between the front and back views of 
	the Vitamin Water label

*/

var labelShowing = "Front";
function fade(from){
	
	if(from!=null && from=='Front')
		{
		dcsMultiTrack("DCS.dcsuri",dcsURI+"/whatsinside.dhtml", "WT.ti",title+" : Whats inside","WT.cg_n",contentGroup,"WT.cg_s",contentSubGroup, "DCSext.w_locale", locale);
		}
		else if(from!=null && from=='Back')
		{
		dcsMultiTrack("DCS.dcsuri",dcsURI+"/onthelabel.dhtml", "WT.ti",title+" : On the label","WT.cg_n",contentGroup,"WT.cg_s",contentSubGroup, "DCSext.w_locale", locale);
		}
	if(from!=null){
		labelShowing=from;
	}
	
	if(labelShowing=="Front"){
		opacity('labelFront', 100, 0, 500, "labelAlign('" + labelShowing + "')");
		if(labelPosition == 'closed'){
			slider()
		}
				
		
		
		
		
	} else 	if(labelShowing=="Back"){
		opacity('labelBack', 100, 0, 500, "labelAlign('" + labelShowing + "')");
		if(labelPosition == 'closed'){
			slider()
		}
		
		insideSubdivs = document.getElementById('whatsInside').getElementsByTagName('div');
			
		for(x=0; x<insideSubdivs.length; x++){
			insideSubdivs[x].style.overflow = "hidden";
		}
		
	}
	
}

/*
	sets states associated with the termination
	of the fade between the front and back views
	of the Vitamin Water label
*/


function labelAlign(side){
	otherSide = (side=="Front" ? "Back" : "Front");
	document.getElementById('label' + side).style.zIndex = 1000;
	document.getElementById('label' + otherSide).style.zIndex = 1001; 
	
	if(labelShowing == "Front" && labelPosition == 'open'){
		
		insideSubdivs = document.getElementById('whatsInside').getElementsByTagName('div');
		
		for(x=0; x<insideSubdivs.length; x++){
			insideSubdivs[x].style.overflow = "auto";
		}
	}
	
	opacity('label' + side, 0, 100, 500);
	labelShowing = otherSide;
}





/*
	displays the desired ingredient on the back
	side of the Vitamin Water label
*/

function ingredientDisplay(ingredientIndex, ingredientName){

	dcsMultiTrack("DCS.dcsuri",dcsURI+"/"+ ingredientName +".dhtml", "WT.ti",title+" :"+ ingredientName +" Description","WT.cg_n",contentGroup,"WT.cg_s",contentSubGroup, "DCSext.w_locale", locale);
	
	for(x=0; x<document.getElementById('labelBack').getElementsByTagName('li').length; x++){
		//alert(document.getElementById('labelBack').getElementsByTagName('li')[x].className)
		document.getElementById('labelBack').getElementsByTagName('li')[x].className = "deSelectedLi";
	}
	
	document.getElementById('labelBack').getElementsByTagName('li')	[ingredientIndex].className = "selectedLi";
	
	for(x=0; x<document.getElementById('whatsInside').getElementsByTagName('div').length; x++){
		document.getElementById('whatsInside').getElementsByTagName('div')[x].className = "deSelectedIngredient";
	}
	
	for(x=0; x<document.getElementById('labelBack').getElementsByTagName('li').length; x++){
		if(document.getElementById('labelBack').getElementsByTagName('li')	[x].className == "selectedLi"){
			document.getElementById('whatsInside').getElementsByTagName('div')[x].className = "selectedIngredient";	
			document.getElementById('whatsInside').getElementsByTagName('div')[x].getElementsByTagName('a')[0].focus();
		}
	}
	
}



/*
	makes the entire windw area clickable
	while the Vitamin Water label is open
	clicking outside the Vitamin Waer lable 
	while it is open closes it
*/

function rollOutsOn(){
	rollOut = document.createElement('a');
	rollOut.href="javascript:slider();";
	rollOut.id="rollOut1";
	rollOut.className="rollOut";
	rollOut.style.width = parseInt(getWinWidth()) - 10 + "px";
	rollOut.style.height = parseInt(getAbsY(document.getElementById('label'))) + "px";
	document.getElementById('rollOutContainer1').appendChild(rollOut);
	
	rollOut2 = document.createElement('a');
	rollOut2.href="javascript:slider();";
	rollOut2.id="rollOut21";
	rollOut2.className="rollOut2";
	rollOut2.style.top = parseInt(getAbsY(document.getElementById('label'))) + "px";
	rollOut2.style.left = "0px";
	rollOut2.style.width = parseInt(getAbsX(document.getElementById('label'))) + "px";
	rollOut2.style.height = parseInt(getHeight('label')) + "px";
	document.getElementById('rollOutContainer1').appendChild(rollOut2);
	
	rollOut3 = document.createElement('a');
	rollOut3.href="javascript:slider();";
	rollOut3.id="rollOut31";
	rollOut3.className="rollOut3";
	rollOut3.style.top = parseInt(getAbsY(document.getElementById('label'))) + "px";
	rollOut3.style.left = parseInt(getAbsX(document.getElementById('label'))) + parseInt(getWidth('label')) + "px"; 
	rollOut3.style.width = (parseInt(getWinWidth()) - 10) - (parseInt(getAbsX(document.getElementById('label'))) + parseInt(getWidth('label'))) + "px";
	rollOut3.style.height = parseInt(getHeight('label')) + "px";
	rollOut3.style.backgroundColor = "#000000";
	document.getElementById('rollOutContainer1').appendChild(rollOut3);
	
	rollOut4 = document.createElement('a');
	rollOut4.href="javascript:slider();";
	rollOut4.id="rollOut41";
	rollOut4.className="rollOut4";
	rollOut4.style.top = parseInt(getAbsY(document.getElementById('label'))) + parseInt(getHeight('label')) + "px";
	rollOut4.style.left = "0px"; 
	rollOut4.style.width = parseInt(getWinWidth()) - 10 + "px";
	rollOut4.style.height = parseInt(getWinHeight()) - parseInt(getAbsY(document.getElementById('label'))) - parseInt(getHeight('label')) -10 + "px";
	document.getElementById('rollOutContainer1').appendChild(rollOut4);
	
}


/*
	resets the actions of the previous function
*/

function rollOutsOff(){
	document.getElementById('rollOutContainer1').innerHTML = '';
	document.getElementById('insideID_01').className="insideImage_1";	            /*new slider*/
	document.getElementById('labelID_01').className="labelImage_1";			        /*new slider*/
}

	

/*
	displays the list of flavors
	and makes the hole window hot
	when the suer rolls off the flavor 
	menu it disappears 
*/

function flavorListOn(){
	
	dcsMultiTrack("DCS.dcsuri",dcsURI+"/chooseflavor.dhtml", "WT.ti",title+" : Choose flavor","WT.cg_n",contentGroup,"WT.cg_s",contentSubGroup, "DCSext.w_locale", locale);
	scrollX = window.pageXOffset;
	scrollY = window.pageYOffset;

	
	
	bt1H = parseInt(getHeight('bt1'));
	bt1W = parseInt(getWidth('bt1'));
	bt1Y = parseInt(getAbsY(document.getElementById('bt1')));
	bt1X = parseInt(getAbsX(document.getElementById('bt1')));
		
	document.getElementById('chooseFlavorList').style.width="134px";
	document.getElementById('chooseFlavorList').style.height="auto";
	document.getElementById('chooseFlavorList').style.border="solid 1px #e6e6e6";
	document.getElementById('chooseFlavorList').style.padding="10px";

	
	document.getElementById('chooseFlavorList').style.left = (bt1X - ((browser=='ns6' || browser.indexOf('ie')>=0) ? newMargin2 : 0) ) + "px" ;
	document.getElementById('chooseFlavorList').style.top = (bt1Y - (parseInt(getHeight('chooseFlavorList')) - bt1H) - ((browser=='ns6' || browser.indexOf('ie')>=0) ? newMargin : 0) )  + "px";
	
	rollOut = document.createElement('a');
	rollOut.href="javascript:flavorListOff();";
	rollOut.id="rollOut12";
	rollOut.className="rollOut";
		
	if(window.addEventListener) { // Standard
		rollOut.addEventListener('mouseover',flavorListOff, false);
	} else if(window.attachEvent) { // IE
		rollOut.attachEvent('onmouseover', flavorListOff);
	}
		
	rollOut.style.width = parseInt(getWinWidth()) - 10 + "px";
	rollOut.style.height = parseInt(getAbsY(document.getElementById('chooseFlavorList'))) + "px";
	document.getElementById('rollOutContainer2').appendChild(rollOut);
	
	//alert(((bt1X - ((browser=='ns6' || browser.indexOf('ie')>=0) ? newMargin2 : 0) ) + "px") + ' ' + ((bt1Y - (parseInt(getHeight('chooseFlavorList')) - bt1H) - ((browser=='ns6' || browser.indexOf('ie')>=0) ? newMargin : 0) )  + "px"));
	
	
	
	rollOut2 = document.createElement('a');
	rollOut2.href="javascript:flavorListOff()";
	
	if(window.addEventListener) { // Standard
		rollOut2.addEventListener('mouseover',flavorListOff, false);
	} else if(window.attachEvent) { // IE
		rollOut2.attachEvent('onmouseover', flavorListOff);
	}
	
	rollOut2.id="rollOut22";
	rollOut2.className="rollOut2";
	rollOut2.style.top = parseInt(getAbsY(document.getElementById('chooseFlavorList'))) + "px";
	rollOut2.style.left = "0px";
	rollOut2.style.width = parseInt(getAbsX(document.getElementById('chooseFlavorList'))) + "px";
	rollOut2.style.height = parseInt(getHeight('chooseFlavorList')) + "px";
	
	
	document.getElementById('rollOutContainer2').appendChild(rollOut2);
	
	
	rollOut3 = document.createElement('a');
	rollOut3.href="javascript:flavorListOff()";
	
	if(window.addEventListener) { // Standard
		rollOut3.addEventListener('mouseover',flavorListOff, false);
	} else if(window.attachEvent) { // IE
		rollOut3.attachEvent('onmouseover', flavorListOff);
	}
	
	rollOut3.id="rollOut32";
	rollOut3.className="rollOut3";
	rollOut3.style.top = parseInt(getAbsY(document.getElementById('chooseFlavorList'))) + "px";
	rollOut3.style.left = parseInt(getAbsX(document.getElementById('chooseFlavorList'))) + parseInt(getWidth('chooseFlavorList')) + "px"; 
	rollOut3.style.width = (parseInt(getWinWidth()) - 10) - (parseInt(getAbsX(document.getElementById('chooseFlavorList'))) + parseInt(getWidth('chooseFlavorList'))) + "px";
	rollOut3.style.height = parseInt(getHeight('chooseFlavorList')) + "px";
	document.getElementById('rollOutContainer2').appendChild(rollOut3);
	
	rollOut4 = document.createElement('a');
	rollOut4.href="javascript:flavorListOff()";
	
	if(window.addEventListener) { // Standard
		rollOut4.addEventListener('mouseover',flavorListOff, false);
	} else if(window.attachEvent) { // IE
		rollOut4.attachEvent('onmouseover', flavorListOff);
	}
	
	rollOut4.id="rollOut42";
	rollOut4.className="rollOut4";
	rollOut4.style.top = parseInt(getAbsY(document.getElementById('chooseFlavorList'))) + parseInt(getHeight('chooseFlavorList')) + "px";
	rollOut4.style.left = "0px"; 
	rollOut4.style.width = parseInt(getWinWidth()) - 10 + "px";
	rollOut4.style.height = parseInt(getWinHeight()) - parseInt(getAbsY(document.getElementById('chooseFlavorList'))) - parseInt(getHeight('chooseFlavorList')) -10 + "px";
	document.getElementById('rollOutContainer2').appendChild(rollOut4);
	
	
	/*document.location = "#flavorList";
	window.scrollTo(scrollX, scrollY);*/

	
}


/*
	resets the actions of the previous function
*/


function flavorListOff(){
	document.getElementById('rollOutContainer2').innerHTML = '';
	document.getElementById('chooseFlavorList').style.width="1px";
	document.getElementById('chooseFlavorList').style.height="1px";
	document.getElementById('chooseFlavorList').style.border="none";
	document.getElementById('chooseFlavorList').style.padding="0px";
	document.getElementById('chooseFlavorList').style.left = (bt1X + bt1W) + "px";
	document.getElementById('chooseFlavorList').style.top = (bt1H + 1) + "px";
	//opacity('chooseFlavorList', 0, 100, 500);
}



/*	script for new slider - starts          */

function changeInside(){
	document.getElementById('insideID_01').className="insideImage_2";	
	document.getElementById('labelID_01').className="labelImage_1";	
	}

function changeLabel(){
	document.getElementById('insideID_01').className="insideImage_1";	
	document.getElementById('labelID_01').className="labelImage_2";	
}

function closeImg(){
	document.getElementById('insideID_01').className="insideImage_1";	
	document.getElementById('labelID_01').className="labelImage_1";		
}
/*	script for new slider - ends          */