$(function() {
		/**
		* for each menu element, on mouseenter, 
		* we enlarge the image, and show both sdt_active span and 
		* sdt_wrap span. If the element has a sub menu (sdt_box),
		* then we slide it - if the element is the last one in the menu
		* we slide it to the left, otherwise to the right
		*/
		$('#sdt_menu > li').bind('mouseenter',function(){
			var $elem = $(this);
				$elem.find('img')
				 .stop(true)
				 .animate({ 'width':'170px', 'height':'170px', 'left':'0px' }, 500,'easeOutBack')
				 .andSelf()
				 .find('.sdt_wrap')
				 .stop(true)
				 .animate({'top':'140px'},800,'easeOutBack')
				 .andSelf()
				 .find('.sdt_active')
				 .stop(true)
				 .animate({'height':'170px'},500,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},800);
						}	
					});
		}).bind('mouseleave',function(){
		var $elem = $(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'},800)
		 .andSelf().find('img')
		 .stop(true)
		 .animate({ 'width':'0px', 'height':'0px', 'left':'85px'},800)
		 .andSelf()
		 .find('.sdt_wrap')
		 .stop(true)
		 .animate({'top':'25px'},500);
		});
	});