/**
 * imageRotate
 *
 * @param	object	div to render in
 */

var ImageRotate = function (viewport) {
	var that = this;
	this.viewport = viewport;
	this.path = '/';

	this.preloadInfoBox = this.viewport.appendChild(document.createElement('div'));
	this.preloadInfoBox.style.position = 'absolute';
	this.preloadInfoBox.style.visibility = 'hidden';
	this.preloadInfoBox.style.zIndex = 1000;
	this.preloadInfoBox.style.bottom = '10px';
	this.preloadInfoBox.style.left = '10px';
	this.preloadInfoBox.style.color = 'white';
	this.preloadInfoBox.style.fontWeight = 'bold';
	this.preloadInfoBox.style.fontSize = '10px';
	this.preloadInfoBox.appendChild(document.createTextNode('Preloading: '));
	this.preloadInfoBox.appendChild(document.createTextNode('0'));

	/**
	 * get back into the Objects Context
	 */
	this.storeImages = function (response) {
		var images = eval(response);
		that.onloadImages(images);
	}

	this.startAnimation = function () {
		this.animate();
	}
	this.reverseButton = document.getElementById('imagerotateReverse');
	this.forwardButton = document.getElementById('imagerotateForward');
	this.stopButton = document.getElementById('imagerotateStop');
	this.reverseButton.onmousedown = function () {
		that.dir = 'rev';
		that.delay = 0;
		if (that.stop == true) {
			that.stop = false;
			that.animate();
			this.animate = true;
		}
	}
	this.forwardButton.onmousedown = function () {
		that.dir = 'fow';
		that.delay = 0;
		if (that.stop == true) {
			that.stop = false;
			that.animate();
			this.animate = true;
		}
	}

	this.forwardButton.onmouseup = this.reverseButton.onmouseup = function () {
		that.delay = that.defaultDelay;
		if (this.animate == true) {
			this.animate = false;
			that.stop = true;
		}
		if (that.stop == true) {
			that.stopAnimation();
		}
	}

	this.stopButton.onclick = function () {
		if (that.stop == false) {
			that.stop = true;
			this.firstChild.src = 'images/imageFlowButtons/play.gif';
			if (that.delayTimeout) {
				window.clearTimeout(that.delayTimeout);
				that.delayTimeout = undefined;
			}
			that.stopAnimation();
		} else {
			that.stop = false;
			that.animate();
			this.firstChild.src = 'images/imageFlowButtons/pause.gif';
		}
	}
}
ImageRotate.prototype.aImages = new Array();
ImageRotate.prototype.imagePositions = new Array();
ImageRotate.prototype.oRequest = new HttpRequest();
ImageRotate.prototype.animationSteps = 5;
ImageRotate.prototype.numPics = 9;
ImageRotate.prototype.showPositions = new Array();
ImageRotate.prototype.showPics = new Array();
ImageRotate.prototype.minOpacity = 25;
ImageRotate.prototype.preloadImage = new Image();
ImageRotate.prototype.dir = 'fow';
ImageRotate.prototype.defaultDelay = 1500;
ImageRotate.prototype.delay = 1500;
ImageRotate.prototype.stop = false;

/**
 * create Namespace onload
 */
eventHandler.addLoadEvent(function () {
	if (document.getElementById('imageRotateViewport')) {
		imageRotate = new ImageRotate(document.getElementById('imageRotateViewport'));
		imageRotate.load();
	}
})

/**
 * Request images
 */
ImageRotate.prototype.load = function () {
	var that = this;
	this.oRequest.init(that.storeImages);
	this.oRequest.load('imageRotate.html');
}

/**
 * copy images into the array
 */
ImageRotate.prototype.onloadImages = function (images) {
	var highest = 0;
	for (var i=0; i<images.length; i++) {
		this.aImages[i] = new Object();
		this.aImages[i].src = this.path+images[i].src;
		this.aImages[i].width = images[i].width;
		this.aImages[i].maxWidth = images[i].width;
		this.aImages[i].height = images[i].height;
		this.aImages[i].src = this.path+images[i].src;
		this.aImages[i].title = images[i].name;
		this.aImages[i].alt = images[i].name;
		this.aImages[i].link = images[i].link;
		highest = images[i].height > highest ? images[i].height : highest;
	}
	this.viewport.style.height = highest+20+'px';
	//this.viewport.style.backgroundPosition = -500-(highest+20)/2+'px 0px';
	this.initAnimation();

	this.preload();
}

