// Electoral JavaScript

// this is for DRAWING BOARD
	
	 var s = new Electoral();
	 var pageState = 0; // 0 - main, 1 - block, 2 - slider
	 var blockState = 0; // 0 - not loaded, 1 - loaded, 2 - submitted

	// preload mouseover pictures (draw/block/slider)
	if (document.images)
	{
	  choice1= new Image(); 
	  choice1.src="images/e_draw.jpg";
	  choice1c= new Image(); 
	  choice1c.src="images/e_drawc.jpg";
	  choice1o= new Image(); 
	  choice1o.src="images/e_drawo.jpg"; 
	
	  choice2= new Image(); 
	  choice2.src="images/e_block.jpg";
	  choice2c= new Image(); 
	  choice2c.src="images/e_blockc.jpg";
	  choice2o= new Image(); 
	  choice2o.src="images/e_blocko.jpg"; 
	  
	  choice3= new Image(); 
	  choice3.src="images/e_slider.jpg";
	  choice3c= new Image(); 
	  choice3c.src="images/e_sliderc.jpg";
	  choice3o= new Image(); 
	  choice3o.src="images/e_slidero.jpg"; 
	  
	  choiceBG = new Image();
	  choiceBG.src="images/e_bg.jpg";
	}
	 
	 function openSesame_BK() {
		pageState = 1;
		document.getElementById('beef').style.display = "none";
		document.getElementById('regMain_edds').style.backgroundImage = 'none';
		document.getElementById('slider_div').style.width = "0px";
		document.getElementById('slider_div').style.height = "0px";
		document.getElementById('block_div').style.display = "block";
		document.getElementById('instructions_edds').style.display = "block";
		document.getElementById('instructions_edds').innerHTML = "TOGGLE INSTRUCTIONS";
		load_BK();
		blockState = 1;
	 }
	 	 
	 function openSesame_SD() {
		pageState = 2;
		document.getElementById('beef').style.display = "none";
		document.getElementById('regMain_edds').style.backgroundImage = 'none';
		document.getElementById('slider_div').style.width = "800px";
		document.getElementById('slider_div').style.height = "425px";
		document.getElementById('block_div').style.display = "none";
		document.getElementById('instructions_edds').style.display = "block";
		document.getElementById('instructions_edds').innerHTML = "TOGGLE INSTRUCTIONS";
	 }
	 
	var markerList = [];
	 
	function createLabel(point, name) {
            var label = new ELabel(point, name, "labelStyle");
            return label;
     }
	 
	function flashDiv(divId, originalBG, state, duration, times) {
		if (state==1) {
			document.getElementById(divId).style.backgroundColor = '#FE6505';
		}
		else {
			document.getElementById(divId).style.backgroundColor = originalBG;
		}
		if (times>0) setTimeout("flashDiv('"+divId+"','"+originalBG+"',"+(1-state)+","+duration+","+(times-1)+");", duration);
	}
	 
	 // this is important for election block part. it is an array of subdistrict names
	
	var subZoneList;
	var selectedNames = [];
	var selectedZones = [];
	
	var blockButtSet = "<input type=\"button\" id=\"addZone\" value=\"add\" class=\"eButt\" onclick=\"addZone()\"><input type=\"button\" id=\"removeZone\"  class=\"eButt\" value=\"remove last\" onclick=\"removeZone()\">";
	var blockButtSet2 = "<input type=\"button\" id=\"addZone\" value=\"add\" class=\"eButt\" onclick=\"addZone()\"><input type=\"button\" id=\"removeZone\"  class=\"eButt\" value=\"remove last\" onclick=\"removeZone()\"><input type=\"button\" id=\"submitZone\"  class=\"eButt\" value=\"submit\" onclick=\"submitSZs()\">";
	var block_div_html = "<select id=\"subZoneList\" class=\"block\">";
	var block_div_added = "<div id=\"block_added\"></div>";
	
	var map_BK; 
	
	function initHandlers() {
	
		document.getElementById("instructions_edds").onclick = toggleHelp;
		document.getElementById("instructions_edds").onmouseover = function() {
			document.getElementById('instructions_edds').style.backgroundColor ='#FF6600';
			document.getElementById('instructions_edds').style.color ='#000000';
		}
		document.getElementById("instructions_edds").onmouseup = function() {
			document.getElementById('instructions_edds').style.color ='#000000';
		}
		document.getElementById("instructions_edds").onmouseout = function() {
			document.getElementById('instructions_edds').style.backgroundColor ='#DDDDDD';
			document.getElementById('instructions_edds').style.color ='#000000';
		}
		document.getElementById("instructions_edds").onmousedown = function() {
			document.getElementById('instructions_edds').style.color ='#FFFFFF';
		}
		document.getElementById("help1").onclick = closeHelp;
		document.getElementById("help2").onclick = closeHelp;
		document.getElementById('instructions_edds').style.display = 'none';
		document.getElementById('edds_desc2').onmouseover = function() {
			turnOn(2);
		}
		document.getElementById('edds_desc2').onmouseout = function() { 
			turnOff(2);
		}
		document.getElementById('edds_desc2').onmousedown = function() {
			downFlash(2);
		}
		document.getElementById('edds_desc2').onmouseup = function() {
			upFlash(2);
		}
		document.getElementById('edds_desc2').onclick = openSesame_BK;
		document.getElementById('edds_desc3').onmouseover = function(){
			turnOn(3);
		}
		document.getElementById('edds_desc3').onmouseout = function() {
			turnOff(3);
		}
		document.getElementById('edds_desc3').onmousedown = function() {
			downFlash(3);
		}
		document.getElementById('edds_desc3').onmouseup = function(){ 
			upFlash(3);
		}
		document.getElementById('edds_desc3').onclick = openSesame_SD;
	}
	
	function load_BK() {
      if (GBrowserIsCompatible()) {
               
        map_BK = new GMap2(document.getElementById("block_map"));
        map_BK.setCenter(new GLatLng(1.3518795527836271, 103.81942749023438), 11);  //Initialise map and set zoom to 11.
		map_BK.setMapType(G_HYBRID_MAP); //Change the type to Satellite images
		map_BK.addControl(new GLargeMapControl()); //Add in the map control
		map_BK.addControl(new GMapTypeControl()); //Add in the Map Type Trigger
		map_BK.disableDoubleClickZoom();
		map_BK.enableContinuousZoom();
		map_BK.enableScrollWheelZoom();
		
		GDownloadUrl("xml/points.xml", function(data, responseCode) {
         
          var xml = GXml.parse(data);
          var mm = new MarkerManager(map_BK);
          
          //get each subzone
          var subzones = xml.documentElement.getElementsByTagName("subzone");
          for (var i = 0; i < subzones.length; i++) 
          {
            //get point data from each subzone
            var points = subzones[i].getElementsByTagName("point");
            var poly = [];
            var markers = [];
            var bounds = new GLatLngBounds();
            
            //we need to order the array so that the polygon will form properly
            //insert 1st point into array
            for (var j = 0; j < points.length; j++) 
            {
                var point = new GLatLng(parseFloat(points[j].getAttribute("lat")),
                                            parseFloat(points[j].getAttribute("lng")));
                bounds.extend(point);
                poly.push(point);
             }//for
            
             var line = new GPolygon(poly,'#FFFFFF', 2, 1,'#0000FF',0.2);
             map_BK.addOverlay(line);
             
              var center = new GLatLng(
                (bounds.getSouthWest().lat() + bounds.getNorthEast().lat()) / 2.,
                (bounds.getSouthWest().lng() + bounds.getNorthEast().lng()) / 2.
             );
                
             var subzoneName = subzones[i].getAttribute("name");
             var labelList = createLabel(center, subzoneName);
             //map_BK.addOverlay(labelList);   
             markers.push(labelList);
             mm.addMarkers(markers,13); //markers will only display at zoom > 13
          }
          //mm.refresh();
        });
       
      }
	  setTimeout("doremi(2,2);",5000);
    }//end of function
	
	function doremi(total, sequence) {
		flashDiv('navi'+(total-sequence+1), '#000000', 0, 500, 2);
		if (sequence>1) setTimeout("doremi("+total+","+(sequence-1)+");",500);
	}
	
	function switch_BK() {
		pageState = 1;
		if (blockState == 0) {
			openSesame_BK();
			blockState = 1;
			return;
		}
		else if (blockState == 2) {
			document.getElementById('block_div').style.display = "block";
			document.getElementById('slider_div').style.width = "0px";
			document.getElementById('slider_div').style.height = "0px";
			enableInstructionsBar();
			disableResults();
			map_BK.clearOverlays();
			document.getElementById('block_map').style.width = '800px';
			document.getElementById('block_list').style.display = "block";
			document.getElementById('help1').style.display = "block";
			map_BK.checkResize();
			map_BK.setCenter(new GLatLng(1.3518795527836271, 103.81942749023438), 11);  //Initialise map and set zoom to 11.
			GDownloadUrl("xml/points.xml", function(data, responseCode) {
			 
			  var xml = GXml.parse(data);
			  var mm = new MarkerManager(map_BK);
			  
			  //get each subzone
			  var subzones = xml.documentElement.getElementsByTagName("subzone");
			  for (var i = 0; i < subzones.length; i++) 
			  {
				//get point data from each subzone
				var points = subzones[i].getElementsByTagName("point");
				var poly = [];
				var markers = [];
				var bounds = new GLatLngBounds();
				
				//we need to order the array so that the polygon will form properly
				//insert 1st point into array
				for (var j = 0; j < points.length; j++) 
				{
					var point = new GLatLng(parseFloat(points[j].getAttribute("lat")),
												parseFloat(points[j].getAttribute("lng")));
					bounds.extend(point);
					poly.push(point);
				 }//for
				
				 var line = new GPolygon(poly,'#FFFFFF', 2, 1,'#0000FF',0.2);
				 map_BK.addOverlay(line);
				 
				  var center = new GLatLng(
					(bounds.getSouthWest().lat() + bounds.getNorthEast().lat()) / 2.,
					(bounds.getSouthWest().lng() + bounds.getNorthEast().lng()) / 2.
				 );
					
				 var subzoneName = subzones[i].getAttribute("name");
				 var labelList = createLabel(center, subzoneName);
				 //map_BK.addOverlay(labelList);   
				 markers.push(labelList);
				 mm.addMarkers(markers,14,17); //markers will only display at zoom >16
			  }
			  
			  //mm.refresh();
			});
			blockState = 1;
			return;
		}
		if (selectedZones.length>=1) {
			selectedZones = [];
			selectedNames = [];
			var addedHTML = "";
			for (var i=0; i<selectedZones.length; i++) {
				addedHTML += selectedNames[i] + "<br />";	
			}
			if (selectedZones.length>1) document.getElementById('block_list').innerHTML = block_div_html+blockButtSet2+block_div_added;
			else document.getElementById('block_list').innerHTML = block_div_html+blockButtSet+block_div_added;
			document.getElementById('block_added').innerHTML = addedHTML;
		}
		document.getElementById('beef').style.display = "none";
		document.getElementById('regMain_edds').style.backgroundImage = 'none';
		document.getElementById('slider_div').style.width = "0px";
		document.getElementById('slider_div').style.height = "0px";
		document.getElementById('block_div').style.display = "block";
		document.getElementById('instructions_edds').style.display = "block";
		document.getElementById('instructions_edds').innerHTML = "TOGGLE INSTRUCTIONS";
		map_BK.setCenter(new GLatLng(1.3518795527836271, 103.81942749023438), 11);  //Initialise map and set zoom to 11.
		blockState = 1;
	}
	
	function loadBlockList() {
		
		s.getSubZoneNames(function(response) { 
			var xml = GXml.parse(response.result);
			var subzone = xml.documentElement.getElementsByTagName("SubZone");
			for (var i=0; i<subzone.length; i++) {
				block_div_html += "<option value=\""+subzone[i].getAttribute("ID")+"\">"+subzone[i].getAttribute("Name")+"</option>";
			}
			block_div_html += "</select><br />";
			document.getElementById('block_list').innerHTML = block_div_html+blockButtSet+block_div_added;
		 });
		
	}
	
	var tempHTML = '';
	
	function addZone() {
		
		var szl = document.getElementById('subZoneList');
		var addID = szl.options[szl.selectedIndex].value;
		var addName = szl.options[szl.selectedIndex].text;
		for (var i=0; i<selectedZones.length; i++) {
			if (selectedZones[i]==addID) {
				if (tempHTML=='') tempHTML = document.getElementById('block_added').innerHTML;
				document.getElementById('block_added').innerHTML = '<span class="errorText">Error: Subzone '+addName+' has already been added. Please try another subzone.</span><br /><br />'+tempHTML;
				return;
			}
		}
		if (selectedZones.length==0) {
			selectedZones.push(addID);
			selectedNames.push(addName);
			document.getElementById('block_added').innerHTML = selectedNames[0];
		}
		else {
			selectedZones.push(addID);
			s.checkContiguity(selectedZones.toString(), function(response) {
				if (response.result=="true") {
					tempHTML = '';
					selectedNames.push(addName);
					var addedHTML = "";
					for (var i=0; i<selectedZones.length; i++) {
						addedHTML += selectedNames[i] + "<br />";	
					}
					document.getElementById('block_list').innerHTML = block_div_html+blockButtSet2+block_div_added;
					document.getElementById('block_added').innerHTML = addedHTML;
				} else {
					selectedZones.pop();
					if (tempHTML=='') tempHTML = document.getElementById('block_added').innerHTML;
					document.getElementById('block_added').innerHTML = '<span class="errorText">Error: Please select sub-zones that are adjacent.</span><br /><br />'+tempHTML;
				}
			
			});
		}
	}
	
	function removeZone() {
		if (selectedZones.length>=1) {
			selectedZones.pop();
			selectedNames.pop();
			var addedHTML = "";
			for (var i=0; i<selectedZones.length; i++) {
				addedHTML += selectedNames[i] + "<br />";	
			}
			if (selectedZones.length>1) document.getElementById('block_list').innerHTML = block_div_html+blockButtSet2+block_div_added;
			else document.getElementById('block_list').innerHTML = block_div_html+blockButtSet+block_div_added;
			document.getElementById('block_added').innerHTML = addedHTML;
		}
	}
	
	function submitSZs() {
		var ctr = map_BK.getCenter();
		document.getElementById('block_list').style.display = "none";
		document.getElementById('help1').style.display = "none";
		document.getElementById('block_map').style.width = '500px';
		map_BK.checkResize();
		map_BK.setCenter(ctr);
		s.submitBlocks(selectedZones.toString(), function(response) { 
			  var xml = GXml.parse(response.result);
			  var mm = new MarkerManager(map_BK);
			  var custom = [];
			  
			  // variables for result display
				var age19 = 0;
				var age29 = 0;
				var age39 = 0;
				var age49 = 0;
				var age50 = 0;
				var c = 0;
				var m = 0;
				var ind = 0;
				var o = 0;
				var male1 = 0;
				var female1 = 0;
				var rm2 = 0;
				var rm3 = 0;
				var rm4 = 0;
				var rm5 = 0;
				var condo1 = 0;
				var landed1 = 0;
				  
				  //get each subzone
				  var subzones = xml.documentElement.getElementsByTagName("subzone");
				  for (var i = 0; i < subzones.length; i++) 
				  {
					//get point data from each subzone
					var points = subzones[i].getElementsByTagName("point");
					var poly = [];
					var bounds = new GLatLngBounds();
					var markers = [];
					
				  
					
						//we need to order the array so that the polygon will form properly
						//insert 1st point into array
						for (var j = 0; j < points.length; j++) 
						{
							var point = new GLatLng(parseFloat(points[j].getAttribute("lat")),
														parseFloat(points[j].getAttribute("lng")));
							bounds.extend(point);
							poly.push(point);
						 }//for
						 
						
						 var line = new GPolygon(poly,'#FFFFFF', 2, 1,'#0000FF',0.5);
						 map_BK.addOverlay(line);    
						 var center = new GLatLng(
							(bounds.getSouthWest().lat() + bounds.getNorthEast().lat()) / 2.,
							(bounds.getSouthWest().lng() + bounds.getNorthEast().lng()) / 2.
						 );
						 
						 var subzoneName = subzones[i].getAttribute("name");
						 
						 var labelList = createLabel(center, subzoneName);
						 map_BK.addOverlay(labelList); 
						 
						 // commence data extraction and calculations for table

						 //Demographic Data - Age
                        var grp_1 = parseFloat(subzones[i].getAttribute("grp_1"));
                        var grp_2 = parseFloat(subzones[i].getAttribute("grp_2"));
                        var grp_3 = parseFloat(subzones[i].getAttribute("grp_3"));
                        var grp_4 = parseFloat(subzones[i].getAttribute("grp_4"));
                        age19 = age19 + grp_1 + grp_2 + grp_3 + grp_4;

                        var grp_5 = parseFloat(subzones[i].getAttribute("grp_5"));
                        var grp_6 = parseFloat(subzones[i].getAttribute("grp_6"));
                        age29 = age29 + grp_5 + grp_6;

                        var grp_7 = parseFloat(subzones[i].getAttribute("grp_7"));
                        var grp_8 = parseFloat(subzones[i].getAttribute("grp_8"));
                        age39 = age39 + grp_7 + grp_8;

                        var grp_9 = parseFloat(subzones[i].getAttribute("grp_9"));
                        var grp_10 = parseFloat(subzones[i].getAttribute("grp_10"));
                        age49 = age49 + grp_9 + grp_10;

                        var grp_11 = parseFloat(subzones[i].getAttribute("grp_11"));
                        var grp_12 = parseFloat(subzones[i].getAttribute("grp_12"));
                        var grp_13 = parseFloat(subzones[i].getAttribute("grp_13"));
                        var grp_14 = parseFloat(subzones[i].getAttribute("grp_14"));
                        age50 = age50 + grp_11 + grp_12 + grp_13 + grp_14;

                        //Demographic Data - Race and Gender
                        var male = parseFloat(subzones[i].getAttribute("Male"));
                        var female = parseFloat(subzones[i].getAttribute("Female"));
                        var chinese = parseFloat(subzones[i].getAttribute("Chinese"));
                        var malay = parseFloat(subzones[i].getAttribute("Malay"));
                        var indian = parseFloat(subzones[i].getAttribute("Indian"));
                        var others = parseFloat(subzones[i].getAttribute("Others"));

                        c = c + chinese;
                        m = m + malay;
                        ind = ind + indian;
                        o = o + others;

                        male1 = male1 + male;
                        female1 = female1 + female;

                        //Demographic Data - Housing
                        var two_rm = parseFloat(subzones[i].getAttribute("Two_Rm"));
                        var three_rm = parseFloat(subzones[i].getAttribute("Three_Rm"));
                        var four_rm = parseFloat(subzones[i].getAttribute("Four_Rm"));
                        var five_rm = parseFloat(subzones[i].getAttribute("Five_Rm"));
                        var condo = parseFloat(subzones[i].getAttribute("Condo"));
                        var landed = parseFloat(subzones[i].getAttribute("Landed"));
                        var house_others = parseFloat(subzones[i].getAttribute("House_Other"));

                        rm2 = rm2 + two_rm;
                        rm3 = rm3 + three_rm;
                        rm4 = rm4 + four_rm;
                        rm5 = rm5 + five_rm;
                        condo1 = condo1 + condo;
                        landed1 = landed1 + landed;
					}//for
					
					var rm3_1 = (rm2 + rm3);
                    var rm5_1 = (rm4 + rm5);
					
					var maxBar = 134;
					
					document.getElementById('race_c_n').innerHTML = c;
					document.getElementById('race_c_b1').style.width = c/(c+m+ind+o)*maxBar + 'px';
					
					document.getElementById('race_m_n').innerHTML = m;
					document.getElementById('race_m_b1').style.width = m/(c+m+ind+o)*maxBar + 'px';
					
					document.getElementById('race_i_n').innerHTML = ind;
					document.getElementById('race_i_b1').style.width = ind/(c+m+ind+o)*maxBar + 'px';
					
					document.getElementById('race_o_n').innerHTML = o;
					document.getElementById('race_o_b1').style.width = o/(c+m+ind+o)*maxBar + 'px';
					
					document.getElementById('gender_m_n').innerHTML = male1;
					document.getElementById('gender_m_b1').style.width = male1/(male1+female1)*maxBar + 'px';
					
					document.getElementById('gender_f_n').innerHTML = female1;
					document.getElementById('gender_f_b1').style.width = female1/(male1+female1)*maxBar + 'px';
					
					document.getElementById('age_below19_n').innerHTML = age19;
					document.getElementById('age_below19_b1').style.width = age19/(age19+age29+age39+age49+age50)*maxBar + 'px';
					
					document.getElementById('age_2029_n').innerHTML = age29;
					document.getElementById('age_2029_b1').style.width = age29/(age19+age29+age39+age49+age50)*maxBar + 'px';
					
					document.getElementById('age_3039_n').innerHTML = age39;
					document.getElementById('age_3039_b1').style.width = age39/(age19+age29+age39+age49+age50)*maxBar + 'px';
					
					document.getElementById('age_4049_n').innerHTML = age49;
					document.getElementById('age_4049_b1').style.width = age49/(age19+age29+age39+age49+age50)*maxBar + 'px';
					
					document.getElementById('age_above50_n').innerHTML = age50;
					document.getElementById('age_above50_b1').style.width = age50/(age19+age29+age39+age49+age50)*maxBar + 'px';
					
					document.getElementById('housing_below3_n').innerHTML = rm3_1;
					document.getElementById('housing_below3_b1').style.width = rm3_1/(rm3_1+rm5_1+condo1+landed1)*maxBar + 'px';
					
					document.getElementById('housing_45_n').innerHTML = rm5_1;
					document.getElementById('housing_45_b1').style.width = rm5_1/(rm3_1+rm5_1+condo1+landed1)*maxBar + 'px';
					
					document.getElementById('housing_condo_n').innerHTML = condo1;
					document.getElementById('housing_condo_b1').style.width = condo1/(rm3_1+rm5_1+condo1+landed1)*maxBar + 'px';
					
					document.getElementById('housing_landed_n').innerHTML = landed1;
					document.getElementById('housing_landed_b1').style.width = landed1/(rm3_1+rm5_1+condo1+landed1)*maxBar + 'px';
					
                    var total_rm = rm3_1 + rm5_1 + condo1 + landed1;
                    var per_rm2 = 0.438 * (rm2 / total_rm);
                    var per_rm3 = 0.7020 * (rm3 / total_rm);
                    var per_rm5 = 0.9710 * (rm5 / total_rm);
                    var per_con = 0.5610 * (condo1 / total_rm);
                    var per_lan = 0.7000 * (landed1 / total_rm);
                    var per_rm4 = rm4 / total_rm;

                    var pap_vote = (((0.25 + per_rm2 + per_rm3 + per_rm5 + per_con) - per_lan)*100).toFixed(2);
					var oppo_vote = (100 - pap_vote).toFixed(2);
					
                    document.getElementById('block_votes').innerHTML = "PAP: " + pap_vote + "% / Opposition: " + oppo_vote + "%";
				
		});
		if (selectedZones.length>=1) {
			selectedZones = [];
			selectedNames = [];
			var addedHTML = "";
			for (var i=0; i<selectedZones.length; i++) {
				addedHTML += selectedNames[i] + "<br />";	
			}
			if (selectedZones.length>1) document.getElementById('block_list').innerHTML = block_div_html+blockButtSet2+block_div_added;
			else document.getElementById('block_list').innerHTML = block_div_html+blockButtSet+block_div_added;
			document.getElementById('block_added').innerHTML = addedHTML;
		}
		disableInstructionsBar();
		enableResults();
		blockState = 2;
	}
	
	function disableInstructionsBar() {
		document.getElementById('instructions_edds').style.display = "none";
		document.getElementById('greyInstructions_edds').style.display = "block";
	}
	
	function enableInstructionsBar() {
		document.getElementById('instructions_edds').style.display = "block";
		document.getElementById('greyInstructions_edds').style.display = "none";
	}
	
	function enableResults() {
		document.getElementById('block_results').style.display = "block";
	}
	
	function disableResults() {
		document.getElementById('block_results').style.display = "none";
	}
	
	function turnOn(num) {
		if (num==1) {
			document.getElementById('edds_desc'+num).style.backgroundImage = 'url(images/e_drawo.jpg)'; 
			document.getElementById('edds_desc_text').innerHTML = 'Draw your own electoral district to your own imagination. Election results will be predicted based on your newly drawn electoral district.';
			document.getElementById('edds_window').innerHTML = '<img src="images/e_spread'+num+'.jpg" />';
		}
		else if (num==2) {
			document.getElementById('edds_desc'+num).style.backgroundImage = 'url(images/e_blocko.jpg)'; 
			document.getElementById('edds_desc_text').innerHTML = 'Merge two or more DGP Sub Zones to predict election results of the combined larger electoral district.';
			document.getElementById('edds_window').innerHTML = '<img src="images/e_spread'+num+'.jpg" />';
		}
		else if (num==3) {
			document.getElementById('edds_desc'+num).style.backgroundImage = 'url(images/e_slidero.jpg)'; 
			document.getElementById('edds_desc_text').innerHTML = 'Explore how election results may vary based solely on non-geographic demographic variables in our interactive slider interface.';
			document.getElementById('edds_window').innerHTML = '<img src="images/e_spread'+num+'.jpg" />';
		}
	}
	
	function turnOff(num) {
		if (num==1) {
			document.getElementById('edds_desc'+num).style.backgroundImage = 'url(images/e_draw.jpg)'; 
			document.getElementById('edds_desc_text').innerHTML = '';
			document.getElementById('edds_window').innerHTML = '<img src="images/e_spread.jpg" />';
		}
		else if (num==2) {
			document.getElementById('edds_desc'+num).style.backgroundImage = 'url(images/e_block.jpg)'; 
			document.getElementById('edds_desc_text').innerHTML = '';
			document.getElementById('edds_window').innerHTML = '<img src="images/e_spread.jpg" />';
		}
		else if (num==3) {
			document.getElementById('edds_desc'+num).style.backgroundImage = 'url(images/e_slider.jpg)'; 
			document.getElementById('edds_desc_text').innerHTML = '';
			document.getElementById('edds_window').innerHTML = '<img src="images/e_spread.jpg" />';

		}
	}
	
	function downFlash(num) {
		if (num==1) {
			document.getElementById('edds_desc'+num).style.backgroundImage = 'url(images/e_drawc.jpg)'; 
		}
		else if (num==2) {
			document.getElementById('edds_desc'+num).style.backgroundImage = 'url(images/e_blockc.jpg)'; 
		}
		else if (num==3) {
			document.getElementById('edds_desc'+num).style.backgroundImage = 'url(images/e_sliderc.jpg)'; 
		}
	}
	
	function upFlash(num) {
		if (num==1) {
			document.getElementById('edds_desc'+num).style.backgroundImage = 'url(images/e_draw.jpg)'; 
		}
		else if (num==2) {
			document.getElementById('edds_desc'+num).style.backgroundImage = 'url(images/e_block.jpg)'; 
		}
		else if (num==3) {
			document.getElementById('edds_desc'+num).style.backgroundImage = 'url(images/e_slider.jpg)'; 
		}
	}
	
	// end Election block
	
	var helpSwitch1 = 1; // help switches for block
	var helpSwitch2 = 1; // for slider
	
	function toggleHelp() {
		var onOff;
		eval('onOff = (helpSwitch'+pageState+'==0);');
		if (onOff) document.getElementById('help'+pageState).style.display = 'block';
		else document.getElementById('help'+pageState).style.display = 'none';
		eval('helpSwitch'+pageState+' = 1 - helpSwitch'+pageState+';');
	}
	
	function closeHelp() {
		document.getElementById('help'+pageState).style.display = 'none';
		eval('helpSwitch'+pageState+' = 0;');
	}