var width         = 480;
var height        = 26;
var knob_width    = 24;


var Timelapse = function() {
  
  var player        = null;
  var mouse_is_down = false;
  var is_playing    = false;
  var data          = [];
  var alternate_play_body = '';
  var slider = null;
  
  var month = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'];
  
  var $ = function(id) {return document.getElementById(id)};
  
  
  var set_alternate_play_body = function(str) {
    alternate_play_body = str;
  }
  
  
  var load = function(d) {
    data = d;
    create_slider();
    create_playhead();
  }
  
  
  var create_slider = function() {
    if(slider) return;
    slider = MakeDragSlider('Slider', {
      height: height,
      knob_width: knob_width,
      ondrag: drag,
      ondrop: drop
    });
  };
  
  
  var create_playhead = function() {
    var slider_knob = $$('.dragSliderKnob')[0];
    if(!slider_knob) {setTimeout(create_playhead, 100); return;}
    slider_knob.style.height = '';
    slider_knob.appendChild($('PlayPosition'));
    update_play_position(0);
  }
  
  
  var loadPlayer = function(src) {
    player = $('TimelapsePlayerObject');
    if(!player || !player.setSrc) player = null;
    player = player || $('TimelapsePlayerEmbed');
    if(!player || !player.setSrc) player = null;

    if(!player) setTimeout(function(){loadPlayer(src)}, 100);
    else {
      Event.observe($('FlashPlayer'), 'click', play_toggle);
      Event.observe($('FlashPlayer'), 'mouseover', mouseover);
      Event.observe($('FlashPlayer'), 'mouseout', mouseout);
      Event.observe($('PlayButton'), 'click', play_toggle);
      Event.observe($('PlayButton'), 'mouseover', mouseover);
      Event.observe($('PlayButton'), 'mouseout', mouseout);
      Event.observe($('PauseButton'), 'click', play_toggle);
      Event.observe($('PauseButton'), 'mouseover', mouseover);
      Event.observe($('PauseButton'), 'mouseout', mouseout);
      player.setSrc(src);
      on_media_load();
    }
  }
  
  
  var loaded = false;
  var on_media_load = function() {
    if(!player.bytesLoaded() || player.bytesLoaded()/parseFloat(player.bytesTotal()) < 0.2) {
      setTimeout(on_media_load, 100);
      return;
    }
    
    $('PlayButton').style.display = 'block';
    var play_button_top = (($('FlashPlayer').offsetHeight/2.0) - $('PlayButton').offsetHeight/2.0)+'px';
    $('PlayButton').style.top = play_button_top;
    $('PauseButton').style.top = play_button_top;
    if(data.length == 0) {
      $('PlayPositionBody').className = 'noData';
      $('PlayPositionBody').innerHTML = alternate_play_body;
    }
    $('PlayPosition').style.display = 'block';
        
    loaded = true;
  }
  
  
  var play_toggle = function(state) {
    if(typeof state == 'object') state = null;
    if(!state && state !== false) state = !is_playing;
    
    var toggle_elem = $('PlayToggle');
    
    if(state) {
      player.play_movie();
      is_playing = true;
      play_listener();
    } else {
      player.pause_movie();
      is_playing = false;
      play_listener();
    }
  }
  
  
  var play_interval = 0;
  var play_listener = function(stop) {
    update_play_button();
    clearInterval(play_interval);
    if(!is_playing || stop) return;
    
    play_interval = setInterval(function() {
      var percent = player.getTime() / player.totalTime();
      update_play_position(percent);
    }, 100);
  }
  
  
  var update_play_position = function(percent) {
    if(slider) slider.value(percent);
    
    $('PlayPositionBody').style.marginLeft = Math.floor(-1*(percent*89));
    if(data.length == 0) return;
    
    for(var i=0; i < data.length; i++) if(data[i][0] > percent) break;
    if(i > data.length - 1) i = data.length - 1;
    var percent_in_range = (percent - data[i-1][0]) / (parseFloat(data[i][0] - data[i-1][0]) || 999999);
    var time = data[i-1][1] + percent_in_range * (data[i][1] - data[i-1][1]);
    time = new Date(1000 * time);
    
    var hours = time.getHours();
    var ampm = (hours < 12) ? 'am' : 'pm';
    if(hours == 0) hours = 12;
    else if(hours > 12) hours -= 12;
    if(hours < 10) hours = '&nbsp;'+hours;
    $('PlayPositionBody').innerHTML = hours+ampm+', '+month[time.getMonth()]+' '+time.getDate();
  }
  
  
  var drag = function(percent) {
    if(!player) return;
    
    if(!mouse_is_down) {
      player.pause_movie();
    } else mouse_is_down = true;
    
    player.setTime(player.totalTime() * percent);
    play_listener('stop');
    update_play_position(percent);
  }
  
  
  var drop = function() {
    if(!player) return;
    setTimeout(function() {
      mouse_is_down = false;
      play_toggle(is_playing);
    }, 0);
  }
  
  
  var mouse_is_over = false;
  var mouseover = function() {
    mouse_is_over = true;
    if(loaded) update_play_button();
  }
  
  var mouseout = function() {
    mouse_is_over = false;
    if(loaded) update_play_button();
  }
  
  
  var update_play_button = function() {
    $('PlayButton').style.display = 'none';
    $('PauseButton').style.display = 'none';
    
    if(mouse_is_over) {
      if(is_playing) $('PauseButton').style.display = 'block';
      else $('PlayButton').style.display = 'block';
    }
  }
    
  return {
    player:function(){return player},
    load:load,
    set_alternate_play_body:set_alternate_play_body,
    loadPlayer:loadPlayer,
    drag:drag,
    drop:drop,
    slider:slider
  }
}();