$(function(){

    var hideLink = $("<a href='javascript:;' id='show-hide-link'></a>");
    var debugConsole = $("#debug-console");
    var usrPref = $.cookie('debug_console');
    
    var text = {
        "hide":"Hide Debug Console",
        "show":"Show Debug Console"
    };
    
    if (usrPref == "hide") {
        // hide the debug console
        debugConsole.hide(); // hide it first
        // debugConsole.click(); // then click it so that it is in the right state
        hideLink.html(text['show']);
    } else {
        hideLink.html(text['hide']);
    }
    
    hideLink.click(function(){

        debugConsole.slideToggle('normal', function(){
        
            if ($(this).css('display') == 'block') {
                // after console is hidden, change link text to show
                $(hideLink).html(text['hide']);
                // now set that the user doesn't want the console to show
                $.cookie('debug_console', 'show');
            } else {
                // after console is hidden, change link text to show
                $(hideLink).html(text['show']);
                // now set that the user doesn't want the console to show
                $.cookie('debug_console', 'hide');
            }
        
        });
        return false;

    });
    
    $("#show-hide-console").html(hideLink);

});