
function imageslider(layout) {
	// Div Container
	this.container = null;
	this.imagelayer = null;
	this.width = 450;

	this.currentindex = -1;
	this.lastindex = -1;

	// Images
	this.images = new Array();
	this.imagewidth = 75;
	this.imageheight = 75;
	this.imageclass = null;
	this.imageclassselected = null;

	// Event
	this.onChange = function (laImage, lnIndex) {};
	this.onSlide = function (laImage, lnIndex) {};
	this.timeout = false;

	// Slider
	this.slider = false;
	/*
	this.sliderimage = 'codebase/layout/images/imagegallery/handle.horizontal.png';
	this.sliderimagehover = 'codebase/layout/images/imagegallery/handle.horizontal.hover.png';
	
	Layout Auswahl (Wolf)
	*/
	if(layout == 'Dark') {
	this.sliderimage = 'codebase/layout/images/imagegallery/handle.horizontal.dark.png';
	}
	else
	{
	this.sliderimage = 'codebase/layout/images/imagegallery/handle.horizontal.png';
	}
	
	// Draggable Images
	this.drag = false;
}


imageslider.prototype.init = function(container) {
	if (this.width > (this.images.length * this.imagewidth)) this.width = (this.images.length * this.imagewidth);

	this.container = $(container);
	this.container.style.display = 'block';
	this.container.style.overflow = 'hidden';
	this.container.style.position = 'relative';
	this.container.style.zIndex = '1';
	this.container.style.width = this.width + 'px';
	this.container.style.height = this.imageheight + 'px';

	this.imagelayer = document.createElement('div');
	this.imagelayer.id = 'imagelayer';
	this.imagelayer.style.display = 'block';
	this.imagelayer.style.position = 'relative';
	this.imagelayer.style.width = (this.images.length * this.imagewidth) + 'px';
	this.imagelayer.style.height = this.imageheight + 'px';
	this.imagelayer.style.left = '0px';
	// für events:
	this.imagelayer.imageslider = this;

	this.container.appendChild(this.imagelayer);

	// Bilder einfügen
	var imagecount = Math.ceil(this.width / this.imagewidth);
	if (imagecount > this.images.length) imagecount = this.images.length;
	for (var i = 0; i < imagecount; i++) {
		var loImg = document.createElement('img');
		loImg.id = 'image' + i;
		loImg.className = this.imageclass;
		this.setImage(loImg, i);

		loImg.width = this.imagewidth;
		loImg.height = this.imageheight;

		loImg.style.position = 'absolute';
		loImg.style.left = (i*this.imagewidth) + 'px';

		this.imagelayer.appendChild(loImg);
	}
	// draggable
	//this.drag = new Draggable('imagelayer',{constraint:'horizontal', starteffect:null, endeffect:null, change:function() { $('imagelayer').imageslider.checkDraggable(); } });

	// slider
	if (imageslider.prototype.init.arguments[1]) this.addSlider(imageslider.prototype.init.arguments[1]);
	else if (!this.slider) alert('FATAL ERROR: Slider Div not defined!');

	// Events:
	document.onkeypress = function(e) { $('imagelayer').imageslider.keyPress(e); };
	this.container.onmousewheel = function(e) { $('imagelayer').imageslider.wheel(e); };
	if (window.addEventListener && navigator.product && navigator.product == "Gecko") this.container.addEventListener( "DOMMouseScroll", function(e) { $('imagelayer').imageslider.wheel(e); }, false );
}

