//http://www.jennyandlih.com/resolved-logging-firebug-console-breaks-ie
//a handy log function which checks first that firebug is in use before trying to log to the console.
log_debug = function() {
  if(window.console && window.console.firebug) console.log.apply(this, arguments)
}

jQuery.noConflict(); 

jQuery(document).ready(function(){

        //declaring the varibles we will use
        var speed = 500; //speed of the animation in milliseconds
        var min_width = 130; //the minimum width of an menu item
        var max_width = 190; //the maximum width of an menu item

        //animate the default selected menu item to the max width
        jQuery('.act_submenu').animate( { width : max_width } );

        /* We are going to use the jquery's hover function to achieve the effect  '*/
        jQuery('#sub_menu ul li').hover(function(){

            /*so when hovered over an item, we initiate the animate function to make
            the width of the hovered item scroll to the max_width we declared with speed we declared */
            jQuery(this).animate({ width : max_width }, { queue:false , duration:speed});

            /* and by using siblings() we animae the rest of the menu items to the width min_width we declared */
            jQuery(this).siblings().animate({ width : min_width }, { queue:false , duration:speed});

        //when the user hovers out
        },function(){

            //get the class of the menu item we hovered out of...
            var class_ = jQuery(this).attr('class');

            //...and check if the class name is NOT 'selected'...
            if(class_ != 'act'){
                //...and if it's NOT we animate the non 'selected' divs to the min_width and the 'selected' to the max_width '
                jQuery('#sub_menu ul li').animate({ width : min_width }, { queue:false , duration:speed});
                jQuery('.act_submenu').animate( { width : max_width }, { queue:false , duration:speed});
            }
        });
    });