// Globals

var g_divFreestyleTextPoem;
var g_freestyleTextArea;
var g_divFreestyleTextPoemSizeTest;

function pageLoadHandler_freestyle()
{
    g_divFreestyleTextPoem = $( "freestyleTextPoem" );
    g_divFreestyleTextPoemNW = $( "freestyleTextPoemNW" );
    g_divFreestyleTextPoemSW = $( "freestyleTextPoemSW" );
    g_divFreestyleTextPoemSE = $( "freestyleTextPoemSE" );
    g_divFreestyleTextPoemNE = $( "freestyleTextPoemNE" );
    g_divFreestyleTextPoemSizeTest = $( "freestyleTextPoemSizeTest" );
    g_freestyleTextArea = $( "freestyleTextArea" );
    g_freestyleTextArea.focus();
    attachEventToElement( g_freestyleTextArea, "keypress", onkeypress_freestyleTextArea, false );
}

// Given the current g_poem structure, draw its words on the picture
// Called from viewpoem and compose_dragdrop; uses conditionals to set only elements that are present

function freestyleRenderPoemWords()
{
    g_divFreestyleTextPoem.style.color = g_poem.textColor;
    var outlineColor = outlineColorFromTextColor( g_poem.textColor );
    g_divFreestyleTextPoemNW.style.color = outlineColor;
    g_divFreestyleTextPoemSW.style.color = outlineColor;
    g_divFreestyleTextPoemSE.style.color = outlineColor;
    g_divFreestyleTextPoemNE.style.color = outlineColor;
    
    if ( ( g_poem.textPoem ) && ( g_poem.textPoem != "" ) )
    {
        g_divFreestyleTextPoem.innerHTML = g_poem.wordsInPoem;
        g_divFreestyleTextPoemNW.innerHTML = g_poem.wordsInPoem;
        g_divFreestyleTextPoemSW.innerHTML = g_poem.wordsInPoem;
        g_divFreestyleTextPoemSE.innerHTML = g_poem.wordsInPoem;
        g_divFreestyleTextPoemNE.innerHTML = g_poem.wordsInPoem;
        if ( g_divFreestyleTextPoemSizeTest != null ) g_divFreestyleTextPoemSizeTest.innerHTML = g_poem.wordsInPoem;
        if ( g_freestyleTextArea != null ) g_freestyleTextArea.value = g_poem.wordsInPoem.replace( /&nbsp;/g, " " ).replace( /<[bB][rR] \/>/g, "\n" ).replace( /<[bB][rR]>/g, "\n" );
        if ( window.showMessageOnPicture ) showMessageOnPicture( false );

        if ( window.stopRollingAnimation ) stopRollingAnimation();
    }
    else
    {
        showMessageOnPicture( "TYPE YOUR WORDS BELOW<br />TO CREATE A PICLIT" );
    }
}

function renderPoemWords()
{
    freestyleRenderPoemWords();
}

function clearPoemPictureWords()
{
    g_divFreestyleTextPoem.innerHTML = "";
    g_divFreestyleTextPoemNW.innerHTML = "";
    g_divFreestyleTextPoemSW.innerHTML = "";
    g_divFreestyleTextPoemSE.innerHTML = "";
    g_divFreestyleTextPoemNE.innerHTML = "";
    g_divFreestyleTextPoemSizeTest.innerHTML = "";
}

// called generically from compose_global et al.
function renderPoemOnPicture()
{
    freestyleRenderPoemWords();
}

function freestyleRenderPoemOnPicture()
{
    // g_divFreestyleTextPoem = $( "freestyleTextPoem" );
    g_freestyleTextArea = null;
    freestyleRenderPoemWords();
}

function onkeypress_freestyleTextArea( e )
{
    if ( !e ) e = window.event;

    var keyChar = String.fromCharCode( e.which ? e.which : e.keyCode );
    return ( (keyChar != "<") && (keyChar != "&") && (keyChar != ">") ); // let message through only if not HTML escape chars
}

