$(document).ready(function () {
  // hide all but first image if we have js
  $('.large-images li:not(:first)').hide();
  $('.cover-images li:not(:first)').hide();
  // show thumbnails if we have js
  $('.small-images').show();
  // control the visibility of the control buttons
  $('.large-images img, .controls').bind("mouseenter", showControls).bind("mouseleave", hideControls);
   $('.cover-images img, .controls').bind("mouseenter", showControls).bind("mouseleave", hideControls);
  
  hideControls();
  
  function showControls() {
    $('.controls').show();
  }

  function hideControls() {
    $('.controls').show();
  }
  
  $('.prev').bind("click", function() {
    prev();
    return false;
  });
  
  $('.next').bind("click", function() {
    next();
    return false;
  });
  
  $('.small-images a').bind("click", function() {
    display($(this).parent().attr('value'));
    return false;
  });
});

function prev() {
  var total = $(".large-images li").length;
  var current = $(".large-images li:visible").attr('value');
  if(current > 1) {
    display(parseInt(current)-1);
  } else {
    display(total);
  }
}

function next() {
  var total = $(".large-images li").length;
  var current = $(".large-images li:visible").attr('value');
  if(current < total) {
    display(parseInt(current)+1);
  } else {
    display(1);
  }
}

function display(num) {
  $(".large-images li").hide();
  $(".large-images li[value='"+num+"']").show();
  $(".cover-images li").hide();
  $(".cover-images li[value='"+num+"']").show();
  $('.small-images a').removeClass('selected');
  $(".small-images li[value='"+num+"'] a").addClass('selected');
}