var worksIndex;
var worksLocked;
var worksPageCount;
var preloadedImages = [];
var worksImages = [];
var worksCaptions = [];
var worksResetTimer = false;

function initWorks()
{
  worksLocked = false;
  worksPage = 1;
  worksPageCount = -2;
  $('#works_nav img').each(worksNav);
  $('#works_canvas img:first').css({display:'block'});
  $('#works_caption span:first').css({display:'block'});
  setInterval ( "autoWorks()", 30000 );
}

function autoWorks()
{
  if (worksResetTimer)
    worksResetTimer = false;
  else
    worksHandler(0,'>>');
}

function worksNav(index, element)
{
  var alt = $(this).attr('alt');
  $(this).click(function(){ worksHandler(index, alt)});
  $(this).hover(hoverNav, blurNav);
  worksPageCount++;
}

function worksHandler(index, alt)
{
  if (worksPage==index || worksLocked) return;
  worksLocked = true;
  worksResetTimer = true;
  var startLeft;
  var finishLeft;
  var transitionTime = 500;
  worksNavOff( $('#works_nav').find('img:nth-child('+(worksPage+1)+')') );
    
  switch(alt){
    case '<<':
      worksPage--;
      startLeft = -$('#works_canvas').width();
      finishLeft = $('#works_canvas').width();
      if (worksPage < 1)
        worksPage = worksPageCount;
      break;
    case '>>':
      worksPage++;
      startLeft = $('#works_canvas').width();
      finishLeft = -$('#works_canvas').width();
      if (worksPage > worksPageCount)
        worksPage = 1;
      break;
    case 'o':case 'O':
      if (worksPage > index){
        startLeft = -$('#works_canvas').width();
        finishLeft = $('#works_canvas').width();
	  } else{
        startLeft = $('#works_canvas').width();
        finishLeft = -$('#works_canvas').width();
	  }
      worksPage = index;
      break;
  }
  worksNavOn( $('#works_nav').find('img:nth-child('+(worksPage+1)+')') );
  $('#works_caption').append(worksCaptions[worksPage-1]);
  $('#works_caption span:last').css({left:startLeft, display:'block'}).animate({left:0}, {duration:transitionTime});
  $('#works_caption span:first').animate({left:finishLeft}, {duration:transitionTime});
  $('#works_canvas').append(worksImages[worksPage-1]);
  $('#works_canvas img:last').css({left:startLeft, display:'block'}).animate({left:0}, {duration:transitionTime});
  $('#works_canvas img:first').animate({left:finishLeft}, {duration:transitionTime , complete:worksRemove});
  
  function worksNavOn(button){
    var source = $(button).attr('src');
    $(button).attr({'src':source.replace('works_off','works_on'),'alt':'O'});
  }
  function worksNavOff(button){
    var source = $(button).attr('src');
    $(button).attr({'src':source.replace('works_on','works_off'),'alt':'o'});
  }
  function worksRemove(){
    $('#works_caption span:first').remove();
    $('#works_canvas img:first').remove();
	worksLocked = false;
  }
}

function hoverNav(){
  var source = $(this).attr('src');
  if (source.search('_hover.gif') == -1)
    $(this).attr({'src':source.replace('.gif','_hover.gif')});
}
function blurNav(){
  var source = $(this).attr('src');
  if (source.search('_hover.gif') > 0)
    $(this).attr({'src':source.replace('_hover.gif','.gif')});
}