function scrollBars(elm)
{
	try
	{
		this.elm = document.getElementById(elm);
		if (window.navigator.userAgent.indexOf('Safari') > 0) throw 'Not supportet in Safari';
		this.elm.scrollTop = 800;
		//alert(this.elm.scrollTop + "\n" + (this.elm.scrollHeight - this.elm.offsetHeight)); //debug

		this.elm.obj = this;
		this.id = "sb_" + scrollBars.num++;

		this.elmHeight = this.elm.offsetHeight; //auto
		this.elmWidth = this.elm.offsetWidth; //auto
		this.elmScrollHeight = this.elm.scrollHeight; //auto
		this.elmScrollWidth = this.elm.scrollWidth;	//auto
		
		this.newContentElmHeight;
		this.newContentElmWidth;
		this.newContentElmScrollHeight;
		this.newContentElmScrollWidth;

		this.hasVBar = (this.elm.scrollHeight > this.elm.offsetHeight) ? true : false;
		this.hasHBar = (this.elm.scrollWidth > this.elm.offsetWidth) ? true : false;

		this.vBarWidth = 12; //default, custom
		this.hBarHeight = 12; //default, custom
		this.vBarScrollLength;
		this.hBarScrollLength;

		this.vMultiplication; //auto, Multiplikator (Scrollbarhoehe, Scrollheight des Contents)
		this.hMultiplication; //auto, Multiplikator (Scrollbarbreite, Scrollwidth des Contents)

		this.wheelVSpeed = 15; // custom
		this.wheelHSpeed = 6; // custom

		this.contentMargin = 4; //default, custom
		
		this.vEventStartYPos;
		this.vBarStartYPos;
		this.vBarYPos;
		this.intContentVActualPos;
		this.floatContentVActualPos;

		this.hEventStartXPos;
		this.hBarStartXPos;
		this.hBarXPos;
		this.intContentHActualPos;
		this.floatContentHActualPos;
		
		this.init();
	}
	catch(e)
	{
		try
		{
			this.elm.style.overflow = 'auto';
		}
		catch(e)
		{

		}
	}
}
scrollBars.num = 0;
scrollBars.prototype.init = s_b_init;
scrollBars.prototype.embedElm = s_b_embedElm;
scrollBars.prototype.createVScrollbar = s_b_createVScrollbar;
scrollBars.prototype.createHScrollbar = s_b_createHScrollbar;
scrollBars.prototype.calculateVBar = s_b_calculateVBar;
scrollBars.prototype.calculateHBar = s_b_calculateHBar;

function s_b_init()
{
	if (this.hasVBar || this.hasHBar) this.embedElm();
	if (this.hasVBar)
	{
		this.createVScrollbar();
		this.calculateVBar();
	}
	if (this.hasHBar)
	{
		this.createHScrollbar();
		this.calculateHBar();
	}
}

function s_b_embedElm()
{
	this.newContentElm = document.createElement('div');
	this.newContentElm.id = this.id + '_autogenerated';
	
	//this.newContentElm.style.backgroundColor = '#dddddd'; //debug
	this.newContentElm.style.position = 'absolute'; //static
	this.newContentElm.style.overflow = 'hidden'; //static
	this.newContentElm.style.margin = '0px'; //static
	this.newContentElm.style.padding = '0px'; //static
	this.newContentElm.style.border = 'none'; //static

	this.elm.style.position = 'relative'; //static
	this.elm.style.overflow = 'hidden'; //static

	this.newContentElm.style.width = (this.hasVBar) ? (this.elmWidth - this.vBarWidth - this.contentMargin) + 'px' : '100%'
	this.newContentElm.style.height = (this.hasHBar) ? (this.elmHeight - this.hBarHeight - this.contentMargin) + 'px' : this.elmHeight + 'px'
	try //DOM-kompatible Browser mit Range-Implementatoin (document.implementation.hasFeature('Range','2.0')
	{
		this.range = document.createRange();
		this.range.selectNodeContents(this.elm);
		this.range.surroundContents(this.newContentElm);
	}
	catch(e) // IE
	{
		var cn = this.elm.childNodes.length
		for (var i=0; i < cn; i++)
		{
			this.newContentElm.appendChild(this.elm.childNodes[0]);
		}
		this.elm.appendChild(this.newContentElm);
	}
	this.newContentElmHeight = this.newContentElm.offsetHeight; //auto
	this.newContentElmWidth = this.newContentElm.offsetWidth; //auto
	this.newContentElmScrollHeight = this.newContentElm.scrollHeight;
	this.newContentElmScrollWidth = this.newContentElm.scrollWidth;
	this.newContentElm.obj = this;

}

