# HG changeset patch
# User sl
# Date 1397066116 -7200
# Node ID b014e6b2a9e21d8c5a79f2b2766ff012df9ea5fc
# Parent  a1483545da3521fcae134c962ce42fe03fded7da
Rectangle overlay params:
Adding basic animation support

diff -r a1483545da35 -r b014e6b2a9e2 rectangle-overlay-params.html
--- a/rectangle-overlay-params.html	Wed Apr 09 13:41:29 2014 +0200
+++ b/rectangle-overlay-params.html	Wed Apr 09 19:55:16 2014 +0200
@@ -55,6 +55,24 @@
 			document.getElementById('map').style.height=qs.height[0].concat("px");	
 			//window.alert("height");
 		}
+
+		var animation=false;
+		if (!(typeof qs.anim === "undefined"))	{
+			animation=true;
+			//window.alert("Using animation mode");
+		}		
+
+		var intervalInMs=3000; //default to n seconds
+		if (!(typeof qs.interval === "undefined"))	{
+			intervalInMs=qs.interval[0];
+			//window.alert("Interval: " + intervalInMs + " ms");
+		}
+
+		var step=1; //default to n seconds
+		if (!(typeof qs.step === "undefined"))	{
+			step=qs.step[0];
+			//window.alert("Step: " + step);
+		}
 		
 		//Display help if expected parameters are not specified
 		if ( typeof qs.s === "undefined" || typeof qs.w === "undefined" || typeof qs.n === "undefined" || typeof qs.e === "undefined") {
@@ -83,9 +101,9 @@
 			return;
 		}
 		
-
-		
-        var latLngBounds = new google.maps.LatLngBounds(
+		//We are not displaying help
+		//Init our map position and zoom
+		var latLngBounds = new google.maps.LatLngBounds(
           new google.maps.LatLng(qs.s[0], qs.w[0]),
           new google.maps.LatLng(qs.n[0], qs.e[0])
         );
@@ -95,38 +113,63 @@
           'center': new google.maps.LatLng(latLngBounds.getCenter().lat(),latLngBounds.getCenter().lng()),
           'mapTypeId': google.maps.MapTypeId.ROADMAP
         });
-
-		//window.alert(qs.s.length);
-        
-		//Create all our rectangles
+				
+		if (!animation) {
+			//We are not doing animation so just display all our rectangles
+			//window.alert(qs.s.length);        
+			//Create all our rectangles
+			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':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,
+														bounds: new google.maps.LatLngBounds(
+														new google.maps.LatLng(qs.s[i], qs.w[i]),
+														new google.maps.LatLng(qs.n[i], qs.e[i]))
+														}));
+			//window.alert(decodeURIComponent(qs.c[i]));		
+			}
+		}
+		else {
+		var currentRect=0;
 		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':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]));
+		//We are doing an animation so just setup our timer
+		var animTimer=setInterval(function(){
+					//alert("Hello");
+					if ((currentRect+step)<qs.s.length) {
+					//We are still in range, display our rect
+					for (var i=currentRect; i<(currentRect+step); 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,
+												bounds: new google.maps.LatLngBounds(
+												new google.maps.LatLng(qs.s[i], qs.w[i]),
+												new google.maps.LatLng(qs.n[i], qs.e[i]))
+												}));
+						}
+					}
+					else {
+					//Not in range, go back to 0
+					currentRect=0;
+					//Stop interval for now
+					window.clearInterval(animTimer);
+					return;
+					}
+					//Move on to next frame					
+					currentRect+=step;
+					},
+					intervalInMs);
+		
 		}
-		
-        redraw();
       }
       
-      /**
-       * Updates the Rectangle's bounds to resize its dimensions.
-       */
-      function redraw() {	  
-	    var qs = GetQueryString();
-		for (var i = 0; i < qs.s.length; i++) {		
-        var latLngBounds = new google.maps.LatLngBounds(
-          new google.maps.LatLng(qs.s[i], qs.w[i]),
-          new google.maps.LatLng(qs.n[i], qs.e[i])
-        );
-        rectangles[i].setBounds(latLngBounds);
-		}
-      }
+
 	  
   /** 
    * This function is anonymous, is executed immediately and