var startX       = 0;
var maxX         = 0;
var offsetX      = 0;
var imageWidth   = 235;
var imageSpacing = 20;
var trackWidth = 0;
var travelDistance = 0;
var sliderFace;

function initSlider(){
	document.onmousedown = onSliderMouseDown;
	document.onmouseup =  onSliderMouseUp;

}

function onSliderMouseDown(e){
	if (e == null) e = window.event;
	sliderFace = e.target != null ? e.target : e.srcElement;

	if ((e.button == 1 && window.event != null || e.button == 0) && (sliderFace.className == 'sliderface')){
		var totalImages = numChildren('slideritems', 'li');
		trackWidth = document.getElementById('track').offsetWidth;
		travelDistance = (totalImages*(imageWidth+imageSpacing))-trackWidth
		travelDistance -= imageSpacing;
		startX  = e.clientX;
		offsetX = getNumber(sliderFace.style.left);
		maxX    = trackWidth-sliderFace.offsetWidth;
		document.onmousemove = onSliderMouseMove;
		document.body.focus();
		document.onselectstart = function () { return false; };
		sliderFace.ondragstart = function () { return false; };
		return false;
	}
}

function onSliderMouseUp(e){
	if (sliderFace != null){
		document.onmousemove   = null;
		document.onselectstart = null;
		sliderFace.ondragstart = null;
		sliderFace             = null;
		return false;	
	}
}

function onSliderMouseMove(e){
	if (e == null) var e = window.event;
	var x = (offsetX + e.clientX - startX);
	if(x < 0) x = 0;
	else if(x > maxX) x = maxX;
	sliderFace.style.left =  x + 'px';
	var progress = x/trackWidth;
	document.getElementById('slideritemlist').style.left = -(travelDistance*progress)+'px';
}

function $(id){
	return document.getElementById(id);
}

function getNumber(value){
	var n = parseInt(value);
	return n == null || isNaN(n) ? 0 : n;
}

function numChildren(parent, child){
	return document.getElementById(parent).getElementsByTagName(child).length;
}


initSlider();