function setmenustyle(selector, rule){

	var rulecount;
	var fullrule;
	var ssheet;
	ssheet=(document.styleSheets.length<=0)? document.createStyleSheet() : document.styleSheets[document.styleSheets.length -1];

	if( testVar(selector)  && testVar(rule) && rule.indexOf(":")  ){		
		if(ssheet.insertRule){	/* DOM */
			rulecount=ssheet.cssRules.length;
			fullrule=selector +"{"+ rule +"}";	
			ssheet.insertRule(fullrule, rulecount++ );
		}else if(document.styleSheets[0].addRule){ /* IE */
			rulecount=ssheet.rules.length;
			if(selector.indexOf(",") >0){
				selectors=selector.split(",");
				for(var s=0; s< selectors.length; s++){
					ssheet.addRule(selectors[s], rule, rulecount++);
				}
			}else{
				ssheet.addRule(selector, rule, rulecount++);	
			}
		}
		return true;
	}else{
		return false;
	}
}

function drawColor(){
var a, b, c, f;
var hx = new Array('00', '33', '66', '99', 'CC', 'FF');
	document.write("<div id='colorcon'>");
	document.write("<div id='colordisp'>Selected Color</div>");
	for (var x=0; x <hx.length; x++){
		f=hx[x];
		  document.write("<a href='#' class='colorspot' style='background-color:#"+f+f+f+";' title='click to select #"+f+f+f+"'><span>.</span></a>\n");   
	}
	for(var i=0; i < hx.length; i++){
		a=hx[i];    
		for(var s=0; s < hx.length; s++){
			b=hx[s];
		  
			for(var v=0; v< hx.length; v++){
				c=hx[v];
			   document.write("<a href='#' class='colorspot' style='background-color:#"+a+b+c+";' title='click to select #"+a+b+c+"'><span>.</span></a>\n");          
			}    
		}			   
	}
	document.write("</div>");
}

function displayControls(){	
	if(navigator.cookieEnabled && document.styleSheets && (document.styleSheets[0].addRule || document.styleSheets[0].insertRule)){
		document.write(
		"<form id='menupref' name='menupref' method='post' action='generatedstyle.php' >"+	
		"<label for='topbg'>Top level Background color :</label>"+
		"<input type='text' name='topbg' id='topbg'  value='#CCC'  onblur=\"setmenustyle('#nav li ','background-color:'+this.value +'!important;')\" /> "+
"<br />"+
"<label for='thbg'>Top level Hover color :</label>"+
		"<input type='text' name='thbg' id='thbg'  value='#CCC'  onblur=\"setmenustyle('#nav li:hover, #nav li a:hover ','background-color:'+this.value +'!important;')\" /> "+
"<br />"+
"<label for='lowbg'>Lower levels Background color :</label>"+
		"<input type='text' name='lowbg' id='lowbg'  value='#CCC'  onblur=\"setmenustyle('#nav ul li ','background-color:'+this.value +'!important;')\" /> "+
"<br />"+
"<label for='lhbg'>Lower levels Hover color :</label>"+
		"<input type='text' name='lhbg' id='lhbg'  value='#CCC'  onblur=\"setmenustyle('#nav ul li:hover, #nav ul li a:hover ','background-color:'+this.value +'!important;')\" /> "+
"<br />"+
"<label for='borc'>Border Color :</label>"+
		"<input type='text' name='borc' id='borc'  value='#CCC'  onblur=\"setmenustyle('#nav li ','border:solid 1px '+this.value +'!important;')\" /> "+
"<br />"+
"<input type='radio' name='mtype' id='hor' checked='checked' value='hor' /><label for='hor'>Horizontal</label>"+
"<input type='radio' name='mtype' id='vert' value='vert' /><label for='vert'>Vertical</label>"+

"<input type='submit' value='Generate Styles' />"+
	"</form>");
	}else{
		/* if their browser supports JavaScript but not some of the functions or cookies are disabled then you can output alternative content here.*/
		document.write('This should be  controls to style the menu. Unfortunately your browser cannot understand the required functions');
	}
}