// Display metric or english specifications table
function showSystem(system)
{
	var eng = document.getElementById("specsDivE");
	var met = document.getElementById("specsDivM");
	var units = document.getElementById("units");
	if(system == "E"){
		met.style.display = "none";
		eng.style.display = "block";
		units.innerHTML = "UNITS (English)";
	} else{
		met.style.display = "block";
		eng.style.display = "none";
		units.innerHTML = "UNITS (Metric)";
	}
	return false;
}

function centerPng() {
//we know that the view is 607
//if we find the width of the image, and then divide it by two
//we can then offset it by the divided value and 303 (half of the view)
	//register some important variables
	productBoxWidth = 300;
	pngs = document.getElementsByTagName("div");
	bubbles = document.getElementById("feature_bubbles");
	for(i=0; i<pngs.length; i++){
		if(pngs[i].className=="png" || pngs[i].className=="newpng"){
			extractImage = pngs[i].getElementsByTagName("img");
			myImage = extractImage[0];
			imageOffset = myImage.width/2;
			moveImage = productBoxWidth - imageOffset + "px";
			pngs[i].style.left = moveImage;
			if(bubbles){
			bubbles.style.left = moveImage;						
			}

			myImage.style.visibility="visible";
		}
	}
}

//ok we need a function to center the transparent png's on top of the 
//we grab the width and height of the particular image and then
//divide it by the dimensions of the drop shadow image
function centerImage() {
	var largeImage = document.getElementById("large_image");
	//width
	var offset = (429-7)/2 - largeImage.width/2;
	largeImage.style.left = offset + "px";
	//height
	offset = (430-14)/2 - largeImage.height/2;
	largeImage.style.top = offset + "px";
}

function initCloseEnlarged() {		
	//find the close button and assign an event handler
	closeButton = document.getElementById("closePhoto");
	closeButton.onclick = closeEnlarged; 
}

function initShowEnlarged() {
	//find the enlarge button and assign an event handler
	enlargeBtn = document.getElementById("enlargePhoto");
	enlargeBtn.onclick = showEnlarged;
}

function closeEnlarged(){
	//find the enlarged photo wrapper and hide it
	var photo = document.getElementById("enlargedPhoto-wrapper");
	photo.style.display = "none";
	return false;
}
	
function showEnlarged() {
	//find the appropriate image
	var bigImg = document.getElementById("large_image");
	var smallImg = document.getElementById("productView_image");
	var smallImgUrl = smallImg.src.split("/");
	var newUrl = smallImgUrl[smallImgUrl.length-1].split(".");
	var largeImgUrl = newUrl[0] + ".jpg";
	var fullPath = "";
	for(i=0; i<smallImgUrl.length-1; i++){
		fullPath = fullPath + smallImgUrl[i] + "/";
	}
	bigImg.src = fullPath + largeImgUrl;
	
	//create a new image node
	var newBigImg = document.createElement("img");
	
	//swap the nodes
	bigImg.parentNode.replaceChild(newBigImg,bigImg);
	
 	//once the big image is loaded, show it!

	//first set the id so the center image function can 
	//find the image
	newBigImg.id = "large_image";
	
	//second set the event handler, due to cache bugs in
	//internet explorer, the onload event won't fire
	//unless it is set before you set the source
	newBigImg.onload = showEnlarged_continued;
	
	//set the path to pull from cache/or download the image
	newBigImg.src = fullPath + largeImgUrl;	
	return false;	
}

function showEnlarged_continued() {
	//once the image is downloaded, show the wrapper and
	//center the image and show it.
	var photo = document.getElementById("enlargedPhoto-wrapper");
	photo.style.display = "block";
	centerImage();
}

function initChangeTab() {
	//add event handlers to the tabs
	tabs = document.getElementById("product_tabs");		
	//iterate through tabs
	tab = tabs.getElementsByTagName("li");
	for(i=0; i<tab.length; i++){
		//add event handler
		tab[i].onclick = changeTab;
	}
	
}

