function filterClientSide(){
	
	//characters key
	var charactersString = "";
	var charactersSelectedCount = 0;
	var charactersSelect = document.getElementById("characterfilter");
	for(var i = 0; i < charactersSelect.options.length; i++){
		var current = charactersSelect.options[i];
		if(current.selected){
			charactersSelectedCount = charactersSelectedCount + 1;
		}
	}
	if(charactersSelectedCount == 0 || charactersSelect.options[0].selected){
		charactersString = "All Characters";	
	}else{
		for(var i = 0; i < charactersSelect.options.length; i++){
			var current = charactersSelect.options[i];
			if(current.selected){
				charactersString = charactersString + current.text + "<br />";
			}
		}
	}
	
	filter("characterfilter", "p");
	
	document.getElementById("characters_key_top").innerHTML = charactersString;
	document.getElementById("characters_key_fixed").innerHTML = charactersString;
			
	//scenes key
	var scenesString = "";
	var scenesSelectedCount = 0;
	var scenesSelect = document.getElementById("scenefilter");
	for(var i = 0; i < scenesSelect.options.length; i++){
		var current = scenesSelect.options[i];
		if(current.selected){
			scenesSelectedCount = scenesSelectedCount + 1;
		}
	}
	if(scenesSelectedCount == 0 || scenesSelect.options[0].selected){
		scenesString = "Entire Play";	
	}else{
		for(var i = 0; i < scenesSelect.options.length; i++){
			var current = scenesSelect.options[i];
			if(current.selected){
				scenesString = scenesString + current.text + "<br />";
			}
		}
	}
	
	filter("scenefilter", "div");
	
	document.getElementById("scenes_key_top").innerHTML = scenesString;
	document.getElementById("scenes_key_fixed").innerHTML = scenesString;
	
	highlightDefault();
	
	//comparisons key
	if(document.getElementById("comparisonsfilter") != null){

		var comparisonsString = "";
		var comparisonsSelectedCount = 0;
		var comparisonsSelect = document.getElementById("comparisonsfilter");
		for(var i = 0; i < comparisonsSelect.options.length; i++){
			var current = comparisonsSelect.options[i];
			if(current.selected){
				InsertRule("." + current.text,cssrules[comparisonsSelectedCount]);
				comparisonsSelectedCount = comparisonsSelectedCount + 1;
			}
		}
		
		if(comparisonsSelectedCount == 0 || comparisonsSelect.options[0].selected){
			comparisonsString = "No Comparisons Selected";	
		}else{
			for(var i = 0; i < comparisonsSelect.options.length; i++){
				var current = comparisonsSelect.options[i];
				if(current.selected){
					comparisonsString = comparisonsString + "<span class=\"" + current.value + "\">" + current.text + "</span><br />";}
			}
		}
		
		if(comparisonsSelectedCount > cssrules.length){
			comparisonsString = comparisonsString + "<p class=\"error\">Only " + cssrules.length + " css rules have been specified in the settings.xml file.</p>";
			comparisonsString = comparisonsString + "<p class=\"error\">Any adaptations you select beyond the first " + cssrules.length + " will not be formatted.</p>";
		}
		
		document.getElementById("comparisons_key_top").innerHTML = comparisonsString;
		document.getElementById("comparisons_key_fixed").innerHTML = comparisonsString;
		
	}else{
		document.getElementById("comparisons_key_top").innerHTML = "No adaptations available";
		document.getElementById("comparisons_key_fixed").innerHTML = "No adaptations available";
	}
	
	return false;
}

function filter(filterfield, tagtype){
	
	var selectedcount = 0;
	var regexstring = "";
	var filterselect = document.getElementById(filterfield);
	if(filterselect.options[0].selected){
		regexstring = ".";
	}else{
		for(var i = 0; i < filterselect.options.length; i++){
				var current = filterselect.options[i];
				if(current.selected && selectedcount > 0){
					regexstring = regexstring + "|." + current.value;
				}
				if(current.selected && selectedcount == 0){
					regexstring = regexstring + "." + current.value;
					selectedcount = selectedcount + 1;
				}
			}
	}

	//alert(regexstring);

	RegExpression = new RegExp(regexstring);
	var cElems = document.getElementById("playtext").getElementsByTagName(tagtype);

	for(var i=0;i<cElems.length;i++){
		if(! RegExpression.test(cElems[i].id)){
			cElems[i].style.display = "none";
		}else{
			cElems[i].style.display = "block";
		}			
	}
}


function InsertRule(selector,declarations){
	var stylesheet=document.styleSheets;
	if(stylesheet){
		var myStyle=stylesheet.item(stylesheet.length-1);
  		if(document.all){
    			myStyle.addRule(selector,declarations);
  		}else{
    			myStyle.insertRule(selector+"{"+declarations+"}",myStyle.cssRules.length);
  		}
	}
}



function highlightDefault(){

	//This function gets rid of any of the styles already applied using JavaScript.

	//check CSS Support
	if(!document.styleSheets){
		alert("Your browser does not support Javascript manipulation of CSS stylesheets.\r\rPlease go back and use the server-side version.");
 	 	return;
 	}else{
 
		//get only styles created on by JavaScript 
		var dSheet=document.styleSheets[document.styleSheets.length-1];

		if(document.all){
			//Non-compliant Microsoft Code -- but, hey, they were first...		
			for(var i = dSheet.rules.length-1; i > -1; i--){
   				dSheet.removeRule(i);
			} 
 		}else{
			//DOM+CSS compliant code
			for(var i = dSheet.cssRules.length-1; i > -1; i--){
   				dSheet.deleteRule(i);
			} 
		}
  	}
  
 }