/**
 * Pager
 *
 * @extends nl.code.pager.Pager
 */
SitePager = new Class({
    Extends: nl.code.pager.Pager,

    /**
     * Constructor
     *
     * @param string, the base url of this project
     */
    initialize: function(base_url) {
        // call parent constructor
        this.parent(base_url);

        // site wide objects
        // this.addListener('update_page', new Menu());

        // settings
        nl.code.pager.PageData.show_loading = false;

        this.scanContent($(document.body));
    },

    /**
     * Set the content of the page
     *
     * @param JSON
     * @param string
     * @return void
     */
    setContent: function(data, text) {
        this.parent(data, text);
    },

    /**
     * Scan the inner html of an element
     *
     * @param Element, the element to scan
     */
    scanContent: function(root) {
        // make sure that links to an external website open up in a new window
        nl.code.pager.PageData.parseExternalLinks(root);

        // create page specific objects
        this.page_object_arr.push(new SlideShow());
        this.page_object_arr.push(new ProjectSorter());
    }
});

/**
 * ProjectSorter Class
 */
ProjectSorter = new Class({
    /**
     * Constructor
     */
    initialize: function() {
        var form = $('project-filter-form');

        // guard
        if (! form) {
            return;
        }

        var select_arr = form.getElements('select');
        for (var i = 0; i < select_arr.length; i++) {
            select_arr[i].addEvent('change', function(e) {
                form.submit();
            });
        }
    }
});

/**
 * SlideShow Class
 *
 * The active slideshow element has z-index 200
 * The clicked slideshow element has z-index 190
 * Thes rest has z-index 100
 */
SlideShow = new Class({
    /**
     * Constructor
     */
    initialize: function() {
        this.active_element = null;
        this.element_arr = [];
        this.container = $('recent-projects');

        // guard
        if (! this.container) {
            return;
        }

        this.fixZIndex();
        this.createElements();

        var thisObject = this;
        this.interval = this.slide.delay(4000, thisObject);
    },

    /**
     * @return void
     */
    slide: function() {
        var index = 0;
        if (this.active_element != null) {
            index = this.element_arr.indexOf(this.active_element);
        }

        var element = this.element_arr[0];
        if (index < (this.element_arr.length - 1)) {
            element = this.element_arr[index + 1];
        }

        this.makeActive(element, false);

        var thisObject = this;
        this.interval = this.slide.delay(4000, thisObject);
    },

    /**
     * @return void
     */
    createElements: function() {
        var element = null;
        var element_arr = this.container.getElements('li');

        for (var i = 0; i < element_arr.length; i++) {
            element = new SlideShowElement(this, element_arr[i], i);

            if (element.isDefaultActive()) {
                this.active_element = element;
                element.setZIndex(200);
            } else {
                element.setZIndex(100);
            }

            this.element_arr.push(element);
        }
    },

    /**
     * Fix the ie z-index hell
     * Every parent element has to have a z-index
     *
     * @return void
     */
    fixZIndex: function() {
        var zIndex = '';
        var element = this.container;

        while (element != null) {
            zIndex = element.getStyle('z-index').toInt();

            if ($type(zIndex) != 'number' || ($type(zIndex) == 'number' && zIndex == 0)) {
                element.setStyle('z-index', 1);
            }

            element = element.getParent();
        }
    },

    /**
     * Make an element the active one by sliding out the currently active
     *
     * @param SlideShowElement
     * @param boolean
     * @return void
     */
    makeActive: function(element, pause) {
        if (! $type(pause)) {
            pause = false;
        }

        if (pause) {
            $clear(this.interval);

            var thisObject = this;
            this.interval = this.slide.delay(10000, thisObject);
        }

        if (this.active_element == element) {
            return;
        }

        if (this.active_element) {
            this.active_element.hide();
        }

        this.active_element = element;
        this.active_element.setZIndex(190);
    },

    /**
     * @param SlideShowElement
     * @return void
     */
    setActive: function(element) {
        element.setInActive();

        this.active_element.show();
        this.active_element.setActive(200);
    }
});

/**
 * SlideShowElement Class
 */
SlideShowElement = new Class({
    /**
     * Constructor
     *
     * @param SlideShow
     * @param Element
     */
    initialize: function(slide_show, container) {
        this.slide_show = slide_show;
        this.container = container;

        this.image = container.getElement('a.image img');
        this.counter = container.getElement('a.counter');
        this.title = container.getElement('a.title');

        this.image.setStyles({
            position: 'absolute',
            zIndex: 100,
            top: 0,
            left: 0,
            display: 'block'
        });

        this.addControls();
    },

    /**
     * @return void
     */
    addControls: function() {
        var thisObject = this;
        this.counter.addEvent('click', function(event) {
            event.stop();

            this.blur();
            thisObject.slide_show.makeActive(thisObject, true);
        });
    },

    /**
     * @return void
     */
    hide: function() {
        var thisObject = this;

        var image_fx = new Fx.Tween(this.image, {
            duration: 400,
            transition: Fx.Transitions.Cubic.easeOut,
            onComplete: function() {
                thisObject.slide_show.setActive(thisObject);
            }
        });

        var title_fx = new Fx.Tween(this.title, {
            duration: 400,
            transition: Fx.Transitions.Cubic.easeOut
        });

        image_fx.start('left', [0, 250]);
        title_fx.start('opacity', [1, 0]);
    },

    /**
     * @return void
     */
    show: function() {
        var title_fx = new Fx.Tween(this.title, {
            duration: 400,
            transition: Fx.Transitions.Cubic.easeOut
        });

        title_fx.start('opacity', [0, 1]);
    },

    /**
     * Check if the element is initialiy active
     * @return boolean
     */
    isDefaultActive: function() {
        return this.container.hasClass('sel');
    },

    /**
     * @param int
     * @return void
     */
    setZIndex: function(zIndex) {
        this.container.setStyle('z-index', zIndex);

        var children = this.container.getChildren();
        for (var i = 0; i < children.length; i++) {
            children[i].setStyle('z-index', zIndex);
        }
    },

    /**
     * @param int
     * @return void
     */
    setActive: function(depth) {
        this.setZIndex(depth);
        this.container.addClass('sel');
    },

    /**
     * @param int
     * @return void
     */
    setInActive: function(depth) {
        this.image.setStyle('left', 0);
        this.title.setStyle('opacity', 1);

        this.setZIndex(depth);
        this.container.removeClass('sel');
    }
});