$(document).ready(function(){
//пользовательская анимация  
 //смена слайдов  
var animations        = ['right','left','top','bottom','rightFade','leftFade','topFade','bottomFade'];  
 var total_anim        = animations.length;  
//смените опции ниже на любую возможную из плагина easing   
 var easeType      = 'swing';  
 //скорость смены  
 var animSpeed     = 450;  
//кеширование  
var $hs_container = $('#hs_container');  
 var $hs_areas     = $hs_container.find('.hs_area'); 
 
 //для начала загрузить все изображения  
  $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);  
 //Когда мышка переходит границу площади мы анимируем  
 //изображение (случайная анимация из массива),  
 //так, чтобы появилась следующая картинка.  
  //"over" метка которая указывает на то, можем ли мы анимировать  
 //площадь или нет  
 $area.data('over',true).bind('mouseenter',function(){  
 if($area.data('over')){  
 $area.data('over',false);  
//Сколько изображений в этой площади?  
 var total     = $area.children().length;  
//видимые изображения  
 var $current  = $area.find('img:visible');  
//индекс видимых изображений  
 var idx_current = $current.index();  
//следующее изображение для показа  
 var $next     = (idx_current == total-1) ? $area.children(':first') : $current.next();  
 //показать следующее (пока еще не видимое)  
 $next.show();  
 //выбрать случайную анимацию  
 var anim      = animations[Math.floor(Math.random()*total_anim)];  
 switch(anim){  
 //выезд справа  
 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;  
 //теперь слева  
 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;  
 //...сверху  
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;  
 //... снизу  
 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;  
 //справа и расстворение  
 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;  
//слева и расстворение  
 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;  
 //сверху и расстворение  
 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;  

//снизу и расстворение  
 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;  
 }  
 }  
 });  
 });  
 //При нажатии в любом месте происходит смена на всех площадях  
     
$hs_container.bind('click',function(){  
$hs_areas.trigger('mouseenter');  
});  
 }  
 }).attr('src',$this.attr('src'));  
 }); 


		




});