/*
  Applies "onover effect" on the links
   under the slider on the index page
*/
$(document).ready(function() {
	      
		/***************THUMBNAIL EFFECT -->>************/
		//move the image in pixel
		var move = -15;

		//zoom percentage, 1.2 =120%
		var zoom = 1.2;

		$('.item').click(function() {
			var targetUrl = $(this).attr("targetUrl");
			if(targetUrl)
				window.location = targetUrl;

		});
      
		//On mouse over those thumbnail
		$('.item').hover(function() {

			//Set the width and height according to the zoom percentage
			width = $('.item').width() * zoom;
			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);
		});

	// find the div.fade elements and hook the hover event
	$('.fadeThis').hover(function() {
		// on hovering over find the element we want to fade *up*
		var fade = $('> .hover', this);
 
		// if the element is currently being animated (to fadeOut)...
		if (fade.is(':animated')) {
			// ...stop the current animation, and fade it to 1 from current position
			fade.stop().fadeTo(500, 1);
		} else {
			fade.fadeIn(500);
		}
	}, function () {
		var fade = $('> .hover', this);
		if (fade.is(':animated')) {
			fade.stop().fadeTo(500, 0);
		} else {
			fade.fadeOut(500);
		}
	});
 
	// get rid of the text
	$('.fadeThis > .hover').empty();

});