/*
compose_inspiration.js

Support to load and animate the inspiration picture pages (IPPs) in the inspiration bar
*/

// Global variables

var g_inspirationGallery;                       // array of active poem template IDs and image filenames
var g_photobarVirtualWidth = 1120; /* will have to calculate this based on number of thumbnails and their spacing */

var g_inspirationIntervalTimer;

var g_slowRollingSpeed = 0.7;
var g_rollingSpeed = -g_slowRollingSpeed;
var g_targetRollingSpeed = g_rollingSpeed;
var distanceMovedFromOriginInPx = 0.0;
var g_isAnythingMovingNow = ( g_rollingSpeed != 0 );

var g_waitingOnAsyncLoadPoemTemplate = false;

var divPhotobar1, divPhotobar2;

var elementsZoomingIn = [];
var rollingIsPaused = false;

// Constants

var THUMBNAIL_WIDTH = 66;
var THUMBNAIL_HEIGHT = 30;
var THUMBNAIL_WIDTH_ZOOMED = 89;
var THUMBNAIL_HEIGHT_ZOOMED = 41;
var THUMBNAIL_BORDER_WIDTH = 1;
var SPACE_BETWEEN_THUMBNAILS = 16;

var FAST_ROLLING_SPEED = 5.0;
var ROLLING_ACCELERATION = 0.3;

var ZOOM_Z_INDEX = 1000;
var ZOOM_RATE = 0.08;
var ZOOM_WIDTH_DELTA = ZOOM_RATE * THUMBNAIL_WIDTH;
var ZOOM_HEIGHT_DELTA = ZOOM_RATE * THUMBNAIL_HEIGHT;

var THUMBNAIL_IMG_FOLDER_PATH = g_webConfigTemplateImagePath + "Small/";
var THUMBNAIL_ZOOMED_IMG_FOLDER_PATH = g_webConfigTemplateImagePath + "Small-Zoomed/";

var CONTAINER_WIDTH;


function loadInspirationGallery()
{
    initiateAjaxCall( "ajax_return_filenames.aspx", asyncLoadInspirationGallery );
    
    divPhotobar1 = document.getElementById( "photobar1" );
    divPhotobar2 = document.getElementById( "photobar2" );
    CONTAINER_WIDTH = document.getElementById( "container" ).offsetWidth;
}

function asyncLoadInspirationGallery( ajaxText )
{
    if ( ajaxText )
    {
        g_inspirationGallery = eval ( "(" + ajaxText + ")" );
        populatePhotobarWithGalleryThumbnails( document.getElementById( "photobar1" ) );
        populatePhotobarWithGalleryThumbnails( document.getElementById( "photobar2" ) );
    }
    
    g_inspirationIntervalTimer = setInterval( displayFrame, 30 );
}

function loadPoemTemplate( templateIdToLoad )
{
    g_poemTemplate.id = parseInt( templateIdToLoad );
    g_waitingOnAsyncLoadPoemTemplate = true;
    initiateAjaxCall( "ajax_return_template_content.aspx?id=" + templateIdToLoad, asyncLoadPoemTemplate );
}

function asyncLoadPoemTemplate( ajaxText )
{
    if ( ajaxText )
    {
        if ( ajaxText.substring( 0, 5 ) != "error" )
        {
            var loadedTemplate = eval( "(" + ajaxText + ")" );
            for ( var i = 1 ; i < PARTS_OF_SPEECH.length ; i++ )
                g_poemTemplate[PARTS_OF_SPEECH[i]] = loadedTemplate[PARTS_OF_SPEECH[i]].split(",");

            if ( loadedTemplate.image ) g_poemTemplate.image = loadedTemplate.image;

            if ( loadedTemplate.fontFamily) g_poemTemplate.fontFamily = loadedTemplate.fontFamily 
            else g_poemTemplate.fontFamily = "Georgia, serif";

            if ( loadedTemplate.textColor ) g_poemTemplate.textColor = loadedTemplate.textColor
            else g_poemTemplate.textColor = "white";
            
            if ( loadedTemplate.backgroundOpacityPercent ) g_poemTemplate.backgroundOpacityPercent = loadedTemplate.backgroundOpacityPercent
            else loadedTemplate.backgroundOpacityPercent = 0;
            
            if ( loadedTemplate.freestyleTop ) g_poemTemplate.freestyleTop = loadedTemplate.freestyleTop
            else g_poemTemplate.freestyleTop = 10;    
            
            if ( loadedTemplate.freestyleLeft ) g_poemTemplate.freestyleLeft = loadedTemplate.freestyleLeft
            else g_poemTemplate.freestyleLeft = 10;    
            
            deserializePoemTemplate();
            g_waitingOnAsyncLoadPoemTemplate = false;
        }
        else
        {
            window.location = document.location.href.substring( 0, document.location.href.lastIndexOf("/") + 1 ) + "error.aspx";
        }
    }
}