imageslider.prototype.addSlider = function(container) {
	var loSliderTrack = $(container);
	loSliderTrack.style.display = 'block';
	loSliderTrack.style.width = this.width + 'px';

	var loSliderHandle = document.createElement('div');
	loSliderHandle.id = 'slider-handle';
	loSliderHandle.style.zIndex = '2';
	loSliderHandle.style.width = '10px';
	loSliderHandle.style.height = '20px';
	loSliderHandle.style.top = '3px'; //5px
	
	/* Width Slider (Wolf) */
	document.getElementById('SliderPosition').style.width = loSlider.width + 6 + 'px';
	document.getElementById('ImageDetails').style.width = loSlider.width + 6 + 'px';

		var loSliderImage = document.createElement('img');
		loSliderImage.id = 'slider-handleimage';
		loSliderImage.src = this.sliderimage;

		/*
		loSliderImage.onmouseover = function() {
			this.src = $('imagelayer').imageslider.sliderimagehover;
		}
		loSliderImage.onmouseout = function() {
			this.src = $('imagelayer').imageslider.sliderimage;
		} */
		loSliderHandle.appendChild(loSliderImage);

	loSliderTrack.appendChild(loSliderHandle);

	this.slider = new Control.Slider('slider-handle',container, {minimum:1, maximum:this.width, handleImage:'slider-handleimage'});
	this.slider.options.onChange = function(value) {
		$('imagelayer').imageslider.moveContainer(value);
		if ($('imagelayer').imageslider.timeout != false) window.clearTimeout($('imagelayer').imageslider.timeout);
		$('imagelayer').imageslider.timeout = window.setTimeout("$('imagelayer').imageslider.raiseEvent(1)", 1000);
		$('imagelayer').imageslider.raiseEvent();
	};

	this.slider.options.onSlide = function(value) {
		$('imagelayer').imageslider.moveContainer(value);
	};
}

imageslider.prototype.setIndex = function(lnIndex) {
	if (lnIndex < 0 || lnIndex >= this.images.length) return false;
	this.currentindex = lnIndex;

	var lnLayerWidth = parseInt(this.imagelayer.style.width);
	var lnSliderValue = (this.currentindex * this.imagewidth) / lnLayerWidth + (this.imagewidth / 2) / lnLayerWidth;
	this.slider.setValue(lnSliderValue);
}

imageslider.prototype.next = function() {
	if (imageslider.prototype.next.arguments[0]) this.slidenext();
	else this.setIndex(this.currentindex+1);
}

imageslider.prototype.prev = function() {
	this.setIndex(this.currentindex-1);
}

imageslider.prototype.slidenext = function() {
	var lnLeft = -parseInt(this.imagelayer.style.left);
	var lnMove = lnLeft + 75 + (lnLeft - Math.floor(lnLeft / this.imagewidth) * this.imagewidth);

	new Effect.Move('imagelayer', {
		y: 0,
		x:-lnMove,
		mode: 'relative',
		afterUpdate:function() {
			$('imagelayer').imageslider.checkDraggable();
		}
	} );
}

// Event Functions
imageslider.prototype.keyPress = function(e) {
	e = (e)?e:((event)?event:null);
	if(e) {
		var charCode=(e.charCode)?e.charCode:e.keyCode;
		switch(charCode){
			case 37:
				this.setIndex(this.currentindex-1);
				break;
			case 39:
				this.setIndex(this.currentindex+1);
				break;
		}
	}
}

imageslider.prototype.wheel = function(e) {
	e = (e)?e:((event)?event:null);
	var wheelDelta = e.wheelDelta ? e.wheelDelta : e.detail*-1;
	if (wheelDelta > 0) this.setIndex(this.currentindex-1);
	else this.setIndex(this.currentindex+1);
	e.returnValue = false;
	if (e.preventDefault) e.preventDefault();
	return false;
}

// bei Klick auf Thumbnail
imageslider.prototype.imgKlick = function(e) {
	//console.debug(e);
	this.setIndex(e);
}



// Helper Functions
imageslider.prototype.checkDraggable = function() {
	var lnLeft = parseInt(this.imagelayer.style.left);
	var lnWidth = parseInt(this.imagelayer.style.width) - this.width;

	if (lnLeft > 0) lnLeft = 0;
	if (-lnLeft > lnWidth) lnLeft = -1 * lnWidth;
	this.imagelayer.style.left = lnLeft + 'px';

	var lnSliderValue = -lnLeft / lnWidth;
	this.slider.setValue(lnSliderValue);

	this.checkWrap();
}

