$(function() {
	//custom animations to use
	//in the transitions
	var animations		= ['rightFade','leftFade','topFade','bottomFade'];
	var total_anim		= animations.length;
	//just change this to one of your choice
	var easeType		= 'swing';
	//the speed of each transition
	var animSpeed		= 450;
	//caching
	var $hs_container	= $('#hs_container');
	var $hs_areas		= $hs_container.find('.hs_area');
	
	//first preload all images
	$hs_images          = $hs_container.find('img');
	var total_images    = $hs_images.length;
	var cnt             = 0;
	$hs_images.each(function(){
	var $this = $(this);
	$('<img/>').load(function(){
	++cnt;
	if(cnt == total_images){
		$hs_areas.each(function(){
		var $area 		= $(this);
		//when the mouse enters the area we animate the current
		//image (random animation from array animations),
		//so that the next one gets visible.
		//"over" is a flag indicating if we can animate 
		//an area or not (we don't want 2 animations 
		//at the same time for each area)
		$area.data('over',true).bind('mouseenter',function(){
		if($area.data('over')){
			$area.data('over',false);
			//how many images in this area?
			var total		= $area.children().length;
			//visible image
			var $current 	= $area.find('img:visible');
			//index of visible image
			var idx_current = $current.index();
			//the next image that's going to be displayed.
			//either the next one, or the first one if the current is the last
			var $next		= (idx_current == total-1) ? $area.children(':first') : $current.next();
			//show next one (not yet visible)
			$next.show();
			//get a random animation
			var anim		= animations[Math.floor(Math.random()*total_anim)];
			switch(anim){
				//current slides out from the right	and fades out
				case 'rightFade':
					$current.animate({
						'left':$current.width()+'px',
						'opacity':'0'
					},
					animSpeed,
					easeType,
					function(){
						$current.hide().css({
							'z-index'	: '1',
							'left'		: '0px',
							'opacity'	: '1'
						});
						$next.css('z-index','9999');
						$area.data('over',true);
					});
					break;
				//current slides out from the left and fades out	
				case 'leftFade':
					$current.animate({
						'left':-$current.width()+'px','opacity':'0'
					},
					animSpeed,
					easeType,
					function(){
						$current.hide().css({
							'z-index'	: '1',
							'left'		: '0px',
							'opacity'	: '1'
						});
						$next.css('z-index','9999');
						$area.data('over',true);
					});
					break;
				//current slides out from the top and fades out	
				case 'topFade':
					$current.animate({
						'top':-$current.height()+'px',
						'opacity':'0'
					},
					animSpeed,
					easeType,
					function(){
						$current.hide().css({
							'z-index'	: '1',
							'top'		: '0px',
							'opacity'	: '1'
						});
						$next.css('z-index','9999');
						$area.data('over',true);
					});
					break;
				//current slides out from the bottom and fades out	
				case 'bottomFade':
					$current.animate({
						'top':$current.height()+'px',
						'opacity':'0'
					},
					animSpeed,
					easeType,
					function(){
						$current.hide().css({
							'z-index'	: '1',
							'top'		: '0px',
							'opacity'	: '1'
						});
						$next.css('z-index','9999');
						$area.data('over',true);
					});
					break;		
				default:
					$current.animate({
						'left':-$current.width()+'px'
					},
					animSpeed,
					easeType,
					function(){
						$current.hide().css({
							'z-index'	: '1',
							'left'		: '0px'
						});
						$next.css('z-index','9999');
						$area.data('over',true);
					});
					break;
			}	
		}
	});
});
					
//when clicking the hs_container all areas get slided
//(just for fun...you would probably want to enter the site
//or something similar)
$hs_container.bind('click',function(){
	$hs_areas.trigger('mouseenter');
});
}
}).attr('src',$this.attr('src'));
});			
});