function substr(string) {
    if (string.length > 32) {
      string = string.substr(0,32) + '...';
      return string;
    }
    return string;
  }

  function toggleMute() {
    if (!muted) {
      muted = 1;
      lastVolume = ytplayer.getVolume();
      setVolume(0);
      volumeButton.src = 'images/mute_hover.png';
    } else {
      muted = 0;
      ytplayer.setVolume(lastVolume);
      volumeButton.src = 'images/volume_hover.png';
    }
  }

  function hoverPLW(trackNum) {
    document.getElementById('track' + trackNum).firstChild.style.color = '#999999';
  }

  function hoverPLWEnd(trackNum) {
    var p = document.getElementById('track' + trackNum);
    if (p.className == 'playlistItemWrapper') {
      p.firstChild.style.color = '#666666';
    }
  }

  function hoverMute(e) {
    if (muted == 0) {
      volumeButton.src = 'images/volume_hover.png';
    } else if (muted == 1) {
      volumeButton.src = 'images/mute_hover.png';
    }
  }

  function hoverMuteEnd(e) {
    if (muted == 0) {
      volumeButton.src = 'images/volume.png';
    } else if (muted == 1) {
      volumeButton.src = 'images/mute.png';
    }
  }

  function playOut(e) {
    onPlay = 0;
    var state = getPlayerState();
    if (paused) {
      playButton.src = 'images/play.png';
    }
  }

  function pauseOut(e) {
    onPause = 0;
    var state = getPlayerState();
    if (!paused) {
      pauseButton.src = 'images/pause.png';
    }
  }

  function startDragSeek(e) {
    var temp;
    try{e.preventDefault();}catch(err){}
    temp = findPos(sliderS);
    seekRelative = e.clientX - temp;
    dragSeek = 1;
    sliderS.style.backgroundColor = '#736c4e';
    try {
      document.addEventListener('mousemove', updateDrag, false);
      document.addEventListener('mouseup', stopDragSeek, false);
    } catch(err) {
      documentBody.attachEvent('onmousemove', updateDrag);
      documentBody.attachEvent('onmouseup', stopDragSeek);
    }
  }

  function stopDragSeek(e) {
    var seeker = findPos(sliderL);
    var diff = e.clientX - seeker;
    dragSeek = 0;
    seekRelative = 0;
    sliderS.style.backgroundColor = '#2b2927';
    seekTo((diff / 394) * getDuration());
    try {
      document.removeEventListener('mousemove', updateDrag, false);
      document.removeEventListener('mouseup', stopDragSeek, false);
    } catch(err) {
      documentBody.detachEvent('onmousemove', updateDrag);
      documentBody.detachEvent('onmouseup', stopDragSeek);
    }
  }

  function updateDrag(e) {
    if (!dragSeek) { return; }
    try{e.preventDefault();}catch(err){}
    locs = findPos(sliderL);
    x = e.clientX - locs - seekRelative;
    if (x < 0) { x = 0; }
    if (x + 6 >= percent) {
      x = percent;
    }
    sliderT.style.width = x + 'px';
  }

  function findPosY(obj) {
    var curtop = 0;
    if (obj.offsetParent) {
      do {
        curtop += obj.offsetTop;
	obj = obj.offsetParent;
      } while (obj);
    }
    return curtop;
  }

  function findPos(obj) {
    //var curleft = curtop = 0;
    var curleft = 0;
    if (obj.offsetParent) {
      do {
        curleft += obj.offsetLeft;
        //curtop += obj.offsetTop;
	obj = obj.offsetParent;
      } while (obj);
    }
    //return [curleft,curtop];
    return curleft;
  }

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

  function seekTo(seconds) {
    if (ytplayer) {
      ytplayer.seekTo(seconds, false);
    }
  }

  function quickSeek(e) {
    var seeker = findPos(sliderL);
    var diff = e.clientX - seeker;
    seekTo((diff / 394) * getDuration());
  }
  
  function updateSliderTime(current,duration) {
    if (duration < 0) {
      sliderT.style.width = '0px';
    } else {
      var p = Math.round(current/duration * 394);
      sliderT.style.width = p + 'px';
    }
  }
  function updateSliderLoad(loaded,total) {
    if (total < 0) {
      percent = 0;
    }
    p = percent + 6;
    sliderL.style.width = p + 'px';
  }

  function updatePausePlay(state) {
    if (!onPause && !paused) {
      pauseButton.src = 'images/pause.png';
    }
    if (!onPause && paused) {
      pauseButton.src = 'images/pause_hover.png';
    }

    if (!onPlay && paused) {
      playButton.src = 'images/play.png';
    }
    if (!onPlay && !paused) {
      playButton.src = 'images/play_hover.png';
    }
  }

  function realPause() {
    if (!paused) {
      paused = 1;
      pause();
    }
  }

  function realPlay() {
    if (paused) {
      paused = 0;
      play();
    }
  }

  function updateytplayerInfo() {
    state = getPlayerState();
    if (state > 0) {
      if (stopped == 1) {
        stopped = 0;
      }
      if (state != 2 && paused) {
        pause();
      }

      updatePausePlay(state);
 
      x = getBytesLoaded();
      y = getBytesTotal();
      percent = Math.round(x/y*394);
      updateSliderLoad(x,y);
      a = getCurrentTime();
      b = getDuration();
      if (!dragSeek) {
        updateSliderTime(a,b);
      }
      updateHTML("trackTime","" + timeDisplay(Math.round(a)) + " / " + timeDisplay(Math.round(b)));
      updateHTML("trackTitle", substr(tracks[videoI][1]));
      updateHTML("trackArtist", tracks[videoI][0]);
      
      updatePlaylist();
    } else if (stopped == 0) {
      stopped = 1;
      // if statements here seem unnecessary
      if (!onPause && state != 2) {
        pauseButton.src = 'images/pause.png';
      }
      if (!onPlay && state != 1 && state != 3 && state != 5) {
        playButton.src = 'images/play.png';
      }
    } else {
    }
  }

  function timeDisplay(secs) {
    minutes = Math.floor(secs/60);
    seconds = secs % 60;
    if (seconds < 10) {
      seconds = "0" + seconds;
    }
    return minutes + ":" + seconds;
  }

  function setVolume(newVolume) {
    if (ytplayer) {
      ytplayer.setVolume(newVolume);
    }
  }

  function loadNewVideo(id, startSeconds) {
    if (ytplayer) {
      ytplayer.loadVideoById(id, parseInt(startSeconds));
    }
  }

  function getBytesLoaded() {
    if (ytplayer) {
      return ytplayer.getVideoBytesLoaded();
    } else {
      return 0;
    }
  }

  function getBytesTotal() {
    if (ytplayer) {
      return ytplayer.getVideoBytesTotal();
    } else {
      return 0;
    }
  }

  function clear() {
    if (ytplayer) {
      return ytplayer.clearVideo();
    } else {
      return 0;
    }
  }

  function pause() {
    if (ytplayer) {
      var state = getPlayerState();
      ytplayer.pauseVideo();
      if (getPlayerState() != state) {
        playButton.src = 'images/play.png';
      }
    }
  }

  function play() {
    if (ytplayer) {
      var state = getPlayerState();
      ytplayer.playVideo();
      if (getPlayerState() != state) {
        pauseButton.src = 'images/pause.png';
      }
    }
  }

  function getPlayerState() {
    if (ytplayer) {
      return ytplayer.getPlayerState();
    } else {
      return -10;
    }
  }

  function hoverCycleDown(e) {
    i = document.getElementById('next');
    i.src = 'images/cycledown_hover.png';
    i.style.cursor = 'pointer';
  }

  function hoverCycleDownEnd(e) {
    i = document.getElementById('next');
    i.src = 'images/cycledown.png';
    //i.style.cursor = 'default';
  }

  function hoverCycleUp(e) {
    i = document.getElementById('prev');
    i.src = 'images/cycleup_hover.png';
    i.style.cursor = 'pointer';
  }

  function hoverCycleUpEnd(e) {
    i = document.getElementById('prev');
    i.src = 'images/cycleup.png';
    //i.style.cursor = 'default';
  }


  function hoverRep(e) {
    if (repeat == 0) {
      repButton.src = 'images/repeat0_hover.png';
    } else if (repeat == 1) {
      repButton.src = 'images/repeat_hover.png';
    } else if (repeat == 2) {
      repButton.src = 'images/repeat1_hover.png';
    }
  }

  function hoverRepEnd(e) {
    if (repeat == 0) {
      repButton.src = 'images/repeat0.png';
    } else if (repeat == 1) {
      repButton.src = 'images/repeat.png';
    } else if (repeat == 2) {
      repButton.src = 'images/repeat1.png';
    }
  }

  function updateRep(e) {
    repeat++;
    if (repeat > 2) {
      repeat = 0;
    }

    if (repeat == 0) {
      repButton.src = 'images/repeat0.png';
    } else if (repeat == 1) {
      repButton.src = 'images/repeat.png';
    } else if (repeat == 2) {
      repButton.src = 'images/repeat1.png';
    }
    hoverRep(e);
  }
  
  function nextTrack() {
    clicked = 1;
    videoI++;
    if (typeof(tracks[videoI]) == "undefined" && repeat == 1) {
      videoI = 0;
    } else if (typeof(tracks[videoI]) == "undefined") {
      videoI--;
      return;
    }
    loadNewVideo(tracks[videoI][3],0);
  }

  function prevTrack() {
    clicked = 1;
    videoI--;
    if (videoI < 0) {
      videoI = 0;
    }
    loadNewVideo(tracks[videoI][3],0);
  }

  function onytplayerStateChange(newState) {
    if (paused && newState == 1) pause();

    if (newState == 0 && !paused && !clicked && getBytesTotal() > 0) {
      if (repeat == 0 || repeat == 1) {
        nextTrack();
      } else if (repeat == 2) {
        seekTo(0);
	play();
      }
    } else if (newState == 0 && !paused && !clicked) {
      if (repeat == 0 || repeat == 1) {
        nextTrack();
      } else if (repeat == 2) {
        clear();
        loadNewVideo(tracks[videoI][3],0);
	play();
      }
    }

    if (ajaxing && newState == 3) {
      ajaxing = 0;
    }
    clicked = 0;
  }

  function getCurrentTime() {
    if (ytplayer) {
      return ytplayer.getCurrentTime();
    } else {
      return 0;
    }
  }

  function getDuration() {
    if (ytplayer) {
      return ytplayer.getDuration();
    } else {
      return 0;
    }
  }

  function playTrack(id) {
    clicked = 1;
    videoI = id;
    loadNewVideo(tracks[videoI][3],0);
  }
  
  function removeTrackFromTracks(trackid) {
    var temp = new Array();
    for (track in tracks) {
      if (trackid != track) temp.push(tracks[track]);
    }
    tracks = temp;
  }
  
  function populateDiffTrack(json) {
    removeScriptTagWithId('trackScript' + diffx);
    if (!json["feed"]["entry"][1]) {
      tracks[diffx][5] = 0;
    } else {
      tracks[diffx][5] = 1;
    }
    
//    tracks[diffx][2] = 1; // (incremented 0th index to 1)
    tracks[diffx][3] = parseVideoId(json["feed"]["entry"][0]["id"]["$t"]);
    
    handleCycle(diffx);
    loadNewVideo(tracks[diffx][3],0);
    
    var ytIndex = document.getElementById('ytIndex');
    ytIndex.innerHTML = '';
    ytIndex.appendChild(document.createTextNode(' ' + tracks[diffx][2]  + ' '));
  }
  
  
  
  function tryDifferentTrack(trackNum, mode) {
    clicked = 1;
    if (mode == 0) {
      index = tracks[trackNum][2] - 1;
    } else {
      index = tracks[trackNum][2] + 1;
    }
    
    tracks[trackNum][2] = index;
    
    url = 'http://gdata.youtube.com/feeds/api/videos?alt=json-in-script' +
            '&category=Music&vq=' + escape(tracks[trackNum][0]) + '+' + escape(tracks[trackNum][1]) +
            '&orderby=relevance&start-index=' + index + '&max-results=2&format=5' +
            '&callback=populateDiffTrack&client=ytapi-AdrianBravo-Muzakbox-llahlcr0-0';
    diffx = trackNum;
    buildScriptTagWithId('trackScript' + trackNum, url);
  }
  
  function startAjaxLoader() {
    wr = document.getElementById("playlistWrapper");
    loadImg = document.createElement("img");
    loadImg.setAttribute("src", "images/ajax-loader.gif");
    loadImg.setAttribute("id", "ajaxLoader");
    wr.appendChild(loadImg);
  }
  
  function stopAjaxLoader() {
    wr = document.getElementById("playlistWrapper");
    loadImg = document.getElementById("ajaxLoader");
    wr.removeChild(loadImg);
  }
  
  function checkTracksLength(type) {
    if (!tracks.length) {
      stopAjaxLoader();
      content = document.getElementById("videoContent");
      error = document.createElement("div");
      error.setAttribute("id", "error");
      errorp = document.createElement("p");
      if (type == 0) {
        errorp.innerHTML = "Sorry, no results could be found on Last.fm. Or maybe you just misspelled your search!";
      } else if (type == 1) {
        errorp.innerHTML = "Sorry, no results could be found on YouTube. We tried!";
      }
      error.appendChild(errorp);
      content.innerHTML = '';
      content.appendChild(error);
    }
  }
  
  function initVideoId() {
    checkTracksLength(0);
    url = 'http://gdata.youtube.com/feeds/api/videos?alt=json-in-script' +
        '&category=Music&vq=' + escape(tracks[initx][0]) + '+' + escape(tracks[initx][1]) +
        '&orderby=relevance&start-index=1&max-results=2&format=5' +
        '&callback=populateVideoId&client=ytapi-AdrianBravo-Muzakbox-llahlcr0-0';
    buildScriptTagWithId('trackScript' + initx, url);
  }
  
  function buildScriptTagWithId(id, url) {
    var head = document.getElementById("jsx");
    var script = document.createElement("script");
    script.setAttribute("type", "text/javascript");
    script.setAttribute("src", url);
    script.setAttribute("id", id);
    head.appendChild(script);
  }
  
  function removeScriptTagWithId(id) {
    head = document.getElementById("jsx");
    script = document.getElementById(id);
    head.removeChild(script);
  }
  
  function removeTrackFromTracks(trackid) {
    var temp = new Array();
    for (track in tracks) {
      if (trackid != track) temp.push(tracks[track]);
    }
    tracks = temp;
    checkTracksLength(1)
  }
  
  function populateVideoId(json) {
    removeScriptTagWithId('trackScript' + initx);
    
    if (!json["feed"]["entry"]) {
      removeTrackFromTracks(initx);
      if (initx + 1 > tracks.length) {
        loadNewVideo(tracks[0][3],0);
        stopAjaxLoader();
        constructPlaylist();
        return;
      }
      initVideoId();
      return;
    }
    
    if (!json["feed"]["entry"][1]) {
      tracks[initx][5] = 0;
    } else {
      tracks[initx][5] = 1;
    }
    
    tracks[initx][2] = 1; // (incremented 0th index to 1)
    tracks[initx][3] = parseVideoId(json["feed"]["entry"][0]["id"]["$t"]);

    initx++;
    
    if (initx + 1 > tracks.length) {
      loadNewVideo(tracks[0][3],0);
      stopAjaxLoader();
      constructPlaylist();
      return;
    }
    initVideoId();
  }
  
  function parseVideoId(string) {
    arr = string.split('/');
    cnt = arr.length;
    return arr[cnt-1];
  }
  
  function constructPlaylist() {
    var playlist = document.createElement('div');
    var playlistScrollerEnd = document.createElement('div');
    playlist.setAttribute('id', 'playlist');
    playlistScrollerEnd.setAttribute('id', 'playlistScrollerEnd');
    playlist.style.position = "relative";
    playlist.style.top = "0px";
    
    
    for (track in tracks) {
      var wrapper = document.createElement('div');
      var item = document.createElement('div');
      var control = document.createElement('div');
      wrapper.className = 'playlistItemWrapper';
      wrapper.setAttribute('id', 'track' + track);
      item.className = 'playlistItem';
      control.className = 'playlistControl';

      var call = 'playTrack(' + track + ');';
      wrapper["onclick"] = new Function(call);
      
      
      var visTrack = parseInt(track) + 1;
      item.appendChild(document.createTextNode(visTrack + '. ' + substr(tracks[track][1])));


      var call = 'hoverPLW(' + track + ');';
      wrapper["onmouseover"] = new Function(call);
      var call = 'hoverPLWEnd(' + track + ');';
      wrapper["onmouseout"] = new Function(call);

      wrapper.appendChild(item);
      wrapper.appendChild(control);
      playlist.appendChild(wrapper);
      lastTrack = wrapper;
    }
    playlist.appendChild(playlistScrollerEnd);
    document.getElementById('playlistWrapper').appendChild(playlist);
    createScrollBar();
    playlistLoaded = 1;
    playlistDiv = playlist;
    lastTrack.style.borderBottom = '0';
    volS.style.left = (ytplayer.getVolume()/2) + "px";
  }
  
  function selectTrack(e) {
    report(e.shiftKey);
    track = e.target;
/*
  <div style="cursor: default;" id="track0" class="playlistItemWrapper playlistPlaying">
    <div style="color: rgb(153, 153, 153);" class="playlistItem">1. Skanky Panky</div>
    <div class="playlistControl">
      <img style="cursor: default;" id="prev" src="images/cycleup_empty.png">
      <span id="ytIndex"> 1 </span>
      <img style="cursor: pointer;" id="next" src="images/cycledown.png">
    </div>
  </div
*/
    report("track: " + track + ", track.id: " + track.getAttribute("id") + ", track.className: " + track.className);
    tid = track.getAttribute("id");
    if (track.className == 'playlistItem' || track.className == 'playlistControl') {
      track = track.parentNode;
    } else if (tid == "prev" || tid == "next") {
      return;
    } else if (tid == "ytIndex") {
      track = track.parentNode.parentNode;
    }
    
    track.className = track.className + ' playlistSelected';
  }
  
  function updatePlaylist() {
    if (playlistLoaded) {
      for (track in tracks) {
        var state = getPlayerState();
        var currentItem = document.getElementById('track' + track);
        var itemClass = currentItem.className;
        if (track != videoI && (itemClass != 'playlistItemWrapper' && itemClass != 'playlistItemWrapper playlistSelected')) {
          currentItem.className = 'playlistItemWrapper';
          currentItem.lastChild.innerHTML = '';
          var call = 'playTrack(' + track + ');';
          currentItem["onclick"] = new Function(call);
          currentItem.firstChild.style.color = '#666666';
	  currentItem.style.cursor = 'pointer';
        }
        if (track == videoI && itemClass == 'playlistItemWrapper') {
          currentItem.className = 'playlistItemWrapper playlistPlaying';
          currentItem["onclick"] = '';
          currentItem.firstChild.style.color = '#999999';
	  currentItem.style.cursor = 'default';
	}
	if (track == videoI && itemClass == 'playlistItemWrapper playlistPlaying' && currentItem.lastChild.innerHTML == '' && (state == 2 || state == 1 || state == 0)) {
          var upSpan = document.createElement('img');
	  upSpan.setAttribute('src','images/cycleup.png');
          upSpan.setAttribute('id', 'prev');
          call = 'tryDifferentTrack(' + track + ',0);';
          upSpan["onclick"] = new Function(call);

          currentItem.lastChild.appendChild(upSpan);

	  var ytIndex = document.createElement('span');
	  ytIndex.setAttribute('id','ytIndex');
	  ytIndex.appendChild(document.createTextNode(' ' + tracks[track][2] + ' '));
          currentItem.lastChild.appendChild(ytIndex);

          var downSpan = document.createElement('img');
	  downSpan.setAttribute('src','images/cycledown.png');
          downSpan.setAttribute('id', 'next');
          call = 'tryDifferentTrack(' + track + ',1);';
          downSpan["onclick"] = new Function(call);
          currentItem.lastChild.appendChild(downSpan);

          handleCycle(track);
        }
      }
    }
  }

  function ajax(url, vars, callbackFunction) {
    ajaxing = 1;
    var request = window.XMLHttpRequest ?
    new XMLHttpRequest() : new ActiveXObject("MSXML2.XMLHTTP.3.0");
    request.open("GET", url, true);
    request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    request.onreadystatechange = function() {
      if (request.readyState == 4 && request.status == 200) {
        if (request.responseText) {
          callbackFunction(request.responseText);
        }
      }
    };
    request.send(vars);
  }
  
  function addToPlaylist(resp) {
    report(resp);
    trackNum = tracks.length
    track = new Array('Kid Koala', 'Fender Bender #2', '0', '', '1', '0');
    tracks.push(track);
    
      var wrapper = document.createElement('div');
      var item = document.createElement('div');
      var control = document.createElement('div');
      wrapper.className = 'playlistItemWrapper';
      wrapper.setAttribute('id', 'track' + trackNum);
      item.className = 'playlistItem';
      control.className = 'playlistControl';

      var call = 'playTrack(' + trackNum + ');';
      wrapper["onclick"] = new Function(call);
      
      
      var visTrack = parseInt(trackNum) + 1;
      item.appendChild(document.createTextNode(visTrack + '. ' + substr(tracks[trackNum][1])));


      var call = 'hoverPLW(' + trackNum + ');';
      wrapper["onmouseover"] = new Function(call);
      var call = 'hoverPLWEnd(' + trackNum + ');';
      wrapper["onmouseout"] = new Function(call);

      wrapper.appendChild(item);
      wrapper.appendChild(control);
      playlist = document.getElementById('playlist');
      playlist.appendChild(wrapper);
      lastTrack = wrapper;
  }
  
  function handleCycle(trackNum) {
    plSpanR = document.getElementById("next");
    plSpanL = document.getElementById("prev");
    if (tracks[trackNum][5] == '1') {
      call = 'tryDifferentTrack(' + trackNum + ',1);';
      plSpanR["onclick"] = new Function(call);
      plSpanR.src = 'images/cycledown.png';
      plSpanR.style.cursor = 'pointer';
      attachCycleEvents(plSpanR, 'down');
    } else {
      plSpanR["onclick"] = '';
      plSpanR.src = 'images/cycledown_empty.png';
      plSpanR.style.cursor = 'default';
      detachCycleEvents(plSpanR, 'down');
    }
    if (tracks[trackNum][2] != '1') {
      call = 'tryDifferentTrack(' + trackNum + ',0);';
      plSpanL["onclick"] = new Function(call);
      plSpanL.src = 'images/cycleup.png';
      plSpanL.style.cursor = 'pointer';
      attachCycleEvents(plSpanL, 'up');
    } else {
      plSpanL["onclick"] = '';
      plSpanL.src = 'images/cycleup_empty.png';
      plSpanL.style.cursor = 'default';
      detachCycleEvents(plSpanL, 'up');
    }
  }
  
  function attachCycleEvents(cycleImg, dir) {
    try {
      if (dir == 'up') {
        cycleImg.addEventListener('mouseover', hoverCycleUp, false);
        cycleImg.addEventListener('mouseout', hoverCycleUpEnd, false);
      } else {
        cycleImg.addEventListener('mouseover', hoverCycleDown, false);
        cycleImg.addEventListener('mouseout', hoverCycleDownEnd, false);
      }
    } catch(err) {
      if (dir == 'up') {
        cycleImg.attachEvent('onmouseover', hoverCycleUp);
        cycleImg.attachEvent('onmouseout', hoverCycleUpEnd);
      } else {
        cycleImg.attachEvent('onmouseover', hoverCycleDown);
        cycleImg.attachEvent('onmouseout', hoverCycleDownEnd);
      }
    }
  }

  function detachCycleEvents(cycleImg, dir) {
    try {
      if (dir == 'up') {
        cycleImg.removeEventListener('mouseover', hoverCycleUp, false);
        cycleImg.removeEventListener('mouseout', hoverCycleUpEnd, false);
      } else {
        cycleImg.removeEventListener('mouseover', hoverCycleDown, false);
        cycleImg.removeEventListener('mouseout', hoverCycleDownEnd, false);
      }
    } catch(err) {
      if (dir == 'up') {
        cycleImg.detachEvent('onmouseover', hoverCycleUp);
        cycleImg.detachEvent('onmouseout', hoverCycleUpEnd);
      } else {
        cycleImg.detachEvent('onmouseover', hoverCycleDown);
        cycleImg.detachEvent('onmouseout', hoverCycleDownEnd);
      }
    }
  }