// t: current time, b: begInnIng value, c: change In value, d: duration
jQuery.easing['jswing'] = jQuery.easing['swing'];
jQuery.extend( jQuery.easing,
{
	imgsAnimation: function (x, t, b, c, d, s) {
		if (s == undefined) s = 1.70158;
		return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
	}
});

$(function () {
    /**
    * for each menu element, on mouseenter, 
    * we enlarge the image, and show both slm_active span and 
    * slm_wrap span. If the element has a sub menu (slm_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
    */
    $('#slm_menu > li').bind('mouseenter', function () {
        var $elem = $(this);
        $elem.find('img')
					.stop(true)
					.animate({
					    'width': '140px',
					    'height': '84px',
					    'left': '0px'
					}, 400, 'imgsAnimation')
					.andSelf()
					.find('.slm_wrap')
					.stop(true)
					.animate({ 'top': '140px' }, 500, 'imgsAnimation')
					.andSelf()
					.find('.slm_active')
					.stop(true)
					.animate({ 'height': '170px' }, 300, function () {
					    var $sub_menu = $elem.find('.slm_box');
					    if ($sub_menu.length) {
					        var left = '140px';
					        if ($elem.parent().children().length == $elem.index() + 1)
					            left = '-140px';
					        $sub_menu.show().animate({ 'left': left }, 200);
					    }
					});
	}).bind('mouseleave', function () {
        var $elem = $(this);
        var $sub_menu = $elem.find('.slm_box');
        if ($sub_menu.length)
            $sub_menu.hide().css('left', '0px');

        $elem.find('.slm_active')
					.stop(true)
					.animate({ 'height': '0px' }, 300)
					.andSelf().find('img')
					.stop(true)
					.animate({
					    'width': '0px',
					    'height': '0px',
					    'left': '70px'
					}, 400)
					.andSelf()
					.find('.slm_wrap')
					.stop(true)
					.animate({ 'top': '25px' }, 500);
    });
});