/*
 * EL Video Player 1.0.6.1.ojon - a HTML5/Flash video player module, special build for Ojon
 *
 * Copyright 2011 Estee Lauder - www.esteelauder.com
 * Lovingly crafted By Nick Warner - www.nwarner.com
 *
 * How to use: 
 *  1) Include jQuery and also Swfobject and this file in the page head.
 * 
 * Todo: support multiple video formats
*/

var el = el || {};
el.ELVideoPlayer = el.ELVideoPlayer || function(options) {

  this.container =  options.id;
  this.width =      options.width || jQuery('#'+this.container).getWidth();
  this.height =     options.height || jQuery('#'+this.container).getHeight();
  this.poster =     options.poster;
  this.autoplay =   options.autoplay;
  this.native_controls =   options.controls;
  this.loop =       options.loop;
  this.src_h264 =   options.src_h264 || options.src;
  this.onFinish =   options.onFinish;
  this.first_play = true;
  
  this.flashplayer = options.flashplayer;
  this.flashvars =  options.flashvars;
  this.flashparams = options.flashparams;
  this.flashattr = options.flashattr;
  this.force_flash = options.force_flash;
  
  this.isplaying = false;
  this.using_flash = false;
  this.timer = undefined;
  this.previous_time = 0;
  
  this.default_element_category = options.default_element_category;
  this.default_element_id = options.default_element_id;
  this.metric_tags = options.metric_tags || {
    ready: "0",
    play: "2",
    pause: "1",
    end: "3"
  };
  
  this.video = document.createElement("video");


  this.init = function() {
    var self = this;

    jQuery('#'+this.container).html(this.video);
    
    // Detect Video Support
    var can_play_h264_video = false;    
    if (!!this.video.canPlayType) {
      can_play_h264_video = this.video.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
    }
    
    // Check Video Format
    if (this.src_h264.toLowerCase().indexOf('.flv') !== -1) {
      this.force_flash = true;
    }
    
    if (can_play_h264_video && !this.force_flash) { // HTML5 Video
      this.using_flash = false;
      this.video.width = this.width;
      this.video.height = this.height;
      this.video.autoplay = this.autoplay;
      this.video.controls = this.native_controls;
      this.video.loop = this.loop;
      
      if (this.poster) {
        this.video.poster = this.poster;
      }
      
      this.video.addEventListener('play', function(){ self.onplay(); });
      this.video.addEventListener('pause', function(){ self.onpause(); });
      this.video.addEventListener('ended', function(){ self.onended(); });
      //this.video.addEventListener('click', function(e){ console.log(e); self.onclick(); return false; });
  
      // ! TODO: do useful things with these
/*
      this.oncanplay = function(){ console.log('Video Player Event', 'oncanplay', self); };
      this.onemptied = function(){ console.log('Video Player Event', 'onemptied', self); };
      this.onended = function(){ console.log('Video Player Event', 'onended', self); };
      this.onerror = function(){ console.log('Video Player Event', 'onerror', self); };
      this.onloadstart = function(){ console.log('Video Player Event', 'onloadstart', self); };
      this.onpause = function(){ console.log('Video Player Event', 'onpause', self); };
      this.onplay = function(){ console.log('Video Player Event', 'onplay', self); };
      this.onplaying = function(){ console.log('Video Player Event', 'onplaying', self); };
      this.onprogress = function(){ console.log('Video Player Event', 'onprogress', self); };
      this.onreadystatechange = function(){ console.log('Video Player Event', 'onreadystatechange', self); };
      this.onstalled = function(){ console.log('Video Player Event', 'onstalled', self); };
      this.onsuspend = function(){ console.log('Video Player Event', 'onsuspend', self); };
      this.ontimeupdate = function(){ console.log('Video Player Event', 'ontimeupdate', self); };
      this.onvolumechange = function(){ console.log('Video Player Event', 'onvolumechange', self); };
      this.onwaiting = function(){ console.log('Video Player Event', 'onwaiting', self); };
*/
      
      this.video.src = this.src_h264;
      
      jQuery('#'+this.container).html(this.video);
      
      if (this.autoplay) {
        this.video.play();
      } 
    } else { // Flash
      this.using_flash = true;
      swfobject.embedSWF(this.flashplayer, this.container, this.width, this.height, "9.0.124", false, this.flashvars, this.flashparams, this.flashattr);
    }
    
    // Watch for updates
    clearInterval(this.timer);
//    jQuery(this.video).bind('timeupdate', function(){ self.update(); });
//    this.timer = setInterval(function(){ self.update(); }, 500);
    
//    this.metrics_tag(this.metric_tags.ready);
  };
  
  
  this.toggle_play = function(){
    if (this.isplaying) {
      this.pause();
    } else {
      this.play();
    }
  };
  
  
  this.play = function(){  
    if (this.using_flash){
      // ! play flash
    } else {
      this.video.play();
    }
  };


  this.pause = function(){
    if (this.using_flash){
      // ! pause flash
    } else {
      this.video.pause();
    }
  };
  
  
  this.onclick = function(){
    this.toggle_play();   
  };
  
  
  this.onplay = function(){
    if (this.first_play === true) {
      this.first_play = false;
      this.metrics_tag(this.metric_tags.ready);
    }

    this.isplaying = true;
    this.metrics_tag(this.metric_tags.play);
  };


  this.onpause = function(){
    this.isplaying = false;
    this.metrics_tag(this.metric_tags.pause);
  }; 
   
  
  this.onended = function(){
    this.isplaying = false;
    this.metrics_tag(this.metric_tags.end);
  };
  
  
  this.currentTime = function(){
    if (this.using_flash){
      // ! get flash time
    } else {
      return this.video.currentTime;
    }
  };
  
  
  this.current_time_readable_by_humans = function(){
    var total_seconds = Math.floor(this.currentTime());
    
    var hours = Math.floor(total_seconds / 3600);
    var minutes = Math.floor(total_seconds / 60) - hours;
    var seconds = Math.floor(total_seconds % 60) - minutes;
  
    if (minutes < 10) {
      minutes = "0"+minutes;
    }
    if (seconds < 10) {
      seconds = "0"+seconds;
    }
    if (hours < 10) {
      hours = "0"+hours;
    }
  
//    console.log(total_seconds, hours, minutes, seconds);
    
    return hours+":"+minutes+":"+seconds;
  };
  
  
  this.length_in_seconds = function(){
    if (this.using_flash) {
      // ! get flash length
    } else {
      return this.video.duration;
    }
  };
  
  
  this.percent_viewed = function() {
    return this.currentTime() / this.length_in_seconds();
  };
  
  
  this.metrics_tag =  function(status, tag, category) {
    tag = tag || this.default_element_id;
    category = category || this.default_element_category;

    if (typeof cmCreatePageElementTag === 'function') {
      var attributes = "-_--_--_--_--_--_--_--_--_--_--_--_-" + [status, Math.floor(this.currentTime()), Math.floor(this.length_in_seconds())].join("-_-");
      cmCreatePageElementTag(tag, category, attributes); 
    
      //cmCreatePageElementTag(tag, category);
      //console.log('Video Tag', tag, category, attributes);
    }
  };
  
  
/*
  this.update = function() {
    //if (this.currentTime() !== this.previous_time) {
      jQuery('#'+this.container).trigger("timechanged");
    //}
  };
*/

  
  this.init();
};