$( document ).ready( function() 
    { 
        $( "a#xxxx1234ToClipboard" ).click( function()
        {
            toggleLineNumbers( "x1234SourceCode" );
            return false;
        });

        $( "a#yyyy1234ToClipboard" ).click( function()
        {
            toggleLineNumbers( "y1234SourceCode" );
            return false;
        });
    })

    function toggleLineNumbers( id )
    {
        var Selector = "div#" + id;
        var LineNumbersShowing = $( Selector + " span.ln" ).size() > 0;
        var code = getCodeFromSpan( id ); 
        
        // Save code if it hasn't yet been saved.
        if ( ! rp.clientState.keyExists( id ) ) 
        {
            rp.clientState.set( id, $( Selector ).html() );        
        }
          
        if ( LineNumbersShowing )
        {
            // Show code without line numbers.
            $( Selector ).removeClass( "sourceCode" );
            $( Selector ).addClass( "rawSourceCode" );
            $( Selector ).html( "<pre>" + code + "</pre>" );
            $( "a#" + id + "ToClipboard" ).text( "Show line numbers" );
        }
        else
        {
            // Show code with line numbers.
            var savedCode = rp.clientState.get( id );          
            $( Selector ).removeClass( "rawSourceCode" );
            $( Selector ).addClass( "sourceCode" );
            $( Selector ).html( savedCode );
            $( "a#" + id + "ToClipboard" ).text( "Show copy-friendly code" );
        }   
    }

    function getCodeFromSpan( divId ) 
    {
        var code = "";

        $( "div#" + divId + " span.code" ).each( function() 
        {
            code = code + $( this ).html() + "\r\n";
        })
        return code; 
    }