$(function() {
//custom animations to use
//in the transitions
var animations		= ['right','left','top','bottom','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('img').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('img: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
					case 'right':
						$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;
					//current slides out from the left
					case 'left':
						$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;
					//current slides out from the top	
					case 'top':
						$current.animate({
							'top':-$current.height()+'px'
						},
						animSpeed,
						easeType,
						function(){
							$current.hide().css({
								'z-index'	: '1',
								'top'		: '0px'
							});
							$next.css('z-index','9999');
							$area.data('over',true);
						});
						break;
					//current slides out from the bottom	
					case 'bottom':
						$current.animate({
							'top':$current.height()+'px'
						},
						animSpeed,
						easeType,
						function(){
							$current.hide().css({
								'z-index'	: '1',
								'top'		: '0px'
							});
							$next.css('z-index','9999');
							$area.data('over',true);
						});
						break;
					//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'));
});			


});