function changeTab() {
	var tabCaller; //the object that calls the tab switch
	//change the class of the body
	//split the tab name on the underscore
	tabCaller = this.id.split("_");
	//take the first index and add "product-" to it
	bodyClassName = "product-" + tabCaller[0];
	//assign class to body
	document.body.className = bodyClassName;

	//set a cookie for page refreshes
	document.cookie = "bodyClass="+ bodyClassName;
	
	//hide the feature bubbles if they are showing
	var bubbles = document.getElementById("feature_bubbles");
	
	if(bubbles) {
		bubbles.style.display='none';
	}	
	return false;	
}

function GetCookie(sName)
{
  // cookies are separated by semicolons
  var aCookie = document.cookie.split("; ");
  for (var i=0; i < aCookie.length; i++)
  {
    // a name/value pair (a crumb) is separated by an equal sign
    var aCrumb = aCookie[i].split("=");
    if (sName == aCrumb[0]) 
      return unescape(aCrumb[1]);
  }

  // a cookie with the requested name does not exist
  return null;
}

function checkBodyCookie() {
	//hide all the tab boxes
	var tabs = document.getElementsByTagName("div");
	var match = /tab_box/;
	for(i=0;i<tabs.length;i++){
		if(match.test(tabs[i].className)) {
			tabs[i].style.display="none";
		}
	}
	
	document.body.className = "product-overview";
}

function loadProductViewMenu(theClass,theString){
	//take the viewsArray and construct product views
	var productViewsList = document.getElementById("product_views");
	
	var productViewString;
	var first = true; //check to see if it's the first

		productViewString = theString;
		
		//construct the tag
		newView = document.createElement("li");
		newView.id = "view" + theClass;
		
		//add the anchor
		newViewAnchor = document.createElement("a");
		newViewAnchor.href = "#";
		newViewAnchor.innerHTML = productViewString;
		
		//add the anchor to the li
		newView.appendChild(newViewAnchor);
		
		//add the view item to the anchor
		newView.style.display="none";
		newView.style.background = "#fff";
		productViewsList.appendChild(newView);
		Effect.Appear(newView);

	//add selected to the top option
	productViewsList.firstChild.className = "selected";
	//add last class to the last item
	productViewsList.lastChild.className = "last";
			
	if(productViewsList.childNodes.length == 1) {
		productViewsList.firstChild.className = "selected last";
	}
	
	//set the event handlers
	
	if(theClass=="_X") {
		featuresAndBenefits.render();		
	}
	
	initProductViews();
}

function initProductViews() {
	//assign event handlers to product view buttons
	productViews = document.getElementById("product_views");
	productView = productViews.getElementsByTagName("li");
	
	for(i=0;i<productView.length;i++){
		productView[i].onclick = showProductView;
	}
}

function showProductView() {
	//declare some variables
	var oldImg; // the old image
	var pngDiv; // the parent div of the old image
	var newImg; // the new image we are swapping to
	var fileName; // the fileName of the old image
	var newFile; // the newFileName extension array
	var newFileType; // the newFilename extension string
	var newFileName; // the new combined fileName
	var theUrl; // the full path to the new url	
	
	
	if(this.className == "selected" || this.className == "selected last") {
		return false;
	}
	
	//hide bubbles
	var bubbles = document.getElementById("feature_bubbles");
	if(bubbles) {
		bubbles.style.display="none";
	}
	
	
	//find the png div
	oldImg = document.getElementById("productView_image");
	pngDiv = oldImg.parentNode
	
	//create a new image node
	newImg = document.createElement("img");

	//find the filename
	//split it on the /
	fileName = oldImg.src.split("/");
	
	
	newFile = fileName[fileName.length-1].split(".");
	
	newFileType = this.id.split("_");		
	if(newFileType.length>1){
		newFile = newFile[0] + "_" + newFileType[1];
	} else {
		//the original is selected because there is no underscore in the call
		//split the filename into underscores to remove the original extension
		var revertToOriginal = newFile[0].split("_");
		//reset the filename
		newFile = "";
		for(i=0;i<revertToOriginal.length-1;i++){

			//rebuild the filename 
			newFile = newFile + revertToOriginal[i];
			
			//add underscores to all except last
			if(i != revertToOriginal.length-2) {
				newFile = newFile + "_";
			}
		}
	}
	
	//save the path to the old file
	var oldFilePath = "";
	for(i=0;i<fileName.length-1;i++){
		oldFilePath = oldFilePath + fileName[i] + "/";
	}
	
	newFileName = oldFilePath + newFile + ".png";
	
	//when the new image loads, fire the event
	//that shows the image and highlights the selected
	//option
	pngDiv.replaceChild(newImg,oldImg);
	//set the id first
	newImg.id = "productView_image";
	newImg.style.visibility = "hidden";
	//set the event handler to show the image when it is loaded
	newImg.onload = showProductView_continued;
	//assign the fileName
	newImg.src = newFileName;
	return false;
}

