// JavaScript Document
$(document).ready(function(){
    //BANNER SLIDER
	lastBlock = $("#a1");
    maxWidth = 576;
    minWidth = 96;	
    $("#banner ul li a").bind('click',
      function(){
        $(lastBlock)
			.animate({width: minWidth+"px"},
					 { queue:false, duration:400 });
		$(this)
			.animate({width: maxWidth+"px"}, 
					 { queue:false, duration:400});
		lastBlock = this;
      }
    );
	
	//THUMBNAILS
	$("#thumbs > div:first-child").css("margin-left","0px");
	var move = -15;//move the image in pixel	
	var zoom = 1.2;//zoom percentage, 1.2 =120%

	$('.item').hover(function() {//On mouse over those thumbnail		
		width = $('.item').width() * zoom;//Set the width and height according to the zoom percentage
		height = $('.item').height() * zoom;		
		//Move and zoom the image
		$(this).find('img').stop(false,true).animate({'width':width, 'height':height, 'top':move, 'left':move}, {duration:200});		
		//Display the caption
		$(this).find('div.caption').stop(false,true).fadeIn(200);
	},
	function() {
		//Reset the image
		$(this).find('img').stop(false,true).animate({'width':$('.item').width(), 'height':$('.item').height(), 'top':'0', 'left':'0'}, {duration:100});	
		//Hide the caption
		$(this).find('div.caption').stop(false,true).fadeOut(200);
	});
	
});