var DragTracker = function( elemToWatch, callback ) {
	this.elemToWatch = elemToWatch;
	this.callback = callback;

	this.determineBrowser();

	var thisA = this;
	var mousedownCallback = function( event ) { thisA.dragStart( event ); };
	this.attachListener( elemToWatch, "mousedown", mousedownCallback, false );

	this.enabled = true;
}

DragTracker.prototype.determineBrowser = function() {
	var ua, s, i;

	this.isIE    = false;
	this.isNS    = false;
	this.version = null;

	ua = navigator.userAgent;

	s = "MSIE";
	if ((i = ua.indexOf(s)) >= 0) {
		this.isIE = true;
		this.version = parseFloat(ua.substr(i + s.length));
		return;
	}

	s = "Netscape6/";
	if ((i = ua.indexOf(s)) >= 0) {
		this.isNS = true;
		this.version = parseFloat(ua.substr(i + s.length));
		return;
	}

	// Treat any other "Gecko" browser as NS 6.1.

	s = "Gecko";
	if ((i = ua.indexOf(s)) >= 0) {
		this.isNS = true;
		this.version = 6.1;
		return;
	}

}

DragTracker.prototype.attachListener = function( elem, eventName, callback ) {
	if (this.isIE) {
		elem.attachEvent( "on" + eventName, callback, true );
	}
	if (this.isNS) {
		elem.addEventListener( eventName, callback, true );
	}
};

DragTracker.prototype.detachListener = function( elem, eventName, callback ) {
	if (this.isIE) {
		elem.detachEvent( "on" + eventName, callback );
	}
	if (this.isNS) {
		elem.removeEventListener( eventName, callback, true );
	}
};	
	

DragTracker.prototype.dragStart = function( event ) {
	if( ! this.enabled ) return;

	var el;
	var x, y;

 	// Get cursor position with respect to the page.

	if (this.isIE) {
		x = window.event.clientX + document.documentElement.scrollLeft
			+ document.body.scrollLeft;

		y = window.event.clientY + document.documentElement.scrollTop
			+ document.body.scrollTop;
	}
	if (this.isNS) {
		x = event.clientX + window.scrollX;
		y = event.clientY + window.scrollY;
	}
	
	// Save starting positions of cursor and element.

	this.cursorStartX = x;
	this.cursorStartY = y;

	this.cursorLastX = x;
	this.cursorLastY = y;

	var thisA = this;
	if( this.mousemoveCallback ) 
		this.detachListener( document, "mousemove", this.mousemoveCallback );
	if( this.mouseupCallback )
		this.detachListener( document, "mouseup", this.mouseupCallback );
	this.mousemoveCallback = function( event ) { thisA.dragGo( event ); };
	this.mouseupCallback = function( event ) { thisA.dragStop( event ); };
	this.attachListener( document, "mousemove", this.mousemoveCallback );
	this.attachListener( document, "mouseup", this.mouseupCallback );

	// Capture mousemove and mouseup events on the page.

	if (this.isIE) {
		window.event.cancelBubble = true;
		window.event.returnValue = false;
	}
	if (this.isNS) {
		event.preventDefault();
	}

};

DragTracker.prototype.dragGo = function( event ) {
	if( ! this.enabled ) return;
	var x, y;

	// Get cursor position with respect to the page.

	if (this.isIE) {
		x = window.event.clientX + document.documentElement.scrollLeft
			+ document.body.scrollLeft;
		y = window.event.clientY + document.documentElement.scrollTop
			+ document.body.scrollTop;
	}
	if (this.isNS) {
		x = event.clientX + window.scrollX;
		y = event.clientY + window.scrollY;
	}

	this.callback( x - this.cursorLastX, y - this.cursorLastY );
	this.cursorLastX = x;
	this.cursorLastY = y;

	if (this.isIE) {
		window.event.cancelBubble = true;
		window.event.returnValue = false;
	}
	if (this.isNS)
		event.preventDefault();

};

DragTracker.prototype.dragStop = function( event ) {
	// Stop capturing mousemove and mouseup events.

	var thisA = this;

	this.detachListener( document, "mousemove", this.mousemoveCallback );
	this.detachListener( document, "mouseup", this.mouseupCallback );
	this.mousemoveCallback = null;
	this.mouseupCallback = null;

	if (this.isIE) {
		window.event.cancelBubble = true;
		window.event.returnValue = false;
	}
	if (this.isNS) {
		event.preventDefault();
	}

};

DragTracker.prototype.enable = function() {
	this.enabled = true;
};

DragTracker.prototype.disable = function() {
	this.enabled = false;
};