/*
	Scrollbaar (verticaal) vak: een combinatie van DIVs en een IFRAME voor het krijgen van een
	content-container die kan worden gescrolld zonder de lelijke standaard scrollbars.

	Veel ideeën en code heb ik te danken aan J. Lester Novros II.
*/

/*
	Benodigde externe functies:
	getInnerHeight()
	getExploderEvent()
	sendToDevNull()
	browser-detectie

*/

/*
	
*/

/*
	Inputs:
	 - afmetingen: een extern gedefinieerde array met:
	 	[0]:	x-coord linkerbovenhoek contentvak	(absoluut)
	 	[1]:	y-coord		"				"			"
	 	[2]:	breedte contentvak
	 	[3]:	hoogte		"
	 	[4]:	x-coord linkerbovenhoek schuifbalk (absoluut)
	 	[5]:	y-coord 	"				"			"
	 	[6]:	breedte schuifbalk
	 	[7]:	hoogte		"
	 	[8]:	z-index container-div
	- schuifbalkmaten: een extern gedefinieerder array met:
		[0}:	breedte op-pijl
		[1]:	hoogte		"
		[2]:	breedte neer-pijl
		[3]:	hoogte		"
		[4]:	breedte schuif
		[5]:	hoogte eventuele schuifkop 		(als 0 -> geen schuifkop)
		[6]:	hoogte eventuele schuifstaart		"		"		"
	- schuifbalkimgs: een extern gedefineerde array met bestandsnaaminfo voor de plaatjes van de schuifbalk
	 	[0]:	bestandsnaam (zonder extensie) van pijl_op-plaatje
	 	[1]:		"			"		"	   van pijl_neer-plaatje
	 	[2]:	bestandsformaat van de pijl-plaatjes
	 	[3]:	bestandsnaam (zonder extensie) van schuifkop-plaatje
	 	[4]:	bestandsnaam (zonder extensie) van schuiflijf-plaatje
	 	[5]:	bestandsnaam (zonder extensie) van schuifstaart-plaatje
	 	[6]:	bestandsformaat van de schuif-plaatjes
	 	[7]:	bestandsnaam (zonder extensie) van slede-plaatje
	 	[8]:	bestandsformaat van slede-plaatje

	- id: de id van de drager-div
	- beginpositie: hoever naar beneden moet zijn gescrolld (in px; normaal 0)
	- volgnummer (om elk scrollbaar vak een unieke id te kunnen geven) ("" als maar 1)
	- moederelement: id van element waarvan de content_container een child moet worden
*/

