// JavaScript Doc - youtubeviewer.js
// --------------------------------------
//   Displays youtube video player control with playlist on side.
// --------------------------------------
//   EXAMPLE:
//   <div id="ytVidPlayer"></div>
//   <script language="javascript">ytVideoPlayerShow("FoxRacingMXtech","channel","black");</script>
// --------------------------------------
//  Alternate function - Loads video into control
//    -- may be called from anywhere on page using
//    ytLoadVideo('VidID','title')
// --------------------------------------
// Programmer: Benjamin Leslie
// Created: 01/28/2010
// Last Modified: 08/19/2010 09:22:18
// Copyright © 2010 Chaparral Motorsports
// Any unauthorized use is strictly prohibited
// --------------------------------------

var ytPlayerContainer;
var ytplayer;
var ytFirstVid = "";
var ytFirstVidTitle = "";
var ytCurVid = "";
var ytCurVidTitle = "";
var ytRunning = 0;
var isHosted = 0;
//var playlistType = getQueryValue('type');
//playlistType = playlistType.toLowerCase();
var videoSeek = 0;

function onHostedReady(playerId) {
  ytplayer = document.getElementById("myytplayer");
  //ytplayer.addEventListener("onStateChange", "onhvplayerStateChange");
 ytplayer.setVolume(50);
  enableytControls();
  if(ytFirstVid!="") {
    ytCueVideo(ytFirstVid,ytFirstVidTitle);
  } else {
    ytFirstVid = "0";
  }
}

function ytVideoPlayerShow(playlistID,playlistType,scheme) {
playlistType = playlistType.toLowerCase();
ytPlayerContainer = document.getElementById("ytVidPlayer");
loadcssfile("/Resources/css/ytplayer-" + scheme + ".css");
if(playlistType=='playlist') {
loadjsfile("http://gdata.youtube.com/feeds/base/playlists/" + playlistID + "?alt=json-in-script&format=5&callback=showMyVideos&max-results=50"); 
} else if(playlistType=='channel') {
loadjsfile("http://gdata.youtube.com/feeds/base/users/" + playlistID + "/uploads?alt=json-in-script&format=5&callback=showMyVideos&max-results=50");
} else if(playlistType=='hosted') {
isHosted = 1;
}
var html = '<div id="ytVideo"><div id="ytapiplayer">This content requires Flash 9.0 or higher.</div></div>';
html += '<div id="ytPlaylist">Playlist loading...</div>';
html += '<div id="ytNowPlaying"></div>';
html += '<div id="ytControl"></div>';
ytPlayerContainer.innerHTML = html;
if (isHosted==1) {
  loadjsfile("/Resources/javascript/swfobject3.js");
  showHostedVideos(playlistID);
} else {
  loadjsfile("/Resources/javascript/swfobject.js");
}
//embedytVideo();
}


function loadjsfile(filename){
  var fileref=document.createElement('script');
  fileref.setAttribute("type","text/javascript");
  fileref.setAttribute("src", filename);
  document.getElementsByTagName("head")[0].appendChild(fileref);
}

function loadcssfile(filename){
  var fileref=document.createElement("link");
  fileref.setAttribute("rel", "stylesheet");
  fileref.setAttribute("type", "text/css");
  fileref.setAttribute("href", filename);
  document.getElementsByTagName("head")[0].appendChild(fileref);
}

function showMyVideos(data) {
  var feed = data.feed;
  var entries = feed.entry || [];
  var html = [''];
  for (var i = 0; i < entries.length; i++) {
    var entry = entries[i];
    var title = entry.title.$t;
    if(title=="") title = "Title information not available";
    var jstitle = title.replace(new RegExp("'", "g"),"&#92;&#39;");
    jstitle = jstitle.replace(new RegExp("\"", "g"),"&#92;&quot;");
    var link = entry.link[1].href;
    var vidID = link.substring(link.lastIndexOf("/")+1,link.length);
    
    html.push('<div id="yt-' + vidID + '" class="ytPlaylistItem" onclick="javascript:ytLoadVideo(\'' + vidID + '\',\'' + jstitle + '\');"><img src="http://i.ytimg.com/vi/' + vidID + '/2.jpg">' + title + '</div>');
    if(i==0) {
      if(ytFirstVid!="0") {
        ytFirstVid = vidID;
        ytFirstVidTitle = title;
      } else {
        ytFirstVid = vidID;
        ytFirstVidTitle = title;
        ytCueVideo(vidID,title);
      }
    }
  }
  document.getElementById('ytPlaylist').innerHTML = html.join('');
  ytMakeSelection(ytFirstVid);
}

