var $skinRoot;
var $endPosition;

function videoSkin(rootElement1) {
  $skinRoot = rootElement1;
  media = $skinRoot.findName("media");
  downloadProgressRect = $skinRoot.findName("downloadProgressRect");
  playbackProgressRect = $skinRoot.findName("playbackProgressRect");
  playPauseButton = $skinRoot.findName("playPauseButton");
  pauseIcon = $skinRoot.findName("pauseIcon");
  playIcon = $skinRoot.findName("playIcon");
  playIcon.Fill = "Gray";
  
  // Auto play settings
  playIcon.opacity = 0;
  pauseIcon.opacity = 1;

  timer = $skinRoot.findName("timer");
  progressThumb = $skinRoot.findName("progressThumb");
  
  // Hook play / pause button events
  playPauseButton.addEventListener("mouseLeftButtonUp", "playClick");
  playPauseButton.addEventListener("mouseLeftButtonDown", "playMouseDown");
  playPauseButton.addEventListener("mouseEnter", "playMouseEnter");
  playPauseButton.addEventListener("mouseLeave", "playMouseLeave");
  
  // Hook media events
  media.addEventListener("mediaOpened", "mediaOpened");
  media.addEventListener("downloadProgressChanged", "downloadProgressChanged");
  media.addEventListener("currentStateChanged", "mediaCurrentStateChanged");
  media.addEventListener("mediaEnded", "mediaEnded");

  var imageFadeIn = $skinRoot.findName("imageFadeIn");
  imageFadeIn.addEventListener("completed", "imageFadeInCompleted");
  
  // Hook timer completed event
  timer.addEventListener("completed", "timerCompleted");
}

videoSkin.durationTime = null;

videoSkin.prototype.playVideo = function(video, title) { 
  // Set title
  $skinRoot.findName("mt").text = title;
  $skinRoot.findName("mt1").text = title;

  // Play video
  media.source = video;
  
  var imageFadeIn = $skinRoot.findName("imageFadeIn");
  imageFadeIn.begin();
  
  // Start timer
  timer.begin();
}

videoSkin.prototype.stopVideo = function() {
  media.stop();
  timer.stop();

  // Stop timers
  $skinRoot.findName("imageFadeIn").stop();
  $skinRoot.findName("windowExpand").stop();

  // Reset
  $skinRoot.findName("logoCanvas").opacity = 0;
  $skinRoot.findName("mwst").scaleX = 0;
  $skinRoot.findName("mwst").scaleY = 0;
}

function mediaDownloadProgressChanged(sender, args) {
  downloadProgressRect.width = media.downloadProgress * 318;
}

function mediaOpened(sender, args) {
  $endPosition = media.naturalDuration.seconds;
  videoSkin.durationTime = formatTime(media.naturalDuration.seconds);
}

function mediaCurrentStateChanged(sender, args) {
  if (media.currentState == "Playing") {

    // Hide progress
    $skinRoot.findName("wt").visibility = "Collapsed";
    $skinRoot.findName("wtspin").stop();

    playIcon.fill = "White";
    pauseIcon.opacity = 1;
    playIcon.opacity = 0;
  }
  else if (media.currentState == "Buffering") {
    // Show progress
    if ($skinRoot.findName("wt").visibility == "Collapsed") {
      $skinRoot.findName("wtspin").begin();
      $skinRoot.findName("wt").visibility = "Visible";
    }
  }
  else if (media.currentState == "Paused" || media.currentState == "Stopped") {
    pauseIcon.opacity = 0;
    playIcon.opacity = 1;
    // JPS
    timer.stop();
  }
  else if ((media.currentState != "Opening") && (media.currentState != "Closing") && (media.currentState != "Closed"))
  {
    sender.alert('Error: Media State Unknown:' + media.currentState);
    pauseIcon.opacity = 0;
    playIcon.opacity = 1;
    playIcon.fill = "Gray";     
  }
}

function mediaEnded(sender, args) {
  timer.stop();
  window.status = "ended: " + media.position.seconds.toString() + " out of " + media.naturalDuration.seconds.toString();
}

function imageFadeInCompleted(sender, args) {
  var windowExpand = sender.findName("windowExpand");
  windowExpand.begin();
}

function timerCompleted(sender, args) {
  if (media.currentState == "Playing") {
    playbackProgressRect.width = (media.position.seconds / media.naturalDuration.seconds) * 320;
    progressThumb["canvas.left"] = ((media.position.seconds / media.naturalDuration.seconds) * 310) + 3;
    for (var i = 0; i < 2; i++) {
      if (videoSkin.durationTime) {
        try {
          sender.findName("progressText" + i).text = formatTime(media.position.seconds) + " / " + videoSkin.durationTime;
        } catch (e) {
          sender.findName("progressText" + i).text = "0:00 / 0:00";
        }
      }
    }                
  } else if (media.currentState != "Paused") {
    // Reset
    sender.findName("progressText0").text = "0:00 / 0:00";
    sender.findName("progressText1").text = "0:00 / 0:00";
  }
  window.status = "position: " + media.position.seconds.toString();
  timer.begin();
}

function playClick(sender, eventArgs) {
  if (playIcon.Fill == "Gray") return;
  sender.findName("playPauseRelease").begin();
  if (media.currentState == "Playing") {
    media.pause();
  }
  else if (media.currentState == "Paused" || media.currentState == "Stopped" || media.currentState == "Buffering") {
    if (media.position.seconds <= $endPosition) {
      media.play();
      timer.begin();
    }
  }
}

function playMouseDown(sender, eventArgs) {
  sender.findName("playPausePress").begin();
}

function playMouseLeave(sender, eventArgs) {
  sender.findName("playPauseLeave").begin();
}

function playMouseEnter(sender, eventArgs) {
  sender.findName("playPauseEnter").begin();
}

function formatTime(time) {
  time = time * 1000;
  var timeString = "";
  timeString += Math.floor(time / 60000);

  timeString += ":";
  var seconds = Math.floor(time / 1000.0) % 60;
  if (seconds < 10)
          timeString += "0";

  timeString += seconds;
  return timeString;
}