$(document).ready(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({
				'opacity':'1.0',
				'top':'0px'
			 },400,'easeOutQuint')
			 .andSelf()
			 .find('.sdt_imgwrap')
			 .stop(true)
			 .animate({'top':'-40px',"height":"80"},400,'easeOutQuint')
			 .andSelf()
			 .find('.sdt_wrap')
			 .stop(true)
			 .animate({'top':'95px'},500,'easeOutQuint')
			 .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);
				}
			})
			 .andSelf()
			 .find('.sdt_active_2')		//*** TODO if two classes sdt_active then this is getting called twice
			 .stop(true)
			 .animate({'height':'340px'},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);
				}
			})
			 .andSelf()
			 .find('.sdt_active_3')		//*** TODO if two classes sdt_active then this is getting called twice
			 .stop(true)
			 .animate({'height':'410px'},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 = $(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({
				'top':'40px',
				'opacity':'0.0'},400)
			 .andSelf().find('.sdt_imgwrap')
			 .stop(true)
			 .animate({
				'top':'0px',
				'height':'0px'},400)
			 .andSelf()
			 .find('.sdt_wrap')
			 .stop(true)
			 .animate({'top':'5px'},500);
	});
});