var SlideAndHide = new Class({
	Implements: [Options, Events],
	options: {
		width: 640, // width for the whole Slideshow 
		autostart: 1, // autostart of Slideshow
		delay: 2000, // intervall for autoplay
		startIndex: 0, // image to start with in Slideshow
		slides: {
			container: "img_container", // the container for the slideshow 
			images: [],	// the images Array (only src)
			backgroundColor: '#000000', // backgroundColor for fading ..
			height: 360, // height for the Slideshow 
			buttons: {
				playPause: null,
				next: null,
				prev: null
			},
			preloadAll: true, // preload all images or preload one after the other
			tween: { // the animation tween
				fromVal: 1,
				toVal: 0,
				property: "opacity",
				options: {
					duration: 1000,
					link: "ignore",
					transition: "sine:in:out"
				}
			}
		}
	},
	onCreateSlides: $empty, // onCreate Event
	onSlideBefore: $empty, // fired before sliding
	onSlideAfter: $empty, // fired after sliding
	onUpdateSlides: $empty, // fired when the gallery is updatet
	initialize: function(options) {
		this.setOptions(options);
		this.addSlides(this.options.slides.images);
		if(this.slides.length) {
			if(this.slides.length==1) {
				this.options.autostart = 0;
			}
			this.container = $(this.options.slides.container);
			this.buttonNext = $(this.options.slides.buttons.next);
			this.buttonPrev = $(this.options.slides.buttons.prev);
			this.buttonPlayPause = $(this.options.slides.buttons.playPause);
			this.createHtmlStructure();
			this.fireEvent("onCreateSlides", [this.slides, this.options.startIndex]);
			this.preloadAndInit();
		}
	},
	preloadAndInit: function() {
		this.tweening = 1;
		if(this.options.slides.preloadAll) {
			// preload all images
			this.loading.setStyle("display","block");
			this.slides = new Asset.images(this.slides, {
				"onComplete": function() {
					this.loading.setStyle("display","none");
					this.initSlideShow();
				}.bind(this)
			});
		}
		else {
			// preload first image
			this.loading.setStyle("display","block");
			this.slides[this.options.startIndex] = new Asset.image(this.slides[this.options.startIndex], {
				"onload": function() {
					this.loading.setStyle("display","none");
					this.initSlideShow();
				}.bind(this)
			});
		}
	},
	initSlideShow: function() {
		this.frontEl.setStyle("background-image","url("+this.slides[this.options.startIndex].getProperty("src")+")");
		this.curImg = this.options.startIndex;
		this.tweening = 0;
		this.frontEl.set('tween',this.options.slides.tween.options);
		if(this.options.autostart) {
			this.autoplay();
		}
		else {
			this.autostop();
		}
	},
	slides: [],
	addSlides: function(slides) {
		slides.each(function(item,index) {
			this.slides.include(item);
		}.bind(this));
	},
	next: function() {
		var next = this.curImg + 1;
		if(next >= this.slides.length) {
			next = 0;
		}
		this.showSlide(next);
	},
	prev: function() {
		var prev = this.curImg - 1;
		if(prev<0) {
			prev = this.slides.length - 1;
		}
		this.showSlide(prev);
	},
	showSlide: function(index) {
		$clear(this.timer);
		this.tweening = 1;
		var slideIt = function() {
			this.backEl.setStyle('background-image',"url("+this.slides[index].getProperty('src')+")");
			this.frontEl.setStyle(this.options.slides.tween.property,this.options.slides.tween.fromVal);
			this.fireEvent('onSlideBefore', [this.slides, index]);
			this.frontEl.get('tween').start(this.options.slides.tween.property,this.options.slides.tween.toVal).chain(function() {
				this.frontEl.setStyle('background-image',"url("+this.slides[index].getProperty('src')+")");
				this.curImg = index;
				this.tweening = 0;
				this.fireEvent('onSlideAfter', [this.slides, index]);
				if(this.playAutomatic) {
					this.autoplay();
				}
	        }.bind(this,index));
		}.bind(this,index);
		// asset of image ?
		if($type(this.slides[index])!='element') {
			// preload the image
			this.loading.setStyle('display','block');
			this.slides[index] = new Asset.image(this.slides[index],{
				'onload': function() {
					this.loading.setStyle('display','none');
					slideIt.attempt(this);
				}.bind(this,slideIt)
			});
		}
		else {
			slideIt.attempt(this);
		}
	},
	createHtmlStructure: function() {
		this.backEl = new Element('div', {
			'styles': {
				'position': 'absolute',
				'z-index': '1',
				'width': this.options.width,
				'height': this.options.slides.height,
				'background-repeat': 'no-repeat',
				'background-position': 'center center',
				'background-color': this.options.slides.backgroundColor
			}
		});
		this.frontEl = new Element('div', {
			'styles': {
				'position': 'absolute',
				'z-index': '2',
           		'width': this.options.width,
           		'height': this.options.slides.height,
                'background-repeat': 'no-repeat',
                'background-position': 'center center',
                'background-color': this.options.slides.backgroundColor
			}
		});
		this.loading = new Element('div',{
			'styles': {
				'width': this.options.width,
				'height': this.options.slides.height,
				'position': 'absolute',
				'z-index': '3',
				'background': 'transparent url(img/ajax.gif) no-repeat center center',
				'display': 'none'
			}
		});
		this.container.empty();
		this.container.setStyle("height",this.options.slides.height); // inner things are all position: absolute ..
		this.container.adopt(this.backEl,this.frontEl,this.loading);
        if(this.buttonNext) {
            this.buttonNext.addEvent('click', function() {
                if(!this.tweening) {
                    this.autostop();
                    this.next();
                }
            }.bind(this));
        }
        if(this.buttonPrev) {
            this.buttonPrev.addEvent('click', function() {
                if(!this.tweening) {
                    this.autostop();
                    this.prev();
                }
            }.bind(this));
        }
		if(this.buttonPlayPause) {
			if(!this.options.autostart) {
				this.buttonPlayPause.addClass("buttonPlay"); // show play class if paused
			}
			else {
				this.buttonPlayPause.addClass("buttonPause");
			}
			this.buttonPlayPause.addEvent('click', function() {
				if(this.buttonPlayPause.hasClass("buttonPlay")) {
					// play slide --> add pause class
					this.autoplay();
				}
				else {
					this.autostop();
				}
			}.bind(this));
		}
    },
	autoplay: function() {
		// play next Img with delay, change play / pause Button if neccessary
		this.playAutomatic = 1;
		if(this.buttonPlayPause) {
			if(!this.buttonPlayPause.hasClass("buttonPause")) {
                this.buttonPlayPause.removeClass("buttonPlay");
            	this.buttonPlayPause.addClass("buttonPause");
			}
		}
		this.timer = this.next.delay(this.options.delay,this);
	},
	autostop: function() {
		// stop autoplay, change play / pause Button if neccesary
		$clear(this.timer);
		this.playAutomatic = 0;
		if(this.buttonPlayPause) {
			if(!this.buttonPlayPause.hasClass("buttonPlay")) {
 	           this.buttonPlayPause.removeClass("buttonPause");
               this.buttonPlayPause.addClass("buttonPlay");
			}	
		}
	},
	update: function(images,startIndex) {
		this.options.startIndex = startIndex;
		$clear(this.timer);
		this.frontEl.get("tween").cancel();
		var initVals = {
			"background-image": "none"
		}
		this.backEl.setStyles(initVals);
		this.frontEl.setStyles(initVals);
		this.frontEl.setStyle(this.options.slides.tween.property,this.options.slides.tween.fromVal); 
		this.slides.empty();
		this.addSlides(images);
		if(this.slides.length) {
			if(this.slides.length==1) {
				this.options.autostart = 0;
			}
			this.fireEvent("onUpdateSlides", [this.slides, this.options.startIndex]);
			this.preloadAndInit();
		}
	}
});