function v_u_perform(elmId)
{
	alert('b')
	//e = ec.convertEvent(e);
	elmId = (this.obj) ? this.obj.elm.id : elmid
	var obj = document.getElementById(elmId).obj.vBar;
	obj.scrollTop -= 1;
	timeID = setTimeout("v_u_perform(" + [document.getElementById(elmId)] + ")","20");
}

function s_b_createVScrollbar()
{
	/*Scrollbar zusammensetzten START*/
	this.vBarArea = document.createElement('div');
		this.vUp = document.createElement('div');
		this.vDown = document.createElement('div');
		this.vBar = document.createElement('div');
			this.vBarContent = document.createElement('div');
				this.vAnfasser = document.createElement('div');
	
	this.vUp.obj = this;
	this.vDown.obj = this;
	this.vAnfasser.obj = this;
	this.vBar.obj = this;

	this.vUp.perform = v_u_perform;
	this.vDown.perform = v_u_perform;

	ec.registerEvent(this.vAnfasser,'mousedown',registerVAnfasser,false);
	try
	{
		ec.registerEvent(this.vBar,'mousewheel',registerVWheel,false);
		ec.registerEvent(this.newContentElm,'mousewheel',registerVWheel,false);
	}
	catch(e){}
	
	//ec.registerEvent(this.vUp,'mousedown',v_u_perform,false)
	//ec.registerEvent(this.vDown,'mousedown',v_u_perform,false)
	
	this.vBarContent.appendChild(this.vAnfasser);
	this.vBar.appendChild(this.vBarContent);
	this.vBarArea.appendChild(this.vUp);
	this.vBarArea.appendChild(this.vBar);
	this.vBarArea.appendChild(this.vDown);

	this.vBarArea.style.position = 'absolute'; //static
	this.vBarArea.style.width = this.vBarWidth + 'px'; //auto
	this.vBarArea.style.right = '0px'; //auto
	this.vBarArea.style.top = '0px'; //auto
	this.vBarArea.style.height = (this.hasHBar) ? this.newContentElm.offsetHeight + this.contentMargin + 'px' : this.newContentElm.offsetHeight + 'px'; //auto

	this.vUp.style.width = '100%'; // static
	this.vUp.style.height = '0px'; //custom
	this.vUp.style.overflow = 'hidden'; //static
	this.vUp.style.backgroundColor = '#cccccc'; //custom
	this.vUp.style.backgroundImage = "url('res/pfeil_up.gif')";
	
	this.vDown.style.width = '100%'; // static
	this.vDown.style.height = '0px'; //custom
	this.vDown.style.overflow = 'hidden'; //static
	this.vDown.style.backgroundColor = '#cccccc'; //custom
	this.vDown.style.backgroundImage = "url('res/pfeil_down.gif')";

	this.vAnfasser.style.position = 'relative'; // static
	this.vAnfasser.style.width = '100%'; // static
	this.vAnfasser.style.height = '12px'; //custom
	this.vAnfasser.style.overflow = 'hidden'; //static
	//this.vAnfasser.style.backgroundColor = '#ffcccc'; //custom
	this.vAnfasser.style.backgroundImage = "url('/soothing_naturals/art/kugel.gif')";

	this.vBar.style.height = (parseInt(this.vBarArea.style.height) - parseInt(this.vUp.style.height) - parseInt(this.vDown.style.height)) + 'px'; //auto, custom
	this.vBar.style.position = 'relative'; //static, muss relative sein, um im Explorer den Content beim scrollTop mitzunehmen
	this.vBar.style.width = '100%'; //static
	this.vBar.style.overflow = 'hidden'; //static
	//this.vBar.style.backgroundColor = '#dddddd'; //custom
	
	//Default-Status des Scrollbalkens START
	this.vAnfasser.style.top = parseInt(this.vBar.style.height) - parseInt(this.vAnfasser.style.height) + 'px'; // auto
	this.vBarContent.style.height = parseInt(this.vBar.style.height)*2 - parseInt(this.vAnfasser.style.height) + 'px'
	this.vBarContent.style.width = '100%'; // static
	//this.vBarContent.style.backgroundColor = '#cceeee' //custom;
	this.vBarArea.style.backgroundImage = "url('/soothing_naturals/art/balken.gif')";
	
	this.elm.appendChild(this.vBarArea)
	this.vBarScrollLength = (this.vBarContent.offsetHeight - this.vAnfasser.offsetHeight) / 2;
	this.vBar.scrollTop = this.vBarScrollLength;
	//Default-Status des Scrollbalkens ENDE
	/*Scrollbar zusammensetzten ENDE*/
}