function populatePhotobarWithGalleryThumbnails( photobarElement )
{
    // Static constants
    var DROP_SHADOW_WIDTH_OFFSET = 5;
    var DROP_SHADOW_HEIGHT_OFFSET = 4;
    var DROP_SHADOW_IMG_FILE_PATH = "assets/images/inspiration-image-frame.png";

    // Calculated constants
    var THUMBNAIL_WIDTH_TEXT = THUMBNAIL_WIDTH + "px";
    var THUMBNAIL_HEIGHT_TEXT = THUMBNAIL_HEIGHT + "px";
    var DROP_SHADOW_HEIGHT_TEXT = ( THUMBNAIL_HEIGHT + ( DROP_SHADOW_HEIGHT_OFFSET << 1 ) ) + "px";
    var DROP_SHADOW_WIDTH_TEXT = ( THUMBNAIL_WIDTH + ( DROP_SHADOW_WIDTH_OFFSET << 1 ) ) + "px";
    var IMAGE_TOP = Math.round( photobarElement.offsetHeight / 2 - THUMBNAIL_HEIGHT / 2 ) - THUMBNAIL_BORDER_WIDTH;
    var IMAGE_TOP_TEXT = IMAGE_TOP + "px";
    var DROP_SHADOW_TOP_TEXT = IMAGE_TOP - DROP_SHADOW_HEIGHT_OFFSET + THUMBNAIL_BORDER_WIDTH + "px";

    var nextThumbnailLeft = SPACE_BETWEEN_THUMBNAILS;
    
    for ( var indexIntoGallery = 0; indexIntoGallery < g_inspirationGallery.images.length; indexIntoGallery++ )
    {
        var divDropShadowToInsert = document.createElement( "div" );
        divDropShadowToInsert.style.width = DROP_SHADOW_WIDTH_TEXT;
        divDropShadowToInsert.style.height = DROP_SHADOW_HEIGHT_TEXT;
        divDropShadowToInsert.style.left = ( nextThumbnailLeft - DROP_SHADOW_WIDTH_OFFSET ) + "px";
        divDropShadowToInsert.style.top = DROP_SHADOW_TOP_TEXT;
        divDropShadowToInsert.style["backgroundImage"] = "url('" + DROP_SHADOW_IMG_FILE_PATH + "')";
        divDropShadowToInsert.style["position"] = "absolute";
        divDropShadowToInsert.className = "galleryDropShadow";
        
        photobarElement.appendChild( divDropShadowToInsert );

        var imgThumbnailToInsert = document.createElement( "img" );
        imgThumbnailToInsert.style.width = THUMBNAIL_WIDTH_TEXT;
        imgThumbnailToInsert.style.height = THUMBNAIL_HEIGHT_TEXT;
        imgThumbnailToInsert.style.left = nextThumbnailLeft - THUMBNAIL_BORDER_WIDTH + "px";
        imgThumbnailToInsert.style.top = IMAGE_TOP_TEXT;
        imgThumbnailToInsert.src = THUMBNAIL_IMG_FOLDER_PATH + g_inspirationGallery.images[indexIntoGallery].filename;
        imgThumbnailToInsert.setAttribute( "templateId", g_inspirationGallery.images[indexIntoGallery].templateId );
        imgThumbnailToInsert.setAttribute( "suppress-context-menu", "true" );
        imgThumbnailToInsert.style["position"] = "absolute";
        imgThumbnailToInsert.className = "galleryThumbnail";
        attachEventToElement ( imgThumbnailToInsert, "mousedown", thumbnailMouseDown );
        attachEventToElement ( imgThumbnailToInsert, "mouseover", thumbnailMouseOver );
        attachEventToElement ( imgThumbnailToInsert, "mouseout", thumbnailMouseOut );
        
        photobarElement.appendChild( imgThumbnailToInsert );

        (new Image()).src = THUMBNAIL_ZOOMED_IMG_FOLDER_PATH + g_inspirationGallery.images[indexIntoGallery].filename;
        
        nextThumbnailLeft += THUMBNAIL_WIDTH + SPACE_BETWEEN_THUMBNAILS;
    }
    g_photobarVirtualWidth = nextThumbnailLeft - SPACE_BETWEEN_THUMBNAILS;
}