function content_container(afmetingen, schuifbalkmaten, schuifbalkimgs, id, beginpositie, volgnummer, moederelement)
{	this.beginpositie = beginpositie;
	this.volgnummer = volgnummer;
	/* bepalen buitenmaten container */
	if (afmetingen[4] >= afmetingen[0])
		{	this.breedte = Math.max((afmetingen[0] + afmetingen[2]),(afmetingen[4] + afmetingen[6])) - afmetingen[0];
			this.schuifbalkX = afmetingen[4]-afmetingen[0];
		}
	else
		{	this.breedte = afmetingen[0] - afmetingen[4] + afmetingen[2]; // breedte schuifbalk moet wel < breedte contentvak
			this.schuifbalkX = 0;
		}
	if (afmetingen[5] >= afmetingen[1])
		{	this.hoogte = Math.max((afmetingen[1] + afmetingen[3]),(afmetingen[5] + afmetingen[7])) - afmetingen[1];
			this.schuifbalkY = afmetingen[5]-afmetingen[1];
			alert("!");
		}
	else
		{	this.hoogte = afmetingen[1] - afmetingen[5] + afmetingen[3];
			this.schuifbalkY = 0;
		}
	var c = document.createElement("div"); // c = de container-div waar alles in zit
	c.style.position 	= "absolute";
	c.style.zIndex		= afmetingen[8];
	c.id				= "div" + id + this.volgnummer;
	c.style.left =	Math.min(afmetingen[0], afmetingen[4]);
	c.style.top	=	Math.min(afmetingen[1], afmetingen[5]);
	c.style.width = this.breedte;
	c.style.height= this.hoogte;
	c.style.border= "0px";
	c.verhouding	= 1;	// initieel; c.verhouding = hoogte slede / hoogte totale content
	c.scrollLengte	= afmetingen[3]; // initieel
	c.unit = 12; // scroll-snelheid
	c.muiswiel = function(e)	// voor alles behalve IE
		{	if (e.detail < 0)
				{	window.frames['ifrInhoud'].scrollBy(0,-50);
					c.herpositioneerScroller('');
				}
			if (e.detail > 0)
				{	window.frames['ifrInhoud'].scrollBy(0,50);
					c.herpositioneerScroller('');
				}
		}

	var d = document.createElement("div"); // d = de div waar het iframe voor de content in komt
	d.style.position 	= "absolute";
	d.style.zIndex		= afmetingen[8] + 1;
	d.id				= "div_content_vak" + this.volgnummer;
	d.style.left =	"0px"; //afmetingen[0];
	d.style.top	=	afmetingen[1] - afmetingen[5]; //"0px"; //afmetingen[1];
	d.style.width = afmetingen[2];
	d.style.height= afmetingen[3];
	d.style.border= "0px";

	var f = document.createElement("iframe"); // f = het iframe waar de content in komt
	f.frameBorder	= "no";
	f.scrolling		= "no";
	f.style.width	= afmetingen[2];
	f.style.height	= afmetingen[3];
	f.name			= "ifr" + id + this.volgnummer;
	f.id			= "ifr" + id + this.volgnummer;
	f.allowTransparency = true;
	f.style.backgroundColor = "transparent";
	if (!is_ie) 
		{	f.addEventListener("DOMMouseScroll", c.muiswiel, true); }

	var b = document.createElement("div"); // b = schuifbalk als geheel
	b.style.position 	= "absolute";
	b.style.zIndex		= afmetingen[8] + 2;
	b.id				= "div_schuifbalk" + this.volgnummer;
	b.style.left =	this.schuifbalkX +"px";
	b.style.top	=	this.schuifbalkY +"px";
	b.style.width = afmetingen[6] +"px";
	b.style.height= afmetingen[7] +"px";
	b.style.border= "0px";

	var o = document.createElement("div"); // o = pijl op
	o.style.position 	= "absolute";
	o.style.zIndex		= afmetingen[8] + 3;
	o.id				= "div_pijlop" + this.volgnummer;
	o.style.left =	"0px";
	o.style.top	=	"0px";
	o.style.width = schuifbalkmaten[0] + "px";
	o.style.height= schuifbalkmaten[1] + "px";
	o.style.border= "0px";
	o.style.backgroundImage = "url(uipix/" + schuifbalkimgs[0] + schuifbalkimgs[2] + ")"; // IE: correcties voor png beneden
	o.style.backgroundRepeat = "no-repeat";
	o.onmouseover = function()	
						{ o.style.backgroundImage = "url(uipix/" + schuifbalkimgs[0] + "_ro" + schuifbalkimgs[2] + ")"; }
	o.onmouseout = function()	
						{ o.style.backgroundImage = "url(uipix/" + schuifbalkimgs[0] + schuifbalkimgs[2] + ")"; }
	o.onmousedown	= function()
		{	clearInterval(this.stepper);
			this.stepper = null;

			if (s.positie > 0)
				{	this.stepper = setInterval(function()
						{	var temp = s.positie;
							if (--temp < 0)
								{	clearTimeout(this.stepper);
									this.stepper = null;
									temp         = 0;
								}
							s.ga_naar(temp);
	   						c.scroll();
						}, 100);
					window.arrow = this;          // needed in window.onmouseup
				}
			if (is_safari)
				event.preventDefault();       // suppress Mac context menu
		} 
	o.onmouseup = function()
		{	clearInterval(this.stepper);
			this.stepper = null;
			window.arrow = null;
		}
	o.onclick = function()
		{	clearInterval(this.stepper);
			this.stepper = null;
			var temp = s.positie;
			if (--temp < 0)
				temp = 0;
			s.ga_naar(temp);
			c.scroll();
		}
	
	var n = document.createElement("div"); // n = pijl neer
	n.style.position 	= "absolute";
	n.style.zIndex		= afmetingen[8] + 3;
	n.id				= "div_pijlneer" + this.volgnummer;
	n.style.left =	"0px";
	n.style.top	=	afmetingen[7] - schuifbalkmaten[3] + "px";
	n.style.width = schuifbalkmaten[2] + "px";
	n.style.height= schuifbalkmaten[3] + "px";
	n.style.border= "0px";
	n.style.backgroundImage = "url(uipix/" + schuifbalkimgs[1] + schuifbalkimgs[2] + ")"; // IE: correcties voor png beneden
	n.style.backgroundRepeat = "no-repeat";
	n.onmouseover = function()	
						{ n.style.backgroundImage = "url(uipix/" + schuifbalkimgs[1] + "_ro" + schuifbalkimgs[2] + ")"; }
	n.onmouseout = function()	
						{ n.style.backgroundImage = "url(uipix/" + schuifbalkimgs[1] + schuifbalkimgs[2] + ")"; }
	n.onmousedown = function(event)
		{	clearInterval(this.stepper);
			this.stepper = null;
			if (s.positie < (parseInt(l.style.height) - parseInt(s.style.height)))
				{	this.stepper = setInterval(function()
						{	var temp = s.positie;
							if (++temp * c.unit > (parseInt(l.style.height) - parseInt(s.style.height)))
								{	clearTimeout(this.stepper);
									this.stepper = null;
									//temp         = s.positie;
									temp	= (parseInt(l.style.height) - parseInt(s.style.height))/c.unit;
								}
							s.ga_naar(temp);
							c.scroll();
						}, 100);
					window.arrow = this;          // needed in window.onmouseup
				}
			if (is_safari)
				event.preventDefault();       // suppress Mac context menu
		}
	n.onmouseup = function()
		{	clearInterval(this.stepper);
			this.stepper = null;
			window.arrow = null;
		}
	n.onclick = function()
		{	clearInterval(this.stepper);
			 this.stepper = null;
			 var temp = s.positie;
			 if (++temp * c.unit > (parseInt(l.style.height) - parseInt(s.style.height)))
			 	temp = s.positie;
			s.ga_naar(temp);
			c.scroll();
		}

	var l = document.createElement("div"); // l = slede
	l.style.position 	= "absolute";
	l.style.zIndex		= afmetingen[8] + 3;
	l.id				= "div_slede" + this.volgnummer;
	l.style.left =	"0px";
	l.style.top	=	schuifbalkmaten[1] + "px";
	l.style.width = schuifbalkmaten[4] + "px";
	l.style.height= afmetingen[7] - schuifbalkmaten[3] - schuifbalkmaten[1] + "px";
	l.style.border= "0px";
	l.style.backgroundImage = "url(uipix/" + schuifbalkimgs[7] + schuifbalkimgs[8] + ")"; // IE: correcties voor png beneden
	l.onmousedown = function(event) // 'onclick' doesn't position handle until mouseup
		{	event = event || getXploderEvent();
			// this hack needed since a click on 'handle' bubbles up to here [in spite of 'stopPropagation()'] and fn gets executed again,
			// repositioning the handle at the top of the slider; I'm probably doing s/thing wrong w/ regard to scope..?
			var target = event.target || event.srcElement;
			if (target.id == "div_schuif" + this.volgnummer)
				return; // als op de schuif geklikt wordt
			var temp = ((event.layerY || event.offsetY) - s.offsetHeight / 2) / c.unit;
			if (temp < 0)
				temp = 0;
			if (temp*c.unit > (parseInt(l.style.height) - parseInt(s.style.height)))
				temp = (parseInt(l.style.height) - parseInt(s.style.height))/c.unit;
			s.ga_naar(temp);
			c.scroll();
		}

	var s = document.createElement("div"); // s = schuif
	s.style.position 	= "absolute";
	s.style.zIndex		= afmetingen[8] + 4;
	s.id				= "div_schuif" + this.volgnummer;
	s.style.left =	"0px";
	s.style.top	=	"0px";	// initieel
	s.style.width = schuifbalkmaten[4] + "px";
	s.style.height= afmetingen[7] - schuifbalkmaten[3] - schuifbalkmaten[1] + "px";	// initieel
	s.style.border= "0px";
	s.dragging	= false;
	s.positie	= 0;		// initieel
	s.onmouseover = function()
		{	i.style.backgroundImage = "url(uipix/" + schuifbalkimgs[4] + "_ro" + schuifbalkimgs[6] + ")";
			if (schuifbalkmaten[5] != 0)
				{	k.style.backgroundImage = "url(uipix/" + schuifbalkimgs[3] + "_ro" + schuifbalkimgs[6] + ")";
					t.style.backgroundImage = "url(uipix/" + schuifbalkimgs[5] + "_ro" + schuifbalkimgs[6] + ")";
				}
		}
	s.onmouseout = function()
		{	i.style.backgroundImage = "url(uipix/" + schuifbalkimgs[4] + schuifbalkimgs[6] + ")";
			if (schuifbalkmaten[5] != 0)
				{	k.style.backgroundImage = "url(uipix/" + schuifbalkimgs[3] + schuifbalkimgs[6] + ")";
					t.style.backgroundImage = "url(uipix/" + schuifbalkimgs[5] + schuifbalkimgs[6] + ")";
				}
		}
	s.onmousedown = function(event)
		{	event = event || getXploderEvent();

			 this.dragging = true;
			 this.curX     = event.clientX;
			 this.curY     = event.clientY;
			 this.startX   = this.offsetLeft;
			 this.startY   = this.offsetTop;
	
			 window.schuif = this;      // needed in window.onmouseup
	
			 sendToDevNull(event);
		}
	s.onmouseup = function(event)
		{	this.dragging = false;
			sendToDevNull(event || getXploderEvent());
		}
	s.ga_naar	= function(nieuwe_y)
		{	this.positie = Math.round(nieuwe_y);
			this.style.top  = Math.round(this.positie * c.unit) + 'px';
		}
	if (is_ie)
		s.ondragstart = function() { return false; }; // 'drag forbidden'-icon voorkomen

	
	var i = document.createElement("div"); // i = schuiflijf
	i.style.position 	= "absolute";
	i.style.zIndex		= afmetingen[8] + 5;
	i.id				= "div_schuiflijf" + this.volgnummer;
	i.style.left =	"0px";
	i.style.top	=	schuifbalkmaten[5] + "px";
	i.style.width = schuifbalkmaten[4] + "px";
	i.style.height= "5px";	// initieel
	i.style.border= "0px";
	i.style.backgroundImage = "url(uipix/" + schuifbalkimgs[4] + schuifbalkimgs[6] + ")"; // IE: correcties voor png beneden
	i.style.backgroundRepeat = "repeat-y";

	if (schuifbalkmaten[5] != 0)
		{	var k = document.createElement("div"); // k = schuifkop
			k.style.position 	= "absolute";
			k.style.zIndex		= afmetingen[8] + 5;
			k.id				= "div_schuifkop" + this.volgnummer;
			k.style.left =	"0px";
			k.style.top	=	"0px";	// initieel
			k.style.width = schuifbalkmaten[4] + "px";
			k.style.height= schuifbalkmaten[5] + "px";
			k.style.border= "0px";
			k.style.backgroundImage = "url(uipix/" + schuifbalkimgs[3] + schuifbalkimgs[6] + ")"; // IE: correcties voor png beneden
			k.style.backgroundRepeat = "no-repeat";
			
			var t = document.createElement("div"); // t = schuifstaart
			t.style.position 	= "absolute";
			t.style.zIndex		= afmetingen[8] + 5;
			t.id				= "div_schuifstaart" + this.volgnummer;
			t.style.left =	"0px";
			t.style.top	=	"0px";	// initieel
			t.style.width = schuifbalkmaten[4] + "px";
			t.style.height= schuifbalkmaten[5] + "px";
			t.style.border= "0px";
			t.style.backgroundImage = "url(uipix/" + schuifbalkimgs[5] + schuifbalkimgs[6] + ")"; // IE: correcties voor png beneden
			t.style.backgroundRepeat = "no-repeat";
		}


	/* correcties voor IE's png-bug */
	if (is_ie && (schuifbalkimgs[2] == ".png"))
		{	o.style.backgroundImage = "";
			o.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='uipix/" + schuifbalkimgs[0] + schuifbalkimgs[2] + "', sizingMethod='scale')";
			o.onmouseover = function()	
								{ n.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='uipix/" + schuifbalkimgs[0] + "_ro" + schuifbalkimgs[2] + "', sizingMethod='scale')"; }
			o.onmouseout = function()	
								{ n.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='uipix/" + schuifbalkimgs[0] + schuifbalkimgs[2] + "', sizingMethod='scale')"; }
			n.style.backgroundImage = "";
			n.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='uipix/" + schuifbalkimgs[1] + schuifbalkimgs[2] + "', sizingMethod='scale')";
			n.onmouseover = function()	
								{ n.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='uipix/" + schuifbalkimgs[1] + "_ro" + schuifbalkimgs[2] + "', sizingMethod='scale')"; }
			n.onmouseout = function()	
								{ n.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='uipix/" + schuifbalkimgs[1] + schuifbalkimgs[2] + "', sizingMethod='scale')"; }

		}
	if (is_ie && (schuifbalkimgs[6] == ".png"))
		{	i.style.backgroundImage = "";
			i.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='uipix/" + schuifbalkimgs[4] + schuifbalkimgs[6] + "', sizingMethod='scale')";
			if (schuifbalkmaten[5] != 0)
				{	k.style.backgroundImage = "";
					k.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='uipix/" + schuifbalkimgs[3] + schuifbalkimgs[6] + "', sizingMethod='scale')";
					t.style.backgroundImage = "";
					t.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='uipix/" + schuifbalkimgs[5] + schuifbalkimgs[6] + "', sizingMethod='scale')";
				}
			s.onmouseover = function()
				{	i.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='uipix/" + schuifbalkimgs[4] + "_ro" + schuifbalkimgs[6] + "', sizingMethod='scale')";
					if (schuifbalkmaten[5] != 0)
						{	k.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='uipix/" + schuifbalkimgs[3] + "_ro" + schuifbalkimgs[6] + "', sizingMethod='scale')";
							t.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='uipix/" + schuifbalkimgs[5] + "_ro" + schuifbalkimgs[6] + "', sizingMethod='scale')";
						}
				}
			s.onmouseout = function()
				{	i.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='uipix/" + schuifbalkimgs[4] + schuifbalkimgs[6] + "', sizingMethod='scale')";
					if (schuifbalkmaten[5] != 0)
						{	k.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='uipix/" + schuifbalkimgs[3] + schuifbalkimgs[6] + "', sizingMethod='scale')";
							t.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='uipix/" + schuifbalkimgs[5] + schuifbalkimgs[6] + "', sizingMethod='scale')";
						}
				}

		}
	if (is_ie && (schuifbalkimgs[8] == ".png"))
		{	l.style.backgroundImage = "";
			l.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='uipix/" + schuifbalkimgs[7] + schuifbalkimgs[8] + "', sizingMethod='scale')";
		}	// toevoegen: gecorrigeerde mouse-over

	c.laad_pagina = function(pagina)
							{	s.positie = 0;
								s.style.top = "0px";
								f.src = pagina;
							}
	
	c.schuif_aanpassen = function(scrollLengte)
		{	c.scrollLengte = scrollLengte;
			if (scrollLengte > afmetingen[3])
				{	s.style.height	= Math.round((afmetingen[3]/scrollLengte) * parseInt(l.style.height));
					i.style.height	= parseInt(s.style.height) - schuifbalkmaten[5] -schuifbalkmaten[6] + "px";
					if (t) {	t.style.top		= parseInt(i.style.top) + parseInt(i.style.height);	}
					c.verhouding	= (parseInt(l.style.height) - parseInt(s.style.height))/ (scrollLengte - afmetingen[3]);
					b.style.display = "block";
				}
			else
				{	s.style.height = parseInt(b.style.height) - schuifbalkmaten[5] - schuifbalkmaten[6] - schuifbalkmaten[1] - schuifbalkmaten[3] + "px";
					i.style.height	= parseInt(s.style.height) - schuifbalkmaten[5] -schuifbalkmaten[6] + "px";
					c.verhouding	= (parseInt(l.style.height) - parseInt(s.style.height))/ (scrollLengte - afmetingen[3]);
					b.style.display = "none";
				}
		}
	
	c.schuifbalkhoogte_wijzigen = function(nieuweHoogte)
		{	var oudeHoogte = parseInt(b.style.height);
			b.style.height	= nieuweHoogte + "px";
			b.style.top		= parseInt(b.style.top)-(nieuweHoogte-oudeHoogte) + "px";
			l.style.height	= nieuweHoogte - schuifbalkmaten[3] - schuifbalkmaten[1] + "px";
			n.style.top 	= nieuweHoogte - schuifbalkmaten[3] + "px";
			if (c.scrollLengte > afmetingen[3])
				{	s.style.height	= Math.round((afmetingen[3]/c.scrollLengte) * parseInt(l.style.height));
					i.style.height	= parseInt(s.style.height) - schuifbalkmaten[5] -schuifbalkmaten[6] + "px";
					if (t) {	t.style.top		= parseInt(i.style.top) + parseInt(i.style.height);	}
					c.verhouding	= (parseInt(l.style.height) - parseInt(s.style.height))/ (c.scrollLengte - afmetingen[3]);
					b.style.display = "block";
				}
			else
				{	s.style.height = parseInt(b.style.height) - schuifbalkmaten[5] - schuifbalkmaten[6] - schuifbalkmaten[1] - schuifbalkmaten[3] + "px";
					i.style.height	= parseInt(s.style.height) - schuifbalkmaten[5] -schuifbalkmaten[6] + "px";
					c.verhouding	= (parseInt(l.style.height) - parseInt(s.style.height))/ (c.scrollLengte - afmetingen[3]);
					b.style.display = "none";
				}
		}
	
	c.scroll = function()
		{	//f.scroll(0,s.positie);
			window.frames['ifr' + id + volgnummer].scrollTo(0,c.unit*(s.positie/c.verhouding));
			if (document.getElementById('divTest'))	{	document.getElementById('divTest').innerHTML += "<br />s.positie: " + s.positie + "<br />c.verhouding: " + c.verhouding;	}
		}
	
	c.muiswielLuisteraar_ie = function()
		{	if (is_ie)
				{	f.document.body.onmousewheel = function()
						{	if (window.frames['ifrInhoud'].event.wheelDelta > 0)
								{	window.frames['ifrInhoud'].scrollBy(0,-50);
									c.herpositioneerScroller('');
								}
							if (window.frames['ifrInhoud'].event.wheelDelta < 0)
								{	window.frames['ifrInhoud'].scrollBy(0,50);
									c.herpositioneerScroller('');
								}
						}
				}
		}

	c.herpositioneerScroller = function(waarheen)
		{	if (waarheen != "")
				{	f.src = waarheen;	// springen naar #-anchor
				}
			if (is_ie)
				{	var gescrolld = (window.frames['ifrInhoud'].document.body.scrollTop)/c.unit;
				}	
			else
				{	var gescrolld = (window.frames['ifrInhoud'].pageYOffset)/c.unit;
				}
			var nieuwePos = Math.round(parseInt(l.style.height) * (gescrolld / c.scrollLengte));
			s.ga_naar(nieuwePos);
		}
	
	c.scrollNaarBoven = function()
		{	s.ga_naar(0);
			c.scroll();
		}
	
	if (schuifbalkmaten[5] != 0)
		{	s.appendChild(k);	//schuifkop
			s.appendChild(t);	//schuifstaart
		}
	s.appendChild(i);			//schuiflijf
	l.appendChild(s);			//schuif als geheel
	b.appendChild(o);
	b.appendChild(l);
	b.appendChild(n);
	d.appendChild(f);
	c.appendChild(d);
	c.appendChild(b);
	if (moederelement != "")	{	document.getElementById(moederelement).appendChild(c);	}
	else	{	document.body.appendChild(c);	}

	window.onmousemove = document.onmousemove = function(event)
		{	if (window.schuif && window.schuif.dragging)
				{	event = event || getXploderEvent();
					var newY = window.schuif.startY + event.clientY - window.schuif.curY;
					if (document.getElementById('divTest'))	{	document.getElementById('divTest').innerHTML = "window.schuif.startY: " + window.schuif.startY + "<br /> event.clientY: " + event.clientY + "<br /> window.schuif.curY: " + window.schuif.curY + "<br /> newY: " + newY + "<br />window.schuif.parentNode.offsetHeight: " + window.schuif.parentNode.offsetHeight + "<br />window.schuif.offsetHeight: " + window.schuif.offsetHeight;	}
					if (0 <= newY && newY < window.schuif.parentNode.offsetHeight - window.schuif.offsetHeight) // was: (0 <= newY && newY < window.schuif.parentNode.offsetHeight - window.schuif.offsetHeight -1)
						window.schuif.ga_naar(newY / c.unit); // was (newY / window.schuif.parentNode.parentNode.unit)
					else if (newY < 0)
						window.schuif.ga_naar(0);
					else if (window.schuif.parentNode.offsetHeight - window.schuif.offsetHeight < newY)  // was: (window.schuif.parentNode.offsetHeight - window.schuif.offsetHeight - 1 < newY)
						window.schuif.ga_naar((window.schuif.parentNode.offsetHeight - window.schuif.offsetHeight) / c.unit); //was ((window.schuif.parentNode.offsetHeight - window.schuif.offsetHeight - 1) / window.schuif.parentNode.parentNode.unit)
	
					c.scroll();
					// prevent select on move
					if (is_ie)
						sendToDevNull(event);
				}
		}
	window.onmouseup = document.onmouseup = function()
		{	if (window.arrow)
	  			{	clearTimeout(window.arrow.stepper);
					window.arrow.stepper = null;
				}
			window.arrow = null;
			if (window.schuif)
				window.schuif.dragging = false;
			window.schuif = null;
		}


}

function schuiven_aanpassen(bron,scrollLengte,titel)
{	document.getElementById('divInhoud').schuif_aanpassen(scrollLengte);
	/*while (document.getElementById('divHoofdstuktitel').hasChildNodes())	
		{	document.getElementById('divHoofdstuktitel').removeChild(document.getElementById('divHoofdstuktitel').firstChild);
		}
	var titel_tekst = document.createTextNode(titel);
	document.getElementById('divHoofdstuktitel').appendChild(titel_tekst);
	*/
}

function scroll_naarBoven()
{	document.getElementById('divInhoud').scrollNaarBoven();
}

function scrollbalk_gelijktrekken()
{	document.getElementById('divInhoud').herpositioneerScroller('');
}