// JavaScript Document
var playList = new Array();
var errorList = new Array();
var length = 0;
var index = -1;
deleted = 0;
protected1 = false;
var myWidth = 0, myHeight = 0;
  
function resize(){
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
  }
  document.getElementById("left").style.height = (myHeight-120)+"px";
  document.getElementById("right").style.height = (myHeight-120)+"px";
  document.getElementById("list").style.height = (myHeight-220)+"px";
  document.getElementById("saved").style.height = (myHeight-660)+"px";
}  

function updateHTML(elmId, value) {
  document.getElementById(elmId).innerHTML = value;
}

function onPlayerError(errorCode) {
  errorList[index] = errorCode;
  if(index!=length-1){ 
    index++;
  }
  else{
   index = 0;
  }
  playById(index);
  protected1=true;
}

function onPlayerStateChange(newState) {
  if(newState==0){
    index = (index + 1) % length;
    ytplayer.loadVideoById(playList[index]);
    printList();
  }
  if(protected1&&(newState=2)){
    playVideo();    
    protected1 = false;
  }
}

function setVideoVolume() {
  var volume = parseInt(document.getElementById("volumeSetting").value);
  if(isNaN(volume) || volume < 0 || volume > 100) {
    alert("Please enter a valid volume between 0 and 100.");
  }
  else if(ytplayer){
    ytplayer.setVolume(volume);
  }
}
      
function playVideo() {
  if (ytplayer) {
    if(deleted) playById(index);
    else
    ytplayer.playVideo();
  }
}

function next(){
  if(index<length-1) index++;
  else index = 0;
  playById(index);
  printList();
}

function previous(){
  if(index>0) index--;
  else index=length-1;
  playById(index);
  printList();
}

function playById(id){
  ytplayer.loadVideoById(playList[id]);
  index = id;
  printList();
}
      
function pauseVideo() {
  if (ytplayer) {
   ytplayer.pauseVideo();
  }
}

function up(id1){
  id = id1 - 1;
  if(id!=0) pp=id-1;else pp=length-1;
    pom2 = errorList[pp];
    pom = playList[pp];
    playList[pp] = playList[id];
    errorList[pp] = errorList[id];
    playList[id] = pom;
    errorList[id] = pom2
    if(id==index){
      if(id!=0)index--;
      else
      index=length-1;
    }
    else
    if(pp==index){
      if(id!=0)index++;
      else
      index=0;
    }
  
  printList();
}

function down(id1){
  id = id1 - 1;
  if(id!=length-1)pp=id+1;
  else
  pp=0;
    pom2 = errorList[pp];
    pom = playList[pp];
    playList[pp] = playList[id];
    errorList[pp] = errorList[id];
    playList[id] = pom;
    errorList[id] = pom2;
    if(id==index){
      if(id!=length-1)index++;
      else
      index=0;
    }
    else
    if(pp==index){
      if(id!=length-1)
      index--;
      else
      index=length-1;
    }
    printList();
}

function delete1(id){
  for(var i = id;i<length-1;i++){
    playList[i] = playList[i+1];
    errorList[i] = errorList[i+1];
  }
  length--;
  if(id<index)index--;else
  if(id==index) {
    index = -1;
    deleted = true;
  } 
  printList();
}

// This function is automatically called by the player once it loads
function onYouTubePlayerReady(playerId) {
  ytplayer = document.getElementById("ytPlayer");
  ytplayer.addEventListener("onStateChange", "onPlayerStateChange");
  ytplayer.addEventListener("onError", "onPlayerError");
}

function loadPlayer(video) {
      var videoID = video;
      var params = { allowScriptAccess: "always",allowFullScreen: "true" };
      var atts = { id: "ytPlayer" };
      swfobject.embedSWF("http://www.youtube.com/v/" + videoID +
                         "&enablejsapi=1&playerapiid=player1&autoplay=0&fs=1",
                         "videoDiv", "480", "295", "8", null, null, params, atts);                  
}

function _run() {
   loadPlayer(playList[index]);
}

