var $skinRoot;

function videoSkin(rootElement1) {
  $skinRoot = rootElement1;
  media = $skinRoot.findName("media");
  preview = $skinRoot.findName("preview");
  downloadProgressRect = $skinRoot.findName("downloadProgressRect");
  playbackProgressRect = $skinRoot.findName("playbackProgressRect");
  playPauseButton = $skinRoot.findName("playPauseButton");
  pauseIcon = $skinRoot.findName("pauseIcon");
  playIcon = $skinRoot.findName("playIcon");
  
  playIcon.opacity = 1;
  pauseIcon.opacity = 0;

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

  timer.addEventListener("completed", "timerCompleted");
}

videoSkin.durationTime = null;

videoSkin.prototype.playVideo = function(video, previewimage, title) 
{   
  $skinRoot.findName("mt").text = title;
  $skinRoot.findName("mt1").text = title;
  
  preview.source = previewimage;
  
  // Play video  
  media.source = video;
  media.pause();
  timer.begin();
}

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

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") {

    preview.opacity = 0;
    
    $skinRoot.findName("wt").visibility = "Hidden";
    $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 == "Hidden") {
      $skinRoot.findName("wtspin").begin();
      $skinRoot.findName("wt").visibility = "Visible";
    }
  }
  else if (media.currentState == "Paused" || media.currentState == "Stopped" || media.currentState == "Buffering") {    
    playIcon.fill = "White";
    pauseIcon.opacity = 0;
    
    if (media.position.seconds == 0)
    {
    	preview.opacity = 0.7;
    	$skinRoot.findName("wt").visibility = "Hidden";
        $skinRoot.findName("wtspin").stop();
    }
    
    playIcon.opacity = 1;    
  }
  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) {
  media.pause();
}

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") 
  {
    sender.findName("progressText0").text = "0:00 / 0:00";
    sender.findName("progressText1").text = "0:00 / 0:00";
  }
  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.stop();
    }
    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;
}