function deserializePoemTemplate()
{
    // copy template to g_poem
    g_poem.alternates = { "_null": [] };
    g_poem["universal"] = UNIVERSAL_WORDS;
    for ( var i = 1 ; i < PARTS_OF_SPEECH.length ; i++ ) 
        g_poem[PARTS_OF_SPEECH[i]] = g_poemTemplate[PARTS_OF_SPEECH[i]];
    g_poem.poemTemplateId = g_poemTemplate.id;
    g_poem.fontFamily = g_poemTemplate.fontFamily;
    g_poem.textColor = g_poemTemplate.textColor;
    g_poem.freestyleTop = g_poemTemplate.freestyleTop;
    g_poem.freestyleLeft = g_poemTemplate.freestyleLeft;

    // extract pipe-delimited alternates from parts of speech arrays
    for ( var partsIndex = 1 ; partsIndex < PARTS_OF_SPEECH.length ; partsIndex++ )
        for ( var wordsIndex = 0 ; wordsIndex < g_poem[PARTS_OF_SPEECH[partsIndex]].length ; wordsIndex++ )
            if ( g_poem[PARTS_OF_SPEECH[partsIndex]][wordsIndex].indexOf( "|" ) != -1 )
            {
                var alternatesArray = g_poem[PARTS_OF_SPEECH[partsIndex]][wordsIndex].split( "|" );
                g_poem[PARTS_OF_SPEECH[partsIndex]][wordsIndex] = alternatesArray[0];
                g_poem.alternates[alternatesArray[0]] = alternatesArray.slice( 1 );
            }
        
    // set up UI
    document.getElementById( "divPoemPicture" ).style["backgroundImage"] = "url('" + g_webConfigTemplateImagePath + "Large/" + g_poemTemplate.image + "')";
    if ( window.clearPoemPools ) clearPoemPools();
    if ( window.clearPoemPictureWords ) clearPoemPictureWords();
    if ( window.renderPoemWords ) renderPoemWords();
    if ( window.closeAlternatesMenu ) closeAlternatesMenu();
    if ( window.hideAlternatesMenuAffordance ) hideAlternatesMenuAffordance();
    if ( $("freestyleTextArea") ) $("freestyleTextArea").value = "";
    if ( $("freestyleTextPoem") ) $("freestyleTextPoem").innerHTML = "";
       
    if ( document.getElementById( "linkFromFreestyleToDragdrop" ) ) document.getElementById( "linkFromFreestyleToDragdrop" ).href = "compose_dragdrop.aspx?PoemTemplateId=" + g_poem.poemTemplateId;
    if ( document.getElementById( "linkFromDragdropToFreestyle" ) ) document.getElementById( "linkFromDragdropToFreestyle" ).href = "compose_freestyle.aspx?PoemTemplateId=" + g_poem.poemTemplateId;
    
    // set the color on the prompt text ("drag your words here") and set a contrasting color for its outline
    document.getElementById( "divPoemPictureMessage" ).style.color = g_poem.textColor;
        
    var childDivs = document.getElementById( "divPoemPictureMessageOutlines" ).getElementsByTagName( "div" );
    for ( var i = 0; i < childDivs.length; i++ )
    {
        childDivs[i].style.color = outlineColorFromTextColor( g_poem.textColor );
    }

    $( "linkNewPiclit" ).href = location.href.substring( 0, location.href.indexOf( "?" ) ) + "?PoemTemplateId=" + g_poemTemplate.id;
    $( "imgNewPiclit" ).src = g_webConfigTemplateImagePath + "small/" + g_poemTemplate.id + ".jpg";
}


