// custom functions to overcome css limitations

// slides a rootCategory down and shows the containing subCategories
function toggleCategory(elementId) {
	/* HACK to resize the colorbar as high as needed since there is no way to do that in css */
	var folddiv = document.getElementById(elementId);
	
	// get color bar for the subcategory which unfolds on click
	var divlist = folddiv.getElementsByTagName("div");
	var colorbar = divlist[0];
	var subcatText = divlist[1];
	// use scriptaculous toggle effect
	Effect.toggle(elementId,"blind",{ duration : 0.4 });
	// find subcategoryText and adjust height
	adjustColorbarHeight(colorbar, subcatText,false);
}

// sets the height of the colorBar (the small bar left to the root/subcategory
// in the category box accordingly - css cannot have a height: 100%; in this case
// so we rely on javascript
function adjustColorbarHeight(colorbar, subcatText, isStatic)
{
	if(subcatText.parentNode.style.display == "none"){
		subcatText.parentNode.style.display="block";
		newheight = subcatText.clientHeight;
		//hide it again
		subcatText.parentNode.style.display="none";
		colorbar.style.height = newheight + "px";
	}else{
		if(isStatic)
			colorbar.style.height = subcatText.clientHeight + "px";
		else
			colorbar.style.height = "0px";
	}
}

// search page for all Colorbars and adjust their height
// needs to be done on every page load as the current
// category is always unfolded
function adjustAllColorbarHeights()
{
	var subCatDivs = selectSubCatDiv();
	for(i=0;i< subCatDivs.length;i++){
		
		colorbar = subCatDivs[i].getElementsByTagName("div")[0];
		folddiv = subCatDivs[i].getElementsByTagName("div")[1];
		if(folddiv.style.display != "none"){
			adjustColorbarHeight(colorbar, folddiv, true);
			//colorbar.style.height = folddiv.clientHeight + "px";	
		}
	}
}
// due to a fuckin' unfixed bug in IE8 we have
// to make it complicated instead of rely getElementsByName()
function selectSubCatDiv(){
	retArray = new Array();
	y = document.getElementById("catListBody");
	mydivs = y.getElementsByTagName("div");
	for(i=0;i<mydivs.length;i++){
		if(mydivs[i].id.indexOf("subcat") >= 0){
			retArray.push(mydivs[i]);	
		}
	}
	return retArray;
}

// show JS Cart, a dynamic cart div
function toggle_js_cart()
{
	Effect.toggle("js_cart","slide", { duration : 0.9 });
}

// adjusts the height of the left navigation column (col1) 
// to the height of the main content columns (col3) - needs
// to be called on pageload
// OBSOLETE - use css background for col1 instead
/* function adjustNavigationColumnHeight(){
	col3height = document.getElementById("col3_content").clientHeight;
	mycol1 = document.getElementById("col1_content");
	//mycol1.style.height = col3height + "px";
} */