function _largeradar_archive() {
  this.refreshImages = refreshImages;
  this.SwapRadarSat = SwapRadarSat;
  this.setStarttime = setStarttime;
  this.initRadarImg = initRadarImg;

  var files = new Array();
  var images = new Array();
  var currentimgtype = 'radar';
  var activeImageNo = 0;

  var starttime = 0;

  var paths = new Array();
  paths['radar'] = '/images/radar/';
  paths['forecast'] = 'images/radar/';
  paths['lightning'] = '/images/radar/';
  paths['sat'] = '/images/satellite/sat24/';
  paths['satradar'] = '/images/satellite/sat24/';
  paths['zoomed'] = '/images/radar/';

  var delays = new Array();
  delays['radar'] = 200;
  delays['forecast'] = 200;
  delays['lightning'] = 200;
  delays['sat'] = 600;
  delays['satradar'] = 600;
  delays['zoomed'] = 200;

  var loaded = 0;
  var loading = true;
  var timer;
  var refreshtimer;
  var http;

  function setStarttime(istarttime) {
    starttime = istarttime;
  }

  function getHTTPObject() {
    var xmlhttp;
    /*@cc_on
    @if (@_jscript_version >= 5)
      try {
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (e) {
        try {
          xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (E) {

          xmlhttp = false;
        }
      }
    @else
    xmlhttp = false;
    @end @*/

    if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
      try {
        xmlhttp = new XMLHttpRequest();
      } catch (e) {
        xmlhttp = false;
      }
    }
    return xmlhttp;
  }

  function handleHttpResponse() {
    if (http.readyState == 4) {
      if (http.status == 200) {
        var store = http.responseText;
        files = store.split(';');
        preLoad();
      } else startAnimate(); // Als het niet gelukt is, dan de oude beelden gebruiken
    }
  }

  function refreshImages() {
    stopAnimate();

    ran = Math.random();
    http.open("GET", '/getradarimagenames_archive/type=' + currentimgtype + '&large&ran=' + ran + '&starttime=' + starttime, true);
    http.onreadystatechange = handleHttpResponse;
    http.send(null);

    if (refreshtimer) clearTimeout(refreshtimer);
    refreshtimer = setTimeout(refreshImages, 5 * 60 * 1000);
  }

  function Loaded() {
    e = document.getElementById('imageno_' + loaded);
    e.style.backgroundColor = '#999999';

    loaded++;
    if (loaded == files.length) {
      loading = false;
      startAnimate();
    }
  }

  function preLoad() {
    loaded = 0;
    activeImageNo = 0;

    showLoading();
    fillTimeLine();

    var length = files.length;
    for (i = 0; i < length; i++) {
      images[i] = new Image();
      images[i].onload = Loaded;
      images[i].onerror = Loaded;
      images[i].no = i;
      if (files[i].charAt(0) == '/')
        images[i].src = files[i]
      else
        images[i].src = paths[currentimgtype] + files[i];
    }
  }

  function SwapRadarSat(imgtype) {
    stopAnimate();
    currentimgtype = imgtype;
    try {
      imgbron = document.getElementById("bron");

      imgbg = document.getElementById("background");
      imgbg.style.background = "url(/images/kaart.gif) no-repeat";

      imgmarker = document.getElementById("marker");
      imgmarker.style.background = "url(/?page=gpsmarkerimage&width=512&height=512) no-repeat";
      switch (imgtype) {
        case "radar": 
          imgbron.innerHTML = "<a href=\"http://www.buienradar.nl\" target=\"_blank\">BuienRadar.nl</a>";
          break;
        case "forecast":
          imgbron.innerHTML = "<a href=\"http://www.buienradar.nl\" target=\"_blank\">BuienRadar.nl</a>";
          break;
        case "lightning":
          imgbron.innerHTML = "<a href=\"http://www.buienradar.nl\" target=\"_blank\">BuienRadar.nl</a> en <a href=\"http://www.blitzortung.org/\" target=\"_blank\">Blitzortung.org</a>";
          break;
        case "sat":
          imgbron.innerHTML = "<a href=\"http://www.sat24.nl/\" target=\"_blank\">Sat24.nl</a>";
          break;
        case "satradar":
          imgbron.innerHTML = "<a href=\"http://www.sat24.nl/\" target=\"_blank\">Sat24.nl</a> en <a href=\"http://www.buienradar.nl/\" target=\"_blank\">BuienRadar.nl</a>";
          break;
        case "zoomed": 
          imgbron.innerHTML = "<a href=\"http://www.buienradar.nl\" target=\"_blank\">BuienRadar.nl2</a>";
          imgbg.style.background = "url(/images/zoom_radar_bg.gif) no-repeat";
          imgmarker.style.background = "";
          break;
        case "lightning2":
          imgbron.innerHTML = "<a href=\"http://www.blitzortung.org/\" target=\"_blank\">Blitzortung.org</a>";
          break;
      }
    } catch (e) { };
    refreshImages();
    SelectButton();
  }

  function SelectButton() {
    e = document.getElementById('radarknop');
    if (e) e.style.backgroundColor = '#CCCCCC';

    e = document.getElementById('forecastknop');
    if (e) e.style.backgroundColor = '#CCCCCC';

    e = document.getElementById('lightningknop');
    if (e) e.style.backgroundColor = '#CCCCCC';

    e = document.getElementById('satknop');
    if (e) e.style.backgroundColor = '#CCCCCC';

    e = document.getElementById('satradarknop');
    if (e) e.style.backgroundColor = '#CCCCCC';

    e = document.getElementById('zoomedknop');
    if (e) e.style.backgroundColor = '#CCCCCC';

    e = document.getElementById('lightning2knop');
    if (e) e.style.backgroundColor = '#CCCCCC';

    e = document.getElementById(currentimgtype + 'knop');
    if (e) e.style.backgroundColor = '#FFFFFF';
  }

  function initRadarImg() {
    $('#marker')
     .mousewheel(function(event, delta) {
       if ((activeImageNo - delta >= 0) && (activeImageNo - delta < files.length))
         showImage(activeImageNo - delta, true);
       event.stopPropagation();
       event.preventDefault();
     });
  }

  function showImage(no, stop) {  // Laat 1 beeld zien, stop evt. de animatie
    if (loading) return;
    if (stop == true) stopAnimate();

    e = document.getElementById('radar');
    e.style.background = "url(" + images[no].src + ") no-repeat";

    e = document.getElementById('imageno_' + activeImageNo);
    e.style.backgroundColor = e.getAttribute("mycolor");
    e = document.getElementById('imageno_' + no);
    e.style.backgroundColor = '#FF0000';

    activeImageNo = no;
  }

  function showLoading() {
    e = document.getElementById('radar');
    e.style.background = "url(/common_images/loading.gif) no-repeat";
    e.style.backgroundPosition = "center center";
  }

  function startAnimate() {
    if (activeImageNo +1 >= files.length)
      showImage(0);
    else
      showImage(activeImageNo +1);

    if (activeImageNo +1 < files.length)
      timer = setTimeout(startAnimate, delays[currentimgtype]);
    else
      timer = setTimeout(startAnimate, delays[currentimgtype] * 5);
  }

  function stopAnimate() {
    if (timer) clearTimeout(timer);
  }

  function showthisImage(e) {
    showImage(this.getAttribute('imageno'), true);
  }

  function fillTimeLine() {
    e = document.getElementById('timeline');

    // Verwijder alle timeline items
    while (e.childNodes.length > 0) e.removeChild(e.firstChild);

    for (i = 0; i < files.length; i++) {
      tr = document.createElement('tr');
      td = document.createElement('td');
      td.setAttribute('id', 'imageno_' + i);
      td.setAttribute('imageno', i);
      td.style.height = '3px';
      td.style.backgroundColor = '#CCCCCC';
      td.setAttribute('mycolor', '#999999');
      td.onmouseover = showthisImage;
      tr.appendChild(td);
      e.appendChild(tr);
    }

    // De "play" button
    tr = document.createElement('tr');
    td = document.createElement('td');
    a = document.createElement('a');
    a.setAttribute('href', '#');
    a.onclick = function() { stopAnimate(); startAnimate(); return false; };
    img = document.createElement('img');
    img.setAttribute('src', '/common_images/buttons/button-play.gif');
    img.setAttribute('border', '0');
    img.setAttribute('width', '15');
    img.setAttribute('height', '15');
    img.setAttribute('title', 'Afspelen');
    a.appendChild(img);
    td.appendChild(a);
    tr.appendChild(td);
    e.appendChild(tr);  
  }

  http = getHTTPObject();
}

var largeradar_archive = new _largeradar_archive();
$(function() { largeradar_archive.initRadarImg(); largeradar_archive.refreshImages(); } );