// Animation speed in milliseconds. There are two animations per page flip.
var speed = 200

$(document).ready( function() {	        
	var options = { 
            // other available options: see http://www.malsup.com/jquery/form/#code-samples
            success:  flip, // post-submit callback 
            dataType: 'json',        // 'xml', 'script', or 'json' (expected server response type) 
            url:      '?xhr'
        };
			
	$('form').ajaxForm(options); 
});


function flipForward(responseText) {
    
    var rightPagePos    = $('#rightpage input').offset();
    var rightEdgeX      = rightPagePos.left + $('#rightpage input').width();
    var rightSpineX     = rightPagePos.left;
    var rightPageTop    = rightPagePos.top;
    var rightPageBottom = rightPagePos.top + $('#rightpage input').height();


    var leftPagePos    = $('#leftpage input').offset();
    var leftEdgeX      = leftPagePos.left;
    var leftSpineX     = leftPagePos.left + $('#leftpage input').width();
    var leftPageTop    = leftPagePos.top;
    var leftPageBottom = leftPagePos.top + $('#leftpage input').height();
    
    $('#flipbook').after("<img id=\"flipper\"/>");
    var flipper = $('#flipper');
    // Set LTRB to existing right page position
    flipper.css({position:'absolute', width:$('#rightpage input').width(), height:$('#rightpage input').height(),
                    left:rightSpineX, right:rightEdgeX, top:rightPageTop, bottom:rightPageBottom});
    // Set flip to the current right page image
    flipper.attr('src', $('#rightpage input').attr('src'));
    // Set the rightpage input to the new image, which will be hidden
    $('#rightpage input').attr('src', responseText.imagePaths[1].urlpath);
    // Animate flip to L=R=rightSpineX
    flipper.animate({left:rightSpineX, right:rightSpineX, width:0}, speed, 'swing', function() {
        // Set flip to the new left page image
        flipper.attr('src',  responseText.imagePaths[0].urlpath);
        // Animate flip to LTRB = existing left page position
        flipper.animate({left:leftEdgeX, right:leftSpineX, top:leftPageTop, bottom:leftPageBottom, width:$('#leftpage input').width()}, speed, 'swing', function(){
            // Set leftpage input to new image, which will be hidden
            $('#leftpage input').attr('src', responseText.imagePaths[0].urlpath);
            // Destroy flip div
            flipper.remove();
        });
    });
}

function flipBackward(responseText) {

    var rightPagePos  = $('#rightpage input').offset();
    var rightEdgeX      = rightPagePos.left + $('#rightpage input').width();
    var rightSpineX     = rightPagePos.left;
    var rightPageTop    = rightPagePos.top;
    var rightPageBottom = rightPagePos.top + $('#rightpage input').height();


    var leftPagePos  = $('#leftpage input').offset();
    var leftEdgeX      = leftPagePos.left;
    var leftSpineX     = leftPagePos.left + $('#leftpage input').width();
    var leftPageTop    = leftPagePos.top;
    var leftPageBottom = leftPagePos.top + $('#leftpage input').height();

    // To flip backward:
    // Create a new image "flip" that's absolutely positioned above the left page.
    $('#flipbook').after("<img id=\"flipper\"/>");
    var flipper = $('#flipper');
    // Set LTRB to existing left page position
    flipper.css({position:'absolute', width:$('#leftpage input').width(), height:$('#leftpage input').height(),
                    left:leftEdgeX, right:leftSpineX, top:leftPageTop, bottom:leftPageBottom});
    // Set flip to the current left page image
    flipper.attr('src', $('#leftpage input').attr('src'));
    // Set the leftpage input to the new image, which will be hidden
    $('#leftpage input').attr('src', responseText.imagePaths[0].urlpath);
    // Animate flip to L=R=leftSpineX
    flipper.animate({left:leftSpineX, right:leftSpineX, width:0}, speed, 'swing', function() {
        // Set flip to the new right page image
        flipper.attr('src',  responseText.imagePaths[1].urlpath);
        // Animate flip to LTRB = existing right page position
        flipper.animate({left:rightSpineX, right:rightEdgeX, top:rightPageTop, bottom:rightPageBottom, width:$('#rightpage input').width()}, speed, 'swing', function(){
            // Set rightpage input to new image, which will be hidden
            $('#rightpage input').attr('src', responseText.imagePaths[1].urlpath);
            // Destroy flip div
            flipper.remove();
        });
    });

}
 
// post-submit callback 
function flip(responseText, statusText)  { 
    // responseText is the json data object returned by the server 
     
    if (responseText.URLpageNumbers[0] != $('form #id_bookPage').attr('value')) {
        if (responseText.action == 'Next' || responseText.action == 'next') {
            flipForward(responseText);
        }
    
        if (responseText.action == 'Prev' || responseText.action == 'prev') {
            flipBackward(responseText);
        }
    }

    $('form #id_bookPage').attr('value', responseText.URLpageNumbers[0]);
    $('#leftpage p.pageinfo').text(responseText.URLpageNumbers[0]);
    $('#rightpage p.pageinfo').text(responseText.URLpageNumbers[1]);
    $('#leftpage p.imagelink a').attr('href', responseText.galleryLinks[0]);
    $('#rightpage p.imagelink a').attr('href', responseText.galleryLinks[1]);
    $('a.permalink').attr('href', '/book/' + responseText.bookURLname +'/'+ responseText.URLpageNumbers[0] + '/' + responseText.version);
    
    var imgsizes = $('#imgversions li a');
    $('#imgversions li:nth-child(1) a').attr('href', '/book/' + responseText.bookURLname +'/'+ responseText.URLpageNumbers[0] + '/5in/');
    $('#imgversions li:nth-child(2) a').attr('href', '/book/' + responseText.bookURLname +'/'+ responseText.URLpageNumbers[0] + '/10in/');
    $('#imgversions li:nth-child(3) a').attr('href', '/book/' + responseText.bookURLname +'/'+ responseText.URLpageNumbers[0] + '/tiff/');
}