var itemwidth = 20;
var selected = 0;
var count;
var timer;
  
$(document).ready(function() {

  count = $("#slideshow_container .buttons ul li").size();
    
  $("#slideshow_container .buttons ul").css("width", (count * itemwidth) + "px");      
  
  $("#slideshow_container .buttons ul li:first a").each(function(){
    $(this).find("img").attr("src", "images/slider_button1.png");
    $(this).addClass("selected");
  });

  $("#slideshow_container .buttons ul li a").click(function(){
    switchImage.call(this);
    return false;
  });
  
  $("#slideshow_container .buttons ul li a.showcase_left").click(function(){
    clearTimeout(timer);
    prevImage();
    timer = setTimeout("prevImage(3000)",3000)
    return false;
  });
  
  $("#slideshow_container .buttons ul li a.showcase_right").click(function(){
    clearTimeout(timer);
    nextImage();
    timer = setTimeout("nextImage(3000)",3000)
    return false;
  });
  
  timer = setTimeout("nextImage(3000)",3000)
});

function prevImage(delay)
{
    var prev = parseInt(selected) - 1
    if (prev < 0) {prev = count - 1;}
    switchImage.call($("#slideshow_container .buttons ul li:eq(" + prev + ") a"));
    
    if (delay > 0)
    {
      timer = setTimeout("prevImage(" + delay + ")", delay);
    }
}

function nextImage(delay)
{
    var next = parseInt(selected) + 1;
    if (next >= count) {next = 0;}
    switchImage.call($("#slideshow_container .buttons ul li:eq(" + next + ") a"));
    
    if (delay > 0)
    {
      timer = setTimeout("nextImage(" + delay + ")", delay);
    }
}

function switchImage(callback)
{
    if ($("#bigimage img").size() > 1)
    {
      $("#bigimage img:last").stop(true, true).remove();
    }
    
    var current = $("#slideshow_container .buttons ul li:eq(" + selected + ") a");
    current.removeClass("selected");
    
    current = selected;
  
    selected = $(this).attr("id").replace("showcase_", "");
    
    $(this).addClass("selected");
           
    $("#bigimage img").before('<img src="' + $(this).find("img").attr("longdesc") + '" />');
    
    $("#bigimage img:last").fadeOut(function(){
        $(this).remove();
    });
    
    if (selected >= 6)
    {
      $("#slideshow_container .buttons ul").animate({left: '-' + ((selected - 5) * itemwidth) + 'px'}, 200);
    }
    else if(current >=6)
    {
       $("#slideshow_container .buttons ul").animate({left: '0px'}, 200);
    }
}