/*for product detail page*/
	// old way
	addLoadListener(openSizeChart);
	addLoadListener(openShoeSizeChart);
	
	/* for product detail page */
	// new way
	//addLoadListener(openSizeChooser);

	/* this one adds the listener to the "shoesize_chooser" - NEW WAY */
	/*
	function openSizeChooser() {
		var sizechooser = document.getElementById('shoesize_chooser');
		if (!sizechooser) { return; }
		attachEventListener(sizechooser, "click", openChart, false);
	}
	*/






	
	/* OPEN SIZE CHART  */
	function openSizeChart() {
		
		var openchart = document.getElementById('openchart');
		var closechart = document.getElementById('closechart');
		if (!openchart) { return; }
		attachEventListener(openchart, "click", openChart, false);
		
		if (closechart) { 
			attachEventListener(closechart, "click", closeChart, false);
		}
	}

	/* this is for the "SIZE" thing left of the upside-down triangle */
	function openShoeSizeChart() {
		var openchart = document.getElementById('shoesize');
		if (!openchart) { return; }
		attachEventListener(openchart, "click", openChart, false);
	}

	function openChart() {
		
		if(!document.product_form.choiceName_1.value) {alert('Please select a color/style first.'); return false; }
		var sizechart = document.getElementById('sizechart');
		sizechart.style.display = "block";
	}

	function closeChart() {
		var sizechart = document.getElementById('sizechart');
		sizechart.style.display = "none";
	}
/*******************************
 * BEGIN Color chart
 *******************************/
	
	addLoadListener(openStyleChart);
	addLoadListener(openShoeColorChart);
	
	/* OPEN SIZE CHART  */
	function openStyleChart() {
		var openchart = document.getElementById('openStyleChart');
		if (!openchart) { return; }
		attachEventListener(openchart, "click", openColorChart, false);
	}

	/* this is for the "SIZE" thing left of the upside-down triangle */
	function openShoeColorChart() {
		var openchart = document.getElementById('shoestyle');
		if (!openchart) { return; }
		attachEventListener(openchart, "click", openColorChart, false);
	}

	function openColorChart() {
		var sizechart = document.getElementById('colorChart');
		sizechart.style.display = "block";
	}
	
	
/******************************
 * END Color chart
 ******************************/
	
	
	/* on the right hand side size chart */
	addLoadListener(openSideSizeChart);
	
	
	/* OPEN SIDE SIZE CHART  */
	function openSideSizeChart() {
		var openchart = document.getElementById('gobutton');
		var closechart = document.getElementById('closeallsizes');
		if (!openchart) { return; }
		if (!closechart) { return; }
		attachEventListener(closechart, "mouseover", hoverCloseChart, false);
		attachEventListener(closechart, "mouseout", unHoverCloseChart, false);
		attachEventListener(openchart, "click", openSideChart, false);
		attachEventListener(closechart, "click", closeSideChart, false);
	}
	
	function hoverCloseChart(event) {
		if (typeof event == "undefined") {
			event = window.event;	
		}
		var element = getEventTarget(event);
		var picture = "/images/close_size_chart_on.gif";
		element.src = picture;
	}
	
	function unHoverCloseChart(event) {
		if (typeof event == "undefined") {
			event = window.event;	
		}
		var element = getEventTarget(event);
		var picture = "/images/close_size_chart.gif";
		element.src = picture;
	}
	
	
	function openSideChart() {
		var sizechart = document.getElementById('allsizes');
		sizechart.style.display = "block";
		
		var openchart = document.getElementById('gobutton');
		var closechart = document.getElementById('closeallsizes');
		if (!openchart) { return; }
		if (!closechart) { return; }
		openchart.style.display = "none";
		closechart.style.display = "";
	
	}
	
	function closeSideChart() {
		var sizechart = document.getElementById('allsizes');
		sizechart.style.display = "none";
		
		var openchart = document.getElementById('gobutton');
		var closechart = document.getElementById('closeallsizes');
		if (!openchart) { return; }
		if (!closechart) { return; }
		openchart.style.display = "";
		closechart.style.display = "none";
	}
	
	
	
	
	addLoadListener(sizeHover); 
 
// JavaScript Document 
	function sizeHover() {  
		if (document.all&&document.getElementById) {  
			var myId = document.getElementById("sizechart"); 
			if (myId == null) return;
			var tds = myId.getElementsByTagName("tr");  
			for (i=0; i<tds.length; i++) {  
				var node = tds[i]; 
				node.onmouseover=function() {  
					this.className+=" over";  
				} 
				node.onmouseout=function() { 
					this.className=this.className.replace(" over", "");  
				} 
			} 
		} 
	} 
	
	/* this is for the cat all page */
	function sizeHoverCatAll(id) {
		if (document.all&&document.getElementById) {
			var myId = document.getElementById(id);
			var tds = myId.getElementsByTagName("tr");  
			for (i=0; i<tds.length; i++) {  
				var node = tds[i]; 
				node.onmouseover=function() {  
					this.className+=" over";  
				} 
				node.onmouseout=function() { 
					this.className=this.className.replace(" over", "");  
				}
			}
		} 
	}