/**
 * for each menu element, on mouseenter, 
 * we enlarge the image, and show both nav_active span and 
 * nav_wrap span. If the element has a sub menu (nav_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
 */
$(function() {
  $('ul#nav > li').bind('mouseenter',function(){

    var $elem = $(this);
    var $sub_menu = $elem.find('div.nav_box');
    var $link = $elem.find('span.nav_link');

	var $navbg = $elem.find('a.navbg');
	$navbg.stop(true).animate({ backgroundColor: '#000000' },300);

    $elem.find('img').stop(true).animate({
        'width':'300px',
        'height':'300px',
        'left':'0px'
      },400,'easeOutBack')
      .andSelf().find('.nav_wrap').stop(true).animate({'top':'140px'},500,'easeOutBack')
      .andSelf().find('.nav_link').stop(true).animate({color:"#FFFFFF"}, 800)
      .andSelf().find('.nav_active').stop(true).animate({'height':'200px'},300,function(){                                                                                                                                                               var $sub_menu = $elem.find('.nav_box');                                                                                                                                                               if($sub_menu.length){                                                                                                                                                                        var left = '300px';                                                                                                                                                               if($elem.parent().children().length == $elem.index()+1)                                                                                                                                                               left = '-300px';                                                                                                                                                               $sub_menu.show().animate({'left':left},200);                                                                                                                                                               }	                                                                                                                                                               });
      })
	  
	.bind('mouseleave',function(){
        var $elem = $(this);
        var $sub_menu = $elem.find('div.nav_box');
        var $link = $elem.find('span.nav_link');
        $link.animate({color:"#000000"},300);
		
		var $navbg = $elem.find('a.navbg');
		if(isIE()) {
			$navbg.stop(true).animate({ backgroundColor: '#DDDDDD' },800);
		}else {
			$navbg.stop(true).animate({ backgroundColor: 'rgba(0, 0, 0, 0.2)' },800);
		}
		
        if($sub_menu.length) {
            $sub_menu.animate({'left':'0px'},200, function() {
                $sub_menu.hide();
                $elem.find('span.nav_active')
                .stop(true)
                .animate({'height':'0px'},300)
                .andSelf().find('img')
                .stop(true)
                .animate({
                 'width':'0px',
                 'height':'0px',
                 'left':'85px'},400)
                .andSelf()
                .find('span.nav_wrap')
                .stop(true)
                .animate({'top':'25px'},500);
            });
        }else {
            $elem.find('span.nav_active')
            .stop(true)
            .animate({'height':'0px'},300)
            .andSelf().find('img')
            .stop(true)
            .animate({
             'width':'0px',
             'height':'0px',
             'left':'85px'},400)
            .andSelf()
            .find('span.nav_wrap')
            .stop(true)
            .animate({'top':'25px'},500);
        }
    });
  });
  
function isIE() {
	var isIE = false;
     
	var val = navigator.userAgent.toLowerCase();
	if(val.indexOf("msie") > -1) {
	   isIE = true;
	} 
	return isIE;
};