// these four arrays must be in the exact same order

// image names

var gummies = ["calcium","vitamind","defensee","omega3","powerc","coq10","multivites","bcomplex","energyb"];

// image widths

var gummydims = ["95;185","88;165","85;165","87;165","87;165","88;165","86;165","87;165","75;145"]

// display names

var gummynames = ["Calcium", "Vitamin D", "Defense E<img src='img/trademark.png'>", "Omega 3", "Power C<img src='img/trademark.png'>", "CoQ10", "MultiVites<img src='img/trademark.png'>", "B Complex", "Energy B"];

// product page links

var gummylinks = ["calcium","vitamin-D3","defense-E","omega-3","power-C","coq10","multi-vites","boost-B","energy-B12"];

// position of carrat under product images

var cpos = new Array();

// collection of products in a raised state

var glower = new Array();



var intervalUp = null;

var intervalDown = null;

var gummyUp = null;

var activeGummy = null;



function setDivs() {

	var header = document.createElement("div");

	header.setAttribute('id', "prod_header");

	header.style.top = "170px";

	header.style.position = "absolute";

	header.style.zIndex = 5;

	header.innerHTML = "<span style='font-family:Verdana;font-size:22px;color:#bf1e2e;letter-spacing:-1px;'><b>Daily Nutrition for</b></span><img src='img/spacer.gif' width='5' height='22'><span style='font-family:Verdana;font-size:22px;color:#f7931e;letter-spacing:-1px;'><b>Adults</b></span>";

	document.body.appendChild(header);

	// call the new div and set its position

	var hdiv = document.getElementById("prod_header");

	var hWidth = hdiv.clientWidth;

	hdiv.style.left = (pageWidth() / 2) - (hWidth / 2) + "px";

	

	var farleft = 0;

	for(var i=0; i<gummydims.length; i++) {

		var gsize = gummydims[i].split(";");

		farleft += parseInt(gsize[0]);	

	}

	farleft = (pageWidth() / 2) - ((farleft + ((gummydims.length - 1) * 3)) / 2);

	var nextleft = 0;

	

	for(var i=0; i<gummies.length; i++) {

		// 0:width | 1:height

		var size = gummydims[i].split(";");

		

		// add the new div

		var newdiv = document.createElement("div");

		newdiv.setAttribute('id', gummies[i]);

		newdiv.style.position = "absolute";

		newdiv.style.zIndex = 5;

		newdiv.style.top = (395 - parseInt(size[1])) + "px";

		if(i == 0) {

			newdiv.style.left = farleft + "px";

			nextleft = farleft + parseInt(size[0]);

			cpos[i] = (nextleft - (parseInt(size[0]) / 2)) - 5;

		}

		else {

			newdiv.style.left = nextleft + 3 + "px";

			nextleft = nextleft + parseInt(size[0]);

			cpos[i] = (nextleft - (parseInt(size[0]) / 2)) - 5;

		}

		newdiv.innerHTML = "<a href='products-" + gummylinks[i] + ".php'><img src='img/products/" + gummies[i] + ".png' width='" + size[0] + "' height='" + size[1] + "' border='0' onmouseover=\"javascript:overGummy('" + gummies[i] + "'," + i + ");\" onmouseout=\"javascript:overGummy('" + gummies[i] + "'," + i + ");\"></a>";

		document.body.appendChild(newdiv);

			

		newdiv = document.createElement("div");

		//newdiv.setAttribute('id', "shadow");

		newdiv.style.position = "absolute";

		newdiv.style.zIndex = 4;

		newdiv.style.left = nextleft - (parseInt(size[0])-3) + "px";

		newdiv.style.top = "364px";

		newdiv.innerHTML = "<img src='img/products/shadow.jpg' width='" + size[0] + "' height='36'>";

		document.body.appendChild(newdiv);

	}



	setFooter();

	

	overGummy("multivites", 6);

}



