/*

*/
function init() {
  var down = "mousedown"; var up = "mouseup"; 
  if ('createTouch' in document) { down = "touchstart"; up ="touchend"; }
  
  /* toggle appearance of all buttons when clicked or tapped, add additional listeners */
  var buttons = document.getElementsByClassName("button");
  for (var b = 0; b < buttons.length; b++) {
    buttons[b].addEventListener(up, function(evt) {toggleButtonAppearance(evt);}, false);
    buttons[b].addEventListener(down, function(evt) {toggleButtonAppearance(evt);}, false); 
    
    switch (buttons[b].id) {   
      /* handler for our 'status' div - it shows the 'Click to Play' button, progress indicator, and error indicator */   
      case "status":
        buttons[b].addEventListener(up, function(evt) {loadVideo(evt);}, false);
        break;
      /* toggle playback and the appearance of the play/pause button, once this button is clicked or tapped */
      case "playPauseButton":
        buttons[b].addEventListener(up, function(evt) {togglePlayPause(evt);}, false); 
        break;
      /* go fullscreen, once this button is clicked or tapped */
      case "fullscreenButton":
        buttons[b].addEventListener(up, function() {document.querySelector("video").webkitEnterFullscreen();}, false);
        break;
    }
  }
}

function toggleButtonAppearance(evt) {  
  var button = evt.target;
  var buttonState = button.className;
  button.className = buttonState.match(/active/) ? buttonState.split("active")[0] : buttonState + " active";
}
function loadVideo(evt) {
  evt.target.className = "progress showing";
  
  var myVideo = document.querySelector("video");
  myVideo.addEventListener("canplaythrough", playVideo, false);
  myVideo.addEventListener("error", reportError, false);  
  myVideo.load();
}

function playVideo() {
  /* hide the status div and image overlay */
  //document.getElementById("overlay").className = "hidden";  
  document.getElementById("status").className = "hidden";
  
  /* play the video */
  document.querySelector("video").play(); 
  
  /* Show the play/pause button, in paused state. */
  document.getElementById("playPauseButton").className = "pause button showing";
  
  /* Only show our fullscreen button if going fullscreen programmatically is supported. */
  /* You can check to see if fullscreen mode is supported as soon as the media metadata has been loaded - in other words, once a loadedmetadata event is emitted.
  In this example, we're checking to see if fullscreen mode is supported once canplay is emitted.  canplay is emitted after loadedmetadata, so this is safe. */
  if (document.querySelector("video").webkitSupportsFullscreen) {
    document.getElementById("fullscreenButton").className = "fullscreen button showing";
  }
}

function reportError() {
  document.getElementById("status").className = "error button showing";
}

function togglePlayPause(evt) {
  var playPauseButton = evt.target;
  var myVideo = document.querySelector("video");
  
  if (myVideo.paused) {
    myVideo.play();
    playPauseButton.className = "pause button showing";
  }
  else {
    myVideo.pause();
    playPauseButton.className = "play button showing";
  }
}