var makePngsTransparent; // ie 6 and under only
function showProductView_continued() {
	var pngDiv = document.getElementById(this.id).parentNode;
	//re-align the element
	centerPng();	
	//strip off the path
	var theUrl; //used to cut up the url and swap the image
	theUrl = this.src.split("/");
	theUrl = theUrl[theUrl.length-1];
	
	//strip off the file extension
	theUrl = theUrl.split(".")
	theUrl = theUrl[0];
		
	//strip off the filename	
	theUrl = theUrl.split("_");
	
	//grab the view extension 
	var extension = theUrl[theUrl.length-1];
	switch(extension) {
		case "X":
		case "SIDE":
		case "TREAD":
			theUrl = "view_" + extension;
		break;
		default:
			theUrl = "view";
	}
	//remove selected class name from all others
	productViews = document.getElementById("product_views");
	productView = productViews.getElementsByTagName("li");
	for(i=0; i<productView.length; i++){
		if(productView[i].id==theUrl){
			productView[i].className = "selected";
		} else {
			productView[i].className = "";
		}
	}
	
	//if the body is document.body.className = "product-features-and-benefits";
	if(document.body.className == "product-features-and-benefits") {
		if(theUrl == "view_X") {
			var bubbles = document.getElementById("feature_bubbles");
			if(bubbles) {
				bubbles.style.display="block";
			}
			
		}
	}
	
	
	//now set the last class back on
	productView[productView.length-1].className = productView[productView.length-1].className + " last";

 	//if using internet explorer
	//make the new image transparent
	if(makePngsTransparent){
		makeTransparent(pngDiv);
	}
}

function testImage(URL,imageId) {
/*	var tester=new Image();*/
	var tester = document.createElement("img");
	tester.onload=isGood;
	tester.style.visibility = "hidden";
	tester.style.position = "absolute";	
	tester.src=URL;
	
	var objBody = document.getElementsByTagName("body").item(0);
	objBody.appendChild(tester);	
}


function isGood() {
	var extension = this.src.toString().split("_");
	extension = extension[extension.length-1];
	extension = extension.toString().split(".");
	extension = "_" + extension[0];

	switch(extension) {
		case "_X":
				loadProductViewMenu('_X','CUTAWAY');
			break;
		case "_SIDE":
				loadProductViewMenu('_SIDE','SIDE VIEW');
			break;
		case "_TREAD":
			loadProductViewMenu('_TREAD','TREAD VIEW');
			break;
		default:
			loadProductViewMenu('','3/4 VIEW');
			break;
	}	

}

var featuresAndBenefits = new function() {	
	this.init = function() {
		var sourceObj = document.getElementById("features-and-benefits_tab");
		sourceObj.onclick = featuresAndBenefits.execute;
		
		//hide the bubbles
/*		var bubbles = document.getElementById("feature_bubbles").style.display="none";*/
		
		//hide the features and benefits tab
		var fnbTab = document.getElementById("features-and-benefits_tab");
		fnbTab.style.display="none";
	}
	
	this.render = function() {
		//hide the features and benefits tab
		var fnbTab = document.getElementById("features-and-benefits_tab");
		fnbTab.style.display="block";		
	}
	
	this.execute = function() {		
		//show the features and benefits tab		
		document.body.className = "product-features-and-benefits";
		
		//switch the product view to cutaway
		var cutAwayView = document.getElementById("view_X");
		cutAwayView.onclick.call(cutAwayView);				
		
		var bubbles = document.getElementById("feature_bubbles").style.display="block";
		return false;	
	}
}

Event.addEvent(window,"load",checkBodyCookie);
Event.addEvent(window,"load",initChangeTab);