$(document).ready(function() {

    // Javascript Graceful Degradation

    $('div.panel_b div.transition').show();
    $('div.noscript').hide();

    // Dropdown Menu System
    // This system is designed gracefully to degrade for AA compliance. Users without javascript will never see 
    // dropdown menus. Their clicks on the menu buttons will not be stopped by returnfalse.


    // Mouseover Icon

    $('div#navigation ul li a').mouseover(function(){
    	$(this).css('background-position','top right');  
    });

    $('div#navigation ul li a').mouseout(function(){
    	$(this).css('background-position','1000px 1000px');   
    });

    // Opening a Dropdown menu

    $('div#navigation ul li a').click(function() {

        // Find out which is the current page
        var currentpage = $('div#navigation ul li.current a').attr('id');

        // Hide any other dropdowns that are open
        $('div.dropdown').hide();

        // Remove the color green from every navigation button...
        $('div#navigation ul li').removeClass('selected');

        // ...because we're going to re-add color to the current page button using the variable we created above
        $('div#navigation ul li a#' + currentpage).parent('li').addClass('current');

        // And now we're adding color to the dropdown we've selected
        $(this).parent('li').addClass('selected');

        // Now we need to know which dropdown to show, so we'll grab the id
        var over = $(this).attr('id');

        // And display the div with that id
        $('div.dd_panel' + over).show();

        // Stop the button links working when you click them
        return false;

    });

    // Closing a Dropdown Menu

    $('div.close a').click(function() {

        // Find out which is the current page
        var currentpage = $('div#navigation ul li.current a').attr('id');

        // Hide the dropdown menu
        $('div.dropdown').hide();

        // Remove the color green from every navigation button...
        $('div#navigation ul li').removeClass('selected');

        // Re-add color to the current page button using the variable we created above
        $('div#navigation ul li a#' + currentpage).parent('li').addClass('selected');

        // Stop the close link working when you click it
        return false;

    });


    // Make Panels Clickable

    $('.clickable').click(function() {
        window.location = $(this).find("a").attr("href"); return false;
    });

    $('.responsibilities').click(function() {
        window.location = $(this).find("a").attr("href"); return false;
    });

    // Show the pointer icon over the panels

    $('div.clickable').css('cursor', 'pointer');
    $('div.responsibilities').css('cursor', 'pointer');

    // Table Tweaks

    $('table.staff tr:last td').css('border-bottom', '0px solid #fff');
    $('table.staff tr:first td').css('padding-top', '0');

    // Tabbed Downloads

    $('table.tabtable').find('tr:first').hide();
    $('div.tabs').show();

    $('div.tabs div.tab').css('cursor', 'pointer');
    $('div.tabs div.tab:first').css('font-weight', 'bold').css('border-bottom', '1px solid #fff');

    $('table.tabtable').hide();
    $('table.tabtable:first').show();

    $('div.tabs div.tab').click(function() {
        var clicked = $(this).attr('id');
        $('table.tabtable').hide();
        $('table.tabtable.' + clicked).show();
        $('div.tabs div.tab').css('border-bottom', '1px solid #bae819').css('font-weight', 'normal');
        $(this).css('border-bottom', '1px solid #fff').css('font-weight', 'bold');
        return false;
    });

    // Interactive Map

    $('div.map a').mouseover(function() {
        var over = $(this).attr('class');
        var prepositionx = parseInt($(this).css('left'));
        var positionx = prepositionx - 2 + 'px';
        var prepositiony = parseInt($(this).css('top'));
        var positiony = prepositiony - 2 + 'px';
        $(this).css('background-color', '#bae819').css('width', '10px').css('height', '10px').css('z-index', '200').css('top', positiony).css('left', positionx);
        $('div.direction_column ul li a.' + over).css('color', '#fff').css('background-color', '#016c68');
    });

    $('div.map a').mouseout(function() {
        var over = $(this).attr('class');
        var prepositionx = parseInt($(this).css('left'));
        var positionx = prepositionx + 2 + 'px';
        var prepositiony = parseInt($(this).css('top'));
        var positiony = prepositiony + 2 + 'px';
        $(this).css('background-color', '#666666').css('width', '6px').css('height', '6px').css('z-index', '0').css('top', positiony).css('left', positionx);
        $('div.direction_column ul li a.' + over).css('color', '#666666').css('background-color', '#fff');
    });

    $('div.direction_column ul li a').mouseover(function() {
        var over = $(this).attr('class');
        var prepositionx = parseInt($('div.map a.' + over).css('left'));
        var positionx = prepositionx - 2 + 'px';
        var prepositiony = parseInt($('div.map a.' + over).css('top'));
        var positiony = prepositiony - 2 + 'px';
        $('div.map a.' + over).css('background-color', '#bae819').css('width', '10px').css('height', '10px').css('z-index', '200').css('top', positiony).css('left', positionx);
        $(this).css('color', '#fff').css('background-color', '#016c68');
    });

    $('div.direction_column ul li a').mouseout(function() {
        var over = $(this).attr('class');
        var prepositionx = parseInt($('div.map a.' + over).css('left'));
        var positionx = prepositionx + 2 + 'px';
        var prepositiony = parseInt($('div.map a.' + over).css('top'));
        var positiony = prepositiony + 2 + 'px';
        $('div.map a.' + over).css('background-color', '#666666').css('width', '6px').css('height', '6px').css('z-index', '0').css('top', positiony).css('left', positionx);
        $(this).css('color', '#666666').css('background-color', '#fff');
    });

    $('div.direction_column ul li a').click(function() {
        var clicked = $(this).attr('class');
        $('div.map_details').hide();
        $('div.map_details.' + clicked).show();
        return false;
    });

    $('div.map a').click(function() {
        var clicked = $(this).attr('class');
        $('div.map_details').hide();
        $('div.map_details.' + clicked).show();
        return false;
    });

    $('div.map_details p.close a').click(function() {
        $('div.map_details').hide();
        return false;
    });

    $('div.tables').hide();

    // Careers - Vacancy Listing //

    //$('table.career_listing tr td a').click(function() {
    //    var clicked = $(this).parent('td').parent('tr').attr('class');
    //    $('table.career_listing').hide();
    //    $('table.career_application.' + clicked).show();
    //    return false;
    //});

    //$('table.career_application tr th.return a').click(function() {
    //    $('table.career_application').hide();
    //    $('table.career_listing').show();
    //    return false;
    //});

    // Factory Rollovers

    $('map#factory_map area.area01').hover(function() {
        $('div#factory').css('background-position', '4320px');
    }, function() {
        $('div#factory').css('background-position', '0px 0px');
    });

    $('map#factory_map area.area02').hover(function() {
        $('div#factory').css('background-position', '3600px');
    }, function() {
        $('div#factory').css('background-position', '0px 0px');
    });

    $('map#factory_map area.area03').hover(function() {
        $('div#factory').css('background-position', '2880px');
    }, function() {
        $('div#factory').css('background-position', '0px 0px');
    });

    $('map#factory_map area.area04').hover(function() {
        $('div#factory').css('background-position', '2160px');
    }, function() {
        $('div#factory').css('background-position', '0px 0px');
    });

    $('map#factory_map area.area05').hover(function() {
        $('div#factory').css('background-position', '1440px');
    }, function() {
        $('div#factory').css('background-position', '0px 0px');
    });

    $('map#factory_map area.area06').hover(function() {
        $('div#factory').css('background-position', '720px');
    }, function() {
        $('div#factory').css('background-position', '0px 0px');
    });                          

});