/**************************************************************

    Script        : SlideShow
    Version        : 1.3
    Authors        : Samuel Birch
    Desc        : 
    Licence        : Open Source MIT Licence

**************************************************************/

var sideSlideShow = new Class({
    
    options: {
            effect: 'fade', //fade|wipe|slide|random
            duration: 2000,
            transition: Fx.Transitions.linear,
            direction: 'right', //top|right|bottom|left|random
            color: false,
            wait: 5000,
            loop: false,
            thumbnails: true,
            thumbnailCls: 'outline',
            backgroundSlider: true,
            loadingCls: 'loading',
            onClick: false
    },

    initialize: function(container, images, options){
        this.setOptions(options);
        
        this.container = $(container);
        this.container.setStyles({
            position: 'relative',
            overflow: 'hidden'
        });
        if(this.options.onClick){
            this.container.addEvent('click', function(){
                this.options.onClick(this.imageLoaded);
            }.bind(this));
        }
        
        
        this.imagesHolder = new Element('div').setStyles({
            position: 'absolute',
            overflow: 'hidden',
            top: this.container.getStyle('height'),
            left: 0,
            width: '0px',
            height: '0px',
            display: 'none'
        }).injectInside(this.container);
        
        if($type(images) == 'string' && !this.options.thumbnails){
            var imageList = [];
            $$('.'+images).each(function(el){
                imageList.push(el.src);
                el.injectInside(this.imagesHolder);
            },this);
            this.images = imageList;
            
        }else if($type(images) == 'string' && this.options.thumbnails){
            var imageList = [];
            var srcList = [];
            this.thumbnails = $$('.'+images);
            this.thumbnails.each(function(el,i){
                srcList.push(el.href);
                imageList.push(el.getElement('img'));
                el.href = 'javascript:;';
                el.addEvent('click',function(){
                    this.stop();
                    this.play(i);                 
                }.bind(this,el,i));
            },this);
            this.images = srcList;
            this.thumbnailImages = imageList;
            
            if(this.options.backgroundSlider){
                this.bgSlider = new sideBackgroundSlider(this.thumbnailImages,{mouseOver: false, duration: this.options.duration, className: this.options.thumbnailCls, padding:{top:0,right:-2,bottom:-2,left:0}});
                this.bgSlider.set(this.thumbnailImages[0]);
            }
        
        }else{
            this.images = images;
        }
        
        this.loading = new Element('div').addClass(this.options.loadingCls).setStyles({
            position: 'absolute',
            top: 0,
            left: 0,
            zIndex: 3,
            display: 'none',
            width: this.container.getStyle('width'),
            height: this.container.getStyle('height')
        }).injectInside(this.container);
        
        this.oldImage = new Element('div').setStyles({
            position: 'absolute',
            overflow: 'hidden',
            top: 0,
            left: 0,
            opacity: 0,
            width: this.container.getStyle('width'),
            height: this.container.getStyle('height')
        }).injectInside(this.container);
        
        this.newImage = this.oldImage.clone();
        this.newImage.injectInside(this.container);
        
        
        
        this.timer = 0;
        this.image = -1;
        this.imageLoaded = 0;
        this.stopped = true;
        this.started = false;
        this.animating = false;
    },
    
    load: function(){
        $clear(this.timer);
        this.loading.setStyle('display','block');
        this.image++;
        var img = this.images[this.image];
        delete this.imageObj;
        
        doLoad = true;
        this.imagesHolder.getElements('img').each(function(el){
            var src = this.images[this.image];
            if(el.src == src){
                this.imageObj = el;
                doLoad = false;
                this.add = false;
                this.show();
            }
        },this);
        
        if(doLoad){
            this.add = true;
            this.imageObj = new Asset.image(img, {onload: this.show.bind(this)});
        }
        
    },

    show: function(add){
        
        if(this.add){
            this.imageObj.injectInside(this.imagesHolder);
        }
        
        this.newImage.setStyles({
            zIndex: 1,
            opacity: 0
        });
        var img = this.newImage.getElement('img');
        if(img){
            var newI = this.imageObj.clone();
            //img.replaceWith(this.imageObj.clone());
            newI.replaces(img);
        }else{
            var obj = this.imageObj.clone();
            obj.injectInside(this.newImage);
        }
        this.imageLoaded = this.image;
        this.loading.setStyle('display','none');
        if(this.options.thumbnails){
            
            if(this.options.backgroundSlider){
                var elT = this.thumbnailImages[this.image];
                this.bgSlider.move(elT);
                this.bgSlider.setStart(elT);
            }else{
                this.thumbnails.each(function(el,i){
                    el.removeClass(this.options.thumbnailCls);
                    if(i == this.image){
                        el.addClass(this.options.thumbnailCls);
                    }
                },this);
            }
        }
        this.effect();
    },
    
    wait: function(){
        this.timer = this.load.delay(this.options.wait,this);
    },
    
    play: function(num){
        if(this.stopped){
            if(num > -1){this.image = num-1};
            if(this.image < this.images.length){
                this.stopped = false;
                if(this.started){
                    this.next();
                }else{
                    this.load();
                }
                this.started = true;
            }
        }
    },
    
    stop: function(){
        $clear(this.timer);
        this.stopped = true;
    },
    
    next: function(wait){
        var doNext = true;
        if(wait && this.stopped){
            doNext = false;
        }
        if(this.animating){
            doNext = false;
        }
        if(doNext){
            this.cloneImage();
            $clear(this.timer);
            if(this.image < this.images.length-1){
                if(wait){
                    this.wait();
                }else{
                    this.load();    
                }
            }else{
                if(this.options.loop){
                    this.image = -1;
                    if(wait){
                        this.wait();
                    }else{
                        this.load();    
                    }
                }else{
                    this.stopped = true;
                }
            }
        }
    },
    
    previous: function(){
        if(this.imageLoaded == 0){
            this.image = this.images.length-2;    
        }else{
            this.image = this.imageLoaded-2;
        }
        this.next();
    },
    
    cloneImage: function(){
        var img = this.oldImage.getElement('img');
        if(img){
            //img.replaceWith(this.imageObj.clone());
            this.imageObj.clone().replaces(img)
        }else{
            var obj = this.imageObj.clone();
            obj.injectInside(this.oldImage);
        }
        
        this.oldImage.setStyles({
            zIndex: 0,
            top: 0,
            left: 0,
            opacity: 1
        });
        
        this.newImage.setStyles({opacity:0});
    },
    
    
    effect: function(){
        this.animating = true;
        this.effectObj = new Fx.Morph(this.newImage,{
            duration: this.options.duration,
            transition: this.options.transition
        });
        
        var myFxTypes = ['fade','wipe','slide'];
        var myFxDir = ['top','right','bottom','left'];
        
        if(this.options.effect == 'fade'){
            this.fade();
            
        }else if(this.options.effect == 'wipe'){
            if(this.options.direction == 'random'){
                this.setup(myFxDir[Math.floor(Math.random()*(3+1))]);
            }else{
                this.setup(this.options.direction);
            }
            this.wipe();
            
        }else if(this.options.effect == 'slide'){
            if(this.options.direction == 'random'){
                this.setup(myFxDir[Math.floor(Math.random()*(3+1))]);
            }else{
                this.setup(this.options.direction);
            }
            this.slide();
            
        }else if(this.options.effect == 'random'){
            var type = myFxTypes[Math.floor(Math.random()*(2+1))];
            if(type != 'fade'){
                var dir = myFxDir[Math.floor(Math.random()*(3+1))];
                if(this.options.direction == 'random'){
                    this.setup(dir);
                }else{
                    this.setup(this.options.direction);
                }
            }else{
                this.setup();
            }
            this[type]();
        }
    },
    
    setup: function(dir){
        if(dir == 'top'){
            this.top = -this.container.getStyle('height').toInt();
            this.left = 0;
            this.topOut = this.container.getStyle('height').toInt();
            this.leftOut = 0;
            
        }else if(dir == 'right'){
            this.top = 0;
            this.left = this.container.getStyle('width').toInt();
            this.topOut = 0;
            this.leftOut = -this.container.getStyle('width').toInt();
            
        }else if(dir == 'bottom'){
            this.top = this.container.getStyle('height').toInt();
            this.left = 0;
            this.topOut = -this.container.getStyle('height').toInt();
            this.leftOut = 0;
            
        }else if(dir == 'left'){
            this.top = 0;
            this.left = -this.container.getStyle('width').toInt();
            this.topOut = 0;
            this.leftOut = this.container.getStyle('width').toInt();
            
        }else{
            this.top = 0;
            this.left = 0;
            this.topOut = 0;
            this.leftOut = 0;
        }
    },
    
    fade: function(){
        this.effectObj.start({
            opacity: [0,1]
        });
        this.resetAnimation.delay(this.options.duration+90,this);
        if(!this.stopped){
        this.next.delay(this.options.duration+100,this,true);
        }
    },
    
    wipe: function(){
        this.oldImage.effects({
            duration: this.options.duration,
            transition: this.options.transition
        }).start({
            top: [0,this.topOut],
            left: [0, this.leftOut]
        })
        this.effectObj.start({
            top: [this.top,0],
            left: [this.left,0],
            opacity: [1,1]
        },this);
        this.resetAnimation.delay(this.options.duration+90,this);
        if(!this.stopped){
        this.next.delay(this.options.duration+100,this,true);
        }
    },
    
    slide: function(){
        this.effectObj.start({
            top: [this.top,0],
            left: [this.left,0],
            opacity: [1,1]
        },this);
        this.resetAnimation.delay(this.options.duration+90,this);
        if(!this.stopped){
        this.next.delay(this.options.duration+100,this,true);
        }
    },
    
    resetAnimation: function(){
        this.animating = false;
    }
    
});
sideSlideShow.implement(new Options);
sideSlideShow.implement(new Events);


/*************************************************************/