function spcSlider(slID,minVal,curVal,maxVal,options) {
	this.slID       = slID;

	this.name	= 'spcSlider';
	
	this.minVal     = minVal;
	this.curVal     = curVal;
	this.maxVal     = maxVal;
    this.stepVal	= 1;
	
	this.disabled   = false;
	this.isdragging = false;
	this.showsteps  = false;
}

spcSlider.prototype.create = function()
{
	this.slider = document.createElement('div');
	this.knob   = document.createElement('div');
	this.slider.className = "sliderBar";
	this.knob.className = "sliderKnob";

	this.slider.id = this.slID+'Slider';
	this.knob.id   = this.slID+'Knob';
	
	this.slider.appendChild( this.knob );

	this.slider.instance = this;
	this.slider.onmousedown	= this.dragStart;	// drag when click on an empty spot in the slider
    
	if (this.showsteps)
		this.drawParts();
	
	this.redraw();

	return this.slider;
}

spcSlider.prototype.addToSlider = function(element)
{
	this.slider.appendChild(element);
}


spcSlider.prototype.destroy = function() {
//   this.slider.innerHTML = '';
   this.slider.parentNode.removeChild( this.slider );
   this.slider = null;
   this.knob = null;
}

spcSlider.prototype.init = function() {	
	this.slider = document.getElementById(this.slID+"Slider");
	this.knob   = document.getElementById(this.slID+"Knob");

	if (!this.slider) { alert('Slider element missing.'); }
	if (!this.knob) { alert('SliderKnob element missing.'); }
	
	this.slider.instance = this;
	this.slider.onmousedown	= this.dragStart;	// drag when click on an empty spot in the slider
    
	if (this.showsteps)
		this.drawParts();

	this.redraw();
//	
this.knob.onmousedown	= this.dragStart;					// drag when clicking on the slider-knob
//	this.knob.onmouseup	= this.dragEnd;
}

spcSlider.prototype.onmouseover	= function() {
	if (slider._instance) return;
	this.className = "sliderBar hover";
	this.instance.knob.className = "sliderKnob hover";
}

spcSlider.prototype.onmouseout	= function() {
	if (slider._instance) return;
	this.className = "sliderBar";
	this.instance.knob.className = "sliderKnob";
}

spcSlider.prototype.setValue = function(newVal)
{
	if (this.curVal != newVal) {
		this.curVal = newVal;
		this.update();
	}

}

spcSlider.prototype.setCurrentVal = function(value)
{
	if(this.isdragging) return;
	this.curVal = value;
	this.update();
}

spcSlider.prototype.update = function()
{
	this.redraw();
	if (this.onUpdate) this.onUpdate();

}
spcSlider.prototype.redraw = function()
{
	var si = this;

	this.curVal = Math.max(si.minVal, Math.min(si.curVal,si.maxVal));
	var knobWidth = this.knob.clientWidth - 5;
	var slWidth   = this.slider.clientWidth - knobWidth - 2;
	var perc      = slWidth * (si.curVal-si.minVal) / (si.maxVal-si.minVal);
//		document.getElementById(si.slID+"Knob").style.left = (perc - knobWidth/2) + 'px';
	this.knob.style.left = perc + 'px';

}

spcSlider.prototype.getDimensions = function()
{
	return { width: this.slider.clientWidth
			, height: this.slider.clientHeight
			};
}

spcSlider.prototype.drawParts = function()
{
	if (useragent.isIE)
		return;	// TODO: make parts look correct in IE

//	to work even if the width isn't known yet, we use %

//	var slWidth = document.getElementById(this.slID+"Slider").clientWidth;
	var knobWidth =  this.knob.clientWidth - 5;
//	var slWidth   = this.slider.clientWidth - knobWidth - 2;
	var slHeight  = this.slider.clientHeight;

	// TODO: (max-min)/step
	
	newpartcontainer = document.createElement('div');

	for (var val=0; val<=(this.maxVal-this.minVal); val=val+this.stepVal) {
		var part = document.createElement('div');
		part.className = 'sliderPart';
		var perc = 100 * val / (this.maxVal-this.minVal);
		part.style.left = perc+'%';	
		newpartcontainer.appendChild(part);
	}

	if (this.partcontainer)
		this.slider.replaceChild(newpartcontainer, this.partcontainer);
	else
		this.slider.appendChild(newpartcontainer);	

	this.partcontainer = newpartcontainer;

	//	else if (this.partcontainer)
//		this.slider.removeChild(this.partcontainer);

}

spcSlider.prototype.dragStart = function(e) {
//		stop Firefox from displaying a context menu after holding down the left mousebutton for 1 sec
//	e.preventDefault();

	if (!e) var e = window.event;

	var si = this.instance;
	spcSlider._instance = this.instance;		// global variable

	si.slider.className = "sliderBar active";
	si.knob.className = "sliderKnob active";
    si.isdragging = true;
	document.onmousemove = si.drag;
	document.onmouseup = si.dragEnd;
	
	currentSlider = si;
	window.onmouseout = function(e) { if (!e.relatedTarget) currentSlider.dragEnd(e); }	// fix for Firefox

	si.drag(e);		// a single click should work too

	if (!useragent.isIE)
		e.preventDefault();
	else
		window.event.cancelBubble = true; // TODO: werkt nog niet goed in IE!!!
}
spcSlider.prototype.dragEnd = function(e) {
	var si = spcSlider._instance;

	document.onmousemove = null;
	document.onmouseup = null;
	window.onmouseout = null;

	si.slider.className = "sliderBar";
	si.knob.className = "sliderKnob";
    si.isdragging = false;

	spcSlider._instance = null;			// global variable
	
	if (si.ondragend) si.ondragend();
}

spcSlider.prototype.drag = function(e) {
	if (!e) var e = window.event;

	si = spcSlider._instance;
	if (si.disabled) return;

//		if (!e) var e = window.event;		// For IE ?

	var pos = getElementPos(si.slider);			// get position of the slider
	var tempX = getPointerX(e) - pos["left"];
	var tempY = getPointerY(e) - pos["top"];

//		subtract scroll-position for fixed positioning
//	if (map.fixedPanels) {
//		tempX -= map.map_viewport2.scrollLeft;
//		tempY -= map.map_viewport2.scrollTop;
//	}


	var knobWidth = si.knob.clientWidth;
	var barWidth = si.slider.clientWidth - knobWidth;

	tempX = tempX - knobWidth/2;
	tempX = Math.max(0,Math.min(tempX,barWidth));
//		tempX = Math.max(0, tempX<barWidth?tempX:barWidth );


/*	adding 1 to the calculation makes selecting smoother
	if it goes over the max then it will be capped in slider.update() */
//		var newVal = Math.round(tempX / barWidth * (si.maxVal+1));
	var newVal = Math.round(tempX / barWidth * (si.maxVal-si.minVal) + si.minVal);


/*	check for changes. Otherwise Firefox might check if something changed,
	but Opera 9 will go crazy reload-/draw-/flowing stuff */
	if (newVal != si.curVal) {
//		console.log('New value: '+newVal);
		si.curVal = newVal;
		si.update();
	}

	stopPropagation(e); // doesn't work correctly in IE8
//	e.stopPropagation();
}