// css to hide explore bar and reset various heights so page displays correctly
var css = "<style type='text/css'>#explore {display:none} \n #push {height:182px} \n #wrapper {margin:0 auto -182px}</style>";
$('head').append(css);

// bind onclick event to Explore "button" and disable link
$(document).ready(function() {
    $('.exploreLink').click(function() {
        toggleExploreBar();
        return false;
    });
});

// toggle the explore bar, showing the arrow after the explore bar slides into view
function toggleExploreBar() {
    $('#explore img').hide();     
    $('#explore').slideToggle("fast", function() {
        $('#footerWrapper').toggleClass('exploreBarOpen');
        $('#explore img').slideDown('fast');
    });
}