$(document).ready( function() {
	var tracker = $("#tracker");
	var bar = $("#bar");
	var content = $("#content");
	var mask = $("#mask");
	var dir = 0;
	var moving = false;
	
	var maskHeight = mask.height();
	var contentHeight = content.height();
	var trackerHeight = tracker.height();
	var percentage;
	if ($.browser.mozilla) {
		content.css( { 'MozUserSelect' : 'none' } );
		tracker.css( { 'MozUserSelect' : 'none' } );
	} else if ($.browser.msie) {
		$(content).bind('selectstart.disableTextSelect', function() { return false; });
		$(tracker).bind('selectstart.disableTextSelect', function() { return false; });
		if( $.browser.version < 7 ) {
			tracker.css( { 'background': '#9d9d9d' } );
		}
	} else {
		$(content).bind('mousedown.disableTextSelect', function() { return false; });
		$(tracker).bind('mousedown.disableTextSelect', function() { return false; });
	}

	//adding the event listerner for Mozilla
    if(window.addEventListener) document.addEventListener('DOMMouseScroll', moveScroll, false);
	//for IE/OPERA etc
    document.onmousewheel = moveScroll;
	
	function moveScroll( event ) {
		var delta = 0; 		
		if (!event) 
			event = window.event;  

		// normalize the delta
		if( event.wheelDelta ) {
			// IE & Opera
			delta = event.wheelDelta / 120;
			if( delta < 0 ) {
				dir += 10;
			} else if( delta > 0 ) {
				dir -= 10;
			} 
			if( dir > 131 )
				dir = 131;
			else if( dir < 0 )
				dir = 0;
		} else if( event.detail ) { // W3C
			delta = -event.detail / 3;
			if( delta < 0 ) {
				dir += 10;
			} else if( delta > 0 ) {
				dir -= 10;
			} 
			if( dir > 131 )
				dir = 131;
			else if( dir < 0 )
				dir = 0;
		}		
		percentage = ( tracker.position()['top'] / ( maskHeight - trackerHeight ) ) * ( contentHeight - maskHeight );		
		percentage = Math.round( percentage ) * -1;	
		tracker.css( 'top', dir);
		content.css( 'top', percentage);
		//console.debug( tracker.css( 'top' ).split("px")[0] );
	}
	tracker.mousedown( function( e ) {
		if( contentHeight < maskHeight )
			moving = false;
		else
			moving = true;

		var trackerY = tracker.position()['top'];
		
		maxTop = bar.height() - tracker.height();
		mouseY = e.pageY - trackerY;

		$().mousemove( function( e ) {
			if( moving == true ) {
				percentage = ( tracker.position()['top'] / ( maskHeight - trackerHeight ) ) * ( contentHeight - maskHeight );
				y = e.pageY - mouseY;
				percentage = Math.round( percentage ) * -1;
				if( y <= maxTop && y >= 0 ) {
					tracker.css("top", y );
					content.css("top", percentage );
				} else if( tracker.position()["top"] > maxTop ) {
					tracker.css("top", maxTop );
				} else if( tracker.position()["top"] < 0 ) {
					tracker.css("top", 0 );
				}
			}
		});// end move
		
	});
	
	$().mouseup( function() {
		if( moving == true ) {
			moving = false;
			dir = parseInt(tracker.css( 'top' ).split("px")[0]);
		}
	});// end mouseup
});