$(document).ready(function () {

    //get page name from the url. ie www.google.co.uk/matt.html would return "matt" and have "Tab" appended to it to finally return "mattTab". If no name is available, it will default to the home tab.
    var url = window.location.href;
    if (url.indexOf('.') == -1) { //if the url doesn't have a pagename, ie the root of the site, then set url to /Home. the substring method with then return "Home"
        url = '/Home.';
    }
    var pageName = url.substring(url.lastIndexOf('/') + 1, url.lastIndexOf('.'));
    if (pageName == ".uk/") {
        pageName = "home";
    }
    pageName = pageName.toLowerCase();
    var TabName = pageName + 'Tab'; //get url, strip out the host and file extension, append "Tab" to match the class names for each div
    if (TabName == 'defaultTab') {
        TabName = 'homeTab';
    }


    //sub navigation highlight
    //get querystring value of "p" for subNav
    var p = $.QueryString("p");

    if (p != null) {
        $('#subMenu li').each(function () { //loop through each li in #subMenu to find which the current tab is
            var $this = $(this);
            var subNavClass = $('div', $this).attr("class");
            var subQueryExists = subNavClass.indexOf(p, 0);
            if (subQueryExists >= 0) {
                //adds a new class to the tab the user is currently "on". class is pageName + "SubMenuHighlight"
                $('div', $this).addClass(pageName + 'SubMenuHighlight');
            }
        });
        $('#secondarySubMenu li').each(function () { //loop through each li in #subMenu to find which the current tab is
            var $this = $(this);
            var subNavClass = $('div', $this).attr("class");
            var subQueryExists = subNavClass.indexOf(p, 0);
            if (subQueryExists >= 0) {
                //adds a new class to the tab the user is currently "on". class is pageName + "SubMenuHighlight"
                $('div', $this).addClass(pageName + 'SubMenuHighlight');
            }
        });
    }


    //functions for highlighting (moving up) the current and hovered over tab on the main navigation

    $('#menu li ').each(function () { //loop through each li in #menu to find which the current tab is
        var $this = $(this);
        var navClass = $('div', $this).attr("class");
        if (TabName == navClass) {
            $('div', $this).css({ 'bottom': '0px' });
        }
    });

    //div positioning requires overflow:hidden on the container div, in this case #headerNavigation

    $('#menu li').hover(function () { //on hover over list item animate div upwards by changing bottom to 0px
        var $this = $(this);
        var navClass = $('div', $this).attr("class");
        if (TabName != navClass) {
            $('div', $this).stop(true, true).animate({
                'bottom': '0px'
            }, 300);
        }
    },
               function () { // on mouse off move div back down by resetting the bottom to -30px
                   var $this = $(this);
                   var navClass = $('div', $this).attr("class");
                   if (TabName != navClass) {
                       $('div', $this).stop(true, true).animate({
                           'bottom': '-20px'
                       }, 300);
                   }
               });


    // pop up effect for the social icons in the footer. Same logic to the layout/css as the main menu animation

    $('#socialIcons li').hover(function () { //on hover over list item animate div upwards by changing bottom to 0px
        var $this = $(this);
        $('div', $this).stop(true, true).animate({
            'bottom': '-4px'
        }, 300);
    },
               function () { // on mouse off move div back down by resetting the bottom to -30px
                   var $this = $(this);
                   $('div', $this).stop(true, true).animate({
                       'bottom': '-14px'
                   }, 300);

               });
});