var visibleImages = 4;
var imageWidth = 48;
var currentImage = 0;
var total = 0;
var slidingAnimation = 1000;

function prepareGallery() {
   total = $('.billboard-image').length;
   var gallery_width = visibleImages*(imageWidth + 1) + 1;
   var total_width   = total*(imageWidth + 1) + 1;
   $('#gallery-images').css('overflow', 'hidden').width(gallery_width).css('left', '440px');
   $('#the-images').width(total_width);
   var arrow_left  = '<div id="prev-image"></div>';
   var arrow_right = '<div id="next-image"></div>';
   $('#billboard_gallery').append(arrow_left + arrow_right);
   $('#prev-image').click(movePrev);
   $('#next-image').click(moveNext);

   $('.billboard-image').click( function() {
	   var clicked = $(this);
	   $('#the-image').fadeOut('slow', function() {
  	   $('#the-image').attr('src', clicked.children('img').eq(0).attr('src')).fadeIn();
  	 });
	   $('#the-caption').css('color', 'white').fadeOut('slow', function() {
	    $('#the-caption').html(clicked.attr('title')).fadeIn().css('color', '');
	   });
	   return false;
	});
	
	$('.billboard-image').bind('mouseenter', function() {
	  var $f = $(this);
	  $f.animate({opacity:"1"},5).stop();
//	  $f.css("backgroundColor", "white");
	  $f.fadeOut(200);
	  $f.fadeIn(50);
//	  $f.css("backgroundColor", "");
	});
	$('#gallery-images').css('visibility','visible');
}

function moveNext() {
  if (currentImage + visibleImages >= total) return true;
  currentImage++;
//  var left = parseInt($('#the-images').css('left'));
//  left = left - (imageWidth + 1);
  var left = -currentImage*(imageWidth + 1);
  $('#the-images').animate({'left': left + 'px'}, slidingAnimation);
}

function movePrev() {
  if (currentImage == 0) return true;
  currentImage--;
//  var left = parseInt($('#the-images').css('left'));
//  left = left - (imageWidth + 1);
  var left = -currentImage*(imageWidth + 1);
  $('#the-images').animate({'left': left + 'px'}, slidingAnimation);
/*
  currentImage--;
  var left = parseInt($('#the-images').css('left'));
  left = left + (imageWidth + 1);
  $('#the-images').animate({'left': left + 'px'}, slidingAnimation);
  */
}