$(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().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
								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'));
	});			
	

});