$.fn.slider = function( opt ) {
	var	leftBound, rightBound,
		display = opt.display && $( opt.display )[0],
		reset = opt.reset && $( opt.reset );
	
	// get the slider values
	var	value = initialVal = opt.value || 0,
		min = opt.min || 0, max = opt.max || 100,
		step = opt.step || 1,
		width = opt.width || 200,
		range = max - min, initial = (value - min) / range;
	
	// create the 4 parts
	var	container = $('<div/>').addClass('slider_container').width( width ).appendTo(this),
		left = $('<div/>').addClass('slider_left').appendTo(container),
		right = $('<div/>').addClass('slider_right').appendTo(container),
		selector = $('<div/>').addClass('slider_selector').appendTo(container);
	
	// resets the slider to its original state
	var resetState = function() {
		value = initialVal;
		updatePosition( initial * width );
		display && (display.value = value);
	}
	
	// updates the sliders based on an offset value
	var updatePosition = function( x ) {
		selector[0].style.left = x - 7 + 'px';
		left[0].style.width = x + 'px';
		
		right[0].style.width = (width - x)  + 'px';
		right[0].style.left = x + 'px';
	}
	
	// get the min and max positions
	// bind the movement listener to the mouse
	var startDrag = function() {
		leftBound = container.offset().left;
		rightBound = leftBound + (width);
		
		$(window).mousemove( mousemove );
	}
	
	// moves the slider depending on the mouse's X position
	var moveDrag = function( x ) {
		x -= leftBound;
		if ( x < 0 ) { x = 0; }
		if ( x > rightBound - leftBound ) { x = rightBound - leftBound; }
		
		// calculate the new value based on the slider position
		value = Math.floor( ( ( x / width) * range) + min );
		
		opt.callback && opt.callback( value ); // execute the callback function
		display && (display.value = value);
		
		// update the position of the sliders
		updatePosition(x);
	}
	
	// set the initial state
	
	
	
	/* Events */
	
	// starts the drag operation
	var mousemove = function( e ) {
		moveDrag( e.clientX );
	}
	
	// unbind the two mouse functions from the window
	var mouseup = function( e ) {
		$(window)
			.unbind('mousemove', mousemove)
			.unbind('mousemove', mouseup);
	}
	
	// start the slider dragging when the container is clicked
	container.mousedown(function( e ) {
		e.preventDefault();
		startDrag();
		// move the slider into place
		moveDrag( e.clientX );
		
		$(window).mouseup( mouseup );
	});
	
	// reset the slider when the reset element is clicked
	reset && reset.click( function() {
		resetState();
		opt.callback && opt.callback( value );
	});
	
	// set the initial state
	resetState();
}