// TEMPLATE CUSTOM SCRIPTS



$(document).ready(function(){

    

    /*************************************

        SIDEBAR NAVIGATION

    *************************************/



    var $hoverColour = "#FFF";    

    $("a.hoverBtn").show("fast", function() {

        var x = $(this).attr('rel');

        $(this).parent().addClass(x);        

        $(this).wrap("<div class=\"hoverBtn\">");       

        $(this).attr("class", "");

    }); 

    //display the hover div

    $("div.hoverBtn").show("fast", function() {

        //append the background div

        $(this).append("<div></div>");

        

        //get link's size

        var wid = $(this).children("a").width();

        var hei = $(this).children("a").height();

        

        //set div's size

        $(this).width(wid);

        $(this).height(hei);

        $(this).children("div").width(wid);

        $(this).children("div").height(hei);

        

        //on link hover

        $(this).children("a").hover(function(){

            //store initial link colour

            if ($(this).attr("rel") == "") {

                $(this).attr("rel", $(this).css("color"));

            }

            //fade in the background

            $(this).parent().children("div")

                .stop()

                .css({"display": "none", "opacity": "1"})

                .fadeIn("fast");

            //fade the colour

            $(this) .stop()

                .css({"color": $(this).attr("rel")})

                .animate({"color": $hoverColour}, 350);

        },function(){

            //fade out the background

            $(this).parent().children("div")

                .stop()

                .fadeOut("slow");

            //fade the colour

            $(this) .stop()

                .animate({"color": $(this).attr("rel")}, 250);

        });

    });







    

    



});