$(function(){
    $('.clickable').hover(
        function(){ $(this).addClass('hovering') },
        function(){ $(this).removeClass('hovering') }
    )

    $('#run').click(function(){
        eval( $('#console').val() );
        show_formatted();
    })

    $('#clear').click(function(){
        $('#console').val('');
        hide_formatted();
    })

    //Show the pre-defined functions in
    $('ul.function-list li.clickable').click(function(){
        $('#console, #console_dropin').val( window[ $(this).attr('title') ] );
        show_formatted();
    })

    //Show/hide the formatted code
    $('#toggle_screen').click( function(){
        $('#formatted_console, #console').toggleClass('hidden');
        if( $('#formatted_console').is(':visible') ){
            $('#formatted_console').html( $('#console').val() );
            $('#formatted_console').chili();
        }

        return false;
    })

    //clicking on the formatted code shows textbox
    $('#formatted_console').click( hide_formatted );

    $('div.expand-paragraphs p:first').show();
    $('div.expand-paragraphs span.expander').click(
        function(){
            $('div.expand-paragraphs p:hidden:first').slideDown(250);
            return false;
        }
    )

})

function show_formatted(){
    $('#console').addClass('hidden');
    $('#formatted_console').removeClass('hidden');

    $('#formatted_console').html( $('#console').val() );
    $('#formatted_console').chili();

    //avoid the line breaking issue
    $('#formatted_console').html(
        $('#formatted_console').html().replace(/ /g, ' ')
    )
}

function hide_formatted(){
    $('#formatted_console').addClass('hidden');
    $('#console').removeClass('hidden');
}