var gallery;
//
//  Configuration
//
GalleryOptions = Object.extend({
    changeInterval : 6000 // 4 second interval between image changes
}, window.GalleryOptions || {});

var Gallery = Class.create();

Gallery.prototype = {
    itemArray : [],
    currentIndex : null,
    timer : null,
    isInTransition : null,
    effects : [],
    preloadImage : null,
    initialize : function() {
        this.isInTransition = false;
        this.updateItemList();
        this.addEvents();
    },

    updateItemList : function() {
        this.itemArray = [];
        this.itemArray = $$('a[rel^=section]').collect(function(anchor){ data = (anchor.childNodes[0] && anchor.childNodes[0].data != undefined) ? anchor.childNodes[0].data : ''; return [anchor.href, anchor.title, anchor.id]; }).uniq();
        this.updateIndex();
        this.load();
    },

    clearAllEffects : function() {
        for( var i = 0; i < this.effects.length; ++i)
        {
            this.effects[i].element.writeAttribute( "style", "" );
            this.effects[i].cancel();
        }
        this.effects = [];
        this.isInTransition = false;
    },

    load : function()
    {
        this.preloadImage = new Image();
        this.preloadImage.src = "/images/home/"+this.getImage();
        this.preloadImage.onload = (function()
        {
            this.update();
            this.setTimer();
        }).bind(this);
    },

    updateIndex : function(index)
    {
        if( !index ) index = this.getIndex();
        if( this.currentIndex ) $(this.currentIndex).removeClassName( 'current-item' );
        this.currentIndex = index;
    },

    update : function() {
        if( this.isInTransition )
        {
            this.clearAllEffects();
        }
        
        $('main-image').up().href = $(this.currentIndex).href;

        $('main-image').style.opacity = 0.0;
        $('main-image').src = this.preloadImage.src;
        
        this.isInTransition = true;
        
        this.effects[this.effects.length] = new Effect.Appear( 'main-image', {
            from : 0.0, 
            to : 1.0, 
            duration : 1.75, 
            delay : 0.1,
            afterFinish : (function(){
                this.isInTransition = false;
            }).bind(this)
        });
        
        this.effects[this.effects.length] = new Effect.Morph( this.currentIndex, {
            style : 'morph-current-item',
            duration:0.25, 
            afterFinish : (function(){
                $(this.currentIndex).addClassName( 'current-item' );
                $(this.currentIndex).removeClassName( 'morph-current-item' );
            }).bind(this)
        });
    },

    getIndex : function() {
        var index;
        if( this.currentIndex ){
            var i;
            for( i = 0; i < this.itemArray.length; ++i )
            {
                if( this.itemArray[i][2] == this.currentIndex )
                {
                    index =( (i + 1)<this.itemArray.length ) ? this.itemArray[i+1][2] : this.itemArray[0][2]; // Index is either the next in the array or if at the end of the array the first item
                    break;
                }
            }
        }
        else if( this.itemArray.length > 0 ){
            index = this.itemArray[0][2];	// If this.currentIndex isn't set return the first item in this.itemArray;
        }
        return index;
    },

    getImage : function(){
        var image;
        if( this.currentIndex ){
            var i;
            for( i = 0; i<window.sites.length; ++i)
            {
                if( window.sites[i].id == this.currentIndex )
                {
                 image = window.sites[i].image;
                }
            }
        }
        return image;
    },

    stopTimer : function() {
        clearInterval( this.timer );
    },

    setTimer : function() {
        if( this.timer ) this.stopTimer();
        var that = this;
        this.timer = setInterval(function(){ that.updateIndex(); that.load(); }, GalleryOptions.changeInterval || 1000 );
    },

    addEvents : function() {
        document.observe('mouseover', (function(event){
            var target = event.findElement('a[rel^=section]');
            if (target) {
                event.stop();
                this.stopTimer();
                if( this.currentIndex != target.id )
                {
                    this.updateIndex(target.id);
                    this.load();
                }
            }
        }).bind(this));
        document.observe('mouseout', (function(event){
            var target = event.findElement('a[rel^=section]');
            if (target) {
                event.stop();
                this.setTimer();
               if( target.id != this.currentIndex ) target.removeClassName( 'current-item' );
            }
        }).bind(this));
    },

    log : function(msg) {
        if( window.console ) console.log( msg );
    }
}

document.observe('dom:loaded', function(){
    gallery = new Gallery();
});