function keyVisualScroller(name) {
	
	this.gesamtBreite = 0;
	this.KV;
	this.KVS;
	this.KVSleft;
	this.KVbreite;
	this.posArray = new Array();
	this.aktFixPos;
	this.step;
	this.slowStep = 10;
	this.slowStepRange = 200;
	this.stepTeiler = 30;
	this.timeout = 1;
	this.theTimeout;
	
	this.appendDiv = new Array();
	//this.DEBUG;
	
	this.init = function() {
		//this.DEBUG = document.getElementById("DEBUG");
		this.hideButtons();
		this.KV 		= document.getElementById("KeyVisualSlider");
		this.KVbreite = parseInt(this.getStyle(this.KV, "width"));
		
		this.KVS		= document.getElementById("KeyVisualSpalte");
		this.KVSbreite = this.holeBreiteIMGgesamt(this.KVS);
		// weil left im style nicht gesetzt ist !!
		this.setStyle("KeyVisualSpalte", "left", "0px");
		this.KVSleft = parseInt(this.getStyle(this.KVS, "left"));
		
		this.step = Math.floor(this.KVbreite / this.stepTeiler);	
		
		// wenn verschiebbar
		if((this.KVSbreite > this.KVbreite) && !(this.KVSbreite % this.KVbreite)){					
			// haenge die ersten IMG an
			var lastDiv = document.getElementById("lastPStandard");
			var parentDiv = lastDiv.parentNode;
			for(var i=this.appendDiv.length-1; i >= 0; i--){
				parentDiv.insertBefore(this.appendDiv[i],lastDiv);
				lastDiv = this.appendDiv[i];			
			}				
			// korrektur der breite
			this.setStyle("KeyVisualSpalte", "width", (this.KVbreite+this.KVSbreite)+"px");
			// arrray mit positionen bauen
			this.posArray.push(0);
			var end = this.KVSleft + this.KVbreite;
			while(end <= this.KVSbreite){
				this.posArray.push(end);
				end = end + this.KVbreite;
			}
			this.displayButtons();
		}
		
		this.aktFixPos = 0;
	}
	
	
	this.right = function() {
		var dir = -1;
		this.aktFixPos++;
		// ggf. an den anfang spulen
		if(this.aktFixPos >= this.posArray.length){
			this.aktFixPos = 1;
			this.setStyle("KeyVisualSpalte", "left", this.posArray[0]+"px");
			
		}
		var nextPos = this.posArray[this.aktFixPos] * dir;
	
		this.animate(nextPos,dir);
	}
	
	
	this.left = function() {
		var dir = 1;
		this.aktFixPos--;
		// ggf. ans ende spulen
		if(this.aktFixPos < 0){
			this.aktFixPos = this.posArray.length - 2;		
			this.setStyle("KeyVisualSpalte", "left", this.posArray[this.aktFixPos +1] * -1+"px");
			
		}
		var nextPos = this.posArray[this.aktFixPos] * dir;
		
		this.animate(nextPos,dir);
	}
	
	
	this.animate = function(nextPos,dir){
		if(this.theTimeout !== undefined ){
			clearTimeout(this.theTimeout);
		}
		
		var currPos = parseInt(this.getStyle(this.KVS, "left"));
		var restPos = Math.abs(this.posArray[this.aktFixPos] - Math.abs(currPos));
		
		// daempfung der steps
		if(restPos <= this.slowStepRange){
			if(this.step > 1){
				this.step = (restPos / this.slowStep);
			}else{
				this.step = 1;
			}			
		}
		
		var myStep = this.step * dir;
			
		// abbruch, wenn endposition erreicht
		//if(Math.abs(Math.abs(currPos) - posArray[aktFixPos]) <= Math.floor(KVbreite / stepTeiler)){
		if(Math.abs(Math.abs(currPos) - this.posArray[this.aktFixPos]) <= 1){
			this.step = Math.floor(this.KVbreite / this.stepTeiler);
			this.displayButtons();
			this.setStyle("KeyVisualSpalte", "left", this.posArray[this.aktFixPos] * -1+"px");
			return;
		}
		this.hideButtons();
		nextPos = currPos + myStep;
		
		this.setStyle("KeyVisualSpalte", "left", nextPos+"px");
		this.theTimeout = setTimeout(name+".animate("+nextPos+","+dir+")", this.timeout);
		}
	
	
	this.displayButtons = function(){
		document.getElementById("MoveLeftButton").style.display = "block";
		document.getElementById("MoveRightButton").style.display = "block";
	}
	
	
	this.hideButtons = function(){
		document.getElementById("MoveLeftButton").style.display = "none";
		document.getElementById("MoveRightButton").style.display = "none";
	}
	
	
	this.getStyle = function(el, style) {
		if(!document.getElementById) return;
		var value = el.style[this.toCamelCase(style)];
		if(!value)
			if(document.defaultView)
				value = document.defaultView.
					getComputedStyle(el, "").getPropertyValue(style);
			else if(el.currentStyle)
				value = el.currentStyle[this.toCamelCase(style)];
		
		return value;
	}
	
	
	this.setStyle = function(objId, style, value) {
		document.getElementById(objId).style[style] = value;
	}
	
	
	this.toCamelCase = function( sInput ) {
		var oStringList = sInput.split('-');
		if(oStringList.length == 1)   
			return oStringList[0];
		var ret = sInput.indexOf("-") == 0 ?
			oStringList[0].charAt(0).toUpperCase() + oStringList[0].substring(1) : oStringList[0];
		for(var i = 1, len = oStringList.length; i < len; i++){
			var s = oStringList[i];
			ret += s.charAt(0).toUpperCase() + s.substring(1)
		}
		return ret;
	}
	
	
	this.holeBreiteIMGgesamt = function(knoten){
		//ausgabe += knoten.nodeName + "<br>";
		if(knoten.nodeName == "IMG"){
			// die ersten imgs in appendDiv aufnehmen
			if(this.gesamtBreite < this.KVbreite){
				var elem = /elem.+/;	// regex
				var tmpKnoten = knoten.parentNode;
				var tmpKnotenId = tmpKnoten.getAttribute("id");
				//hole den naechst hoeheren node mit id "elem*"
				while((tmpKnotenId == undefined || tmpKnotenId == "") && elem.test(tmpKnotenId) == false){
					tmpKnoten = tmpKnoten.parentNode;
					tmpKnotenId = tmpKnoten.getAttribute("id");
				}
				//var tmpKnoten = knoten.parentNode;
				this.appendDiv.push(tmpKnoten.cloneNode(true));			
			}
			this.gesamtBreite += parseInt(this.getStyle(knoten,"width"));
		}
		
		if (knoten.hasChildNodes()){
			for (var i = 0; i < knoten.childNodes.length; i++) {
				this.holeBreiteIMGgesamt(knoten.childNodes[i]);
			}
		}
		return this.gesamtBreite;
	}
	
}