function displayFrame()
{
    var didAnythingMoveDuringThisFrame = false;
    
    // zoom in/out
    for ( var index in elementsZoomingIn )
    {
        var e = elementsZoomingIn[index];
        switch ( e.actionState )
        {
        case "zoomin":
            didAnythingMoveDuringThisFrame = true;
            e.width += ZOOM_WIDTH_DELTA;
            e.height += ZOOM_HEIGHT_DELTA;
            
            if ( e.width >= THUMBNAIL_WIDTH_ZOOMED ) {
                e.width = THUMBNAIL_WIDTH_ZOOMED;
                e.height = THUMBNAIL_HEIGHT_ZOOMED;
                e.actionState = "zoomed";
                e.pageElement.src = e.pageElement.src.replace( "Small", "Small-Zoomed" );
            }
            
            var newHeight = Math.round( e.height );
            var newWidth = Math.round( e.width );
            e.pageElement.style["width"] = newWidth + "px";
            e.pageElement.style["left"] = e.prezoomOffsetLeft - ( ( newWidth - e.prezoomOffsetWidth ) >> 1 ) - THUMBNAIL_BORDER_WIDTH + "px" ;
            e.pageElement.style["height"] = newHeight + "px";
            e.pageElement.style["top"] = e.prezoomOffsetTop - ( ( newHeight - e.prezoomOffsetHeight ) >> 1 ) - THUMBNAIL_BORDER_WIDTH + "px" ;
            break;
        
        case "zoomout":
            didAnythingMoveDuringThisFrame = true;
            e.width -= ZOOM_WIDTH_DELTA;
            e.height -= ZOOM_HEIGHT_DELTA;
            
            if ( e.width <= THUMBNAIL_WIDTH ) {
                e.width = THUMBNAIL_WIDTH;
                e.height = THUMBNAIL_HEIGHT;
                e.actionState = "rest";
                e.pageElement.src = e.pageElement.src.replace( "Small-Zoomed", "Small" );
            }
            
            var newHeight = Math.round( e.height );
            var newWidth = Math.round( e.width );
            e.pageElement.style["width"] = newWidth + "px";
            e.pageElement.style["left"] = e.prezoomOffsetLeft - ( ( newWidth - e.prezoomOffsetWidth ) >> 1 ) - THUMBNAIL_BORDER_WIDTH + "px" ;
            e.pageElement.style["height"] = newHeight + "px";
            e.pageElement.style["top"] = e.prezoomOffsetTop - ( ( newHeight - e.prezoomOffsetHeight ) >> 1 ) - THUMBNAIL_BORDER_WIDTH + "px" ;
            
            if ( e.actionState == "rest" ) delete elementsZoomingIn[index];
            break;            
        }
    }

    // rolling image animation
    if ( g_targetRollingSpeed > g_rollingSpeed ) 
    {
        g_rollingSpeed += ROLLING_ACCELERATION;
        if ( g_rollingSpeed > g_targetRollingSpeed ) g_rollingSpeed = g_targetRollingSpeed;
    }
    else if ( g_targetRollingSpeed < g_rollingSpeed )
    {
        g_rollingSpeed -= ROLLING_ACCELERATION;
        if ( g_rollingSpeed < g_targetRollingSpeed ) g_rollingSpeed = g_targetRollingSpeed;
    }
    
    if ( !rollingIsPaused )
    {
        didAnythingMoveDuringThisFrame = true;
        
        distanceMovedFromOriginInPx += g_rollingSpeed;
        if ( distanceMovedFromOriginInPx > CONTAINER_WIDTH ) distanceMovedFromOriginInPx -= g_photobarVirtualWidth;
        if ( distanceMovedFromOriginInPx < -g_photobarVirtualWidth ) distanceMovedFromOriginInPx += g_photobarVirtualWidth;
        
        var leftInPx = Math.round( distanceMovedFromOriginInPx );
        divPhotobar1.style["left"] = leftInPx + "px";
        divPhotobar1.style["width"] = ( CONTAINER_WIDTH - leftInPx ) + "px";
        if ( leftInPx < 0 )
        {
            divPhotobar2.style["left"] = ( leftInPx + g_photobarVirtualWidth ) + "px";
            divPhotobar2.style["width"] = CONTAINER_WIDTH + "px";
        }
        else
        {
            divPhotobar2.style["left"] = ( leftInPx - g_photobarVirtualWidth ) + "px";
            divPhotobar2.style["width"] = g_photobarVirtualWidth + "px";
        }
    }
    
    if ( !didAnythingMoveDuringThisFrame ) pauseAnimationLoop();
}

