/**
 * SlideShow
 */
SlideShow = new Class({

    /**
     * Container div
     *
     * @var Element
     */
    container: null,

    /**
     * Time of the periodical
     *
     * @var Element
     */
    periodical_time: 3500,

    /**
     * Effect
     *
     * @var Element
     */
    effect: null,

    /**
     * Image array
     *
     * @var array
     */
    image_arr: null,

    /**
     * The index of the image
     *
     * @var Element
     */
    index: null,

    /**
     * The index of the image
     *
     * @var Element
     */
    navigation: null,

    /**
     * The index of the image
     *
     * @var Element
     */
    caption: null,

    /**
     * Constructor
     *
     * @param Element container div
     * @param json image_arr
     * @param index
     */
    initialize: function(container, image_arr, index) {

        // get the container
        this.container = container;

        // image array
        this.image_arr = image_arr;

        // get the navigation
        this.navigation = container.getElement('div.nav-photos-container');

        // get the caption
        this.caption = container.getElement('h3.project-title');

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

        // set the index
        this.index = index;

        // activate the timer
        this.setActiveImage.periodical(this.periodical_time, this);
    },

    /**
     * Set active image
     */
    setActiveImage: function () {

        // get the already active image
        active_image = this.container.getElement('img');

        // set the z-index
        active_image.setStyle('z-index', 3);

        // get the selected navigation element
        sel_navigation = this.navigation.getElement('li.sel');

        // remove the sel class
        if (sel_navigation){
            sel_navigation.removeClass('sel');
        }

        // switch back to 0, when overflowing
        if (this.index + 1 <= this.image_arr.length - 1) {
            this.index++;
        } else {
            this.index = 0;
        }

        // get the navigation listitems
        nav_list_items = this.navigation.getElements('li');

        // get the new selected navitem
        sel_navigation = nav_list_items[this.index];
            sel_navigation.addClass('sel');

        // get the image attributes from the json array (constructed in the page).
        new_image = this.image_arr[this.index];
        
        // make a new image element
        asset_image = new Element('img', {'src': new_image.url, 'class': 'mood-image', 'alt': new_image.name});
        asset_image.setStyles({
            'opacity': 0,
            'z-index': 5
        });

        // inject the image
        asset_image.inject(this.container, 'top');

        // make the project link
        if (new_image.project_url) {
            new_title_link = new Element('a', {'html': new_image.name, 'href': new_image.project_url});
        } else {
            new_title_link = new Element('span', {'html': new_image.name});
        }

        // set the caption
        this.caption.set('html', '');

        // inject a link to the project
        new_title_link.inject(this.caption);

        // cufonize
        Cufon.replace('h3.project-title');

        // create the effect
        this.effect = new Fx.Tween(asset_image, {
            property:'opacity', 
            duration: '1500ms', 
            transition: 'linear', 
            onComplete: function() {active_image.destroy()}
        });

        // start the effect
        this.effect.start(0, 1);
    }
});