var SlideShow = Class.create();
var SlideShowList = new Array();

SlideShow.prototype = {


	init: function( showID, inImage ) {
		/**the base attributes**/
		this.imagePath			= SlideShowList[showID]["path"];
		this.transidionSpeed	= SlideShowList[showID]["blendTime"];
		this.pauseTime			= SlideShowList[showID]["pauseTime"];
		this.isRandom			= SlideShowList[showID]["random"];
		this.imageList			= SlideShowList[showID]["list"];
		this.currentImage		= 0;
		this.preloadImgCheck 	= null;
		/**the storage for the images**/
		this.loadedImages = new Array();
		
		
		/**get the image and wait until it is load then continue*/
		this.image1 = inImage;
		
		this.preloadImgCheck = new Image()
		this.preloadImgCheck.onload = this.createImageDiv.bind(this);
		this.preloadImgCheck.src = this.image1.src;
		//this.createImageDiv();
	
		
	},
	
	createImageDiv: function( ) {
	//alert("test");
	//	this.preloadImgCheck.onload = function(){};
	
		
		/** create a div to wrapp around the image **/
		this.imageContainer = document.createElement("div");
		this.imageContainer.className = "blendImage";
		this.imageContainer.style.width = this.image1.width+"px";
		this.imageContainer.style.height = this.image1.height+"px";
		
		/** wrapp the div around the image **/
		this.image1.parentNode.insertBefore(this.imageContainer,this.image1);
		this.image1.parentNode.removeChild(this.image1);
		this.imageContainer.appendChild(this.image1);
		
		/** create a copy of the image dor beldning and add it **/
		this.image2 = this.image1.cloneNode(true);
		this.image2 = document.createElement("img");
		this.image2.src = this.image1.src;
		this.imageContainer.appendChild(this.image2);
		
		this.currentBlendImage = this.image2;
		this.image2.src = this.getNextImage();
		
		
		tmpTimer = new TimedExecution(this.callback.bind(this),this.pauseTime);
	},
	
	getNextImage : function() {
	
		this.opacity = 0;
		
		this.waitingForImage = false;
			
		if( this.isRandom && this.imageList.length>2 ) {
			tmpRandom = Math.floor(Math.random()*this.imageList.length);
			while( tmpRandom == this.currentImage ) {
				tmpRandom = Math.floor(Math.random()*this.imageList.length);
			}
			this.currentImage = tmpRandom;
		} else {
			this.currentImage = this.currentImage+1;
		}
		
		
		setOpacity(this.currentBlendImage ,0);
	
	
		if( this.currentImage >= this.imageList.length ) {
			this.currentImage = 0;
		}
		
		if( this.loadedImages[this.imageList[this.currentImage]] == null ) {
			this.loadedImages[this.imageList[this.currentImage]] = new Image();
			this.loadedImages[this.imageList[this.currentImage]].src = this.imageList[this.currentImage];
		}
		
		return this.imagePath+this.imageList[this.currentImage];
		
	},
	
	//this methode should make sure that the blending will only start if the image was loaded
	//but this seems to be buggy in firefox onload not called proper
	imageLoaded: function() {
	
		this.preloadImgCheck.onload = null;
		this.preloadImgCheck = null;
	
		this.waitingForImage = false;
		//alert("ok");
	},
	
	callback: function() {
		if( !this.waitingForImage ) {
			if( this.opacity < 100 ) {
				this.opacity = this.opacity+5;
				setOpacity(this.currentBlendImage,this.opacity);
				return this.transidionSpeed;
			} else {
			
				if( this.currentBlendImage == this.image1 ) {
					this.image2.style.zIndex = 2;
					this.image1.style.zIndex = 1;
					this.currentBlendImage = this.image2;
				} else {
					this.image2.style.zIndex = 1;
					this.image1.style.zIndex = 2;
					this.currentBlendImage = this.image1;
				}
		
				oldSrc = this.currentBlendImage.src;
				
				this.currentBlendImage.src = this.getNextImage();
				
				this.waitingForImage = true;
				this.preloadImgCheck = new Image()
				this.preloadImgCheck.onload = this.imageLoaded.bind(this);
				this.preloadImgCheck.src = this.currentBlendImage.src;
				
				
				/*if( oldSrc == this.currentBlendImage.src ) {
					this.waitingForImage = false;
					this.preloadImgCheck.onload = 
				}*/
				
				return this.pauseTime;
			}
		}
		return 0.001;
	}	
	
}

function initSlideShow() {
	
	imgList = document.getElementsByTagName("img");

	Event.stopObserving(window,"load",initSlideShow,true);
	for( i=0 ; i<imgList.length ; i++ ) {
	
		if( imgList[i].name.toLowerCase().match("slideshow_") ) {
			
			showID = imgList[i].name.substring(10);
			tmpBlender = new SlideShow(showID,imgList[i]);
		}
	}
}

function setOpacity( inObject, inValue ) {
	inObject.style.MozOpacity = inValue/100;
	inObject.style.opacity = inValue/100;
	
	if( inObject.filters != null ) {
			inObject.filters.alpha.opacity = inValue;
		/*if( inObject.filters.alpha != null ) {
		}*/
	}
}

Event.observe(window,"load",initSlideShow,true);