$(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		= 2000;

				//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('mouseenter2',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','2');

													$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','2');

													$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','2');

													$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','2');

													$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','2');

													$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','2');

													$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','2');

													$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','2');

													$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','2');

													$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(){

								

							//});
							
							

						}

					}).attr('src',$this.attr('src'));

				});			

				



            });