// Using jresig's Class implementation http://ejohn.org/blog/simple-javascript-inheritance/
(function(){var initializing=false, fnTest=/xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/; this.Class = function(){}; Class.extend = function(prop) { var _super = this.prototype; initializing = true; var prototype = new this(); initializing = false; for (var name in prop) { prototype[name] = typeof prop[name] == "function" && typeof _super[name] == "function" && fnTest.test(prop[name]) ? (function(name, fn){ return function() { var tmp = this._super; this._super = _super[name]; var ret = fn.apply(this, arguments); this._super = tmp; return ret; }; })(name, prop[name]) : prop[name]; } function Class() { if ( !initializing && this.init ) this.init.apply(this, arguments); } Class.prototype = prototype; Class.constructor = Class; Class.extend = arguments.callee; return Class;};})();

// Store a list of players on the page for reference by event listeners
var videoJSPlayers = new Array();

// Video JS Player Class
var VideoJS = Class.extend({

  // Initialize the player for the supplied video tag element
  // element: video tag
  // num: the current player's position in the videoJSPlayers array
  init: function(element, num){
    this.video = element;

    this.buildController();
    this.showController(); // has to come before positioning
    this.positionController();

    // Listen for clicks on the play/pause button
    this.playControl.addEventListener("click", this.onPlayControlClick.context(this), false);

    // Listen for drags on the progress bar
    this.progressHolder.addEventListener("mousedown", this.onProgressHolderMouseDown.context(this), false);
    // Listen for a release on the progress bar
    this.progressHolder.addEventListener("mouseup", this.onProgressHolderMouseUp.context(this), false);

    // Listen for a drag on the volume control
    this.volumeControl.addEventListener("mousedown", this.onVolumeControlMouseDown.context(this), false);
    // Listen for a release on the volume control
    this.volumeControl.addEventListener("mouseup", this.onVolumeControlMouseUp.context(this), false);
    // Set the display to the initial volume
    this.updateVolumeDisplay();

    // Listen for clicks on the fullscreen button
    this.fullscreenControl.addEventListener("click", this.onFullscreenControlClick.context(this), false);

    // Listen for the mouse over the video. Used to reveal the controller.
    this.video.addEventListener("mouseover", this.onVideoMouseOver.context(this), false);
    // Listen for the mouse moving out of the video. Used to hide the controller.
    this.video.addEventListener("mouseout", this.onVideoMouseOut.context(this), false);
  },

  buildController: function(){

    /* Creating this HTML
      <ul class="vjs-controls">
        <li class="vjs-play-control vjs-play">
          <span></span>
        </li>
        <li class="vjs-progress-control">
          <ul>
            <li class="vjs-progress-holder">
              <span class="vjs-load-progress"></span><span class="vjs-play-progress"></span>
            </li>
            <li class="vjs-progress-time">
              <span class="vjs-current-time-display">00:00</span><span> / </span><span class="vjs-duration-display">00:00</span>
            </li>
          </ul>
        </li>
        <li class="vjs-volume-control">
          <ul>
            <li></li><li></li><li></li><li></li><li></li><li></li>
          </ul>
        </li>
        <li class="vjs-fullscreen-control">
          <ul>
            <li></li><li></li><li></li><li></li>
          </ul>
        </li>
      </ul>
    */

    // Create a list element to hold the different controls
    this.controls = document.createElement("ul");

    // Add the controls to the video's container
    this.video.parentNode.appendChild(this.controls);
    this.controls.className = "vjs-controls";

    // Store the current video player's number
    // For referencing in event listeners
    this.controls.setAttribute("data-video-js", this.num);

    // Build the play control
    this.playControl = document.createElement("li");
    this.controls.appendChild(this.playControl);
    this.playControl.className = "vjs-play-control vjs-play";
    this.playControl.innerHTML = "<span></span>";

    // Build the progress control
    this.progressControl = document.createElement("li");
    this.controls.appendChild(this.progressControl);
    this.progressControl.className = "vjs-progress-control";

    // Create a list for the different progress elements
    this.progressList = document.createElement("ul");
    this.progressControl.appendChild(this.progressList);

    // Create a holder for the progress bars
    this.progressHolder = document.createElement("li");
    this.progressList.appendChild(this.progressHolder);
    this.progressHolder.className = "vjs-progress-holder";

    // Create the loading progress display
    this.loadProgress = document.createElement("span");
    this.progressHolder.appendChild(this.loadProgress)
    this.loadProgress.className = "vjs-load-progress";

    // Create the playing progress display
    this.playProgress = document.createElement("span");
    this.progressHolder.appendChild(this.playProgress);
    this.playProgress.className = "vjs-play-progress";

    // Create the progress time display (00:00 / 00:00)
    this.progressTime = document.createElement("li");
    this.progressList.appendChild(this.progressTime);
    this.progressTime.className = "vjs-progress-time";

    // Create the current play time display
    this.currentTimeDisplay = document.createElement("span");
    this.progressTime.appendChild(this.currentTimeDisplay);
    this.currentTimeDisplay.className = "vjs-current-time-display";
    this.currentTimeDisplay.innerHTML = '00:00';

    // Add time separator
    this.timeSeparator = document.createElement("span");
    this.timeSeparator.innerHTML = " / ";
    this.progressTime.appendChild(this.timeSeparator);

    // Create the total duration display
    this.durationDisplay = document.createElement("span");
    this.progressTime.appendChild(this.durationDisplay);
    this.durationDisplay.className = "vjs-duration-display";
    this.durationDisplay.innerHTML = '00:00';

    // Create the volumne control
    this.volumeControl = document.createElement("li");
    this.controls.appendChild(this.volumeControl);
    this.volumeControl.className = "vjs-volume-control";
    this.volumeControl.innerHTML = "<ul><li></li><li></li><li></li><li></li><li></li><li></li></ul>";
    this.volumeDisplay = this.volumeControl.children[0]

    // Crete the fullscreen control
    this.fullscreenControl = document.createElement("li");
    this.controls.appendChild(this.fullscreenControl);
    this.fullscreenControl.className = "vjs-fullscreen-control";
    this.fullscreenControl.innerHTML = "<ul><li></li><li></li><li></li><li></li></ul>";
  },

  // Show the controller
  showController: function(){
    this.controls.style.display = "block";
  },

  // Place controller relative to the video's position
  positionController: function(){
    this.controls.style.top = (this.video.offsetHeight - this.controls.offsetHeight) + "px";
    this.controls.style.left = "0px";
    this.controls.style.width = this.video.offsetWidth + "px";
    this.sizeProgressBar();
  },

  // Hide the controller
  hideController: function(){
    this.controls.style.display = "none";
  },

  // React to clicks on the play/pause button
  onPlayControlClick: function(e){
    if (this.video.paused) {
      this.playVideo();
    } else {
      this.pauseVideo();
    }
  },

  // Adjust the play position when the user drags on the progress bar
  onProgressHolderMouseDown: function(e){
    this.stopTrackingPlayProgress();

    if (this.video.paused) {
      this.videoWasPlaying = false;
    } else {
      this.videoWasPlaying = true;
      this.video.pause();
    }

    this.blockTextSelection();
    document.onmousemove = function(e) {
      this.setPlayProgress(e.pageX);
    }.context(this);

    document.onmouseup = function() {
      this.unblockTextSelection();
      document.onmousemove = null;
      document.onmouseup = null;
      if (this.videoWasPlaying) {
        this.video.play();
        this.trackPlayProgress();
      }
    }.context(this);
  },

  // When the user stops dragging on the progress bar, update play position
  // Backup for when the user only clicks and doesn't drag
  onProgressHolderMouseUp: function(e){
    this.setPlayProgress(e.pageX);
  },

  // Adjust the volume when the user drags on the volume control
  onVolumeControlMouseDown: function(e){
    this.blockTextSelection();
    document.onmousemove = function(e) {
      this.setVolume(e.pageX);
    }.context(this);
    document.onmouseup = function() {
      this.unblockTextSelection();
      document.onmousemove = null;
      document.onmouseup = null;
    }.context(this);
  },

  // When the user stops dragging, set a new volume
  // Backup for when the user only clicks and doesn't drag
  onVolumeControlMouseUp: function(e){
    this.setVolume(e.pageX);
  },

  // When the user clicks on the fullscreen button, update fullscreen setting
  onFullscreenControlClick: function(e){
    if (!this.videoIsFullScreen) {
      this.fullscreenOn();
    } else {
      this.fullscreenOff();
    }
  },
  
  onVideoMouseOver: function(e){
    this.showController();
  },
  
  onVideoMouseOut: function(e){
    setTimeout(function(){
      this.hideController();
    }.context(this), 1000)
  },

  // Play the video
  playVideo: function(){
    this.video.play();
    this.playControl.className = "vjs-play-control vjs-pause";
    this.trackPlayProgress();
  },

  // Pause the video
  pauseVideo: function(){
    this.video.pause();
    this.playControl.className = "vjs-play-control vjs-play";
    this.stopTrackingPlayProgress();
  },

  // Adjust the width of the progress bar to fill the controls width 
  sizeProgressBar: function(){
    this.progressControl.style.width = (this.controls.offsetWidth - 125) + "px";
    this.progressHolder.style.width = (this.progressControl.offsetWidth - 80) + "px";
    this.updatePlayProgress();
  },

  // Track & display the current play progress
  trackPlayProgress: function(){
    this.playProgressInterval = setInterval(function(){ this.updatePlayProgress(); }.context(this), 33);
  },

  // Turn off play progress tracking (when paused)
  stopTrackingPlayProgress: function(){
    clearInterval(this.playProgressInterval);
  },

  // Ajust the play progress bar's width based on the current play time
  updatePlayProgress: function(){
    this.playProgress.style.width = ((this.video.currentTime / this.video.duration) * (this.progressHolder.offsetWidth - 2)) + "px";
    this.updateTimeDisplay();
  },

  // Update the play position based on where the user clicked on the progresss bar
  setPlayProgress: function(clickX) {
    var newPercent = Math.max(0, Math.min(1, (clickX - this.findPosX(this.progressHolder)) / this.progressHolder.offsetWidth));
    this.video.currentTime = newPercent * this.video.duration
    this.playProgress.style.width = newPercent * (this.progressHolder.offsetWidth - 2)  + "px";
    this.updateTimeDisplay();
  },

  // Update the displayed time (00:00)
  updateTimeDisplay: function(){
    this.currentTimeDisplay.innerHTML = this.formatTime(this.video.currentTime);
    if (this.video.duration) this.durationDisplay.innerHTML = this.formatTime(this.video.duration);
  },

  // Set a new volume based on where the user clicked on the volume control
  setVolume: function(clickX) {
    var newVol = (clickX - this.findPosX(this.volumeControl)) / this.volumeControl.offsetWidth;
    if (newVol > 1) {
      newVol = 1;
    } else if (newVol < 0) {
      newVol = 0;
    }
    this.video.volume = newVol;
    this.updateVolumeDisplay();
  },

  // Update the volume control display
  // Unique to these default controls. Uses borders to create the look of bars.
  updateVolumeDisplay: function(){
    var volNum = Math.floor(this.video.volume * 6);
    for(var i=0; i<6; i++) {
      if (i < volNum) {
        this.volumeDisplay.children[i].style.borderColor = "#fff";
      } else {
        this.volumeDisplay.children[i].style.borderColor = "#555";
      }
    }
  },

  // Turn on fullscreen (window) mode
  // Real fullscreen isn't available in browsers quite yet.
  fullscreenOn: function(){
    this.videoIsFullScreen = true;
    this.videoOrigWidth = this.video.offsetWidth;
    this.videoOrigHeight = this.video.offsetHeight;

    this.video.style.width = window.innerWidth + "px";
    this.video.style.height = window.innerHeight + "px";
    this.video.style.position = "fixed";
    this.video.style.left = 0;
    this.video.style.top = 0;
    this.controls.style.position = "fixed";
    this.positionController();

    this.fullscreenControl.className = "vjs-fullscreen-control vjs-fs-active";
  },

  // Turn off fullscreen (window) mode
  fullscreenOff: function(){
    this.videoIsFullScreen = false;
    this.video.style.width = this.videoOrigWidth + "px";
    this.video.style.height = this.videoOrigHeight + "px";
    this.video.style.position = "static";
    this.controls.style.position = "absolute";
    this.positionController();
    this.fullscreenControl.className = "vjs-fullscreen-control";
  },

  // Attempt to block the ability to select text while dragging controls
  blockTextSelection: function(){
    document.body.focus();
    document.onselectstart = function () { return false; };
  },

  // Turn off text selection blocking
  unblockTextSelection: function(){
    document.onselectstart = function () { return true; };
  },

  // Return seconds as MM:SS
  formatTime: function(seconds) {
    seconds = Math.round(seconds);
    minutes = Math.floor(seconds / 60);
    minutes = (minutes >= 10) ? minutes : "0" + minutes;
    seconds = Math.floor(seconds % 60);
    seconds = (seconds >= 10) ? seconds : "0" + seconds;
    return minutes + ":" + seconds;
  },

  // Get an objects position on the page
  findPosX: function(obj) {
    var curleft = obj.offsetLeft;
    while(obj = obj.offsetParent) {
      curleft += obj.offsetLeft;
    }
    return curleft;
  }

})

// Class Methods

// Add video-js to any video tag with the class
VideoJS.setup = function(){
  if (VideoJS.supportsVideo()) {
    var videoTags = document.getElementsByTagName("video");
    for (var i=0;i<videoTags.length;i++) {
      if (videoTags[i].className.indexOf("video-js") != -1) {
        videoJSPlayers[i] = new VideoJS(videoTags[i], i);
      }
    }
  }
}

// Check if the browser supports video.
VideoJS.supportsVideo = function() {
  return !!document.createElement('video').canPlayType;
}


// Allows for binding context to functions
// when using in event listeners and timeouts
Function.prototype.context = function(obj) {
  var method = this
  temp = function() {
    return method.apply(obj, arguments)
  }
 return temp
}