function showHostedVideos(entries) {
  var html = [''];
  for (var i = 0; i < entries.length; i++) {
    var title = entries[i];
    if(title=="") title = "Title information not available";
    var jstitle = title.replace(new RegExp("'", "g"),"&#92;&#39;");
    jstitle = jstitle.replace(new RegExp("\"", "g"),"&#92;&quot;");
    var link = title.replace(new RegExp(" ", "g"),"%20");
    var vidID = link + ".swf";
    
    
    html.push('<div id="yt-' + vidID + '" class="ytPlaylistItem" onclick="javascript:ytLoadVideo(\'' + vidID + '\',\'' + jstitle + '\');"><img src="http://www.chaparral-racing.com/resources/videos/thumbnail/' + link + '.jpg">' + title + '</div>');
    if(i==0) {
      if(ytFirstVid!="0") {
        ytFirstVid = vidID;
        ytFirstVidTitle = title;
      } else {
        ytFirstVid = vidID;
        ytFirstVidTitle = title;
        ytCueVideo(vidID,title);
      }
    }
  }
  document.getElementById('ytPlaylist').innerHTML = html.join('');
  //ytMakeSelection(ytFirstVid);
}

function embedytVideo() {
  var params = { allowScriptAccess: "always" };
  var atts = { id: "myytplayer" };
  swfobject.embedSWF("http://www.youtube.com/apiplayer?enablejsapi=1&version=3", "ytapiplayer", "478", "268", "9.0.0", "/resources/expressInstall.swf", null, params, atts);
}

function embedHostedVideo() {
  var params = { allowScriptAccess: "always" };
  var atts = { id: "myytplayer" };
  swfobject.embedSWF("/resources/videos/HostedPlayer.swf", "ytapiplayer", "478", "268", "9.0.0", "/resources/expressInstall.swf", null, params, atts);
}

function ytCueVideo(vidID,title) {
  document.getElementById("ytTimer").innerHTML = "";
  ytplayer.cueVideoById(vidID,0);
  document.getElementById("ytNowPlaying").innerHTML = "<b>" + title + "</b>";
  ytCurVid = vidID;
  ytCurVidTitle = title;
}


function ytLoadVideo(vidID,title) {
  document.getElementById("ytStatus").innerHTML = "<i>&nbsp;Loading Video...</i>";
  ytMakeSelection(vidID);
  document.getElementById("ytTimer").innerHTML = "";
  ytplayer.clearVideo();
  ytplayer.loadVideoById(vidID,0);
  document.getElementById("ytNowPlaying").innerHTML = "<b>" + title + "</b>";
  ytCurVid = vidID;
  ytCurVidTitle = title;
}

    
function ytMakeSelection(vidID) {
if(ytCurVid!="") {
  try {
  document.getElementById("yt-" + ytCurVid).className = "ytPlaylistItem";
  } catch (err) {}
}
  try {
  document.getElementById("yt-" + vidID).className = "ytPlaylistItem ytPlaylistItemOn";
  } catch (err) {}
}
    
function onYouTubePlayerReady(playerId) {
  ytplayer = document.getElementById("myytplayer");
  ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
  ytplayer.setVolume(50);
  enableytControls();
  if(ytFirstVid!="") {
    ytCueVideo(ytFirstVid,ytFirstVidTitle);
  } else {
    ytFirstVid = "0";
  }
}