function s_b_createHScrollbar()
{
	/*Scrollbar zusammensetzten START*/
	this.hBarArea = document.createElement('div');
		this.hLeft = document.createElement('div');
		this.hRight = document.createElement('div');
		this.hBar = document.createElement('div');
			this.hBarContent = document.createElement('div');
				this.hAnfasser = document.createElement('div');
	
	this.hLeft.obj = this;
	this.hRight.obj = this;
	this.hAnfasser.obj = this;
	this.hBar.obj = this;

	ec.registerEvent(this.hAnfasser,'mousedown',registerHAnfasser,false);
	try
	{
		ec.registerEvent(this.hBar,'mousewheel',registerHWheel,false);
		if (!this.hasVBar) ec.registerEvent(this.newContentElm,'mousewheel',registerHWheel,false);
	}
	catch(e){}
	//ec.registerEvent(this.hLeft,'mousedown',this.buttonhLeft,false)
	//ec.registerEvent(this.hRight,'mousedown',this.buttonhRight,false)
	
	this.hBarContent.appendChild(this.hAnfasser);
	this.hBar.appendChild(this.hBarContent);
	this.hBarArea.appendChild(this.hLeft);
	this.hBarArea.appendChild(this.hBar);
	this.hBarArea.appendChild(this.hRight);

	this.hBarArea.style.position = 'absolute'; //static
	this.hBarArea.style.height = this.hBarHeight + 'px'; //auto
	this.hBarArea.style.bottom = '0px'; //auto
	this.hBarArea.style.left = '0px'; //auto
	this.hBarArea.style.width = (this.hasVBar) ? this.newContentElm.offsetWidth + this.contentMargin + 'px' : this.newContentElm.offsetWidth + 'px'; //auto

	this.hLeft.style.height = '100%'; // static
	this.hLeft.style.width = '7px'; //custom
	this.hLeft.style.overflow = 'hidden'; //static
	this.hLeft.style.backgroundColor = '#cccccc'; //custom
	this.hLeft.style.backgroundImage = "url('res/pfeil_left.gif')";
	
	this.hRight.style.height = '100%'; // static
	this.hRight.style.width = '7px'; //custom
		this.hRight.style.position = 'absolute'; //static, special for horizontal
		this.hRight.style.top = '0px'; //static, special for horizontal
		this.hRight.style.right = '0px'; //static, special for horizontal
	this.hRight.style.overflow = 'hidden'; //static
	this.hRight.style.backgroundColor = '#cccccc'; //custom
	this.hRight.style.backgroundImage = "url('res/pfeil_right.gif')";

	this.hAnfasser.style.position = 'relative'; // static
	this.hAnfasser.style.height = '100%'; // static
	this.hAnfasser.style.width = '32px'; //custom
	this.hAnfasser.style.overflow = 'hidden'; //static
	this.hAnfasser.style.backgroundColor = '#ffcccc'; //custom
	this.hAnfasser.style.backgroundImage = "url('res/h_anfasser.gif')";

	this.hBar.style.width = (parseInt(this.hBarArea.style.width) - parseInt(this.hLeft.style.width) - parseInt(this.hRight.style.width)) + 'px'; //auto, custom
		this.hBar.style.position = 'absolute'; //static, special for horizontal
		this.hBar.style.top = '0px'; //static, special for horizontal
		this.hBar.style.left = '7px'; //static, special for horizontal
	this.hBar.style.height = '100%'; //static
	this.hBar.style.overflow = 'hidden'; //static
	//this.hBar.style.backgroundColor = '#dddddd'; //custom
	
	//Default-Status des Scrollbalkens START
	this.hAnfasser.style.left = parseInt(this.hBar.style.width) - parseInt(this.hAnfasser.style.width) + 'px'; // static, muss am Ende 100% sein
	this.hBarContent.style.width = parseInt(this.hBar.style.width)*2 - parseInt(this.hAnfasser.style.width) + 'px'
	this.hBarContent.style.height = '100%'; // static
	//this.hBarContent.style.backgroundColor = '#cceeee' //custom;
	this.hBarContent.style.backgroundImage = "url('res/h_linie.gif')";
	
	this.elm.appendChild(this.hBarArea)
	this.hBarScrollLength = (this.hBarContent.offsetWidth - this.hAnfasser.offsetWidth) / 2;
	this.hBar.scrollLeft = this.hBarScrollLength;
	//Default-Status des Scrollbalkens ENDE
	/*Scrollbar zusammensetzten ENDE*/
}

