function hideProductFinder(e){
 
	var pf = document.getElementById("productFinder");

	if (!e) var e = window.event;
	var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement;
	
	// happens when you mouseout of select box before releasing the mouse button
	// we don't want to hide the product finder when that happens
	if (reltg == undefined) return; 
	
	//document.getElementById("log").innerHTML += "<br/>";	
	var firstreltg = reltg;
	//document.getElementById("log").innerHTML += firstreltg + (firstreltg == pf) + "<br/>";
	while (reltg != null && reltg != pf && reltg.nodeName != 'BODY' && reltg.nodeName != 'HTML') reltg= reltg.parentNode;
	//document.getElementById("log").innerHTML += reltg +  (reltg == pf) + "<br/>";
	
	//if the destination is not inside the product finder close the productfinder if it's open
	if ((reltg != pf) && (pf.className == "productFinderOpen")) 
		toggleProductFinder();
}

function toggleProductFinder(){
	var ddButton = document.getElementById("productFinder");	
	var form = document.getElementById("productFinderDropdownForm");
	var htEffect;

	//The try-catch blocks are for graceful degradation to ie5, which doesn't support the fx.	
	
	if (ddButton.className == "productFinderOpen"){
		//this is open, so close it.
		try{
			htEffect = new fx.Height(form , {duration: 500,
						onComplete: function(){
							ddButton.className = "productFinderClosed";							
						}
						});
			htEffect.custom(form.offsetHeight, 0);
		}catch (e){
			ddButton.className = "productFinderClosed";			
		}

	}else{
		//this is closed, so open it
		
		ddButton.className = "productFinderOpen";		
		
		try{
			htEffect = new fx.Height(form , {duration: 500,
						onComplete: function(){
							form.style.overflow = null; 
							//without this, firefox seems to unfocus the window or form or something
							//forcing the user to click twice to select dropdowns 
						}});
			
			/*
			IE5/mac hides the background of the form if it has a height set explicitly.
			everything that supports this animation flickers the form the first time
			it's opened if the height isn't set explicitly. 
			IE5/mac will have failed by now, so it's safe to set it.
			*/
			form.style.height="0px";
			
			htEffect.custom(0, form.scrollHeight);
		}catch (e){
			//nothing
		}

	}
	return false;
}



var pfinder_oldOnload = window.onload;
window.onload = function(){
	if (pfinder_oldOnload) pfinder_oldOnload(); 
	document.getElementById("productFinder").onmouseout = hideProductFinder;
	document.getElementById("productFinderDropDownButton").onclick = toggleProductFinder;	
}