$(document).ready(function () {

   /* startwert wenn kein ort ausgewehlt ist */
   var sel = 0 ; 
   var place_id_start = "berlin";
   var play = false;
   var timer = 0;

   /* voreinstellung aus url "#berlin" */
   for ($i=0; $i<$anim.length; $i++) {

      if (window.location.hash == "#" + $anim[$i]["id"]) {
         place_id_start = window.location.hash;
         sel = $i;
      }
   }

   /* dropdownbox placenames */
   selectPlaceHtml = "";
   for ($i=0; $i<$anim.length; $i++) {
 
      selected = "";
      if (sel == $i) selected = " selected";
   
      selectPlaceHtml += '<option value="' + $anim[$i]["id"] + '"' + selected + '>'
                        + $anim[$i]["name"][lang]
                        + '</option>';
   }
   $("#selectPlace").html(selectPlaceHtml);

   /* #gallery */
   var abc = new Array();
   var abcAnz;
   fillAbc();
   initializeSlider();

   /* beschriftung */
   fillPlacename(abcAnz);   
   fillSliderdate();

   /* event change placename */
   $("#selectPlace").change(function() {

      selVal = $(this).val();
      for ($i=0; $i<$anim.length; $i++) {
         if (selVal == $anim[$i]["id"]) {
            sel = $i;
         }
      }

      window.location.hash = "#" + selVal;
      fillAbc();
      initializeSlider();
      
      // $("#gallery").html(abc[abcAnz]);

      /* slider an die richtige Stelle positionieren */
      $(".slider").slider("moveTo",500);
      timer = 0;
      play = false;

      /* beschriftung */
      fillPlacename(abcAnz);   
      fillSliderdate();
   });



   /* event click play/pause button */
   $("#play").click(function() {
      
      // pause
      if (play) {
         play = false;
         $(this).attr({ value: "play"});
      }

      // play
      else { 
         play = true;
         $(this).attr({ value: "pause" });
         animateSlider();
      }

   });


   function animateSlider() {

      if (timer < 500) { 
         timer += 125/abcAnz;
      }
      else {
         timer = 0;
      }

      $(".slider").slider("moveTo",timer)
         .animate({opacity: 1.0}, 300, function() {

            if ((timer < 500) && (play)) {
                  animateSlider();
            }
            else {
               $("#play").attr({value: "play"});
               play = false;
            }
         });
   }


   /* index (0-abcAnz) <-> timer (0-500) */
   function timerToIndex(timer) {
      x = (timer / 500 ) * abcAnz;
      index = parseInt(x);
      return index;
   }


   /* fills Array abc with image tags */
   function fillAbc() {
      
      abc      = Array();
      load_img = Array();

      var img_location = 'http://www.geofabrik.de/gallery/history/';

      for  ($i=0; $i<$anim[sel]["images"].length; $i++) {
         z =   img_location
               + $anim[sel]["id"]
               + '/'
               + $anim[sel]["images"][$i]
               + '.png';
         abc.push(z);
      } 

      abcAnz = (abc.length - 1);
      document.getElementById("gallery_img").src=abc[abcAnz];

      for  ($i=0; $i<$anim[sel]["images"].length; $i++) {
         load_img[$i] = new Image();
         load_img[$i].src = img_location
                     + $anim[sel]["id"]
                     + '/'
                     + $anim[sel]["images"][$i]
                     + '.png';
      }
   }


   /* initializes slider */
   function initializeSlider() {

      $('div.sliderGallery').each(function () {

            var slider = $('.slider', this).slider({ 
               handle: '.handle',
               minValue: 0, 
               maxValue: 500, 
               startValue: 500,
               steps: abcAnz * 4,
               slide: function (ev, ui) {
                  timer = ui.value;
                  index = timerToIndex(timer);
                  document.getElementById("gallery_img").src=abc[index];
                  fillPlacename(index);   
               }, 
               stop: function (ev, ui) {
                  timer = ui.value;
                  index = timerToIndex(timer);
                  document.getElementById("gallery_img").src=abc[index];
                  fillPlacename(index);   
               }
            });
      });
   }


   /* fills #placename Ort (date) */
   function fillPlacename(index) {
      html = $anim[sel]["name"][lang]
         + " ("
         + $anim[sel]["images"][index]
         + ")";

      $("#placename").html(html);
         $("#download").unbind("click");
         $("#download").click(function() {
              window.open("http://www.geofabrik.de/gallery/history/"+$anim[sel]["id"]+"/"+$anim[sel]["id"]+"-anim.gif");
         });
   }


   function fillSliderdate() {
      html = $anim[sel]["images"][0];
      $(".slider-date-first").html(html);
      html = $anim[sel]["images"][abcAnz];
      $(".slider-date-last").html(html);
   }

});