// called from product details page, this turns on/off elements of the product description/dosage/warnings...

/* ---- set up layer and button arrays ---- */
// content layer array
var arrLayer=new Array(5);
arrLayer[0]='descrip1';
arrLayer[1]='descrip2';
arrLayer[2]='descrip3';
arrLayer[3]='descrip4';
//arrLayer[4]='descrip5';

// tab array
var arrBtn = new Array(5);
arrBtn[0] = new Array(4);
arrBtn[0][0]='tab1';
arrBtn[0][1]='url(/images/site/tabs_03.gif) no-repeat';
arrBtn[0][2]='url(/images/site/tabs_on_03.gif) no-repeat';
arrBtn[0][3]='url(/images/site/tabs_roll_03.gif) no-repeat';
arrBtn[1] = new Array(4);
arrBtn[1][0]='tab2';
arrBtn[1][1]='url(/images/site/tabs_04.gif) no-repeat';
arrBtn[1][2]='url(/images/site/tabs_on_04.gif) no-repeat';
arrBtn[1][3]='url(/images/site/tabs_roll_04.gif) no-repeat';
arrBtn[2] = new Array(4);
arrBtn[2][0]='tab3';
arrBtn[2][1]='url(/images/site/tabs_05.gif) no-repeat';
arrBtn[2][2]='url(/images/site/tabs_on_05.gif) no-repeat';
arrBtn[2][3]='url(/images/site/tabs_roll_05.gif) no-repeat';
arrBtn[3] = new Array(4);
arrBtn[3][0]='tab4';
arrBtn[3][1]='url(/images/site/tabs_06.gif) no-repeat';
arrBtn[3][2]='url(/images/site/tabs_on_06.gif) no-repeat';
arrBtn[3][3]='url(/images/site/tabs_roll_06.gif) no-repeat';

/*
arrBtn[4] = new Array(4);
arrBtn[4][0]='tab5';
arrBtn[4][1]='url(/images/site/tabs_07.gif) no-repeat';
arrBtn[4][2]='url(/images/site/tabs_on_07.gif) no-repeat';
arrBtn[4][3]='url(/images/site/tabs_roll_07.gif) no-repeat';
*/

// set the first tab to be in it's active state (when page loads) & tab rollover functions
function defaultTab(){
	//document.getElementById('tab1').style.background ='url(/images/site/tabs_on_03.gif) no-repeat';
	document.getElementById('tab1').style.background = arrBtn[0][2];	
	
	// set-up mouse over functions for tabs
	document.getElementById(arrBtn[0][0]).onmouseover = function(){}; // first tab has no rollover on page load
	document.getElementById(arrBtn[1][0]).onmouseover = function(){this.style.background=arrBtn[1][3];};
	document.getElementById(arrBtn[2][0]).onmouseover = function(){this.style.background=arrBtn[2][3];};
	document.getElementById(arrBtn[3][0]).onmouseover = function(){this.style.background=arrBtn[3][3];};
	//document.getElementById(arrBtn[4][0]).onmouseover = function(){this.style.background=arrBtn[4][3];};

	// set-up mouse out functions for tabs
	document.getElementById(arrBtn[0][0]).onmouseout = function(){}; // first tab has no rollover on page load
	document.getElementById(arrBtn[1][0]).onmouseout = function(){this.style.background=arrBtn[1][1];};
	document.getElementById(arrBtn[2][0]).onmouseout = function(){this.style.background=arrBtn[2][1];};
	document.getElementById(arrBtn[3][0]).onmouseout = function(){this.style.background=arrBtn[3][1];};
	//document.getElementById(arrBtn[4][0]).onmouseout = function(){this.style.background=arrBtn[4][1];};
}

function showhidelayer(layernum){
	// set-up mouse over functions for tabs
	document.getElementById(arrBtn[0][0]).onmouseover = function(){this.style.background=arrBtn[0][3];};
	document.getElementById(arrBtn[1][0]).onmouseover = function(){this.style.background=arrBtn[1][3];};
	document.getElementById(arrBtn[2][0]).onmouseover = function(){this.style.background=arrBtn[2][3];};
	document.getElementById(arrBtn[3][0]).onmouseover = function(){this.style.background=arrBtn[3][3];};
	//document.getElementById(arrBtn[4][0]).onmouseover = function(){this.style.background=arrBtn[4][3];};
	
	// set-up mouse out functions for tabs
	document.getElementById(arrBtn[0][0]).onmouseout = function(){this.style.background=arrBtn[0][1];};
	document.getElementById(arrBtn[1][0]).onmouseout = function(){this.style.background=arrBtn[1][1];};
	document.getElementById(arrBtn[2][0]).onmouseout = function(){this.style.background=arrBtn[2][1];};
	document.getElementById(arrBtn[3][0]).onmouseout = function(){this.style.background=arrBtn[3][1];};
	//document.getElementById(arrBtn[4][0]).onmouseout = function(){this.style.background=arrBtn[4][1];};
	
	// hide all layers and change bkgd image of all tabs to non-active
	var i;
	for (i=0;i<=3;i++){
		if(document.getElementById(arrLayer[i]).style.display == 'block'){
			document.getElementById(arrLayer[i]).style.display = 'none';
		}
		document.getElementById(arrBtn[i][0]).style.background = arrBtn[i][1];
	}

	// show the chosen layer and change bkgd image of corresponding tab to active
	var j;
	var j = layernum - 1;
	document.getElementById(arrLayer[j]).style.display = 'block';
	document.getElementById(arrBtn[j][0]).style.background = arrBtn[j][2];
	
	document.getElementById(arrBtn[j][0]).onmouseover = function(){};
	document.getElementById(arrBtn[j][0]).onmouseout = function(){};
}