// TIMELINE SLIDER
function timelineHandle( id, width, maxvalue ) {
	this.handle = $(id, timeline.view);
	this.max = maxvalue;
	this.value( maxvalue );
 
	this.handle.css( 'width', width + 'px');
	/* force 'right' property to 'auto' so we can check in doDragLeft if we have fixed the
	 * right side of the handle */
	this.handle.css( 'right', 'auto' );
 
	// this is required to keep context
	var self = this;
 
	this.handle.mousedown(function(e) {
		return self.mouseDown(e);
	});
 
	// Resize Handle Left
	$('.resizehandleleft').mousedown(function(e) {
		return self.resize(e, 'left');
	});
 
	$('.resizehandleright').mousedown(function(e) {
		return self.resize(e, 'right');
	});
}
 
timelineHandle.prototype = {
	mouseDown: function(e) {
		this.initialpos = e.pageX;
 
		// these are required to keep context
		var self = this;
		this.mouseMoveDelegate = function(e) {
			return self.mouseMove(e);
		};
		this.mouseUpDelegate = function(e) {
			return self.mouseUp(e);
		};
		$(document)
			.bind( 'mousemove.timeline', this.mouseMoveDelegate )
			.bind( 'mouseup.timeline', this.mouseUpDelegate );
		return false;
	},
	mouseMove: function(e) {
		var new_value = this.value() + (e.pageX - this.initialpos);
		new_value = ( new_value < 0 ) ? 0 : new_value;
		new_value = ( new_value > this.max ) ? this.max : new_value;
		if ( new_value != this.value() ) {
			this.initialpos = e.pageX;
			this.value( new_value );
		}
		return false;
	},
	mouseUp: function(e) {
		$(document).unbind('mousemove.timeline', this.mouseMoveDelegate).unbind('mouseup.timeline', this.mouseUpDelegate);
		timeline.change();
		return false;
	},
	value: function(value) {
	       if ( arguments.length ) {
		       value = ( value < 0 ) ? 0 : value;
		       value = ( value > this.max ) ? this.max : value;
		       this.val = parseInt( value, 10 );
		       this.handle.css( 'left', this.val + 'px' );
	       }
	       return this.val;
	},
	width: function() {
		return this.handle.width();
	},
	resize: function(e, direction) {
		//debugger;
		this.initialSize = this.handle.width();
		this.firstMousePos = e.clientX;
 
		// setup functions to keep context
		var self = this;
		if ( direction == 'left' ) {
			this.dragDelegate = function(e) {
				return self.doDragLeft(e);
			};
		}
		else {
			this.dragDelegate = function(e) {
				return self.doDragRight(e);
			};
		}
		this.endDragDelegate = function(e) {
			return self.endDrag(e);
		};
		$(document).bind('mousemove.timeline', this.dragDelegate)
			.bind('mouseup.timeline', this.endDragDelegate);
		return false;	
	},
	doDragLeft: function(e) {
		var h = this.handle;
		var track = h.parents('.track');
		// fix the right side (only do this if we haven't already done it)
		if ( h.css('right') == 'auto' ) {
			h.css({
				'left':	'auto',
				'right': track.width() - ( parseInt(h.css('left'), 10) + h.width() )
			});
		}
 
		// Set Loupe Width. Min 20, Max 200, no spilling to the left
		h.css( 'width',
			Math.min(
				Math.max( this.initialSize - (e.clientX - this.firstMousePos), 20 ),
				Math.min( track.width() - parseInt(h.css('right'),10 ), 200 )
			)
		);
 
		return false;
	},
	doDragRight: function(e) {
		var h = this.handle;
		var track = h.parents('.track');
		// fix the left side
		h.css({
			'left': h.offset().left - track.offset().left,
			'right': 'auto'
		});
 
		// Set Loupe Width. Min 20, Max 200, no spilling to the right
		h.css( 'width',
			Math.min(
				Math.max( this.initialSize + (e.clientX - this.firstMousePos), 20),
				Math.min( track.width() - parseInt(h.css('left'), 10), 200 )
			)
		);
 
		return false;
	},
	endDrag: function(e) {
		// Reset to using 'left'.
		this.handle.css({
			'left':	this.handle.offset().left - $('.track').offset().left,
			'right': 'auto'
		});
 
		// update slider max value for the new handle width
		this.max = Math.min( $('.timeline').width(), $('.years').width() ) - this.handle.width();
 
		// update slider value
		this.value( parseInt( this.handle.css('left'), 10 ) );
		timeline.change();
 
		$(document).unbind('mousemove.timeline').unbind('mouseup.timeline');
 
		return false;
	}
};