function s_b_calculateVBar()
{
	//alert(this.newContentElmScrollHeight)
	this.vMultiplication = (this.newContentElmScrollHeight - this.newContentElmHeight) / this.vBarScrollLength;
	//alert('v: '+this.id+"\n"+this.vMultiplication);
}

function s_b_calculateHBar()
{
	this.hMultiplication = (this.newContentElmScrollWidth - this.newContentElmWidth) / this.hBarScrollLength;
	//alert('h: '+this.id+"\n"+this.hMultiplication);
}

/******** ******** ******** ******** ******** ******** ******** ********/
/******Fogende Funktionen sind nicht Methoden des Scollbar-Objektes*****/
/*******************************Anfasser*******************************/

function registerVAnfasser(e)
{
	e = ec.convertEvent(e);
	e.preventDefault();
	e.stopPropagation();
	this.obj.vBarStartYPos = this.obj.vBarYPos = this.obj.vBar.scrollTop;
	this.obj.intContentVActualPos = this.obj.newContentElm.scrollTop;
	this.obj.vEventStartYPos = e.pageY;
	
	document.getElementsByTagName('body')[0].obj = this.obj;
	
	ec.registerEvent(document.getElementsByTagName('body')[0],'mousemove',moveVAnfasser,true);
	ec.registerEvent(document.getElementsByTagName('body')[0],'mouseup',unregisterVAnfasser,true);
	ec.registerEvent(document.getElementsByTagName('body')[0],'drag',ec.doNothing,true);
}

function moveVAnfasser(e)
{
	e = ec.convertEvent(e);
	e.preventDefault();
	
	var pos = e.pageY - this.obj.vEventStartYPos;
	this.obj.vBarYPos = this.obj.vBarStartYPos - pos;
	var invertedVBarYPos = this.obj.vBarScrollLength - (this.obj.vBarStartYPos - pos); //von der Ausgangsposition gescrollte Pixel des Scrollbalkens
	this.obj.floatContentVActualPos = invertedVBarYPos * this.obj.vMultiplication; //mit Multiplikator fŸr den Content
	
	this.obj.vBar.scrollTop = this.obj.vBarStartYPos - pos;
	scrollContentV(this.obj.floatContentVActualPos);
	//document.getElementById('ausgabe').innerHTML = "this.obj.vBarStartYPos: " + this.obj.vBarStartYPos + "<br>pos: " + pos + "<br>vBarYPos: " + this.obj.vBarYPos + "<br>invertedVBarYPos: " + invertedVBarYPos + "<br>floatContentActualPos: " + this.obj.floatContentActualPos + "<br>newContentElm.scrollTop: " + this.obj.newContentElm.scrollTop + "<br>newContentElm.scrollHeight: " + this.obj.newContentElm.scrollHeight + "<br>newContentElm.offsetHeight: " + this.obj.newContentElm.offsetHeight; //debug
}

