# HG changeset patch
# User sl
# Date 1397043689 -7200
# Node ID a1483545da3521fcae134c962ce42fe03fded7da
# Parent  5ecce0e1ef52db267913e832951a2f04d500ee00
Rectangle overlay params:
Fixing duplicate first rectangle entry due to our guery strings parsing.
Adding 'a' URL parameter to control rectangle fill opacity.
Adding support to pass in color as hexa using %23 URL encoding.

diff -r 5ecce0e1ef52 -r a1483545da35 rectangle-overlay-params.html
--- a/rectangle-overlay-params.html	Wed Apr 09 12:36:39 2014 +0200
+++ b/rectangle-overlay-params.html	Wed Apr 09 13:41:29 2014 +0200
@@ -39,7 +39,10 @@
        */
       function init() {
 	  
+		//window.alert("Init called");
+	  
 	  	var qs = GetQueryString();
+		//qs = decodeURIComponent(qs);
 		
 		//Set map width if specified
 		if (!(typeof qs.width === "undefined"))	{
@@ -61,13 +64,14 @@
 					<li>\'n\' for northernmost latitude.</li>\
 					<li>\'e\' for easternmost longitude.</li>\
 					<li>\'w\' for westernmost longitude.</li>\
-					<li>\'c\' Specify a <a href="http://www.w3schools.com/cssref/css_colornames.asp">color name</a> for your rectangles.</li>\
+					<li>\'c\' Specify a <a href="http://www.w3schools.com/cssref/css_colornames.asp">color name</a> or value (use %23FFFFFF for white) for your rectangles.</li>\
+					<li>\'a\' Specify alpha opacity of your rectangle fill, it should be between 1 and 0. For instance 0.5 makes it half transparent.</li>\
 					<li>\'width\' Map width in pixels, default is 1200.</li>\
 					<li>\'height\' Map heigh in pixels, default is 800.</li>\
 					</ul>\
 					You can specify any number of rectangles.<br />\
 					Map will be centered on the first rectangle.<br />\
-					Click <a href="rectangle-overlay-params.html?w=8.619000&n=50.134350&e=8.714110&s=50.091180&w=8.657227&n=50.119630&e=8.673706&s=50.108644&w=8.652547&n=50.109318&e=8.658400&s=50.105320&c=black&c=red&c=green">here</a> for an example.';
+					Click <a href="rectangle-overlay-params.html?w=8.619000&n=50.134350&e=8.714110&s=50.091180&w=8.657227&n=50.119630&e=8.673706&s=50.108644&w=8.652547&n=50.109318&e=8.658400&s=50.105320&c=black&c=%23FF0000&c=green&a=0.3&a=0.75&c=0.5">here</a> for an example.';
 
 			//Still display the map
 			map = new google.maps.Map(document.getElementById('map'), {
@@ -92,12 +96,19 @@
           'mapTypeId': google.maps.MapTypeId.ROADMAP
         });
 
+		//window.alert(qs.s.length);
         
 		//Create all our rectangles
-		rectangles = []; //Create rentangles array
+		rectangles = []; //Create rectangles array
 		for (var i = 0; i < qs.s.length; i++) {
-		rectangles.push(new google.maps.Rectangle({map: map,fillColor: (typeof qs.c === "undefined" || typeof qs.c[i] === "undefined"?'#666666':qs.c[i]) }));
-		//window.alert(qs.c[i]);
+		rectangles.push(new google.maps.Rectangle({	map: map,
+													fillColor: (typeof qs.c === "undefined" || typeof qs.c[i] === "undefined"?'#666666':decodeURIComponent(qs.c[i])),
+													fillOpacity: (typeof qs.a === "undefined" || typeof qs.a[i] === "undefined"?'0.2':decodeURIComponent(qs.a[i])),
+													strokeColor: (typeof qs.c === "undefined" || typeof qs.c[i] === "undefined"?'#666666':decodeURIComponent(qs.c[i])),
+													strokeOpacity: 1.0,
+													strokeWeight: 1
+													}));
+		//window.alert(decodeURIComponent(qs.c[i]));
 		}
 		
         redraw();
@@ -106,7 +117,7 @@
       /**
        * Updates the Rectangle's bounds to resize its dimensions.
        */
-      function redraw() {
+      function redraw() {	  
 	    var qs = GetQueryString();
 		for (var i = 0; i < qs.s.length; i++) {		
         var latLngBounds = new google.maps.LatLngBounds(
@@ -125,14 +136,18 @@
 	  var query_string = {};
 	  var query = window.location.search.substring(1);
 	  var vars = query.split("&");
-	  for (var i=0;i<vars.length;i++) {
+	  //window.alert("URL param count: " + vars.length);
+	  for (var i=0;i<vars.length;i++) {	  
 		var pair = vars[i].split("=");
 			// If first entry with this name
 		if ((typeof query_string[pair[0]] === "undefined") ) {
-		  query_string[pair[0]] = pair[1];
- 		  var arr = [ query_string[pair[0]], pair[1] ];
+		  //Instantiate an array for that parameter
+ 		  var arr = [ pair[1] ];
 		  query_string[pair[0]] = arr;
+		  //window.alert("Create param '" + pair[0] + "' with value: " + pair[1]);
 		} else {
+		  //Add a value to our existing parameter array
+		  //window.alert("Add param '" + pair[0] + "' with value: " + pair[1]);
 		  query_string[pair[0]].push(pair[1]);
 		}
 	  }