//populate the header
$().ready(function(){
    //add the div to body
    $('body').prepend('<div class="yellowheader_pushdown"></div><div id="yellowheader"></div><div class="yellowheader_clear"></div>');
    var yellowheader = $('#yellowheader');    
    //JSONP
    $.getJSON(yellowheader_baseurl+'/header.php?callback=?', function(json){
        //load the html into to the page
        yellowheader.html(json);
        
        
        $('#yellownavbar a[id]').click(function(){
            var yellowheadsub = $('#yellowheadsub');

            //hide all subnav first
            yellowheadsub.find('.yellowsub').children().hide();
            //close all the tails
            $('.tail').hide();
            //first make all headers to not highlighted
            $('#yellownavbar a[id]').removeClass('highlight').addClass('dropdown');
            
            //make the hover do nothing
            $(this).css('background-color','');
            //make the selected header highlighted
            //$(this).toggleClass('highlight');
            $(this).removeClass('dropdown').addClass('highlight');
            $('.yellowheadclose', yellowheader).show();
            $('.on', yellowheader).hide();
            $('.off', yellowheader).show();
            $('.dropdown_arrow', yellowheader).attr('src', yellowheader_baseurl+'/images/yellowhead_arrow.png');
            $('.dropdown_arrow',this).attr('src', yellowheader_baseurl+'/images/yellowhead_arrowon.png');
            $('.on',this).show();
            $('.off',this).hide();
            

            //show the subnav container
            yellowheadsub.show();
            //show the actual subnav and tail
            $("#div_"+$(this).attr('id')).fadeIn(1200);
            $("#tail_"+$(this).attr('id')).show();
        });

        //mouse hover the headers
        $('#yellownavbar a').hover(
            function(){
                //if not currently selected
                if (!$(this).hasClass('highlight'))
                {
                    $(this).css('background-color','#36383A');
                }
            },
            function(){
                $(this).css('background-color','');
            }
            );

        //when close button clicked
        $('.yellowheadclose').click(function(){
            var yellowheadsub = $('#yellowheadsub');
            yellowheadsub.fadeOut();
            $('.tail',yellowheader).fadeOut();
            $('#yellownavbar a[id]').removeClass('highlight').addClass('dropdown');
            $('.dropdown_arrow',yellowheader).attr('src', yellowheader_baseurl+'/images/yellowhead_arrow.png');
            $('.yellowheadclose',yellowheader).hide();
            $('.on',yellowheader).hide();
            $('.off',yellowheader).show();
            $('.on',this).show();
            $('.off',this).hide();
        });

        if (typeof yellowheader_callback != 'undefined'){
            yellowheader_callback();
        }
    });        
});