/* Provide the svtyle of slideshow used by Soulmark, Truehomes, Edgewater, Tribute homes sites
 * Uses Lightbox for enlarge
 */
 
 /*
 This whole thing is pretty hacky -
 merging this with lightbox would eliminate
 some of the funny business with building the rel tags
 and especially with needing to have multiple enlarge
 links in the first place (and it would be nice to
 sync up the slideshow prev/next with this prev/next)
 */

var Slideshow = Class.create({
    initialize: function(slides, options){    
        if(slides.length == 0)
            return; 
            
        this.options = options;
        this.slides = $A(slides || []);        
        this.in_swap = false;
                
        Event.observe(window, 'load', function(){
            this.createEnlargeButtons();         
               
            this.previous = $(this.options.previous);
            this.next = $(this.options.next);
            this.thumb_image = $(this.options.image);
            
            this.previous.style.cursor = 'hand';           
            this.next.style.cursor = 'hand';
            
            this.previous.observe('click', function(){
                this.gotoPrevious();
            }.bind(this));
            
            this.next.observe('click', function(){
                this.gotoNext();
            }.bind(this));
               
            this.introFirstImage();            
        }.bind(this));
    },
    
    introFirstImage: function(){
        this.slide_enlarge_links[0].show();                        
        this.thumb_image.src = this.slides[0].thumb;    
        this.thumb_image.alt = this.slides[0].caption;            
        this.currentIndex = 0;
        //this.currentIndex = 0;
        //this.swapImage(0);
    },
    
    createEnlargeButtons: function(){    
        // This is hacky and not very flexible
        
        var enlarge_image = this.options.enlarge_image;
        var enlarge_container = $(this.options.enlarge_container);        
        
        this.slide_enlarge_links = this.slides.collect(function(slide, index){
            var lnk = new Element('a', {
                href: slide.enlarge, rel: 'lightbox[' + this.options.lightbox + ']', 
                style: 'display: none; cursor: hand'
            });
            
            var img = new Element('img', {src: this.options.enlarge_image, alt: 'Enlarge'});
            lnk.appendChild(img);
            enlarge_container.appendChild(lnk);
            
            return lnk;            
        }.bind(this));        
            
        // if myLightbox is defined, need to reload the image set to it    
        if(typeof(myLightbox) != 'undefined')    
            myLightbox.updateImageList();
    },
    
    gotoPrevious: function(){    
        if(this.in_swap) 
            return;        
        
        if(this.currentIndex <= 0){
            this.swapImage(this.slides.length - 1);            
        }
        else {
            this.swapImage(this.currentIndex - 1);
        }
    },
    
    gotoNext: function(){        
        if(this.in_swap) 
            return;
            
        if(this.currentIndex >= this.slides.length - 1){
            this.swapImage(0);
        }
        else {                
            this.swapImage(this.currentIndex + 1);
        }
    },
    
    swapImage: function(index){
        this.in_swap = true;
            
        new Effect.Fade(this.thumb_image, {duration: 0.5, queue: 'front',
            afterFinish: function(){
                this.slide_enlarge_links[this.currentIndex].hide();
                this.slide_enlarge_links[index].show();                        
                this.thumb_image.src = this.slides[index].thumb;                
                this.thumb_image.alt = this.slides[index].caption;
                this.currentIndex = index; 
        
                new Effect.Appear(this.thumb_image, {duration: 0.5, queue: 'end', 
                    afterFinish: function(){
                        this.in_swap = false;
                    }.bind(this)
                });    
            }.bind(this)
        });        
    }  
});