var vidThumbsPerPage = 12;

var playerWidth = 480;
var playerHeight = 395;

var currentVideo = -1;
var backgrounds = [
  '/images/background_01.jpg',
  '/images/background_02.jpg',
  '/images/background_03.jpg',
  '/images/background_04.jpg'
];

var thumbPages;
var totalVideos = 0;
var videos = [];
var viewingPage = 0;
var bgImageIdx = 0;
var queryStringKeys = [];
var PopWin;

function openHelpwindow() {
  PopWin=window.open('help_window.html','Help_Window', config='width=560, height=350, scrollbars=yes, resizable=yes');
  return false;
} // openHelpwindow()

function ytVideo(title, description, thumbnailUrl, playerUrl) {
  this.title = title;
  this.shortTitle = (title.length >= 30) ? title.substr(0, 30) + '...' : title;
  this.description = description;
  this.thumbnailUrl = thumbnailUrl;
  this.playerUrl = playerUrl;
  return this;
} // ytVideo()


function preloadImages() {
  for(var i = 0; i<arguments.length; i++) {
    $("<img>").attr("src", arguments[i]);
  }
} // preloadImages()

// Event bindings and setup
function init() {
  $(".btn-slide").click(function(){
    $("#panel").slideToggle("slow");
    $(this).toggleClass("active"); return false;
  });
  
  $("#right-arrow").bind("click", function(e){
      showPage(viewingPage + 1);
    }
  );
  
  $("#left-arrow").bind("click", function(e){
      showPage(viewingPage - 1);
    }
  );
  
  preloadImages(backgrounds);
} // init()

function startDock() {
  $('#dock').Fisheye(
    {
      maxWidth: 80,
      items: 'a',
      itemsText: 'span',
      container: '.dock-container',
      itemWidth: 55,
      proximity: 60,
      halign : 'center',
      valign : 'bottom'
    }
  );
} // startDock()

function randVal(Min, Max) {
  return Math.floor(Math.random() * ((Max + 1) - Min)) + Min;
} // randVal()

function showPage(pageNum) {
  var html = [];
  var v;

  if (pageNum < 1) { pageNum = thumbPages; }
  if (pageNum > thumbPages) { pageNum = 1; }
  offset = (pageNum - 1) * vidThumbsPerPage;
  viewingPage = pageNum;

  for (i = offset; i < offset + vidThumbsPerPage; i++) {
    v = videos[i];
    if (v != null) {
      html.push('<a class="dock-item" href="#" onclick="return showVideo(' + i + ', \'', v.playerUrl,'\', \'' + v.title.replace(/'/g, '\\\'') + '\', \'' + v.description.replace(/'/g, '\\\'') + '\');">');
      html.push('<div class="thumb-wrap">');
      html.push('<img src="', v.thumbnailUrl,'" alt="', v.title, '" title="', v.description, '" id="thumb_' + i + '" />');
      html.push('<span class="thumb-label">', v.shortTitle, '</span>');
      html.push('</div>');
      html.push('</a>\n');
    }
  }
  
  $('#page-count').html('Page ' + viewingPage + '/' + thumbPages);
  $('#the-dock').html(html.join(''));
  startDock();
} // showPage()

function createKeyFromTitle(title) {
  var temp = title.replace(/[^A-Za-z0-9-]/g, '-');
  while (temp.indexOf('--') >= 0) {
    temp = temp.replace('--', '-');
  }
  return temp;
} // createKeyFromTitle()

function showMyVideos(data) {
  var feed = data.feed;
  var entries = feed.entry || [];
  var firstUrl, firstCap, firstDesc, firstKey;
  var dbg = '';
  
  totalVideos = entries.length;
  
  thumbPages = Math.ceil(totalVideos / vidThumbsPerPage);
  var randVid = randVal(0, entries.length > 12 ? 11 : entries.length - 1);
  var html = [];
  
  var key = window.location.search.substring(1, window.location.search.length);
  
  for (var i = 0; i < entries.length; i++) {
    var entry = entries[i];
    var title = entry.title.$t;
    title = title.replace(/^Yamaha\s+Outboards\s+:\s+/gi, '');
    var shortTitle = (title.length >= 30) ? title.substr(0, 30) + '...' : title;
    var description = entry.content.$t;
    var thumbnailUrl = entries[i].media$group.media$thumbnail[0].url
    var playerUrl = entries[i].media$group.media$content[0].url;
    
    if (i == randVid) {
      firstUrl = playerUrl;
      firstCap = title;
      firstDesc = description;
    }
    videos.push(new ytVideo(title, description, thumbnailUrl, playerUrl));
    queryStringKeys[createKeyFromTitle(title)] = new ytVideo(title, description, thumbnailUrl, playerUrl);
    dbg += createKeyFromTitle(title) + '\n';
  } // for()
  
  if (key in queryStringKeys) {
    firstUrl = queryStringKeys[key].playerUrl;
    firstCap = queryStringKeys[key].title;
    firstDesc = queryStringKeys[key].description;
  }
  
  init();
  
  showPage(1);
  showVideo(randVid, firstUrl, firstCap, firstDesc);
} // showMyVideos()

function cycleBackground() {
  bgImageIdx++;
  if (bgImageIdx > backgrounds.length - 1) { bgImageIdx = 0; }
  changeBackground(backgrounds[bgImageIdx]);
} // cycleBackground()

function changeBackground(newBackground) {
  $('#bg-image').css({background: 'url(\'' + newBackground + '\')'});
} // changeBackground()

function showVideo(id, url, caption, description) {
  var temp = '';
  
  temp += '<embed width="' + playerWidth + '" height="' + playerHeight + '" type="application/x-shockwave-flash" autoplay="1" rel="0" src="';
  temp += url + '&autoplay=1&rel=0';
  temp += '" pluginspage="http://www.adobe.com/go/getflashplayer" flashvars=""/>';
  $('#video-player').html(temp);
  $('#video-caption').html(HTMLescape('Yamaha Outboards : ' + caption));
  $('#video-description').html('<strong>Video Description:</strong> ' + HTMLescape(description));
   if (currentVideo >= 0) {
    $('#thumb_' + currentVideo).css({ border: "none" });
  }
  $('#thumb_' + id).css({ border: "2px solid #d00" });
  currentVideo = id;
  cycleBackground();
  pageTracker._trackPageview("video.html?" + escape(createKeyFromTitle(caption)));
  //var directLink = window.location.protocol + '//' + window.location.host + window.location.pathname + '?' + createKeyFromTitle(caption);
  //window.location.href = directLink;
  
  return false;
} // showVideo()

function HTMLescape(inString) {
  var temp = inString || '';
  temp = temp.replace("&", "&amp;");
  temp = temp.replace("<", "&lt;");
  temp = temp.replace(">", "&gt;");
  return temp;
} // HTMLescape()