ImageRotate.prototype.preload = function (n) {
	n = !n ? 0 : n;
	var date = new Date();
	this.preloadInfoBox.firstChild.nextSibling.data = this.aImages.length-n-1;
	this.preloadInfoBox.style.visibility = 'visible';
	var that = this;
	this.preloadImage.src = this.aImages[n].src+'?'+date.getMinutes()+'-'+date.getMilliseconds();
	this.preloadImage.onload = function () {
		if (n+1<that.aImages.length) {
			n++;
			that.preload(n);
		} else {
			window.setTimeout( function () {
				var opacityLevel = 100;
				var fadeOutPreloadInfo = window.setInterval ( function () {
					if (navigator.appVersion.indexOf('MSIE')>-1) {
						that.preloadInfoBox.style.filter = 'Alpha(opacity='+opacityLevel+')';
					} else {
						that.preloadInfoBox.style.opacity = opacityLevel/100;
					}
					opacityLevel-=10;
					if (opacityLevel < 0) {
						window.clearInterval(fadeOutPreloadInfo);
						that.viewport.removeChild(that.preloadInfoBox);
					}
				}, 40);
			}, 1000);
		}
	}
}

/**
 * init Animation
 */
ImageRotate.prototype.initAnimation = function () {
	var steps = this.animationSteps*this.numPics-this.animationSteps+1;
	var that = this;
	var n=0;
	for (var i=0;i<this.numPics;i++) {
		this.showPositions.push(n);
		this.showPics.push(this.numPics-i);
		n+=this.animationSteps;
	}

	for (var i=0;i<steps;i++) {
		this.imagePositions[i] = {
			position : i,
			pic : new Image(),
			getPosLeft : function () {
				var r = (that.viewport.clientWidth)/2,
					posLeft,
				    pi=Math.PI,
					degrees,
					pos = {};
				degrees = (this.position+1)*(180/(steps));
				posLeft=Math.round(r-Math.cos((1/(180/degrees))*pi)*r);
				return posLeft;
				
				
			},
			getWidth : function () {
				var r, delta,
					cosAlpha, // Cosinus bezogen auf 1
					sinAlpha,
					h1, sa, h2, ak;
				r=that.viewport.clientWidth/2;
				cosAlpha = 1-Math.abs(this.posLeft/r);
				sinAlpha = Math.sqrt(1-Math.pow(cosAlpha, 2));
				delta =  Math.round(r-sinAlpha*r);
				h1 = Math.sqrt(                               // Hypothenuse
						Math.pow((this.maxWidth-this.maxWidth/8)/2, 2)  // Ankathete
					   +Math.pow(r, 2)            // Gegenkathete
					);
				sa = r / h1;                // sin(a)
				h2 = delta / sa;                     // Hypothenuse
				ak = Math.sqrt(Math.pow(h2, 2) - Math.pow(delta, 2)); // Ankathete
				return Math.round(this.maxWidth-ak*2);
			},
			posLeft : null,
			attachPic : function (image) {
				this.pic.src = image.src;
				this.pic.style.visibility = 'hidden';
				this.pic.style.display = 'block';
				this.pic.style.zIndex = this.position;
				this.maxWidth = image.maxWidth;
				this.getWidth();
				this.pic.width = this.getWidth();
				this.pic.height = parseInt(this.pic.width*image.height/image.width);
				if (document.all) {
					this.pic.height = parseInt(image.height*this.pic.width/image.width);
				}
				this.pic.style.left = Math.floor(this.posLeft-this.pic.clientWidth/2)+'px';
				var fadeInSteps = (steps-1)/2;
				var opacitySteps = 100/fadeInSteps;

				if (this.position < Math.floor(steps/2)) {
					this.pic.style.top = parseInt((that.viewport.clientHeight/2-this.pic.clientHeight/2)/steps*(this.position+1))+'px';
					var opac = this.position*opacitySteps;
					this.pic.title = '';
				} else if (this.position == Math.floor(steps/2)) {
					this.pic.style.top = parseInt((that.viewport.clientHeight/2-this.pic.clientHeight/2)/steps*(this.position+1))+'px';
					this.pic.style.cursor = 'pointer';
					this.pic.title = image.title;
					this.pic.style.background = 'white';
					this.pic.style.border = '2px solid black';
					this.pic.style.padding = '1px';
					this.pic.onclick = function () {
						clearTimeout(that.timeout);
						window.location.href=image.link;
					}
					this.pic.onmouseover = function () {
						if (typeof that.delayTimeout != 'undefined') {
							window.clearTimeout(that.delayTimeout);
							window.clearTimeout(that.timeout);
						}
					}
					this.pic.onmouseout = function () {
						if (that.stop == false) {
							that.timeout = window.setTimeout( function () {
								that.animate();
							}, 40);
						}
					}
				} else {
					this.pic.style.top = parseInt((that.viewport.clientHeight/2-this.pic.clientHeight/2)/steps*(steps-this.position))+'px';
					this.pic.style.zIndex = steps-1-this.position;
					var opac = (steps-this.position)*opacitySteps;
					this.pic.title = '';
				}
				opac = opac < that.minOpacity ? that.minOpacity : opac;
				navigator.appVersion.indexOf('MSIE') < 0 ? this.pic.style.opacity = opac/100 : this.pic.style.filter = 'Alpha(opacity='+opac+')';
			},
			show : function (bool) {
				this.pic.style.visibility = bool==true ? 'visible' : 'hidden';
				//this.pic.style.visibility = bool==true ? 'visible' : 'visible';
			}
		}
		this.imagePositions[i].posLeft = this.imagePositions[i].getPosLeft();
		this.viewport.appendChild(this.imagePositions[i].pic);
	}
	for (var i=0;i<this.showPositions.length;i++) {
		this.imagePositions[this.showPositions[i]].attachPic(this.aImages[i]);
		this.imagePositions[this.showPositions[i]].show(true);
	}
	this.animate(this);
}

