var image_directory = 'http://keravaradar.vaisala.com/image2h/';
var images = new Array("esfflnx100317000016.CAP1461.jpg","esfflnx100317020015.CAP1477.jpg","esfflnx100317040016.CAP1493.jpg","esfflnx100317060016.CAP1509.jpg","esfflnx100317080016.CAP1525.jpg","esfflnx100317100015.CAP1541.jpg","esfflnx100317120015.CAP1557.jpg","esfflnx100317140016.CAP1573.jpg","esfflnx100317160015.CAP1589.jpg","esfflnx100317180016.CAP1605.jpg","esfflnx100317200016.CAP1621.jpg","esfflnx100317220016.CAP1637.jpg","esfflnx100318000015.CAP1653.jpg","esfflnx100318020015.CAP1669.jpg","esfflnx100318040015.CAP1685.jpg");
var playing_color = "#a23b05";
var not_played_color = "black";
var played_color = "#1a5a64";

var speed = 1000;
var imagecache = new Array();
var current_index = 0;
var animation_on = false;
var timer = null;
var max_loop_count = 10;
var loop_count = 0;

function get_date_from(file_name) {
  rgx = /esfflnx(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2}).*/
  res = file_name.match(rgx)
  return new Date(Date.UTC(2000+Number(res[1]),
                           res[2]-1,
                           res[3],
                           res[4],
                           res[5],
                           res[6]))
}

function append_controls() {
  for (i = 0; i < images.length; i++) {
    date = get_date_from(images[i]);
    format = date.format('ddd dd.mm') + ' <b>'+ date.format('HH:MM')+'</b>';
    li = $('<li style="list-style: none; color: '+not_played_color+';" onMouseOver="anim_image_with_hover('+i+')">'+format+'</li>');
    li.appendTo($("#controls"));
  }
}

function set_image(image_src) {
  $("#current_image").attr("src", image_directory + image_src);
}

function setAnimSpeed(percentage) {
  speed = percentage * 1000;
}

function handle_mouse_wheel(node, callback) {
  if (node.addEventListener) { 
    node.addEventListener("DOMMouseScroll", callback, false);
    node.addEventListener("mousewheel", callback, false);
  } else {
    node.onmousewheel = callback;
  }
}

function handle_mouse_click(node, callback) {
  if (node.addEventListener) {
    node.addEventListener("DOMClick", callback, false);
    node.addEventListener("click", callback, false);
  } else {
    node.onclick = callback;
  }
}

function cancel_event(e) {
  e = e ? e : window.event;
  if (e.stopPropagation)
    e.stopPropagation();
  if (e.preventDefault)
    e.preventDefault();
  e.cancelBubble = true;
  e.cancel = true;
  e.returnValue = false;
  return false;
}

function mouse_wheel_callback(e) {
  if (!e)
    e = window.event;

  if (e.wheelDelta <= 0 || e.detail > 0) {
    if(timer)
      clearTimeout(timer);
    animation_on = false;
    anim_image_without_hover((current_index + 1) % images.length);
  } else {
    if(timer)
      clearTimeout(timer);
    animation_on = false;
    if (current_index == 0)
      anim_image_without_hover(images.length - 1);
    else anim_image_without_hover((current_index - 1) % images.length);
  }
  $("#play").css("color", played_color);
  return cancel_event(e);
}

function mouse_click_callback(e) {
  if(timer)
    clearTimeout(timer);
  if (animation_on) {
    animation_on = false;
    $("#play").css("color", played_color);
  } else {
    anim_play();
  }
  return true;
}

function anim_play() {
  if(!animation_on) {
    animation_on = true;
    timer = setTimeout("anim_next()", speed);
    loop_count = 0;
  }
  $("#play").css("color", playing_color);
}

function anim_stop() {
  if(timer)
    clearTimeout(timer);

  animation_on = false;
  $("#play").css("color", played_color);
}

function anim_image(next_index, over) {
  if(next_index == current_index)
    return;

  if(over) {
    $("#play").css("color", played_color);
    if(timer)
      clearTimeout(timer);
    animation_on = false;
  }

  $($("#controls").children().get(next_index)).css("color", playing_color);
  $($("#controls").children().get(current_index)).css("color", played_color);

  set_image(images[next_index]);

  current_index = next_index;
}

function anim_image_with_hover(index) {
  anim_image(index, 1);
}

function anim_image_without_hover(index) {
  anim_image(index, 0);
}

function anim_next() {
  if(!animation_on)
    return;
  
  anim_image_without_hover((current_index + 1) % images.length);
  if((current_index + 1 == images.length) && (++loop_count > max_loop_count)) {
    anim_stop();
    return;
  }
  var nextdelay = (current_index + 1 == images.length ? 2000 : speed);
  timer = setTimeout("anim_next()", nextdelay);
}

function anim_preload() {
  var names = new Array();
  names = names.concat(images);
  names.sort();

  var n = imagecache.length;
  var lastname = '';
  for(var i = 0; i < names.length; i++) {
    if(names[i] != lastname) {
      lastname = image_directory + names[i];
      imagecache[n] = new Image();
      imagecache[n].src = lastname;
      n++;
    }
  }
}

function anim_start() {
  if(timer)
    clearTimeout(timer);
  
  animation_on = false;
  anim_image_with_hover(0);
  anim_preload();
  setTimeout("anim_play()", 2000);

  if (document.getElementById('current_image'))
    handle_mouse_wheel(document.getElementById('current_image'), mouse_wheel_callback);

  if (document.getElementById('animtimer'))
    handle_mouse_wheel(document.getElementById('animtimer'), mouse_wheel_callback);

  if (document.getElementById('current_image'))
    handle_mouse_click(document.getElementById('current_image'), mouse_click_callback);
}

$(document).ready(function() {
  set_image(images[0]);
  append_controls();
  anim_start();
})