function overGummy(gummy, gIndex) {

	if(gummy != activeGummy) {

		var div = document.getElementById(gummy);

		if(div != null) {

			// 0:width | 1:height

			var gsize = gummydims[gIndex].split(";");

			gummyUp = div;

			gummyText(gIndex);

			createCarrat(gIndex);

			activeGummy = gummy;

			intervalDown = setInterval("lowerGummy()", 3);	

			var gHeight = parseInt(div.style.top);

			if(gHeight > (395 - (parseInt(gsize[1]) + 30))) {

				intervalUp = setInterval("raiseGummy(" + gsize[1]+ ")", 3);

			}

		}

	}

}



function raiseGummy(gheight) {

	try {

		var gTop = parseInt(gummyUp.style.top);

		if(gTop > (395 - (gheight + 28))) {

			gummyUp.style.top = gTop - 2 + "px";

		}

		else {

			clearInterval(intervalUp);

			gummyUp.style.top = gTop - 2 + "px";

			glower.push(activeGummy + ";" + gheight);

			gummyUp = null;

		}

	}

	catch(err) { 

		clearInterval(intervalUp); 

		for(var i=0; i<gummies.length; i++) {

			if(gummies[i] != activeGummy) {

				var errgummy = document.getElementById(gummies[i]);

				// 0:width | 1:height 

				var errsize = gummydims[i].split(";");

				errgummy.style.top = (395 - parseInt(errsize[1])) + "px";

			}

		}

		glower.length = 0;

		var active = document.getElementById(activeGummy);

		var activeHeight = active.clientHeight;

		glower.push(activeGummy + ";" + activeHeight);

	}

}

function lowerGummy() {

	if(glower.length > 0) {

		// 0:gummy | 1:height

		var gdata = glower[(glower.length - 1)].split(";");

		if(activeGummy != gdata[0]) {

			try {

				var gummyDown = document.getElementById(gdata[0]);

				var gHeight = parseInt(gummyDown.style.top);

				if(gHeight < (395 - parseInt(gdata[1]))) {

					gummyDown.style.top = gHeight + 2 + "px";

				}

				else {

					gummyDown.style.top = gHeight + 2 + "px";

					glower.pop();

				}

			}

			catch(err) { 

				clearInterval(intervalDown);

				for(var i=0; i<gummies.length; i++) {

					if(gummies[i] != activeGummy) {

						var errgummy = document.getElementById(gummies[i]);

						// 0:width | 1:height

						var errsize = gummydims[i].split(";");

						errgummy.style.top = (395 - parseInt(errsize[1])) + "px";

					}

				}

				glower.length = 0;

				var active = document.getElementById(activeGummy);

				var activeHeight = active.clientHeight;

				glower.push(activeGummy + ";" + activeHeight);

			}

		}

	}

	else {

		clearInterval(intervalDown);

	}

}



function createCarrat(gIndex) {

	var carrat = document.getElementById("carrat");

	if(carrat != null) {

		carrat.style.left = cpos[gIndex] + "px";

	}

	else {

		var newdiv = document.createElement("div");

		newdiv.setAttribute('id', "carrat");

		newdiv.style.position = "absolute";

		newdiv.style.zIndex = 5;

		newdiv.style.left = parseInt(cpos[gIndex]) + "px";

		newdiv.style.top = "405px";

		newdiv.innerHTML = "<img src='img/products/carrat.jpg'>";

		document.body.appendChild(newdiv);

	}

}



// 0:calcium | 1:vitamind | 2:defensee | 3:omega3 | 4:powerc | 5:coq10 | 6:multivites | 7:bcomplex | 8:energyb 