function unregisterVAnfasser(e)
{
	ec.removeEvent(document.getElementsByTagName('body')[0],'mousemove',moveVAnfasser,true)
	ec.removeEvent(document.getElementsByTagName('body')[0],'mouseup',unregisterVAnfasser,true)

	//document.getElementsByTagName('body')[0].obj = null;
}






function registerHAnfasser(e)
{
	e = ec.convertEvent(e);
	e.preventDefault();
	e.stopPropagation();
	this.obj.hBarStartXPos = this.obj.hBarXPos = this.obj.hBar.scrollLeft;
	this.obj.intContentHActualPos = this.obj.newContentElm.scrollLeft;
	this.obj.hEventStartXPos = e.pageX;
	
	document.getElementsByTagName('body')[0].obj = this.obj;
	
	ec.registerEvent(document.getElementsByTagName('body')[0],'mousemove',moveHAnfasser,true);
	ec.registerEvent(document.getElementsByTagName('body')[0],'mouseup',unregisterHAnfasser,true);
	ec.registerEvent(document.getElementsByTagName('body')[0],'drag',ec.doNothing,true);
}

function moveHAnfasser(e)
{
	e = ec.convertEvent(e);
	e.preventDefault();
	
	var pos = e.pageX - this.obj.hEventStartXPos;
	this.obj.hBarXPos = this.obj.hBarStartXPos - pos;
	var invertedHBarXPos = this.obj.hBarScrollLength - (this.obj.hBarStartXPos - pos); //von der Ausgangsposition gescrollte Pixel des Scrollbalkens
	this.obj.floatContentHActualPos = invertedHBarXPos * this.obj.hMultiplication; //mit Multiplikator fŸr den Content
	
	this.obj.hBar.scrollLeft = this.obj.hBarStartXPos - pos;
	scrollContentH(this.obj.floatContentHActualPos);
	//document.getElementById('ausgabe').innerHTML = "this.obj.vBarStartYPos: " + this.obj.vBarStartYPos + "<br>pos: " + pos + "<br>vBarYPos: " + this.obj.vBarYPos + "<br>invertedVBarYPos: " + invertedVBarYPos + "<br>floatContentActualPos: " + this.obj.floatContentActualPos + "<br>newContentElm.scrollTop: " + this.obj.newContentElm.scrollTop + "<br>newContentElm.scrollHeight: " + this.obj.newContentElm.scrollHeight + "<br>newContentElm.offsetHeight: " + this.obj.newContentElm.offsetHeight; //debug
}

function unregisterHAnfasser(e)
{
	//conPosition = (newConPosition < 0) ? 0 : (newConPosition > conScrollLength) ? conScrollLength : newConPosition;
	ec.removeEvent(document.getElementsByTagName('body')[0],'mousemove',moveHAnfasser,true)
	ec.removeEvent(document.getElementsByTagName('body')[0],'mouseup',unregisterHAnfasser,true)

	document.getElementsByTagName('body')[0].obj = null;
}

function scrollContentV(pos)
{
	document.getElementsByTagName('body')[0].obj.newContentElm.scrollTop = pos;
}

function scrollContentH(pos)
{
	document.getElementsByTagName('body')[0].obj.newContentElm.scrollLeft = pos;
}

function registerVWheel(e)
{
	e = ec.convertEvent(e);
	this.obj.vBar.scrollTop -= e.eDirection * this.obj.wheelVSpeed;
	this.obj.floatContentVActualPos = (this.obj.vBarScrollLength - this.obj.vBar.scrollTop) * this.obj.vMultiplication;
	this.obj.newContentElm.scrollTop = this.obj.floatContentVActualPos;
	for (i in e)
	{
		//document.getElementById('ausgabe').innerHTML += (i + ": " + e[i] + "<br>");
	}
}

function registerHWheel(e)
{
	e = ec.convertEvent(e);
	this.obj.hBar.scrollLeft -= e.eDirection * this.obj.wheelHSpeed;
	this.obj.floatContentHActualPos = (this.obj.hBarScrollLength - this.obj.hBar.scrollLeft) * this.obj.hMultiplication;
	this.obj.newContentElm.scrollLeft = this.obj.floatContentHActualPos;
}