$(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':'120px',
                    'height':'69px',
                    'left':'0px'
                 },400,'easeOutBack')
                 .andSelf()
                 .find('.sdt_wrap')
                 .stop(true)
                 .animate({'top':'100px'},500,'easeOutBack')
                 .andSelf()
                 .find('.sdt_active')
                 .stop(true)
                 .animate({'height':'150px'},300,function(){
                var $sub_menu = $elem.find('.sdt_box');
                if($sub_menu.length){
                    var left = '120px';
                    if($elem.parent().children().length == $elem.index()+1)
                        left = '-120px';
                    $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({
                    'width':'0px',
                    'height':'0px',
                    'left':'70px'},400)
                 .andSelf()
                 .find('.sdt_wrap')
                 .stop(true)
                 .animate({'top':'5px'},500);
        });
    });