/* 
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */


var menuClicked = 0;

/*
 * Hide all menus
 */
function hideAll()
{
    $('.boxBody div').hide();
    $('.boxup').hide();
}

/*
 * Fires an event the body has been clicked
 */
function bodyClicked() {
    if(menuClicked == 0)
        hideAll();
    menuClicked = 0;
};

$(document).ready(function () {

    $("#menuBox").click(function () {
        menuClicked = 1;
    });

    //Get all the LI from the #tabMenu UL
    $('#tabMenu > li').click(function(){
        //remove the selected class from all LI
        $('#tabMenu > li').removeClass('selected');

        //Reassign the LI
        $(this).addClass('selected');

        //Look for the right DIV in boxBody according to the Navigation UL index, therefore, the arrangement is very important.
        //$('.boxBody div:eq(' + $('#tabMenu > li').index(this) + ')').fadeIn('slow');
        var showDiv = $(this).attr('id');

        if($('#'+showDiv).css('display') == 'none')
        {
            // Hide all the DIV in .boxBody
            $('.boxBody div').hide();
        }
        else {
            // Hide this DIV
            $('.boxBody div').hide();
            $('.boxup').hide();
            return;
        }

        $('.boxup').show();

        $('#'+showDiv).fadeIn('slow');

        var marginLeft = 57+115*($(this).attr('id')-1);
        $('.boxup').animate({
            marginLeft:marginLeft
        }, 500);
        //alert($('.boxup').outerHeight());
        $('.boxup').css("marginTop", -1*($('.boxup').outerHeight())+12);

    }).mouseover(function() {

        //Add and remove class, Personally I dont think this is the right way to do it, anyone please suggest
        $(this).addClass('mouseover');
        $(this).removeClass('mouseout');

    }).mouseout(function() {

        //Add and remove class
        $(this).addClass('mouseout');
        $(this).removeClass('mouseover');
    });

    //Mouseover with animate Effect for Category menu list
    $('.boxBody li').mouseover(function() {

        if($(this).attr('title') == 'commercialCars')
            return;
        //Change background color and animate the padding
        $(this).children().animate({
            paddingLeft:"20px"
        }, {
            queue:false,
            duration:300
        });
    })

    .mouseout(function() {
        if($(this).attr('title') == 'commercialCars')
            return;
        //Change background color and animate the padding
        $(this).css('backgroundColor','');
        $(this).children().animate({
            paddingLeft:"0"
        }, {
            queue:false,
            duration:300
        });
    });

    $("li").find("span").click(function (){
        $('div', 'li').hide('slow');

        var li = $(this).parent();
        if($('div', li).css('display') == 'none')
            $('div', li).show('slow');
        else $('div', li).hide('slow');
    });

    $('#slider').nivoSlider({
        effect:'sliceDownLeft',
        slices:15,
        animSpeed:500,
        pauseTime:4000,
        directionNav:false, //Next & Prev
        directionNavHide:false, //Only show on hover
        controlNav:false, //1,2,3...
        beforeChange: function(){},
        afterChange: function(){}
    });

    $.fn.clickMenu.setDefaults({
        arrowSrc:'arrow_right.gif'
    });
    $('#dropdown').clickMenu();
});