function gummyText(gummy) {

	var txtDiv = document.getElementById("gtextheader");

	if(txtDiv != null) {

		txtDiv.innerHTML = "<span style='font-family:Verdana;font-size:22px;color:#bf1e2e;letter-spacing:-2px;'><b>" + gummynames[gummy] + "</b></span><br><img src='img/spacer.gif' height='5' width='1'><br><span style='font-family:Verdana;font-size:18px;color:#f7931e;letter-spacing:-1px;'>Benefits</span>";

		var txtWidth = txtDiv.clientWidth;

		txtDiv.style.left = (pageWidth() / 2) - (txtWidth + 5) + "px";

		

		var gText = "<img src='img/spacer.gif' height='6' width='1'><br><span style='font-family:Verdana;font-size:14px;color:#766658;'>";

	

		if(gummy == 0) {

			gText += "Creamy swirled gummy vitamins with<br>bone-strengthening calcium + vitamin D";

		}

		else if(gummy == 1) {

			gText += "Provides maximum strength<br>for bones and joints";

		}

		else if(gummy == 2) {

			gText += "Powerful antioxidants that<br>may help neutralize free radicals";

		}

		else if(gummy == 3) {

			gText += "All the benefits of omega-3<br>without the fishy taste";

		}

		else if(gummy == 4) {

			gText += "More vitamin C than three<br>oranges in each serving";

		}

		else if(gummy == 5) {

			gText += "Contributes to a healthy heart<br>and cardiovascular system";

		}

		else if(gummy == 6) {

			gText += "Essential nutrients in one daily multivitamin<br>that help maintain good health";

		}

		else if(gummy == 7) {

			gText += "Contributes to a healthy heart<br>and cardiovascular system";

		}

		else if(gummy == 8) {

			gText += "Provides a natural source for energy";

		}

		

		gText += "</span>";

		

		txtDiv = document.getElementById("gtext");

		txtDiv.innerHTML = gText;

	}

	else {

		var gText = "<span style='font-family:Verdana;font-size:22px;color:#bf1e2e;letter-spacing:-2px;'><b>" + gummynames[gummy] + "</b></span><br><img src='img/spacer.gif' height='3' width='1'><bgr><span style='font-family:Verdana;font-size:18px;color:#f7931e;letter-spacing:-1px;'><b>Benefits</b></span>";

		var newdiv = document.createElement("div");

		newdiv.setAttribute('id', "gtextheader");

		newdiv.innerHTML = gText;

		newdiv.style.position = "absolute";

		newdiv.style.zIndex = 5;

		newdiv.style.top = "450px";

		newdiv.style.textAlign = "right";

		document.body.appendChild(newdiv);

		var div = document.getElementById("gtextheader");

		var dWidth = div.clientWidth;

		div.style.left = (pageWidth() / 2) - (dWidth + 5) + "px";

		

		gText = "<img src='img/spacer.gif' height='6' width='1'><br><span style='font-family:Verdana;font-size:14px;color:#766658;'>";

		

		if(gummy == 0) {

			gText += "Creamy swirled gummy vitamins with<br>bone-strengthening calcium + vitamin D";

		}

		else if(gummy == 1) {

			gText += "Provides maximum strength<br>for bones and joints";

		}

		else if(gummy == 2) {

			gText += "Powerful antioxidants that<br>may help neutralize free radicals";

		}

		else if(gummy == 3) {

			gText += "All the benefits of omega-3<br>without the fishy taste";

		}

		else if(gummy == 4) {

			gText += "More vitamin C than three<br>oranges in each serving";

		}

		else if(gummy == 5) {

			gText += "Contributes to a healthy heart<br>and cardiovascular system";

		}

		else if(gummy == 6) {

			gText += "Essential nutrients in one daily multivitamin<br>that help maintain good health";

		}

		else if(gummy == 7) {

			gText += "Contributes to a healthy heart<br>and cardiovascular system";

		}

		else if(gummy == 8) {

			gText += "Provides a natural source for energy";

		}

		

		gText += "</span>";

		

		newdiv = document.createElement("div");

		newdiv.setAttribute('id', "gtext");

		newdiv.innerHTML = gText;

		newdiv.style.position = "absolute";

		newdiv.style.zIndex = 5;

		newdiv.style.top = "450px";

		newdiv.style.left = (pageWidth() / 2) + 5 + "px";

		document.body.appendChild(newdiv);

	}

}