function zoomIn( e )
{
    if ( e.offsetWidth < THUMBNAIL_WIDTH_ZOOMED )
    {
        var zoomState = new Object();
        zoomState.pageElement = e;
        zoomState.prezoomOffsetWidth = e.offsetWidth;
        zoomState.prezoomOffsetLeft = e.offsetLeft;
        zoomState.prezoomOffsetHeight = e.offsetHeight;
        zoomState.prezoomOffsetTop = e.offsetTop;
        zoomState.prezoomZIndex = e.style["zIndex"];
        zoomState.width = zoomState.prezoomOffsetWidth;
        zoomState.height = zoomState.prezoomOffsetHeight;
        zoomState.actionState = "zoomin";
        
        elementsZoomingIn[e.getAttribute( "templateId" )] = zoomState;
        e.style["zIndex"] = ZOOM_Z_INDEX;
        
        unpauseAnimationLoop();
    }
}

function zoomOut( e )
{
    elementsZoomingIn[e.getAttribute( "templateId" )].actionState = "zoomout";
    e.style["zIndex"] = elementsZoomingIn[e.getAttribute( "templateId" )].prezoomZIndex;
    unpauseAnimationLoop();
}

function thumbnailMouseOver( e )
{
    if (!e) e = window.event;
    if (e.target) { var thumbnail = e.target; }
    else { var thumbnail = e.srcElement; }

    zoomIn( thumbnail );
    rollingIsPaused = true;
}

function thumbnailMouseOut( e )
{
    if (!e) e = window.event;
    if (e.target) { var thumbnail = e.target; }
    else { var thumbnail = e.srcElement; }

    zoomOut( thumbnail );
    rollingIsPaused = false;
    unpauseAnimationLoop();
}

function thumbnailMouseDown( e )
{
    if ( !e ) e = window.event;
    if ( e.target ) { var thumbnail = e.target; }
    else { var thumbnail = e.srcElement; }

    stopRollingAnimation();
    if (getQueryStringArgs().PoemId)
    {
        document.location = document.location.href.replace( /PoemId=\d+/, "PoemTemplateId=" + thumbnail.getAttribute( "templateId" ) );
    }
    else
    {
        loadPoemTemplate( thumbnail.getAttribute( "templateId" ) );
    }
}

function pauseAnimationLoop()
{
    clearInterval( g_inspirationIntervalTimer );
    g_isAnythingMovingNow = false;
}

function unpauseAnimationLoop()
{
    if ( !g_isAnythingMovingNow ) {
        g_inspirationIntervalTimer = setInterval( displayFrame, 50 );
        g_isAnythingMovingNow = true;
    }
}

function stopRollingAnimation()
{
    g_rollingSpeed = 0;
    g_slowRollingSpeed = 0;
    g_targetRollingSpeed = 0;
}