function onytplayerStateChange(newState) {
//unstarted (-1), ended (0), playing (1), paused (2), buffering (3), video cued (5) - timerCounter()
  switch(newState) {
    case -1:
      document.getElementById("ytPlayBtn").style.display = "inline";
      document.getElementById("ytPauseBtn").style.display = "none";
      ytRunning = 0;
      document.getElementById("ytStatus").innerHTML = "";
      document.getElementById("ytStatus").style.display = "none";
      document.getElementById("ytPositionContainer").style.display = "none";
      break;
    case 0:
      document.getElementById("ytPlayBtn").style.display = "inline";
      document.getElementById("ytPauseBtn").style.display = "none";
      ytRunning = 0;
      document.getElementById("ytStatus").innerHTML = "";
      document.getElementById("ytStatus").style.display = "none";
      document.getElementById("ytTimer").innerHTML = "";
      document.getElementById("ytPositionContainer").style.display = "none";
      ytCueVideo(ytCurVid,ytCurVidTitle);
      break;
    case 1:
      document.getElementById("ytPlayBtn").style.display = "none";
      document.getElementById("ytPauseBtn").style.display = "inline";
      document.getElementById("ytStatus").innerHTML = "";
      ytRunning = 1;
      document.getElementById("ytPositionContainer").style.display = "inline";
      document.getElementById("ytStatus").style.display = "none";
      timerCounter();
      break;
    case 2:
      document.getElementById("ytPlayBtn").style.display = "inline";
      document.getElementById("ytPauseBtn").style.display = "none";
      ytRunning = 0;
      document.getElementById("ytStatus").innerHTML = "";
      document.getElementById("ytStatus").style.display = "none";
      document.getElementById("ytPositionContainer").style.display = "inline";
      break;
    case 3:
      document.getElementById("ytPlayBtn").style.display = "none";
      document.getElementById("ytPauseBtn").style.display = "inline";
      ytRunning = 0;
      //document.getElementById("ytStatus").innerHTML = "<i>&nbsp;&nbsp;Buffering</i>";
      document.getElementById("ytStatus").style.display = "none";
      //document.getElementById("ytPositionContainer").style.display = "inline";
      break;
    case 5:
      document.getElementById("ytPlayBtn").style.display = "inline";
      document.getElementById("ytPauseBtn").style.display = "none";
      ytRunning = 0;
      document.getElementById("ytTimer").innerHTML = "";
      document.getElementById("ytStatus").innerHTML = "";
      document.getElementById("ytStatus").style.display = "none";
      document.getElementById("ytPositionContainer").style.display = "none";
      break;
  }
}

function ytVidControlPlay() {
  ytplayer.playVideo();
}

function ytVidControlPause() {
  ytplayer.pauseVideo();
}

function enableytControls() {
  var ytControls = document.getElementById("ytControl");
  var controlhtml = '<table border="0" cellspacing="0" cellpadding="0" style="background-color:#4e4e4e;height:24px;width:480px;font-family:verdana;font-size:9px;color:#ffffff;">';
controlhtml += '  <tr v-align="top">';
controlhtml += '    <td style="width:30px;text-align:center;"><img src="/Resources/images/ytPlayBtn.jpg" height="23" width="28" id="ytPlayBtn" onclick="javascript:ytVidControlPlay();" style="cursor:pointer;padding-bottom:1px;" onMouseOver="btnRollover(\'play\');" onMouseout="btnRollout(\'play\');">';
controlhtml += '<img src="/Resources/images/ytPauseBtn.jpg" height="23" width="28" id="ytPauseBtn" onclick="javascript:ytVidControlPause();" style="display:none;cursor:pointer;padding-bottom:1px;" onMouseOver="btnRollover(\'pause\');" onMouseout="btnRollout(\'pause\');"></td>';
controlhtml += '    <td style="background-image:url(/Resources/images/ytPositionbar.jpg);height:23px;width:340px;background-repeat:no-repeat;"><div id="ytStatus" style="display:none;"></div><div id="ytPositionContainer"><div id="ytPositionBarBG"><div id="ytPositionBar"></div><div id="ytPositionScroll" onclick="ytSetPosition(event,this);"></div></div></div></td>';
controlhtml += '    <td style="background-image:url(/Resources/images/ytTimer.jpg);height:23px;width:79px;background-repeat:no-repeat;text-align:center;"><div id="ytTimer"></div></td>';
controlhtml += '    <td style="width:31px;text-align:center;"><img src="/Resources/images/ytVolumeBtn.jpg" height="23" width="29" id="ytVolumeBtn" onclick="javascript:ytShowMute();" style="cursor:pointer;padding-bottom:1px;" onMouseOver="btnRollover(\'volume\');" onMouseout="btnRollout(\'volume\');">';
controlhtml += '<img src="/Resources/images/ytVolumeBtnMute.jpg" height="23" width="29" id="ytVolumeBtnMute" onclick="javascript:ytShowVolume();" style="cursor:pointer;display:none;padding-bottom:1px;" onMouseOver="btnRollover(\'mute\');" onMouseout="btnRollout(\'mute\');"></td>';
controlhtml += '  </tr>';
controlhtml += '</table>';
  ytControls.innerHTML = controlhtml;
}