function setFooter(fda) {

	var display = "<table cellpadding='0' cellspacing='0' border='0' bgcolor='#ffffff' width='530'>";

	display += "<tr><td align='left' nowrap colspan='2'><a href='index.php' class='footerlinks_dark'>Vita<b>fusion</b><sup>&reg;</sup> Home</a><img src='img/1x1-placeholder.gif' alt='VitaFusion' width='9' height='6' /><a href='http://nwnaturalproducts.com/index.html' class='footerlinks_dark'>Northwest Natural Products<sup>&reg;</sup></a><img src='img/1x1-placeholder.gif' alt='VitaFusion' width='9' height='6' /><a href='mailto:info@nwnaturalproducts.com' class='footerlinks_dark'>Contact NNP</a><img src='img/1x1-placeholder.gif' alt='VitaFusion' width='35' height='6' /><span style='font-family:Arial;font-size:8px;'>&copy; 2010 Northwest Natural Products. All rights reserved.</span></td></tr>";

	display += "<tr><td height='3' colspan='2'><img src='img/spacer.gif' height='3' width='1' /></td></tr>";

	display += "<tr><td height='1' bgcolor='#5498cb' colspan='2'><img src='img/spacer.gif' height='1' width='1' /></td></tr>";

	display += "<tr><td height='5' colspan='2'><img src='img/spacer.gif' height='5' width='1' /></td></tr>";

	display += "<tr><td align='left' valign='top' nowrap><a href='vf_brands.php' class='footerlinks_black'>VITAFUSION<sup>&reg;</sup> PRODUCTS</a><img src='img/1x1-placeholder.gif' alt='VitaFusion' width='9' height='6' /><a href='vf_info.php' class='footerlinks_black'>VITAFUSION<sup>&reg;</sup> INFO</a><img src='img/1x1-placeholder.gif' alt='Vitafusion' width='9' height='6' /><a href='vf_purchase.php' class='footerlinks_black'>PURCHASE</a></td>";

	display += "<td align='right'>";

	//if(fda) {

		display += "<table cellpadding='0' cellspacing='0' border='0' style='border-width:1px;border-color:#000000;border-style:solid;padding:2px 2px 2px 2px;'>";

		display += "<tr><td nowrap><span style='font-size:6pt;font-family:Arial;'>*This statement has not been evaluated by the Food and Drug Administration.<br>This product is not intended to diagnose, treat, cure or prevent any disease.</span></td></tr>";

		display += "</table>";

	//}

	display += "</td>";

	display += "</tr>";

	display += "</table>";

	var footerdiv = document.createElement("div");

	footerdiv.setAttribute('id', "footer");

	footerdiv.innerHTML = display;

	footerdiv.style.position = "absolute";

	footerdiv.style.zIndex = 20;

	var pagename = document.getElementById("pageName");

	if(pagename != null) {

		if(pagename.value == "samples") {

			footerdiv.style.top = "957px";

		}

	}

	else {

		footerdiv.style.top = "699px";

	}

	document.body.appendChild(footerdiv);

	var fdiv = document.getElementById("footer");

	var fWidth = fdiv.clientWidth;

	fdiv.style.left = (pageWidth() / 2) + (538 - fWidth) + "px";	

}

// Browser Window Size and Position

// copyright Stephen Chapman, 3rd Jan 2005, 8th Dec 2005

// you may copy these functions but please keep the copyright notice as well

function pageWidth() { return window.innerWidth != null ? window.innerWidth : document.documentElement && document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body != null ? document.body.clientWidth : null; }

function pageHeight() { return window.innerHeight != null ? window.innerHeight : document.documentElement && document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body != null ? document.body.clientHeight : null; }

function posLeft() { return typeof window.pageXOffset != 'undefined' ? window.pageXOffset : document.documentElement && document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ? document.body.scrollLeft : 0; }

function posTop() { return typeof window.pageYOffset != 'undefined' ? window.pageYOffset : document.documentElement && document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ? document.body.scrollTop : 0; }

function posRight() { return posLeft() + pageWidth(); } function posBottom() { return posTop() + pageHeight(); }