var SlideShow = {};
SlideShow.position = {
    x:20,
    y:80
};
SlideShow.dimension = {
    x:300,
    y:365
};
SlideShow.initialize = function(){
    var imageArray = $$('img.slide');
    imageArray.each(
        function( thisImageElement, index ){
            var thisSlide = SlideShow.getSlide( thisImageElement );
            var nextIndex = index+1;
            if( index == (imageArray.length-1) ){
                nextIndex=0;
            }
            //alert('nextIndex='+nextIndex);
            var nextSlide = SlideShow.getSlide( imageArray[ nextIndex ] );
            thisSlide.setNextSlide( nextSlide );
            var imageId = thisSlide.element.getProperty('id');
            var nextImageId = nextSlide.element.getProperty('id');
            //alert('imageId='+imageId+'\nnextImageId='+nextImageId);
            var src = thisImageElement.getProperty('src');
            new Asset.image(
                src,{
                    onload: function(){
                        thisImageElement.isLoaded = true;
                        thisImageElement.setStyle( 'left', SlideShow.position.x+'px' );
                        thisImageElement.setStyle( 'top', SlideShow.position.y+'px' );
                        if( index==0 ){
                            SlideShow.slideArray[0].appear();
                        }
                    }
                });

        }
        );
}
window.addEvent('domready',SlideShow.initialize);

SlideShow.slideArray = [];

SlideShow.getSlide = function( element ){
    var array = SlideShow.slideArray;
    var length = array.length;
    var slide = null;
    for( var i=0;i<length;i++){
        if( array[i].element === element ){
            slide = array[i];
        }
    }
    if( !slide ){
        slide = new SlideShow.Slide();
        slide.initialize(element);
    }
    return slide;
}

SlideShow.Slide = function(){
    this.initialize = function( imageElement ){
        this.element = imageElement;
        this.nextSlide =  null;
        this.caption= null;
        this.paused= false;
        this.inTransition= false;
        this.element.set('tween',{
            duration: 1000
        });

        SlideShow.slideArray.push( this );
        
        var imageId = this.element.getProperty('id');
        var captionId = imageId+'-caption';
        this.caption= new SlideShow.Caption();
        this.caption.initialize( $(captionId) );
        
        var thisSlideReference = this;
        this.element.addEvent('click',function(){
            var link = thisSlideReference.element.getProperty('link');
            link.toURI().go();
        });
        this.element.addEvent('mouseover',function(){
            if( thisSlideReference.inTransition ){
                return;
            }
            thisSlideReference.paused = true;
            thisSlideReference.caption.appear();
        });
        this.element.addEvent('mouseout',function(){
            if( thisSlideReference.inTransition ){
                return;
            }
            thisSlideReference.paused = false;
            //thisImage.caption.transition.cancel();
            thisSlideReference.caption.disappear();
        });
    }
    this.setNextSlide= function( slide ){
        this.nextSlide = slide;
    }
    this.setCaption= function( caption ){
        this.caption = caption;
    }
    this.setInTransition = function( b ){
        this.inTransition = b;
    }
    this.appear= function(){
        this.element.tween( 'opacity',0,1 );
        this.setInTransition.delay(1000,this,false);
        this.disappear.delay(6000,this);
    }
    this.disappear= function(){
        if( this.paused ){
            this.disappear.delay(2000,this);
            return;
        }
        this.inTransition = true;
        this.element.tween( 'opacity', 1,0 );
        this.nextSlide.appear.delay(800,this.nextSlide);
    }
}

SlideShow.Caption = function(){
    this.initialize= function(captionElement){
        this.element = captionElement;
        this.element.set('tween',{
            duration: 1000
        });
        this.element.setStyle( 'left', SlideShow.position.x+'px' );
        this.element.setStyle( 'top', (SlideShow.position.y+SlideShow.dimension.y)+'px' );
    }
    this.appear= function(){
        this.element.tween( 'opacity',0,1 );
    }
    this.disappear= function(){
        this.element.tween( 'opacity', 1,0 );
    }
}