/*
Irritating differences between how browsers handle HTML5 video. ARGH!

Seeking:
- Firefox 3.6 - DONE pause > seeking > seek > play. unless the video has ended and you press play again, then it's just seeking > seek. AWESOME!
- Chrome 5.0 - DONE seeking > seek  (sometimes sends these 2 events twice. usually, in fact)
- Opera 10.6 - DONE seeking > seek
- Safari 4 and 5 - DONE sends 2 seek events unless you happen to seek right on a keyframe exactly. beautiful. also maybe 1 in 10 times, it doesn't send an initial 'play' event. great!
- MSIE - unknown since IE8 doesn't support it and who knows what IE9 will do. for now, we'll fully disable this for IE users.
*/


var _htmlvid = [], _htmlvidi = 0;

function _htmlvid_track( e ) {
  if( typeof e == "string" ) e = document.getElementById( e );
  if( typeof e != "object" ) return false;
  
  _htmlvidi++;
  _htmlvid[ _htmlvidi ] = new _htmlvido( e, _htmlvidi );
}


function _htmlvido( e, i ) {
  if( !e || !i ) return false; 
  
  // if the browser doesn't support html5 video, we're done.
  if( !document.createElement("video").canPlayType ) return;
  
  // different browsers handle video events differentely, mainly to do with "seeking", so we have to sniff around so we can do it right for each of them.
  // these are grouped by behavior. chrome and opera have nothing to do with each other but they end up working the same way in this case.
  if( navigator.userAgent.match(/firefox/i)) {
    this.browser="firefox";
  }
  else if( navigator.userAgent.match(/chrome|opera/i)) {
    this.browser="chrome";
  }
  else if( navigator.userAgent.match(/safari/i)) {
    this.browser="safari";
  }
  else if( navigator.userAgent.match(/msie/i)) {
    return;
  }
  
  
  this.timer = null;
  this.seeking = this.ended = 0;
  
  // we use both seeking and seeked so we can track the start and end of the seeking process, which helps us deal with some browser oddities/differences.
  e.addEventListener("play",    function(){ _htmlvid[i].videoLog("play");    }, false );
  e.addEventListener("pause",   function(){ _htmlvid[i].videoLog("pause");   }, false );
  e.addEventListener("seeked",  function(){ _htmlvid[i].videoLog("seek");    }, false );
  e.addEventListener("seeking", function(){ _htmlvid[i].videoLog("seeking"); }, false );
  e.addEventListener("ended",   function(){ _htmlvid[i].videoLog("end");     }, false );
  
  this.videoLog = function( action ) {
    
    //$("#html5_log_raw").append( action + " " + this.videoTime() + "<br>" );
    
    if( this.timer ) clearTimeout( this.timer );
    this.timer = null;
    this.do_timer = 0;
    
    if( action == "end"     ) this.ended = 1; // have to keep tracking of when a video ends for firefox because it's stupid
    if( action == "seeking" ) this.seeking = 1;
    if( action == "seek" && this.browser == "safari" ) this.seeking = 1;
    
    if( this.seeking ) {
      
      // firefox - pause > seeking > seek > play. when scrubbing, "play" never happens, so we know when we get a play we're good to go.
      // when a user presses 'play' after a video has ended, however, firefox doesn't send the 'play' it normally does with a seek. so we have to keep track of when the video has ended so we can deal with that.
      if( this.browser == "firefox" ) {
        if( action == "play" ) {
          this.seeking = 0;
          action = "seek";
        }
        else if( action == "seek" && this.ended ) {
          this.ended = this.seeking = 0;
        }
        else return;
      }
      
      // chrome/opera - have to set a timeout on logging the "seek" because if you're scrubbing, it's constant seeking>seek events over and over
      // safari works slightly differently, it sends two seeks, but its workaround will be the same - just need to use a timeout!
      else if( this.browser == "chrome" || this.browser == "safari" ) {
        if( action == "seek" ) {
          this.do_timer = 1;
          this.seeking = 0;
        }
        else return;
      }
    }
    
    else if( action == "pause" && this.browser == "firefox" ) {
      this.do_timer = 1;
    }
    
    
    // depending on the browser, we need to only log an event after a brief timeout period. this is only needed for "seeks", which every browser seems to do its own fun way.
    // a timeout means the time we log will be off by 1 second once it's logged. BFD?
    if( this.do_timer ) {
      this.timer = setTimeout( function(){ _htmlvid[i].videoLogReal( action ); }, 1000 );
    }
    else this.videoLogReal( action );
  }
  
  
  
  this.videoLogReal = function( action ) {
    // we make this a seperate function so setting a timeout is a bit cleaner
    if( window.videogoyes ) videogoyes( action, this.videoTime(), this.videoURL(), this.videoTitle());
    
    //if( action=='play'||action=='pause'||action=='seek'||action=='end' ) $("#html5_log").append( action + " " + this.videoTime() + "<br>" );
  }
  
  
  this.videoTime = function() {
    return Math.round( e.currentTime );
  }
  
  this.videoURL = function() {
    if( e.src ) return e.src;
    this.test = e.getElementsByTagName("source");
    if( this.test && this.test[0] && this.test[0].src ) return this.test[0].src;
    return "";
  }
  
  this.videoTitle = function() {
    return e.title || "";
  }
}




// the rest of this code finds all video elements on a page and tracks them automatically. yesss!

function _htmlvid_auto() {
  var videos = document.getElementsByTagName("video");
  for( var i=0; i<videos.length; i++ ) {
    _htmlvid_track( videos[ i ] );
  }
}

if( window.addEventListener ) {
  window.addEventListener( "load", _htmlvid_auto, false );
}
else if( window.attachEvent ) {
  window.attachEvent( "onload", _htmlvid_auto );
}