function applySliders(parent, oncomplete) {
	sliders = getElementsByTagAndClassName('select', 'slider', parent);
	for (var i = 0; i < sliders.length; i++) {
		var sc = new SliderController(sliders[i]);
	}
	document.prevOnselectstart = document.onselectstart;

	if (oncomplete) oncomplete();
}

function generateSliders(parent, oncomplete) {
	addLoadEvent(partial(applySliders, parent, oncomplete));
}

function SliderController(selectBox) {
	var slider = this;
	
	var sliderOptions = selectBox.options;
	this.minValue = parseInt(sliderOptions[0].value);
	this.maxValue = parseInt(sliderOptions[sliderOptions.length - 1].value);
	this.valueRange = this.maxValue - this.minValue;
	this.isDragging = false;
	this.value = (this.minValue + this.maxValue) / 2;
	this.clickIncrement = 2; /* how many years to step by when clicking on the bar */
	
	var markerOnmousedown = function(e) {
		if (!e) e = window.event;
		slider.isDragging = true;
		slider.draggedFromX = e.clientX;
		slider.draggedFromYear = slider.value;
		document.onselectstart = function() { return false; }
	}
	
	var sliderOnclick = function(e) {
		if (!e) e = window.event;
		var clickX = e.clientX - elementPosition(slider.slider).x;
		var clickYear = slider.minValue + clickX / slider.scale;
		if (clickYear > slider.value) {
			slider.setMarker(slider.value + slider.clickIncrement);
		} else {
			slider.setMarker(slider.value - slider.clickIncrement);
		}
	}
	
	this.marker = DIV({'class': 'slider_marker', 'onmousedown': markerOnmousedown});
	this.input = INPUT({'type':'hidden', 'name': selectBox.name, 'value': this.value});
	
	this.slider = DIV( {'class': 'slider_control'},
		this.input,
		DIV( {'class': 'slider_box', 'onclick': sliderOnclick},
			DIV( {'class': 'slider_bar'} )
		)
	);
	if (this.valueRange < 10) {
		var labelStep = 1;
	} else if (this.valueRange < 20) {
		var labelStep = 2;
	} else if (this.valueRange < 50) {
		var labelStep = 5;
	} else {
		var labelStep = 10;
	}
	this.yearLabels = {};
	for (year = this.minValue; year <= this.maxValue; year += labelStep) {
		this.yearLabels[year] = this.slider.appendChild( LABEL(null, SPAN(null, year)) );
	}
	this.slider.appendChild(this.marker);

	var sliderContainer = DIV( {'class': 'slider_container'},
		DIV( {'class': 'slider_arrow'}, this.slider)
	);

	swapDOM(selectBox, sliderContainer);
	this.placeYearLabels();
	this.placeMarker();

	addToCallStack(window, 'onresize', function() {
		slider.placeYearLabels();
		slider.placeMarker();
	 });

	addToCallStack(document, 'onmousemove', function(e) {
		if (!slider.isDragging) return;
		if (!e) e = window.event;
		var year = slider.draggedFromYear + (e.clientX - slider.draggedFromX) / slider.scale;
		slider.setMarker(year);
	});
	addToCallStack(document, 'onmouseup', function() {
		slider.isDragging = false;
		document.onselectstart = document.prevOnselectstart;
	});
}
SliderController.prototype.placeYearLabels = function() {
	this.scale = this.slider.offsetWidth / this.valueRange; /* pixels per year */

	for (year in this.yearLabels) {
		this.yearLabels[year].style.left = this.scale * (year - this.minValue) + 'px';
	}
}
SliderController.prototype.placeMarker = function() {
	this.marker.style.left = this.scale * (this.value - this.minValue) + 'px';
}
SliderController.prototype.setMarker = function(year) {
	year = Math.max(this.minValue, year);
	year = Math.min(year, this.maxValue);
	this.value = year;
	this.input.value = year;
	this.placeMarker();
}