function toggle_events_init() {
	toggleSpeed = new Array();
	toggleAccel = new Array();
	toggleHidden = new Array();
	toggleOpen = new Array();
	toggleTimeout = new Array();
	toggleHeight = new Array();
	toggleRealHeight = new Array();
	toggleAnchor = new Array();
	toggleAnchorEnabled = new Array();
	
	var elements = document.getElementsByTagName('div');
	for (var i = 0 ; i < elements.length; i++) {
		if (elements[i].id.indexOf("toggle_") == 0) {
			var container = elements[i].id.replace("toggle_", "");
			var element = document.getElementById(container);
			toggleSpeed[container] = 0;
			toggleAccel[container] = 0;
			toggleAnchor[container] = false;
			toggleHidden[container] = true;
			toggleOpen[container] = false;
			toggleTimeout[container] = 0;
			toggleHeight[container] = 0;
			toggleAnchorEnabled[container] = false;
			
			if(document.implementation.hasFeature("CSS", "2.0")) {
				toggleRealHeight[container] = document.defaultView.getComputedStyle(elements[i], null).getPropertyCSSValue("height").getFloatValue(5);
			}
			else if(elements[i].clientHeight!=null) {
				toggleRealHeight[container] = elements[i].offsetHeight;
			}
	
			elements[i].style.display = "none";
			elements[i].style.height = "0px";

			element.onmouseover = function() {
				//toggle("toggle_" + this.id, this.id);
				show_details(this.id);
				return false;
			}
			element.onmouseout = function() {
				//toggle("toggle_" + this.id, this.id);
				hide_details(this.id);
				return false;
			}
			element.onclick = function() {
				//var idNum = Number(this.id.replace("product", ""))-1;
				if (toggleAnchorEnabled[this.id]) {
					if (toggleAnchor[this.id] == false) {
						toggleAnchor[this.id] = true;
					} else {
						toggleAnchor[this.id] = false;
						hide_details(this.id);
					}
				}
			}
		}
	}
}
function toggle(id,product)
{
	//A proplem will occur if el doesn't exist
	//may be I need to create a new parameter to know if it's rollover or rollout
	var el = document.getElementById(id);
	var styler = document.getElementById(product + "_styler")
	var display = el.style.display ? '' : 'none';
	el.style.display = display;
	styler.className = display ? "product" : "product_hover";
}

function toggleTrace() {
	for (i in toggleHeight) {
		if ((!toggleHidden[i]) && (!toggleOpen[i])) {
			if (toggleTimeout[i] <= 0) {
				toggleSpeed[i] += toggleAccel[i];
				toggleHeight[i] += toggleSpeed[i];
				
				var el = document.getElementById("toggle_" + i);
				var container = document.getElementById(i);
				if (toggleHeight[i] > toggleRealHeight[i]) {
					toggleOpen[i] = true;
					toggleTimeout[i] = 0;
					toggleSpeed[i] = 0;
					toggleAccel[i] = 0;
					toggleHeight[i] = toggleRealHeight[i];
				};
				if (toggleHeight[i] < 1) {
					toggleHidden[i] = true;
					toggleSpeed[i] = 0;
					toggleAccel[i] = 0;
					toggleHeight[i] = 0;
					el.style.display = "none"
				};
				el.style.height = toggleHeight[i]+"px";
			} else {
				toggleTimeout[i]--;
			}
		};
	};
	setTimeout("toggleTrace()",10)
}
function toggle_init() {
	if (document.getElementById && document.getElementsByTagName) {
		toggle_events_init();
		toggleTrace();
	}
}
function show_details(element) {
	var element_details = document.getElementById("toggle_" + element);
	var styler = document.getElementById(element + "_styler")
	if (element_details.style.display == "none") {
		element_details.style.height = "1px";
	}
	element_details.style.display = "block";
	
	for (i in toggleHidden) {
		if (!toggleHidden[i] && !toggleAnchor[i]) {
			toggleAccel[i] = -1;
			toggleOpen[i] = false
		}
	};
	toggleAccel[element] = 1;
	toggleHidden[element] = false;
}
function hide_details(element) {
	var element_details = document.getElementById("toggle_" + element);
	var styler = document.getElementById(element + "_styler")
	element_details.style.display = "block";
	
	if (!toggleHidden[element] && !toggleAnchor[element]) {
		toggleAccel[element] = -1;
		toggleOpen[element] = false
	}
}