function ytSetPosition(event,obj) {
var clickX = 0;
  if (document.all) {
    clickX = window.event.x-obj.offsetLeft;
  } else {
    theElement = obj;
    while(theElement != null){    clickX += theElement.offsetLeft;  theElement = theElement.offsetParent;  }
    clickX = event.clientX - clickX;
    
  }
  var newPosition = (ytplayer.getDuration() / 324) * clickX
  ytRunning = 0;
  //document.getElementById("ytStatus").innerHTML = "<i>&nbsp;&nbsp;Buffering</i>";
  //document.getElementById("ytStatus").style.display = "inline";
  //document.getElementById("ytPositionContainer").style.display = "none";
  ytplayer.seekTo(newPosition,1);
  ytplayer.playVideo();
}

function ytShowVolume() {
  document.getElementById("ytVolumeBtnMute").style.display = "none";
  document.getElementById("ytVolumeBtn").style.display = "inline";
  ytplayer.unMute();
  ytplayer.setVolume(50);
}

function ytShowMute() {
  document.getElementById("ytVolumeBtn").style.display = "none";
  document.getElementById("ytVolumeBtnMute").style.display = "inline";
  ytplayer.setVolume(0);
  ytplayer.mute();
}

function getQueryValue(var_name) {
var s = document.getElementsByTagName('script'),
m = (new RegExp('[?&;]' + var_name + '=([^&;#]*)')).exec(s[s.length-1].src);
return m ? unescape(m[1]) : null;
}

function timerCounter() {
if(ytRunning==1) {
  var t = setTimeout("timerCounter()",250);
  var ytPositionTime = document.getElementById("ytTimer");
  var curPosition = ytplayer.getCurrentTime();
  var totDuration = ytplayer.getDuration();
  curPosition = secondsToMin(curPosition);
  totDuration = secondsToMin(totDuration);
  ytPositionTime.innerHTML = curPosition + " / " + totDuration;
  var setPositionBar = (ytplayer.getCurrentTime() / ytplayer.getDuration()) * 324;
  document.getElementById("ytPositionBar").style.width = setPositionBar + "px";
}
}

function secondsToMin(seconds) {
  if (seconds >= 60) {
    seconds = parseInt(seconds)
    var minutes = parseInt(seconds / 60);
    seconds -= (minutes * 60);
    if(seconds<10) {
      var extraSecDigit = "0";
    } else {
      var extraSecDigit = "";
    }
    return minutes + ":" + extraSecDigit + seconds;
  } else {
    seconds = parseInt(seconds);
    if(seconds<10) {
      var extraSecDigit = "0";
    } else {
      var extraSecDigit = "";
    }
    return "0:" + extraSecDigit + seconds;
  }
}

function btnRollover(btnName) {
  switch (btnName) {
    case "play":
      document.getElementById("ytPlayBtn").src = document.getElementById("ytPlayBtn").src.replace("ytPlayBtn.jpg","ytPlayBtn-on.jpg");
      break;
    case "pause":
      document.getElementById("ytPauseBtn").src = document.getElementById("ytPauseBtn").src.replace("ytPauseBtn.jpg","ytPauseBtn-on.jpg");
      break;
    case "volume":
      document.getElementById("ytVolumeBtn").src = document.getElementById("ytVolumeBtn").src.replace("ytVolumeBtn.jpg","ytVolumeBtn-on.jpg");
      break;
    case "mute":
      document.getElementById("ytVolumeBtnMute").src = document.getElementById("ytVolumeBtnMute").src.replace("ytVolumeBtnMute.jpg","ytVolumeBtnMute-on.jpg");
      break;
  }
}

function btnRollout(btnName) {
  switch (btnName) {
    case "play":
      document.getElementById("ytPlayBtn").src = document.getElementById("ytPlayBtn").src.replace("ytPlayBtn-on.jpg","ytPlayBtn.jpg");
      break;
    case "pause":
      document.getElementById("ytPauseBtn").src = document.getElementById("ytPauseBtn").src.replace("ytPauseBtn-on.jpg","ytPauseBtn.jpg");
      break;
    case "volume":
      document.getElementById("ytVolumeBtn").src = document.getElementById("ytVolumeBtn").src.replace("ytVolumeBtn-on.jpg","ytVolumeBtn.jpg");
      break;
    case "mute":
      document.getElementById("ytVolumeBtnMute").src = document.getElementById("ytVolumeBtnMute").src.replace("ytVolumeBtnMute-on.jpg","ytVolumeBtnMute.jpg");
      break;
  }
}