$("#toogle-ani").css("visibility", "visible");

//turn off all animation layers
var turnOffall = function(){
  map.removeLayer(Date_WMS1);
  $('#image1').prop('checked', false);

  map.removeLayer(Date_WMS2);
  $('#image2').prop('checked', false);

  map.removeLayer(Date_WMS3);
  $('#image3').prop('checked', false);

  map.removeLayer(Date_WMS4);
  $('#image4').prop('checked', false);

  map.removeLayer(Date_WMS5);
  $('#image5').prop('checked', false) ;
}

//start animation
var doAnimate;
$("input[value=doAnimate]").click(function( event ) {
  if(doAnimate){
    doAnimate = false;
  }else{
    doAnimate = true;
    map.addLayer(Date_WMS1);
    $('#image1').prop('checked', true);
  }

  cnt=1;
  maxCnt=5;

//animation (yes a bit of a hack)
  (function next() {
      if (!doAnimate) return;
      setTimeout(function() {
            if(cnt===1){
              turnOffall();
              map.addLayer(Date_WMS1);
              $('#image1').prop('checked', true);
            }
            if(cnt===2){
              turnOffall();
              map.addLayer(Date_WMS2);
              $('#image2').prop('checked', true);
            }
            if(cnt===3){
              turnOffall();
              map.removeLayer(Date_WMS1);
              $('#image3').prop('checked', true);
            }
            if(cnt===4){
              turnOffall();
              map.addLayer(Date_WMS4)
              $('#image4').prop('checked', true);
            }
            if(cnt===5){
              turnOffall();
              map.addLayer(Date_WMS5);
              $('#image5').prop('checked', true);
            }
            cnt++;
            if(cnt===maxCnt+1){
              cnt=1
            }
          next();
      }, 3500);
  })();
});

@@ -45,169 +45,224 @@
 );%0A%0A
-//turn off all animation layers%0Avar turnOffall = function()%7B%0A  map.removeLayer(Date_WMS1);%0A  $('#image1').prop('checked', false);%0A%0A  map.removeLayer(Date_WMS2);%0A
+var cnt=1;%0Avar maxCnt=5;%0A%0A//set speed in seconds%0Avar seconds = 3.5%0Avar millSeconds = seconds * 1000;%0A%0A//turn off all animation layers%0Avar turnOffall = function()%7B%0A  for(var i = 1; i %3C= maxCnt; i++)%7B%0A%0A    //uncheck%0A  
   $(
@@ -260,34 +260,35 @@
 ck%0A    $('#image
-2
 '
++i
 ).prop('checked'
@@ -301,218 +301,123 @@
 e);%0A
-%0A  map.removeLayer(Date_WMS3);%0A  $('#image3').prop('checked', false);%0A%0A  map.
+    //get layer%0A    var mapLayer = overlayMaps%5B'datewms' + i%5D%0A    //
 remove
-L
+ l
 ayer
-(Date_WMS4);%0A  $('#image4').prop('checked', false);%0A%0A  map.removeLayer(Date_WMS5);%0A  $('#image5').prop('checked', false) ;
+%0A    map.removeLayer(mapLayer);%0A  %7D
 %0A%7D%0A%0A
@@ -556,29 +556,39 @@
 se%7B%0A
+%0A
     
-doAnimate = true;
+//do first image imediatly
 %0A   
@@ -657,68 +657,99 @@
 e);%0A
+%0A
   
-%7D%0A%0A  cnt=1;%0A  maxCnt=5;%0A%0A//animation (yes a bit of a hack)
+  //start animation in millSeconds%0A    doAnimate = true;%0A    cnt++;%0A  %7D%0A%0A%0A%0A  //animation
 %0A  (
@@ -796,16 +796,17 @@
 return;%0A
+%0A
       se
@@ -839,191 +839,38 @@
     
-    if(cnt===1)%7B%0A              turnOffall();%0A              map.addLayer(Date_WMS1);%0A              $('#image1').prop('checked', true);%0A            %7D%0A            if(cnt===2)%7B%0A  
+//turn all layers off%0A
         
     
@@ -857,36 +857,32 @@
 ers off%0A        
-    
 turnOffall();%0A  
@@ -875,32 +875,33 @@
 rnOffall();%0A
+%0A
         
       map.ad
@@ -892,204 +892,42 @@
     
-      map.addLayer(Date_WMS2);%0A              $('#image2').prop('checked', true);%0A            %7D%0A            if(cnt===3)%7B%0A              turnOffall();%0A              map.removeLayer(Date_WMS1);%0A      
+//turn on and check current layer%0A
     
@@ -943,10 +943,13 @@
 mage
-3
 '
++cnt
 ).pr
@@ -981,228 +981,52 @@
     
-    %7D%0A            if(cnt===4)%7B%0A              turnOffall();%0A              map.addLayer(Date_WMS4)%0A              $('#image4').prop('checked', true);%0A            %7D%0A            if(cnt===5)%7B%0A              turnOffall();%0A      
+var mapLayer = overlayMaps%5B'datewms' + cnt%5D%0A
     
@@ -1046,17 +1046,16 @@
 yer(
-Date_WMS5
+mapLayer
 );%0A 
@@ -1065,49 +1065,25 @@
     
-      $('#image5').prop('checked', true);
+//increment count
 %0A   
@@ -1079,37 +1079,39 @@
 t count%0A        
-    %7D
+cnt++;%0A
 %0A            cnt
@@ -1107,23 +1107,26 @@
     
-    cnt++;%0A    
+//reset if at max%0A
     
@@ -1159,20 +1159,16 @@
         
-    
 cnt=1%0A  
@@ -1177,16 +1177,11 @@
     
-    %7D%0A  
+%7D%0A%0A
     
@@ -1205,12 +1205,19 @@
  %7D, 
-3500
+millSeconds
 );%0A 

improve animation script