Element.extend({
	getText: function() {
		return this.innerText || this.textContent || '';
	}
});

SlideshowItem = new Class({
    initialize: function(container, options) {       
        try {
            //required
            this.imageURL = this._getProperty(container.getElement('img.' + options.imageClass),'src');
            
            //optional
            this.thumbURL = this._getProperty(container.getElement('img.' + options.thumbClass),'src');
            this.linkURL = this._getProperty(container.getElement('a.' + options.linkClass),'href');
            this.title = this._getProperty(container.getElement('h3'),null);
            this.description = this._getProperty(container.getElement('p'),null);
                    
        } catch (err) {
            ALERT('ERROR initializing SlideshowItem: ' + err.description);
        }        
    },
    toString: function() {
        if ($defined(this.title)) {
            return this.title + ' :: ' + this.imageURL;
        } else {
            return this.imageURL;
        }
    },
    
    //helpers
    _getProperty: function(ctrl, propName) {
        if ($defined(ctrl)) {
            if ($defined(propName)) {
                return ctrl.getProperty(propName);
            } else if($defined(ctrl.getText)) {
                return ctrl.getText();
            } else {
                return ctrl.innerHTML;
            }            
        } else {
            return null;
        }
    },    
    
    ALERT: function (message) {
    
        if ($define(console)) {
            console.error(message);
        } else {
            alert(message);
        }
   }
   
});

var SlideShow = {
    
	init: function(options){
		//added htmlWidth and htmlHeight which are the default sizes for html content blocks
		this.options = Object.extend({
		    galleryID: 'myGallery',
		    itemClass: 'imageElement',
		    thumbClass: 'thumbnail',
		    imageClass: 'full',
		    linkClass: 'open',		    
		    slideshowBoxID: 'ddSlideshowDiv',
			fadeDuration: 500,
			delay: 9000			
		}, options || {});

        this.gallery = $(this.options.galleryID);
		this.items = [];
		
    	this.gallery.getElements('div.' + this.options.itemClass).each( function(el) {  
    	    this.items.push(new SlideshowItem(el, this.options));
    	    
    	    //hide
    	    el.setStyle('display','none');
		}, this);
		
		//create the holder for the slideshow
		this.slideshowDiv = new Element('div').setProperty('id', this.options.slideshowBoxID).injectInside(this.gallery);
		this.slideshowAnchor = new Element('a').injectInside(this.slideshowDiv);
		this.slideshowImage = new Element('img').setOpacity(0).injectInside(this.slideshowAnchor);
		
		this.currentIndex = 0;
		this.ShowItem();		
		
	},
	
	ShowItem: function () {
	    if ($defined(this.timer)) { $clear(this.timer); }
	    var item = this.items[this.currentIndex];

        switch (this.ImageState()) {
            case 'Idle':    
                //start fade out
                this.imageState = 'FadeOut';
                var myFx = new Fx.Style(this.slideshowImage, 'opacity', { duration: this.options.fadeDuration });
                myFx.start(1,0.2);
	            //setup the timer
	            this.timer = this.ShowItem.delay(this.options.fadeDuration, this);
	            break;
            case 'FadeOut':    
                //start fade in
	            this.slideshowImage.setProperty('src', item.imageURL);
	            this.slideshowAnchor.setProperty('href', item.linkURL || '');
	            this.slideshowAnchor.setProperty('title', item.title || this.item.linkURL || '');
                this.imageState = 'FadeIn';
                var myFx = new Fx.Style(this.slideshowImage, 'opacity', { duration: this.options.fadeDuration });
                myFx.start(0.2,1);
	            //setup the timer
	            this.timer = this.ShowItem.delay(this.options.fadeDuration, this);
	            break;
            case 'FadeIn':    
                //setup idle timer
                this.imageState = 'Idle';
                this.slideshowImage.setOpacity(1); //just to be sure
                this.currentIndex++;
                if (this.currentIndex >= this.items.length) { this.currentIndex = 0; }
	            //setup the timer
	            this.timer = this.ShowItem.delay(this.options.delay, this);
	            break;        
        }
	},
	
	ImageState: function () {
	    /*  Possible States
	        FadeIn = Process of fading the new image in
	        FadeOut = Process of fading the existing image out
	        Idle = Waiting for next image	    
	    */
	    if (! $defined(this.imageState)) {
	        this.imageState = 'FadeOut';
	    }
        return this.imageState;	    
	}
};

window.addEvent('domready', SlideShow.init.bind(SlideShow));