function onkeyup_freestyleTextArea()
{
    // take out HTML escapes that might have been pasted
    if ( g_freestyleTextArea.value.search( /[<>&]/g ) != -1 )
        g_freestyleTextArea.value = g_freestyleTextArea.value.replace( /[<>&]/g, "" );

    // remove trailing whitespace to test for correct height and width
    g_divFreestyleTextPoemSizeTest.innerHTML = 
        g_freestyleTextArea.value.replace( /\s\s*$/, "" ).replace( / /g, "&nbsp;" ).replace( /\n/g, "<br />" );
    if ( (g_divFreestyleTextPoemSizeTest.offsetWidth > 590) || (g_divFreestyleTextPoemSizeTest.offsetHeight > 260) )
        $( "saveButtonWarning" ).style.visibility = "visible"
    else
        $( "saveButtonWarning" ).style.visibility = "hidden";

    // show text on top of picture, substituting HTML escapes for space and \n
    g_divFreestyleTextPoem.innerHTML = g_freestyleTextArea.value.replace( / /g, "&nbsp;" ).replace( /\n/g, "<br />" );
    g_divFreestyleTextPoemNW.innerHTML = g_divFreestyleTextPoem.innerHTML;
    g_divFreestyleTextPoemSW.innerHTML = g_divFreestyleTextPoem.innerHTML;
    g_divFreestyleTextPoemSE.innerHTML = g_divFreestyleTextPoem.innerHTML;
    g_divFreestyleTextPoemNE.innerHTML = g_divFreestyleTextPoem.innerHTML;
    
    showMessageOnPicture( false );
    stopRollingAnimation();
}

// serializePoem
// Puts the contents of g_poem into divWithPoemFields; does not post the form that contains it
// Hard-coded to assume the form fields are the first three <input> elements and appear in the order 
// 1. template ID, 2. text representation of poem, 3. JSON structured representation of poem

function serializePoem_freestyle( idOfDivWithPoemFields ) 
{
    var divWithPoemFields = document.getElementById( idOfDivWithPoemFields );
    // trim whitespace from start and end to derive textPoem
    var s = g_freestyleTextArea.value;
    var textPoem = s.substring( s.search(/\S/), s.search(/\S\s*$/) + 1 );
    // remove multiple spaces
    textPoem = textPoem.replace(/ {2,}/g, " ").replace(/\n /g, "\n");
    
    // determine where the top left pixel of the poem is
    var blankLinesAtStartArray = s.substring(0, s.search(/\S/)).match(/\n/g);
    if ( blankLinesAtStartArray )
        var blankLinesAtStart = blankLinesAtStartArray.length
    else
        var blankLinesAtStart = 0;
    var topPixel = 16 + 23 * blankLinesAtStart;  // 16 padding at top of image, plus 23 pixels for each line
    
    // prevent common cases where there's not enough text visible to have an interesting piclit (too many leading CRs or sequential spaces)
    if ((textPoem.length < 10) || (blankLinesAtStart >= 12) || ((s.search(/[\n\r] {149,}/) != -1) && ( $( "saveButtonWarning" ).style.visibility == "visible" )))
    {
        alert( "Make sure some words show on your PicLit.\n\nA PicLit must be at least 10 characters long, and your words should show on the picture." );
        return false; 
    }
    
    if ( $( "saveButtonWarning" ).style.visibility == "visible" )
    {
        if (!confirm( "Are you sure you want to save this PicLit?\n\nParts of your PicLit might not be showing up because they're hidden off the right or bottom edges of the picture." ))
            return false;
    }
    
    var regExpForSpacesBeforeFirstChar = new RegExp(" +" + s.charAt(s.search(/\S/)));
    var regExpResults = regExpForSpacesBeforeFirstChar.exec(s);
    if (regExpResults)
        var spacesBeforeFirstChar = regExpResults[0].length - 1;
    else
        var spacesBeforeFirstChar = 0;
    var leftPixel = Math.floor( 10 + 4 * spacesBeforeFirstChar );
    
    return serializePoem_common( "\"poemStyle\": \"freestyle\", \"wordsInPoem\": \"" + g_divFreestyleTextPoem.innerHTML.JSONEncode() + "\"", 
        textPoem, 
        divWithPoemFields,
        leftPixel,
        topPixel );
}