var PageNavigator = {

    /**
     * Page navigator class for "Museum voor Communicatie"
     * This handles the navigation between pages for MusCom
     *
     * Features:
     *
     *  - Grid based navigation
     *  - Animation based on that grid for the next page
     *  - Loading the next Page in AJAX
     *  - SWFAddress compatible
     *  - The Timeline is always available (no-AJAX exception)
     *
     * Dependancies:
     *
     *  - jQuery 1.3.2 or newer
     *  - SWFAddress 2.4 or newer
     *
     **/

    grid: {
        /**
         * The grid object decides if and how to show a page
         * The key is the first part of the url (www.example.com/[timeline]/)
         * The value is a X,Y position array
         * If the first part isn't in this grid it isn't showed!
         * Home is a exception; it is used when no page can be found
         **/
        home:       [0, 0],
        tijdlijn:   [0, 1],
        colofon:    [1, 0],
        contact:    [2, 0],
        disclaimer: [3, 0],
        verhalen:   [4, 0],
        verhaal:    [5, 0],
        quiz:       [6, 0],
        zoeken:     [8, 0],
        quizvraag:  [7, 0],
        ontwerpers: [0, 1],
        ontwerpen:  [0, 1],
        emissie:    [0, 1],
        album:    [0, 1]
    },

    nextContainer: null,
    currentContainer: null,
    animationContainer: null,
    currentUrl: null,
    loader: null,

    init: function init() {
        this.currentUrl = "/";
        this.nextContainer = $('#next');
        this.currentContainer = $('#content');
        this.animationContainer = $('#animation_container');
        this.loader = $('#loader');
        this.intRe = /^\d+$/;
    },

    loadPage: function loadPage(url) {
        /**
         * A page request has been done
         *
         * @param   url         String          Url (relative!!!) to the next page (example: /stories/1/2/)
         *
         * Steps to follow:
         *
         * 1. Check where the page is relative to the current page
         * 2. Position the #next container to the relative position
         * 3. Fill the #next container with the AJAX loaded content of the URL
         * 4. Do the slide animation
         * 5. Once the animation is done use a callback to fill the #content with the new content
         * 6. Seamlessly switch back to #content and empty the container DIV
         **/

        var newUrl = url.split('#')[1] || '';
        var currentUrl = this.currentUrl;
        var movement = this.getAnimation(currentUrl, newUrl);
        var nextContainer = this.nextContainer;
        var currentContainer = this.currentContainer;
        var animationContainer = this.animationContainer;

        /**
         * Don't do anything if urls are equal
         */
        if(currentUrl == newUrl)
          return;

        /**
         * Little hack to make the designers/timeline view posible
         */
        $('.menu_timeline').removeClass('active');
        $('.menu_ontwerpers').removeClass('active');

        if (newUrl.split('/')[1] == 'ontwerpers') {
            $('.menu_ontwerpers').addClass('active');
        }
        if (newUrl.split('/')[1] == 'tijdlijn') {
            $('.menu_timeline').addClass('active');
        }
        if (newUrl.split('/')[1] == 'emissie') {
            $('.menu_timeline').addClass('active');
        }
        if (newUrl.split('/')[1] == 'ontwerpen') {
            $('.menu_timeline').addClass('active');
        }

        if (typeof(movement) == 'undefined') {
            movement = 'none';
        }

        if (movement) {

            var currentThis = this;
            var loadBefore = false;
            var skipNext = false;

            switch (movement) {
                case 'up':
                    var animation = { top: '-=' + currentContainer.height() };
                    animationContainer.animate(animation, 1000, function resetContainers() {
                        currentThis.currentUrl = newUrl;
                    });

                    return false;

                    break;
                case 'down':
                    var animation = { top: '+=' + currentContainer.height() };
                    loadBefore = true;
                    break;
                case 'left':
                    nextContainer.css('top', currentContainer.css('top'));
                    nextContainer.css('left', currentContainer.width() * 2);
                    var animation = { left: '-=' + currentContainer.width() };
                    break;
                case 'right':
                    nextContainer.css('top', currentContainer.css('top'));
                    nextContainer.css('left', 0);
                    var animation = { left: '+=' + currentContainer.width() };
                    break;
                case 'none':
                    skipNext = true;
                    break;
            };
            //if (movement != 'none') {
                $.ajax({
                    url: newUrl,
                    data: {ajax: 1},
                    beforeSend: function() {
                        currentThis.loader.show();
                    },
                    error: function() {
                        currentThis.loader.hide();
                    },
                    success: function(data) {
                        currentThis.loader.hide();
                        if (skipNext) {
                            currentContainer.html(data);
                            currentThis.currentUrl = newUrl;
                            postProcess();
                            return;
                        }

                        nextContainer.html(data);
                        if (loadBefore) {
                            currentContainer.html(nextContainer.html());
                        }
                        animationContainer.animate(animation, 1000, function resetContainers() {
                            if (!loadBefore) {
                                currentContainer.html(nextContainer.html());
                            }
                            currentContainer.css('left', currentContainer.width());
                            currentContainer.css('top', currentContainer.height());
                            animationContainer.css('left', 0 - currentContainer.width());
                            animationContainer.css('top', 0 - currentContainer.height());
                            nextContainer.css('left', currentContainer.width() * 2);
                            nextContainer.css('top', currentContainer.height());
                            currentThis.currentUrl = newUrl;
                            postProcess();
                        });
                    }
                });
           // }
        }
    },

    convertToNumeric: function convertToNumeric(data) {
        if ((data - 0) == data && data.length > 0) {
            data = data - 0;
        }
        return data;
    },

    getAnimation: function getAnimation(currentUrl, newUrl) {
        /**
         * This function returns the direction (up/down/left/right) the animation should do;
         * If no animation can be determined nothing is returned
         *
         * @param   currentUrl      String      The relative URL of the current page
         * @param   newUrl          String      The relative URL of the page you can go to
         */
        var currentPos = this.getGridPosition(currentUrl);
        var newPos = this.getGridPosition(newUrl);

        if (currentPos && newPos) {

            if (currentPos[1] != newPos[1]) {
                // Horizontal movement
                if (currentPos[1] > newPos[1]) {
                    // New position is top
                    return 'down'
                } else {
                    // New position is bottom
                    return 'up'
                }
            }

            if (currentPos[0] > newPos[0]) {
                // New position is left
                return 'right'
            } else {
                if (currentPos[0] < newPos[0]) {
                    // New position is right
                    return 'left'
                }
            }

            if (currentPos[0] == newPos[0]) {

                curl = currentUrl.split('/');
                nurl = newUrl.split('/');

                curl = $.grep(curl, function(n, i) {
                    return(n);
                });

                nurl = $.grep(nurl, function(n, i) {
                    return(n);
                });

                if (nurl.length == 4 || curl.length == 4) {
                    return 'none';
                }

                if (curl.length == 2 && nurl.length == 3) {

                    if (nurl[2].indexOf('?') != -1) {
                        return 'none';
                    } else {
                        return 'left';
                    }
                }

                if (curl.length == 1 && nurl.length == 2) {
                    return 'left';
                }

                if (curl.length == 2 && nurl.length == 2) {
                    if (this.convertToNumeric(curl[1]) > this.convertToNumeric(nurl[1])) {
                        return 'right';
                    }
                    if (this.convertToNumeric(nurl[1]) > this.convertToNumeric(curl[1])) {
                        return 'left';
                    }
                }


                if (curl.length == 3 && nurl.length == 3) {
                    if (nurl[2].indexOf('?') != -1) {
                        return 'none';
                    } else {
                        if (this.convertToNumeric(curl[2]) > this.convertToNumeric(nurl[2])) {
                            return 'right';
                        }
                        if (this.convertToNumeric(nurl[2]) > this.convertToNumeric(curl[2])) {
                            return 'left';
                        }
                    }
                }

                /**

                 if(nurl.length > 4 && nurl[4] != '' && nurl[4] != '?ajax=1') {
                 return 'none'; //return 'left';
                 } else {
                 if(nurl.length > 3 && nurl[3] != '' && nurl[3] != '?ajax=1' && this.intRe.test(nurl[3])) {
                 if(curl.length > 3) {
                 if(nurl[3] > curl[3]) {
                 return 'none'; //return 'left';
                 }
                 if (nurl[3] < curl[3]) {
                 return 'none'; //return 'right';
                 }
                 if(curl.length > 4 && curl[4] != '') {
                 return 'none'; // return 'right';
                 }
                 } else {
                 return 'none'; //return 'left';
                 }
                 } else {
                 if(nurl.length > 2 && nurl[2] != '' && nurl[2] != '?ajax=1' && this.intRe.test(nurl[2])) {
                 if(curl.length > 2) {
                 if(nurl[2] > curl[2]) {
                 return 'left';
                 }
                 if (nurl[2] < curl[2]) {
                 return 'right';
                 }
                 } else {
                 return 'left';
                 }
                 }
                 }
                 }
                 */

            }
        }
    },

    getGridPosition: function getGridPosition(url) {
        var level = url.split('/')[1];
        if (!level) {
            level = 'home';
        }

        if (this.grid[level]) {
            return this.grid[level];
        } else {
            return false;
        }
    }
};

$(document).ready(function() {
    PageNavigator.init();
});