ImageRotate.prototype.animate = function () {
	var that = this;
	// hide all Images
	// increment showPositions
	if (this.dir == 'fow') {
		for (var i=0;i<this.showPositions.length;i++) {
			if (this.showPositions[i]>=0 && typeof this.imagePositions[this.showPositions[i]] == 'object')
			this.imagePositions[this.showPositions[i]].show(false);
			this.showPositions[i] = this.showPositions[i]%this.animationSteps!=0 ? this.showPositions[i]+1 : i*this.animationSteps-(this.animationSteps-1);
		}
		if (this.showPositions[0]==-(this.animationSteps-1)) {
			for (var i=0;i<this.showPics.length;i++) {
				this.showPics[i] = this.showPics[i]+1<this.aImages.length ? this.showPics[i]+1 : 0;
			}
		}
	} else {
		for (var i=0;i<this.showPositions.length;i++) {
			if (this.showPositions[i]>=0 && this.showPositions[i]<this.imagePositions.length)
			this.imagePositions[this.showPositions[i]].show(false);
			this.showPositions[i] = this.showPositions[i]%this.animationSteps!=0 ? this.showPositions[i]-1 : i*this.animationSteps+(this.animationSteps-1);
		}
		if (this.showPositions[0]==this.animationSteps-1) {
			for (var i=0;i<this.showPics.length;i++) {
				this.showPics[i] = this.showPics[i]-1>=0 ? this.showPics[i]-1 : this.aImages.length-1;
			}
		}
	}
	for (var i=this.showPositions.length;i>=0;i--) {
		if (this.showPositions[i]>=0 && this.showPositions[i]<this.imagePositions.length) {
			this.imagePositions[this.showPositions[i]].pic.src = '';
			this.imagePositions[this.showPositions[i]].attachPic(this.aImages[this.showPics[i]]);
			this.imagePositions[this.showPositions[i]].show(true);
		}
	}
	if (this.showPositions[0]==0) {
		this.stopAnimation(0);
	} else {
		this.timeout = window.setTimeout( function () {
			that.animate();
		}, 40);
	}
}

ImageRotate.prototype.stopAnimation = function (n) {
	var that = this;
	if (n==this.animationSteps) {
		if (this.stop == true) {
			return;
		}
		this.delayTimeout = window.setTimeout( function () {
			that.animate();
		}, that.delay);
		return;
	}
	this.timeout = window.setTimeout( function () {
		that.stopAnimation(n+1);
	}, 0);
}