imageslider.prototype.moveContainer = function(lnSliderValue) {
	var lnWidth = parseInt(this.imagelayer.style.width) - this.width;
	var lnLeft = -lnWidth * lnSliderValue;

	this.imagelayer.style.left = Math.floor(lnLeft) + 'px';

	this.checkWrap();

	this.currentindex = Math.floor( (parseInt(this.imagelayer.style.width) * lnSliderValue) / this.imagewidth);
}

imageslider.prototype.updateCurrentImage = function() {
	for (var i = 0; i < this.imagelayer.childNodes.length; i++) {
		var lnLeft = parseInt(this.imagelayer.childNodes[i].style.left);
		if (lnLeft == this.currentindex * this.imagewidth) this.imagelayer.childNodes[i].className = this.imageclassselected;
		else this.imagelayer.childNodes[i].className = this.imageclass;
	}
}

imageslider.prototype.raiseEvent = function() {
	var laImage = this.images[this.currentindex];

	if (imageslider.prototype.raiseEvent.arguments[0]) this.onChange(laImage, this.currentindex);
	else {
		if (this.lastindex == this.currentindex) return;
		this.lastindex = this.currentindex;
		this.onSlide(laImage, this.currentindex);
	}
}

imageslider.prototype.checkWrap = function() {
	var lnLeft = parseInt(this.imagelayer.style.left);
	var loImgFirst = this.imagelayer.firstChild;
	var loImgLast = this.imagelayer.lastChild;
	var lnLeftFirst = parseInt(loImgFirst.style.left);
	var lnLeftLast = parseInt(loImgLast.style.left);
	var lnImgID = 0;

	//$('debug').innerHTML = (-lnLeft) + ' ' + refLast;

	while (-1*(lnLeft+this.imagewidth) > lnLeftFirst) {
		this.imagelayer.removeChild(loImgFirst);
		loImgFirst.style.left = (lnLeftLast + this.imagewidth) + 'px';
		lnImgID = (lnLeftLast+this.imagewidth) / this.imagewidth;
		//loImgFirst.src = this.images[lnImgID][0];
		this.setImage(loImgFirst, lnImgID);

		this.imagelayer.appendChild(loImgFirst);

		loImgFirst = this.imagelayer.firstChild;
		loImgLast = this.imagelayer.lastChild;
		lnLeftFirst = parseInt(loImgFirst.style.left);
		lnLeftLast = parseInt(loImgLast.style.left);
	}
	while (-lnLeft < lnLeftLast-this.width) {
		this.imagelayer.removeChild(loImgLast);
		loImgLast.style.left = (lnLeftFirst - this.imagewidth) + 'px';
		lnImgID = (lnLeftFirst-this.imagewidth) / this.imagewidth;
		//loImgLast.src = this.images[lnImgID][0];
		this.setImage(loImgLast, lnImgID);

		this.imagelayer.insertBefore(loImgLast, loImgFirst);

		loImgFirst = this.imagelayer.firstChild;
		loImgLast = this.imagelayer.lastChild;
		lnLeftFirst = parseInt(loImgFirst.style.left);
		lnLeftLast = parseInt(loImgLast.style.left);
	}

	this.updateCurrentImage();
}

imageslider.prototype.setImage = function(loImg, lnIndex) {
	loImg.src = this.images[lnIndex][0];

	// Hans (hans@kuse.de): Klick auf Thumbnail in Slider, dann Bildwechsel per Ajax
   	loImg.onclick = function(e){
		$('imagelayer').imageslider.imgKlick(lnIndex);
	};

	var laTitle = this.images[lnIndex][0].match(/\/(\w+)\./);
	if (laTitle && laTitle[1]) loImg.title = laTitle[1];
}
