// Get the 'left' css property of the UL containing the list of videos.
function getLeftOffset(){
  return parseInt($('#recipe-videos > ul').css('left'));
}
// Build the video scoller and associated events when the documents is loaded.
$(document).ready(function(){
  var videoList = $('#recipe-videos > ul');
  var videoListWidth = 0;
  // Get the list of videos and expand to prevent the items from wrapping down.
  $('#recipe-videos > ul > *').each(function(){
    videoListWidth += $(this).width();
  });
  videoList.width(videoListWidth + 25);
  // Set initial pointers for traversing the video list
  firstItem = $('#recipe-videos > ul > *')[3];
  currItem = $(firstItem);
  nextItem = $(currItem).next();
  prevItem = $(currItem).prev();
  // Move the list left (to the next item) on click.
  $('a.btn-next').click(function(event){
    videoList.queue(function(){
      if(nextItem.length != 0){
        videoList.animate({left: getLeftOffset() - $(nextItem).width()}, 300);
        currItem = $(nextItem);
        nextItem = $(currItem).next();
        prevItem = $(currItem).prev();
      }
      $(this).dequeue();
    });
    return false;
  });
  // Move the list right (to the previous item) on click.
  $('a.btn-prev').click(function(event){
    videoList.queue(function(){
      if (prevItem.length != 0 && currItem[0] != firstItem) {
        videoList.animate({left: getLeftOffset() + $(currItem).width()}, 300);
        currItem = $(prevItem);
        nextItem = $(currItem).next();
        prevItem = $(currItem).prev();
      }
      $(this).dequeue();
    });
    return false;
  });
});