$(document).ready(function() {
    try {
        cursor_wait();

        wireupNavButtons();
        wireupAltPages();
       
        // wire up zoom a page feature
        $('#pageLeft').each(function(i) {
            wireupZoomPage($(this), 'Left');
        });

        $('#pageRight').each(function(i) {
            wireupZoomPage($(this), 'Right');
        });

        // finally setup the navigation
        if (typeof InitArrays != "undefined") {
            initNav();
            redraw(myNavigator);
        }
    }
    finally {
        cursor_clear();
    }
});



// generic function to load PageContent obects
function ImageLoader() {
    this.pageContentAr = [];
    this.isComplete = false;

    // events
    this.onLoad= null;
    this.onError = null;
    this.onComplete = null;

    // used to wire up events
    this.Completed = function() {
        if (!this.isComplete) {
            if ((this.onComplete !== null) && (typeof (this.onComplete) == 'function')) {
                this.onComplete();
            }
        }
        this.isComplete = true;
    }

    this.Load = function(index, max) {
        if ((this.onLoad !== null) && (typeof (this.onLoad) == 'function')) {
            this.onLoad(index, max);
        }
    }

    this.Error = function(index, max) {
        if ((this.onError !== null) && (typeof (this.onError) == 'function')) {
            this.onError(index, max);
        }
    }

    this.loadImages = function(batchsize) {
        var max = $(this.pageContentAr).length;

        if (max > 0) {
            // load the first image
            this.LoadImage(this, 0, max, batchsize);
        }
    }

    // recursive function to load all images in an array of pageContent types
    this.LoadImage = function(self, index, max, batchsize) {
        // if current index is lower then max element (max-1)
        if (index < max) {
            // new image object -- check in browser
            var img = new Image();
            $(img).load(function() {
                self.pageContentAr[index].image = $(this)[0];

                if (index % batchsize == 0) {
                    var b1 = 1;
                    for (b1 = 1; b1 <= batchsize; b1++) {
                        self.LoadImage(self, index + b1, max, batchsize);
                    }
                }
                self.Load(index, max);
            }).error(function() {
                if (index % batchsize == 0) {
                    var b2 = 1;
                    for (b2 = 1; b2 <= batchsize; b2++) {
                        self.LoadImage(self, index + b2, max, batchsize);
                    }
                }
                self.Error(index, max);

            }).attr('src', this.pageContentAr[index].image);
        }

        if (index >= max) {
            self.Completed();
        }
    }
}

// Handle MainBookPages
$(document).ready(function() {
    var maxPgNbr = 0;
    $('#pbOverlay').show();
    $('#pbOverlay').fadeTo('fast', .6);

    $("#pb1").progressBar({ step_duration: 0,
        showText: true,
        barImage: 'images/progressbg_orange.gif'
    });

    var loader = new ImageLoader();
    loader.pageContentAr = BookPage;
    loader.onComplete = function() {
        $('#pbWrapper').fadeOut();
        $('#pbOverlay').fadeOut();

        redraw(myNavigator);
        altPageLen = $(AltPagesMap).length - 1;
        LoadAltPages();
    }

    loader.onLoad = UpdateProgressBar;
    loader.onError = UpdateProgressBar;

    function UpdateProgressBar(index, max) {
        if (index > maxPgNbr) {
            $('#pb1').progressBar(parseInt(((index + 1) / max) * 100));
            $('#pb1_txt').html('Processing page: ' + (index + 1));
            maxPgNbr = index;
        }
    }
    loader.loadImages(4);


    // can use a loop
    var altPageLen = $(AltPagesMap).length - 1;
    var altPageStep = 0;

    function LoadAltPages() {
        if (altPageStep <= altPageLen) {
            var altLoader = new ImageLoader();
            // force a redraw on last image loaded
            if (altPageStep == altPageLen) {
                altLoader.onComplete = AltPagesComplete;
            }
            else {
                altLoader.onComplete = AltPagesNext;
            }
            altLoader.pageContentAr = AltPagesMap[altPageStep];
            altLoader.loadImages(2);
        }
    }

    function AltPagesNext() {
        altPageStep++;
        LoadAltPages();
    }

    function AltPagesComplete() {
        $('.imageLeft').addClass("zoomit");
        $('.imageRight').addClass("zoomit");
        $('#ClickToEnlarge').show("2000");
        redraw(myNavigator);
    }

});