function add(){
  link = document.getElementById("link").value;
  pom2 = link.substr(0,31);
  if((pom2=="http://www.youtube.com/watch?v=")&&(link.length>=42)){
    pom = link.substr(31,11);
    length++;
    playList[length-1] = pom;
    errorList[length-1] = 0;
    if(length==1){
      index++;
      loadPlayer(playList[index]);
      //google.setOnLoadCallback(_run());
    }
    printList();
  }
}   

function printList(){
  pom = "";
  for(var i = 0;i<length;i++){
    j = i+1;
    if(i==index){
      //========================================playing video
      pom = pom + "<div class='itemblock'>";
      
      if(errorList[i]==0)
      pom = pom + "<div onclick='javascript: playById("+i+");deleted = false;' style='float:left'>";
      else
      pom = pom + "<div style='float:left'>";
      
      pom = pom + " <img src='http://img.youtube.com/vi/" + playList[i] + "/0.jpg' class='item2' width='66' height='50' />";
      pom = pom + " <a href='#' class='selected'>"+j+"</a>";
      if(errorList[i]==0)
        pom = pom + "<a href='#' class='ytube1'>http://www.youtube.com/watch?v="+playList[i]+"</a>";
      else{
        pom = pom + "<a href='http://www.youtube.com/watch?v="+playList[i]+"' target='_blank' class='ytube3'>This video not exist or is protected!</a>";
      }
      pom = pom + "</div>";
      pom = pom + "<img src='pictures/delete1.gif' class='delete' onclick='javascript: delete1("+i+")' alt='delete1.gif' border='0' height='42' width='42' />"
      pom = pom + "<div class='updown'>";
      pom = pom + "<img src='pictures/up1.gif' alt='up1.gif' style='margin-bottom:1px' onclick='javascript:up("+j+")' border='0' height='26' width='40'/><br />";
      pom = pom + "<img src='pictures/down1.gif' onclick='javascript:down("+j+")' alt='down1.gif' border='0' height='26' width='40'/>";
      pom = pom + "</div>"
      pom = pom + "</div>"; 
    }else{
    //==========================================not selected
      pom = pom + "<div class='itemblock'>";
      
      if(errorList[i]==0)
      pom = pom + "<div onclick='javascript: playById("+i+");deleted = false;' style='float:left'>";
      else
      pom = pom + "<div style='float:left'>";
      
      pom = pom + "<img src='http://img.youtube.com/vi/" + playList[i] + "/0.jpg' class='item2' width='66' height='50' /></a>";
      pom = pom + " <a href='#' class='notselected'>"+j+"</a>";
      if(errorList[i]==0)
      pom = pom + "<a href='#' class='ytube2'>http://www.youtube.com/watch?v="+playList[i]+"</a>";
      else{
        pom = pom + "<a href='http://www.youtube.com/watch?v="+playList[i]+"' target='_blank' class='ytube3'>This video not exist or is protected!</a>";
      }
      
      pom = pom + "</div>";
      pom = pom + "<img src='pictures/delete.gif' class='delete' onclick='javascript: delete1("+i+")' alt='delete.gif' border='0' height='42' width='42' />"
      pom = pom + "<div class='updown'>";
      pom = pom + "<img src='pictures/up.gif' style='margin-bottom:1px' onclick='javascript:up("+j+")' alt='up.gif' border='0' height='26' width='40'/><br />";
      pom = pom + "<img src='pictures/down.gif' onclick='javascript:down("+j+")' alt='down.gif' border='0' height='26' width='40'/>";
      pom = pom + "</div>";
      pom = pom + "</div>"
    }
  }
  updateHTML("list",pom);
}

function save1(){
  play = "";
  error = "";
  for(var i = 0;i<length;i++){
    play = play + playList[i] + "@";
    error = error + errorList[i] + "@";
  }
  play = play.substr(0,play.length-1);
  error = error.substr(0,error.length-1);
  document.getElementById("playlist").value = play;
  document.getElementById("errorlist").value = error;
  //document.getElementById("form").submit();
}