function prepareInternalNav() {
	if (!document.getElementsByTagName) return false;
	if (!document.getElementById) return false;
	if (!document.getElementById("colorSelectContent")) return false;
	var links = document.getElementById("colorSelectContent").getElementsByTagName("a");

	var firstElementIndex = null;
	
	for (var i=0; i<links.length; i++ ) {
		var sectionId = links[i].getAttribute("href").split("#")[1];
		if (!document.getElementById(sectionId)) continue;
		if (firstElementIndex == null){
			firstElementIndex = i;
		}
		document.getElementById(sectionId).style.display = "none"; 	
		links[i].destination = sectionId;
		links[i].onclick = function() {
			// global var for fade out timer in showSection()
			var destinDiv;
			showSection(this.destination);
			highlightSelected(this);
			return false;
		}
	}
	
	//find default watch
	if(!document.getElementById("colorSelectContent")) return false;
	var colorSelectContent = document.getElementById("colorSelectContent");
	var links = colorSelectContent.getElementsByTagName("a");
	var colorSelectContents = colorSelectContent.getElementsByTagName("div");
	
	var defaultElementIndex = null;
	
	
	for (var i=0; i<colorSelectContents.length; i++){
		if(HasClassName(colorSelectContents[i], "defaultWatch")){
			defaultElementIndex = i;
		}
	}

	//init so default watch displays
	if (defaultElementIndex == null){	
		links[firstElementIndex].onclick();
	} else {
		links[defaultElementIndex].onclick();
	}
}

function showSection(clicked) {
	var showDiv = document.getElementById(clicked);
	var showDivImgId = clicked+"-image";
	var currentColorDivLink = getElementsByClassName(document.getElementById("colorSelectContent"), "a", "highlighted" )[0];

	if (!currentColorDivLink){
		currentColorDivLink = document.getElementById("colorSelectContent").getElementsByTagName("a")[0];
	}

	var removeDivId = currentColorDivLink.getAttribute("href").split("#")[1];
	var divs =getElementsByClassName(document, "div", "watchPreview");

	//hide all color selects
	for (var i=0; i<divs.length; i++ ) {
			divs[i].style.display = "none";
	}

	//add background image of the old watch to the appearing watchImageBox
	showDiv.style.background = "white url(/products/images/" + removeDivId + ".jpg) no-repeat center 40px";
	
	//hide the appearing watchImageBox foreground image (show the background image)
	changeOpac(0, showDivImgId);
	showDiv.style.display = "block";
	
	//fade in the foreground image
	opacity(showDivImgId, 0, 100, 500);
	
	//remove the background image
	destinDiv = showDiv;
	setTimeout("destinDiv.style.backgroundImage = \"\"", 490);
}

function highlightSelected(clicked){
	//setting the class name of the clicked to current for css highlight
	var nav = document.getElementById("colorSelectContent");
	var colors = nav.getElementsByTagName("a");
	for (var i =0; i<colors.length; i++){
		colors[i].className = "";
	}
	clicked.className="highlighted";
}

function opacity(id, opacStart, opacEnd, millisec) {
		//speed for each frame 
		var speed = Math.round(millisec / 100);
		var timer = 0; 

		//determine the direction for the blending, if start and end are the same nothing happens 
		if(opacStart > opacEnd) { 
				for(i = opacStart; i >= opacEnd; i--) {
						setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
						timer++;
				}
		} else if(opacStart < opacEnd) {
				for(i = opacStart; i <= opacEnd; i++)
						{ 
						setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
						timer++;
				}
		}
}

//change the opacity for different browsers 
function changeOpac(opacity, id) {
		var object = document.getElementById(id).style; 
		object.opacity = (opacity / 100); 
		object.MozOpacity = (opacity / 100); 
		object.KhtmlOpacity = (opacity / 100); 
		object.filter = "alpha(opacity=" + opacity + ")";
}

addLoadEvent(prepareInternalNav);