var activeOverlay = null;
var myNavigator = new ms_Navigator();
var blankGIF = "../images/blank.gif";
var BookPage = new Array();
var AltPagesMap = new Array()

function log(msg) {
    if (typeof (console) != 'undefined') {
        console.log(msg);
    }
}

function wireupNavButtons() {
    $('.robNavFirst').click(function() { return firstPage(); });
    $('.robNavPrior').click(function() { return priorPage(); });
    $('.robNavNext').click(function() { return nextPage(); }).focus();
    $('.robNavLast').click(function() { return lastPage(); });
}

function wireupAltPages() {
    $('.replaceBtn').each(function(i) {
        $(this).overlay({
            speed: 'fast',
            oneInstance: false,
            fadeInSpeed: 0,
            backgroundElement: '#BodyPane',
            finish: {
                top: 0,
                left: 'center',
                absolute: true
            },
            onLoad: function() {
                activeOverlay = this;
                $('body').css('cursor', 'default');
                setTimeout(function() {
                    $('body').css('cursor', 'default');
                }, 200);
            }
        });
    });

    // wire-up close overlay buttons
    $(".overlayClose").click(function() {
        if (activeOverlay !== null) activeOverlay.close();
        return false;
    });

}

function wireupZoomPage(jThis, side) {
    jThis.overlay({
        speed: 'fast',
        oneInstance: false,
        fadeInSpeed: 0,
        backgroundElement: '#BodyPane',
        finish: {
            top: 0,
            left: 'center',
            absolute: true
        },
        onLoad: function() {
            activeOverlay = this;
            // setup image, which is same as the image from the "this"
            var img = $('#pg' + side + '_img').attr('src');
            this.getContent().find('.overlayImage').attr('src', img);
            $('body').css('cursor', 'default');
            setTimeout(function() {
                $('body').css('cursor', 'default');
            }, 200);
        },
        onClose: function() {
            this.getContent().find('.overlayImage').attr('src', blankGIF);
        }
    });
}

function redraw(nav) {
    SetPageAttrs(nav, 'Left', nav.leftPage());
    SetPageAttrs(nav, 'Right', nav.rightPage());
    storeBookPageArray(nav);
    return false;
}


function nextPage() {
    try {
        myNavigator.nextPage();
    }
    catch(Error) {
        log(Error)
    }
    return false;
}

function priorPage() {
    try {
        myNavigator.priorPage();
    }
    catch (Error) {
        log(Error)
    }
    return false;
}

function lastPage() {
    try {
        myNavigator.lastPage();
    }
    catch (Error) { }
    return false;
}

function firstPage() {
    try {
        myNavigator.firstPage();
    }
    catch (Error) { }
    return false;
}


