/**
	* unobtrusive javascript: dealing with existing window.onload event handler
	* 
	*/

	if(window.onload){
		var existingOnload = window.onload;	//if window.onload=firstfunction; exists
	}else{
		var existingOnload = function(){};//do nothing
	}

	function secondOnload() {
		existingOnload();
		setScreenClass();
		if(navigator.appVersion.indexOf("MSIE 6")>-1){
			sfHover();
		}
	}
	window.onload = secondOnload;
	window.onresize = setScreenClass;
	
	/**
	* set body classes depending on screen size
	* This is a hook to scale the layout in css for 
	* different browser window sizes
	*/

	//  Following transition classes will be declared:
	//
	//	classname		  screenwidth
	//	------------------------------------------
	//	pda_v			  240px			
	//	pda_h			  320px			
	//	ultralow		  320px -  640px	
	//	screen_lo		  640px -  800px	
	//	screen_med		  800px - 1024px	
	//	screen_hi		 1024px - 1280px	
	//	screen_wide				> 1280px			

	function setScreenClass(){
		var winW = 0;
  	var windowWidth = document.documentElement.clientWidth || document.body.clientWidth;
		var cls = 	(windowWidth<240)?'pda_v':
								(windowWidth>240&&windowWidth<=320)?'pda_h':
								(windowWidth>320&&windowWidth<=640)?'ultralow':
								(windowWidth>640&&windowWidth<=800)?'screen_low':
								(windowWidth>800&&windowWidth<=1024)?'screen_med':
								(windowWidth>1024&&windowWidth<=1280)?'screen_high':
								'screen_wide';
		document.body.className=cls;
	}
  

	/**
	* hover workaround for IE6
	* sets .hover classes on mouseover
	*
	*/

	function sfHover() {
	if(document.getElementById("nav")){
		var sfEls = document.getElementById("nav").getElementsByTagName("li");
		for (var i=0; i<sfEls.length; i++) {
			sfEls[i].onmouseover=function() {
				this.className+=" sfhover";
			}
			sfEls[i].onmouseout=function() {
				this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
			}
		}
	}
	
		/* same for ul#nav:hover*/
		if(document.getElementById("nav")){
		var sfEls2 = document.getElementById("nav");
			sfEls2.onmouseover=function() {
				this.className+=" sfhover";
			}
			sfEls2.onmouseout=function() {
				this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
			}	
		}
	}