/*
*	die neue image box für die startseite
*	- wird mit den selben daten versorgt wie die bisherige slideshow
*	- es wird davon ausgegangen das alle bilder die selbe breite haben
*/
function imageBox(target, images)
{
	this.target = target;
	this.images = images;
	this.index = 0;
	
	this.init();
}	
imageBox.prototype.init = function()
{
	this.width = this.images[0][1];
	this.height = this.images[0][3];
	this.minLeft = (this.images.length - 1) * this.width * -1;

	this.target.style.width = this.width + 'px';
	this.target.style.height = this.height + 'px';

	this.leftArrow = document.createElement('div');
	this.leftArrow.className = 'ib_left_arrow';
	jsfAddEvent(this.leftArrow, 'mousedown', function(event){ 
		this.next(true, true);
	}.bindAsEventListener(this));
	this.target.appendChild(this.leftArrow);
	
	this.rightArrow = document.createElement('div');
	this.rightArrow.className = 'ib_right_arrow';
	jsfAddEvent(this.rightArrow, 'mousedown', function(event){ 
		this.next(false, true);
	}.bindAsEventListener(this));
	this.target.appendChild(this.rightArrow);
	
	this.display = document.createElement('div');
	this.display.style.position = 'absolute';
	this.display.style.left = '50%';
	this.display.style.top = '100%';
	this.display.style.width = '100px';
	this.display.style.marginLeft = '-50px';
	this.display.style.padding = '6px 0px 0px 0px';
	this.display.style.textAlign = 'center';
	this.display.style.fontWeight = 'bold';
	this.display.style.fontSize = '12px';
	this.display.innerHTML = '1/' + this.images.length;	
	this.display.className = 'ib_display';
	this.target.appendChild(this.display);
	
	this.outer = document.createElement('div');
	this.outer.className = 'ib_outer';
	this.outer.style.width = this.width + 'px';
	this.outer.style.height = this.height + 'px';
	this.outer.style.position = 'relative';
	this.outer.style.overflow = 'hidden';
	this.target.appendChild(this.outer);
	
	// über hover wird der automatische wechsel unterdrückt
	this.hover = false;
	jsfAddEvent(this.outer, 'mouseover', function()
	{
		this.hover = true;
	}.bindAsEventListener(this));
	jsfAddEvent(this.outer, 'mouseout', function()
	{
		this.hover = false;
	}.bindAsEventListener (this));
	
	this.a = document.createElement('div');
	this.a.style.width = (this.width * this.images.length) + 'px';
	this.a.style.position = 'absolute';
	this.a.style.left = '0px';
	this.a.style.top = '0px';
	this.outer.appendChild(this.a);
	
	this.b = document.createElement('div');
	this.b.style.width = (this.width * this.images.length) + 'px';
	this.b.style.position = 'absolute';
	this.b.style.left = '-' + (this.width * this.images.length) + 'px';
	this.b.style.top = '0px';
	this.outer.appendChild(this.b);
	
	this.createImages(this.a);
	this.createImages(this.b);
	
	this.changeTimeout = window.slow_image_box ? 10000 : 4000;
	setInterval(function(){ 
		if(!this.pause && !this.hover)
			this.next(); 
	}.bind(this), this.changeTimeout);
}

imageBox.prototype.createImages = function(target)
{
	for(var i=0; i < this.images.length; i++)
	{
		var img = document.createElement('img');
		img.src = this.images[i][0];
		
		if(this.images[i][2] && this.images[i][2] != '/')
		{
			var _link = document.createElement('a');
			_link.href = this.images[i][2];
			
			_link.appendChild(img);
			target.appendChild(_link);
		}
		else
			target.appendChild(img);
	}
}

imageBox.prototype.next = function(prev, user)
{
	if(this.timer) return;
	var t = 0;
	var start_a = this.a.offsetLeft;
	var start_b = this.b.offsetLeft;

	this.moveTimeout = window.slow_image_box ? 200 : 100;	
	this.timer = setInterval(function()
	{
		if(window.slow_image_box)
			t += 0.025;
		else
			t += 0.05;
		var r = Math.sin(Math.sin(Math.sin(t * Math.PI / 2) * Math.PI / 2) * Math.PI / 2);
		if(prev)
		{
			this.a.style.left = (start_a + r * this.width) + 'px';
			this.b.style.left = (start_b + r * this.width) + 'px';
		}
		else
		{
			this.a.style.left = (start_a - r * this.width) + 'px';
			this.b.style.left = (start_b - r * this.width) + 'px';
		}
		
		// ende
		if(r >= 0.95)
		{
			clearTimeout(this.timer);
			this.timer = 0;
			
			// finale position setzen
			if(prev)
			{
				this.a.style.left = (start_a + this.width) + 'px';
				this.b.style.left = (start_b + this.width) + 'px';
			}
			else
			{
				this.a.style.left = (start_a - this.width) + 'px';
				this.b.style.left = (start_b - this.width) + 'px';
			}
			
			// wenn nötige eine der boxen neu ausrichten
			if(prev)
			{
				// links ist nichts mehr von a -> b nach links
				if(this.a.offsetLeft < this.b.offsetLeft && this.a.offsetLeft >= 0)
					this.b.style.left = this.a.offsetLeft - this.a.offsetWidth + 'px';
		
				// links ist nichts mehr von b => a nach links
				else if(this.b.offsetLeft < this.a.offsetLeft && this.b.offsetLeft >= 0)
					this.a.style.left = this.b.offsetLeft - this.b.offsetWidth + 'px';
			}
			else
			{
				// rechts ist nichts mehr von a => b nach rechts
				if(this.a.offsetLeft > this.b.offsetLeft && this.a.offsetLeft <= this.minLeft)
					this.b.style.left = this.a.offsetLeft + this.a.offsetWidth + 'px';
		
				// rechts ist nichts mehr von b => a nach rechts
				else if(this.b.offsetLeft > this.a.offsetLeft && this.b.offsetLeft <= this.minLeft)
					this.a.style.left = this.b.offsetLeft + this.b.offsetWidth + 'px';
			}
			
			// den index am sichtbaren element bestimmen
			if(this.a.offsetLeft < this.width && this.a.offsetLeft + this.a.offsetWidth > 0)
				var visibleElm = this.a;
			else
				var visibleElm = this.b;
			var curentIndex = Math.round((visibleElm.offsetLeft * -1) / this.width) + 1;
			this.display.innerHTML = curentIndex + '/' + this.images.length;
			
			// beim user klick auf einen pfeil eine pause für den auto wechsel starten
			if(user)
			{
				this.pause = true;
				setTimeout(function(){ this.pause = false; }.bind(this), 2000);
			}
			
		}
	}.bind(this), 100);
	
}