function SetPageAttrs(nav, side, updatePage) {
    // hide all the buttons first, or the screen flashes a bunch and is ugly
    $('#buttons' + side).find('.replaceBtn').each(function() {
       $(this).hide();
    });

    if (updatePage.name === 'blank') {
        $('#pg' + side + '_img').attr('src', blankGIF);
        var warnMsg = '';
        $('#' + side + 'Warning').html(warnMsg);
    }
    else {
        $('#page' + side).show();
        $('#pg' + side + '_img').attr('src', updatePage.image.src);

        var search = updatePage.name.toLowerCase();
        var pages = new Array();

        if ((updatePage.letter !== null) && (updatePage.letter !== "")) {
            pages = nav.getPagesForLetter(updatePage.letter, side);
        }

        // rules to display warning
        // 1.  "isAltImg"
        // 2.  "letter" is 'fly away' && next page is AltImg
        // 3.  "letter" is 'worldmap' && ANY page is altImg

        var warnMsg = '';
        var nextPgNbr = parseInt(updatePage.pagenbr) + 1;
        // ignore any "filler" pages
        if (nextPgNbr > 0) {
            if ((updatePage.isAltImg)
            || ((updatePage.letter == 'FA') && (nav.getPageByNumber(nextPgNbr).isAltImg))
            || ((updatePage.letter == 'WM') && (nav.hasSwapped))
           ) {
                warnMsg = '{Note: your changes will be reflected in printed book}';
            }
        }
        $('#' + side + 'Warning').html(warnMsg);

        var index = 0;
        for (var pgIdx in pages) {
            var page = pages[pgIdx];
            if (page.name.toLowerCase() != search) {
                var pageNbr = (side.toLowerCase() == 'left') ? nav.leftPageNbr() : nav.rightPageNbr();
                var alreadyUsedNbrsArr = myNavigator.getPageNbrsForPage(page.pageid);
                //  setup "pic-a-page" button
                var jBtn = $('#buttons' + side).find('.replaceBtn:eq(' + index + ')');
                setupPickAPageBtns(jBtn, page, pageNbr, side, alreadyUsedNbrsArr);
                // update overlay -- 
                var jOverlay = $(jBtn.attr('rel'));
                setupPickAPageOverlay(jOverlay, page, pageNbr, side, alreadyUsedNbrsArr);
                index++;
            }
        }
    }
}

function setupPickAPageBtns(jBtn, page, pageNbr, side, pageNbrsArr) {
    jBtn.show();
    jBtn.find('span').text(page.name); // set title
    jBtn.find('.replaceImg').attr('src', page.image.src); // set image
    var chkMark = jBtn.find('.checkmark'); 					// set check mark
     if (pageNbrsArr.length >= 1) { 
		chkMark.show();
	}  else { 
		chkMark.hide(); 
	}
}

function setupPickAPageOverlay(jOverlay, page, pageNbr, side, pageNbrsArr) {
    jOverlay.find('span').text(page.name); // title
    jOverlay.find('.overlayImage').attr('src', page.image.src); // image
    jOverlay.find('input').val(page.pageid);
    var jPgNbrs = jOverlay.find('.pagenbrs');
    if (pageNbrsArr.length >= 1) {
        if (pageNbrsArr.length === 1) {
            jPgNbrs.show().html('Already used on page ' + pageNbrsArr[0]);
        } 
        else {
            var msg = 'Already used on pages ' + pageNbrsArr.join();
            // Add space after commas and replace last comma with ampersand
            msg = msg.replace(/,/g, ", ").replace(/,(?!.*,)/, " & ");
            jPgNbrs.show().html( msg );
        }
    } else {
        jPgNbrs.hide().html('');
    }
    var jSwitchBtn = jOverlay.find('.btnSwitch');
    jSwitchBtn.unbind('click'); // clear it
    jSwitchBtn.click(function(event) {
        simulateSwap(side, pageNbr, event);
        activeOverlay.close();
        return false;
    });  // set it
}


function simulateSwap(side, pgNbr, event) {
    var pageid = activeOverlay.getContent().find('input').val();
    myNavigator.swapPage(pgNbr, pageid);
    redraw(myNavigator);
}

function storeBookPageArray(nav) {
    var idstr = nav.getPageIdArray().join();
    $("#" + bookpagearray).val(idstr);
}

function initNav() {
    InitArrays(); // function is sys generated

    // page navigation
    myNavigator.BookPages = BookPage;
    myNavigator.SwapPages = AltPagesMap;
    // setup events
    myNavigator.onNextPage = redraw;
    myNavigator.onPriorPage = redraw;
    myNavigator.onFirstPage = redraw;
    myNavigator.onLastPage = redraw;
}


function GotoKeyEvent(e) {
    var evt = e ? e : window.event;

    if (evt.keyCode == 13) {
        PageGoTo(evt);
        $('#' + evt.target.id).select();
        return false;
    }
    return true;
}


function clickButton(e, buttonid) {
    var evt = e ? e : window.event;

    var bt = document.getElementById(buttonid);
    if (bt) {
        if (evt.keyCode == 13) {
            bt.click();
            return false;
        }
    }
}

function cursor_wait() {
    document.body.style.cursor = 'wait';
}
function cursor_clear() {
    document.body.style.cursor = 'default';
}