jQuery(function() {
	jQuery('#sdt_menu > li').bind('mouseenter',function(){
		var $elem = jQuery(this);
		$elem.find('img')
			 .stop(true)
			 .animate({
				'width':'170px',
				'height':'170px',
				'left':'0px'
			 },400,'easeOutBack')
			 .andSelf()
			 .find('.sdt_wrap')
			 .stop(true)
			 .animate({'top':'140px'},500,'easeOutBack')
			 .andSelf()
			 .find('.sdt_active')
			 .stop(true)
			 .animate({'height':'170px'},300,function(){
			var $sub_menu = $elem.find('.sdt_box');
			if($sub_menu.length){
				var left = '170px';
				if($elem.parent().children().length == $elem.index()+1)
					left = '-170px';
				$sub_menu.show().animate({'left':left},200);
				
			}
		});
	}).bind('mouseleave',function(){
		var $elem = jQuery(this);
		var $sub_menu = $elem.find('.sdt_box');
		if($sub_menu.length)
			$sub_menu.hide().css('left','0px');

		$elem.find('.sdt_active')
			 .stop(true)
			 .animate({'height':'0px'},300)
			 .andSelf().find('img')
			 .stop(true)
			 .animate({
				'width':'0px',
				'height':'0px',
				'left':'85px'},400)
			 .andSelf()
			 .find('.sdt_wrap')
			 .stop(true)
			 .animate({'top':'25px'},500);
	});
	
	
 	makeScrollable("div.sdt_box","div.menu_box");
	
});


function makeScrollable(wrapper,scrollable){
	// Get jQuery elements
  	var wrapper = jQuery(wrapper), scrollable = jQuery(scrollable);
	
	// mousescroll
  	// height of area at the top at bottom, that don't respond to mousemove
  	var inactiveMargin = 80;         
  	// Cache for performance
  	var wrapperWidth = wrapper.width();
  	var wrapperHeight = wrapper.height();
  	// Using outer height to include padding too
  	//var scrollableHeight = scrollable.outerHeight() + 2*inactiveMargin;
  	var scrollableHeight = scrollable.height() + 2*inactiveMargin;
  	var scrollHeight = scrollable.height();
  	
  	// Do not cache wrapperOffset, because it can change when user resizes window
  	// We could use onresize event, but it's just not worth doing that 
 	 // var wrapperOffset = wrapper.offset();

  	//When user move mouse over menu          
  	wrapper.mousemove(function(e){

    var wrapperOffset = jQuery(this).offset();
    var scrollHeight = jQuery(this).find("div.menu_box").height()+2*inactiveMargin;
    // Scroll menu
    var top = (e.pageY - wrapperOffset.top) * (scrollHeight - wrapperHeight) / wrapperHeight  - inactiveMargin;
	top = parseInt(top);
    if (top < 0){
      top = 0;
    }
 	/*
 	console.log(e.pageY + "wO"+wrapperOffset.top+"sH"+scrollableHeight+"wH"+wrapperHeight+"iM"+inactiveMargin+"scrollheight"+scrollHeight);
	console.log(e.pageY - wrapperOffset.top);
   console.log(scrollableHeight - wrapperHeight);
   console.log(wrapperHeight - inactiveMargin);
	*/
    wrapper.scrollTop(top);

  });
}