/**
	It is used to create custom scroll div without using default window scroll bar
	@authur Paddy Tsang
*/
ScrollPane = {
	addTrggr : function(elm,eventname,func){if(!ScrollPane.addChckTrggr(elm,eventname,func)&&elm.attachEvent) {elm.attachEvent('on'+eventname,func);}},

	addChckTrggr : function(elm,eventname,func){if(elm.addEventListener){elm.addEventListener(eventname,func,false);window.addEventListener("unload",function(){ScrollPane.remTrggr(elm,eventname,func)},false);return true;} else return false;},

	remTrggr : function(elm,eventname,func){if(!ScrollPane.remChckTrggr(elm,eventname,func)&&elm.detachEvent) elm.detachEvent('on'+eventname,func);},

	remChckTrggr : function(elm,eventname,func){if(elm.removeEventListener){elm.removeEventListener(eventname,func,false);return true;} else return false;},
	
	getMouseCoordinate : function (ev){
		if(ev.pageX || ev.pageY){
			return {x:ev.pageX, y:ev.pageY};
		}
		return {
			x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
			y:ev.clientY + document.body.scrollTop  - document.body.clientTop
		}
	},

	getObjectPosition : function (target){
		var left = 0;
		var top  = 0;

		while (target.offsetParent){
			left += target.offsetLeft;
			top  += target.offsetTop;
			target  = target.offsetParent;
		}

		left += target.offsetLeft;
		top  += target.offsetTop;

		return {x:left, y:top};
	},
	
	getMouseOffset : function (target, ev){
		ev = ev || window.event;

		var docPos    = ScrollPane.getObjectPosition(target);
		var mousePos  = ScrollPane.getMouseCoordinate(ev);
		return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};
	}

};

/*	function VScrollPane(divID, width, height,content)
	{
		var dDv = $('#'+divID).get(0);
		var checkedElement = null;
		var originOffset = 0;
		var originMousePos = 0;
		
		var paneCounter = (function() 
		{ 
			if ( typeof this.count == 'undefined' ) {
					// It has not... perform the initilization
					this.count = 0;
				}

			function counter(){return count;} 
			function add(){count++;} 
			return{ counter : counter, add : add};}
		)();
		
		function init()
		{
			var offset;
			$('#'+divID).html('');
			$('#'+divID).append('<div class="VScrollPaneWrapper"><div class="VScrollPaneContent"></div><div class="VScrollPaneScrollDiv"><div class="VScrollPaneScrollBar"><div class="VScrollBarTop"/><div class="VScrollBarBottom"/></div></div></div>');
			$('#'+divID).css({"width":width,"height":height});
			$('#'+divID + ' .VScrollPaneContent').html(content);
			$('#'+divID + ' .VScrollPaneContent').css({"width":width- $('#'+divID + ' .VScrollPaneScrollDiv').width()});
			if($('#'+divID + ' .VScrollPaneContent').height() >0)
				offset= Math.ceil((height/$('#'+divID + ' .VScrollPaneContent').height())*$('#'+divID + ' .VScrollPaneScrollDiv').height());
			else 
				offset = 0;
			
			$('#'+divID + ' .VScrollPaneScrollBar').css({"height":offset});
			
			var scrollb = $('#'+divID + ' .VScrollBarBottom').height();
			if(offset >= $('#'+divID).height())
			{
				$('#'+divID + ' .VScrollPaneScrollDiv').css({"display":"none"});
				$('#'+divID + ' .VScrollPaneContent').css({"width":width});
			}
			else if(offset > scrollb)
			{
				$('#'+divID + ' .VScrollBarTop').css({"height":offset-scrollb,"width":18});
				$('#'+divID + ' .VScrollBarBottom').css({"height":scrollb,"width":18,"top":offset-scrollb});
			}
			else if(offset > 0)
			{
				$('#'+divID + ' .VScrollBarTop').css({"height":offset,"width":18});
				$('#'+divID + ' .VScrollBarBottom').css({"height":0,"width":18,"top":0});
			}
			else
			{
				$('#'+divID + ' .VScrollPaneScrollDiv').css({"display":"none"});
				$('#'+divID + ' .VScrollPaneContent').css({"width":width});
			}
			//$('#'+divID + ' .ScrollPaneScrollDiv').css({"right":$('#'+divID + ' .ScrollPaneScrollDiv').width()});
			
		}
		function mWheelProc(e)
		{
			var offset 
			if($('#'+divID + ' .VScrollPaneContent').height() >0)
				offset= ($('#'+divID + ' .VScrollPaneContent').height()-height)/($('#'+divID + ' .VScrollPaneScrollDiv').height()-$('#'+divID + ' .VScrollPaneScrollBar').height());
			else 
				offset = 0;
			var delta =0;
			if(!e) e=window.event;
			if(e.wheelDelta) delta=-e.wheelDelta;
			if(e.detail) delta=e.detail;
			delta = delta > 0? 3:-3;
			var top = $('#'+divID + ' .VScrollPaneScrollBar').get(0).offsetTop +delta;
			if(top < 0)
				top = 0;
			if(top + $('#'+divID + ' .VScrollPaneScrollBar').height() > $('#'+divID + ' .VScrollPaneScrollDiv').height())
				top = $('#'+divID + ' .VScrollPaneScrollDiv').height()- $('#'+divID + ' .VScrollPaneScrollBar').height();
			$('#'+divID + ' .VScrollPaneScrollBar').css({"top":top});
			$('#'+divID + ' .VScrollPaneContent').css({"top":top * -offset});

			//alert(delta);
		}
		this.Create = function()
		{

			init();
			//paneCounter.add();
			//alert(paneCounter.counter());
			//mouseEvent
			if(!ScrollPane.addChckTrggr(dDv,'mousewheel',mWheelProc)||!ScrollPane.addChckTrggr(dDv,'DOMMouseScroll',mWheelProc)){dDv.onmousewheel=mWheelProc;};
			$('#'+divID+' .VScrollPaneScrollBar').mousedown(
				function(event)
				{
					checkedElement = this;
					//originOffset = event.pageY-$(checkedElement).offset().top;
					originMousePos = event.pageY;
					//alert($(this).attr("class"));
				}
			);
			$().mouseup(
				function(){checkedElement = null;}
			).mousemove(
				function(event)
				{
					//alert($(checkedElement).attr("class"));
					if(checkedElement != null)
					{
						var pos = $('#'+divID + ' .VScrollPaneScrollBar').get(0).offsetTop + event.pageY - originMousePos;// + originOffset;
						if(pos < 0 )
							pos = 0;
						if(pos + $('#'+divID + ' .VScrollPaneScrollBar').height() > $('#'+divID + ' .VScrollPaneScrollDiv').height())
							pos = $('#'+divID + ' .VScrollPaneScrollDiv').height() - $('#'+divID + ' .VScrollPaneScrollBar').height();
						//alert(pos);
						$(checkedElement).css({"top":pos});
						originMousePos = event.pageY;
						
						if($('#'+divID + ' .VScrollPaneContent').height() >0)
							offset= ($('#'+divID + ' .VScrollPaneContent').height()-height)/($('#'+divID + ' .VScrollPaneScrollDiv').height()-$('#'+divID + ' .VScrollPaneScrollBar').height());
						else 
							offset = 0;
							
						$('#'+divID + ' .VScrollPaneContent').css({"top":pos * -offset});
					}
				}
			);
		}
		this.getScrollBarPos = function()
		{
			return {"top":$('#'+divID + ' .VScrollPaneScrollBar').offset().top,"left":$('#'+divID + ' .VScrollPaneScrollBar').offset().left};
		}
		this.setScrollBarPos = function(top)
		{
			if(top + $('#'+divID + ' .VScrollPaneScrollBar').height() > $('#'+divID + ' .VScrollPaneScrollDiv').height())
				$('#'+divID + ' .VScrollPaneContent').css({"top": $('#'+divID + ' .VScrollPaneScrollDiv').height() - $('#'+divID + ' .VScrollPaneScrollBar').height()});
			else if(top < 0)
				$('#'+divID + ' .VScrollPaneContent').css({"top": 0});
			else
				$('#'+divID + ' .VScrollPaneContent').css({"top": top});
		}		
		
		
		this.setScrollBarImgTop = function(path)
		{
			var color = $('#'+divID + ' .VScrollPaneScrollDiv').css("background-color");
			$('#'+divID + ' .VScrollPaneScrollBar').css({"background-color":color});
			$('#'+divID + ' .VScrollBarTop').css({"background-image":"transparent url("+path+")"})
			
		}
		this.setScrollBarImgBottom = function(path)
		{
			var color = $('#'+divID + ' .VScrollPaneScrollDiv').css("background-color");
			$('#'+divID + ' .VScrollPaneScrollBar').css({"background-color":color});
			
		}
	};
	
	
	function HScrollPane(divID, width, height,content)
	{
		var originMousePos = 0;
		var checkedElement = null;
		var dDv = $('#'+divID).get(0);
		function init()
		{
			var offset;
			$('#'+divID).html('');
			$('#'+divID).append('<div class="HScrollPaneWrapper"><div class="HScrollPaneContent"></div><div class="HScrollPaneScrollDiv"><div class="HScrollPaneScrollBar"><div class="HScrollBarLeft"/><div class="HScrollBarRight"/></div></div></div>');
			$('#'+divID).css({"width":width,"height":height});
			$('#'+divID + ' .HScrollPaneContent').html(content);
			$('#'+divID + ' .HScrollPaneContent').css({"height":height- $('#'+divID + ' .HScrollPaneScrollDiv').height()});
			
			if($('#'+divID + ' .HScrollPaneContent').width() >0)
				offset= Math.ceil((width/$('#'+divID + ' .HScrollPaneContent').width())*$('#'+divID + ' .HScrollPaneScrollDiv').width());
			else 
				offset = 0;
				
			
			$('#'+divID + ' .HScrollPaneScrollBar').css({"width":offset});
			
			var scrollb = $('#'+divID + ' .HScrollBarRight').width();
			if(offset >= $('#'+divID).width())
			{
				$('#'+divID + ' .HScrollPaneScrollDiv').css({"display":"none"});
				$('#'+divID + ' .HScrollPaneContent').css({"height":height});
			}
			else if(offset > scrollb)
			{
				$('#'+divID + ' .HScrollBarLeft').css({"height": 18,"width":offset-scrollb});
				$('#'+divID + ' .HScrollBarRight').css({"height":18,"width":scrollb,"left":offset-scrollb});
			}
			else if(offset > 0)
			{
				$('#'+divID + ' .HScrollBarLeft').css({"height":18,"width":offset});
				$('#'+divID + ' .HScrollBarRight').css({"height":18,"width":0,"left":0});
			}
			else
			{
				$('#'+divID + ' .HScrollPaneScrollDiv').css({"display":"none"});
				$('#'+divID + ' .HScrollPaneContent').css({"height":height});
			}
		}
		function mWheelProc(e)
		{
			var offset 
			if($('#'+divID + ' .HScrollPaneContent').width() >0)
				offset= ($('#'+divID + ' .HScrollPaneContent').width()-width)/($('#'+divID + ' .HScrollPaneScrollDiv').width()-$('#'+divID + ' .HScrollPaneScrollBar').width());
			else 
				offset = 0;
			var delta =0;
			if(!e) e=window.event;
			if(e.wheelDelta) delta=-e.wheelDelta;
			if(e.detail) delta=e.detail;
			delta = delta > 0? 3:-3;
			var left = $('#'+divID + ' .HScrollPaneScrollBar').get(0).offsetLeft +delta;
			if(left < 0)
				left = 0;
			if(left + $('#'+divID + ' .HScrollPaneScrollBar').width() > $('#'+divID + ' .HScrollPaneScrollDiv').width())
				left = $('#'+divID + ' .HScrollPaneScrollDiv').width()- $('#'+divID + ' .HScrollPaneScrollBar').width();
			$('#'+divID + ' .HScrollPaneScrollBar').css({"left":left});
			$('#'+divID + ' .HScrollPaneContent').css({"left":left * -offset});

			//alert(delta);
		}
		this.Create = function()
		{
			init();
			
			if(!ScrollPane.addChckTrggr(dDv,'mousewheel',mWheelProc)||!ScrollPane.addChckTrggr(dDv,'DOMMouseScroll',mWheelProc)){dDv.onmousewheel=mWheelProc;};
			$('#'+divID+' .HScrollPaneScrollBar').mousedown(
				function(event)
				{
					checkedElement = this;
					originMousePos = event.pageX;
				}
			);
			$().mouseup(
				function(){checkedElement = null;}
			).mousemove(
				function(event)
				{
					//alert($(checkedElement).attr("class"));
					if(checkedElement != null)
					{
						var pos = $('#'+divID + ' .HScrollPaneScrollBar').get(0).offsetLeft + event.pageX - originMousePos;// + originOffset;
						if(pos < 0 )
							pos = 0;
						if(pos + $('#'+divID + ' .HScrollPaneScrollBar').width() > $('#'+divID + ' .HScrollPaneScrollDiv').width())
							pos = $('#'+divID + ' .HScrollPaneScrollDiv').width() - $('#'+divID + ' .HScrollPaneScrollBar').width();
						//alert(pos);
						$(checkedElement).css({"left":pos});
						originMousePos = event.pageX;
						
						if($('#'+divID + ' .HScrollPaneContent').width() >0)
							offset= ($('#'+divID + ' .HScrollPaneContent').width()-width)/($('#'+divID + ' .HScrollPaneScrollDiv').width()-$('#'+divID + ' .HScrollPaneScrollBar').width());
						else 
							offset = 0;
							
						$('#'+divID + ' .HScrollPaneContent').css({"left":pos * -offset});
					}
				}
			);
		}
		this.getScrollBarPos = function()
		{
			return {"top":$('#'+divID + ' .HScrollPaneScrollBar').offset().top,"left":$('#'+divID + ' .HScrollPaneScrollBar').offset().left};
		}
		this.setScrollBarPos = function(left)
		{
			if(left + $('#'+divID + ' .HScrollPaneScrollBar').width() > $('#'+divID + ' .HScrollPaneScrollDiv').width())
				$('#'+divID + ' .HScrollPaneContent').css({"left": $('#'+divID + ' .HScrollPaneScrollDiv').width() - $('#'+divID + ' .HScrollPaneScrollBar').width()});
			else if(left < 0)
				$('#'+divID + ' .HScrollPaneContent').css({"left": 0});
			else
				$('#'+divID + ' .HScrollPaneContent').css({"left": left});
		}
	};*/
	/**
		ScrollPane Constructor
		@parm divID the id of the div block
		@parm width, the width of the scroll pane
		@parm height the height of the scroll pane
		@parm content the content you want to display
		@parm isHBar show the horizontal bar
		@parm isVBar show the verticle bar
	*/
	function HVScrollPane(divID, width, height,content)
	{
		var checkedHElement = null;
		var checkedVElement = null;
		var originMousePos = 0;
		var scrollbarHeight=0;
		var scrollbarWidth=0;
		var dDv = $('#'+divID).get(0);
		var HOffset = 0;
		var VOffset = 0;
		//default: both horizontal and vertical scroll bar will be shown
		var isHBar = true;
		var isVBar = true;
		var isSelectTextScroll = false;
		if(arguments.length > 4)
		{
			isHBar = arguments[4];
		}
		if(arguments.length > 5)
		{
			isVBar = arguments[5];
		}
		
		//timer
		var timer = (function()
			{
				if ( typeof this.time == 'undefined' ) {
					// It has not... perform the initilization
					this.time = {};
				}
				function startTimer(name,fn,interval)
				{
					time[name] = setInterval(fn,interval);
				}
				function stopTimer(name)
				{
					clearInterval(time[name]);
					delete time[name];
				}
				return {startTimer:startTimer,stopTimer:stopTimer};
			}
		)();
		/**
			private function: initialize the parameter and UI elements
		*/
		function init()
		{
			var offset;
			$('#'+divID).html('');
			$('#'+divID).append('<div class="HVScrollPaneWrapper"><div class="HVScrollContentWrapper"><div class="HVScrollPaneContent"/></div><div class="VScrollPaneScrollDiv"><div class="VScrollPaneScrollBar"><div class="VScrollBarTop"/><div class="VScrollBarBottom"/></div></div><div class="HScrollPaneScrollDiv"><div class="HScrollPaneScrollBar"><div class="HScrollBarLeft"/><div class="HScrollBarRight"/></div></div><div class="HVScrollBarCorner"/></div>');
			$('#'+divID).css({"width":width,"height":height});
			$('#'+divID + ' .HVScrollPaneContent').html(content);
			if($('#'+divID + ' .HVScrollPaneContent').width() > $('#'+divID).width() && isHBar)
			{
				scrollbarHeight = $('#'+divID + ' .HScrollPaneScrollDiv').height();
			}
			if ($('#'+divID + ' .HVScrollPaneContent').height() > $('#'+divID).height() && isVBar)
			{
				scrollbarWidth = $('#'+divID + ' .VScrollPaneScrollDiv').width();
			}
			if(scrollbarWidth > 0  && $('#'+divID + ' .HVScrollPaneContent').width() > $('#'+divID).width() - scrollbarWidth && isHBar)
				scrollbarHeight = $('#'+divID + ' .HScrollPaneScrollDiv').height();
			
			
			if(scrollbarHeight > 0 && $('#'+divID + ' .HVScrollPaneContent').height() > $('#'+divID).height()-scrollbarHeight  && isVBar)
				scrollbarWidth = $('#'+divID + ' .VScrollPaneScrollDiv').width();
			

			//create horizontal scroll bar if the content is too wide
			if(scrollbarHeight > 0)
			{
				if(scrollbarWidth > 0)
				{
					$('#'+divID + ' .HScrollPaneScrollDiv').css({"width":$('#'+divID + ' .HScrollPaneScrollDiv').width()-scrollbarWidth});
				}
				if($('#'+divID + ' .HVScrollPaneContent').width() >0)
					offset= Math.ceil(((width-scrollbarWidth)/($('#'+divID + ' .HVScrollPaneContent').width()))*$('#'+divID + ' .HScrollPaneScrollDiv').width());
				else 
					offset = 0;
				$('#'+divID + ' .HScrollPaneScrollBar').css({"width":offset});
				var scrollb = $('#'+divID + ' .HScrollBarRight').width();
				if(offset >= $('#'+divID).width())
				{
					$('#'+divID + ' .HScrollPaneScrollDiv').css({"display":"none"});
					$('#'+divID + ' .HScrollPaneContent').css({"height":height});
				}
				else if(offset > scrollb)
				{
					$('#'+divID + ' .HScrollBarLeft').css({"height": scrollbarHeight,"width":offset-scrollb});
					$('#'+divID + ' .HScrollBarRight').css({"height":scrollbarHeight,"width":scrollb,"left":offset-scrollb});
					$('#'+divID + ' .HVScrollPaneContent').css({"height":height-scrollbarHeight});
				}
				else if(offset > 0)
				{
					$('#'+divID + ' .HScrollBarLeft').css({"height":scrollbarHeight,"width":offset});
					$('#'+divID + ' .HScrollBarRight').css({"height":scrollbarHeight,"width":0,"left":0});
					$('#'+divID + ' .HVScrollPaneContent').css({"height":height-scrollbarHeight});
				}
				else
				{
					$('#'+divID + ' .HScrollPaneScrollDiv').css({"display":"none"});
					$('#'+divID + ' .HScrollPaneContent').css({"height":height});
				}
			}
			else
			{
				$('#'+divID + ' .HScrollPaneScrollDiv').css({"display":"none"});
				$('#'+divID + ' .HScrollPaneContent').css({"height":height});
			}
			
			//create verticle scrollbar if the content is too long
			if(scrollbarWidth > 0)
			{
				if(scrollbarHeight > 0)
				{
					$('#'+divID + ' .VScrollPaneScrollDiv').css({"height":$('#'+divID + ' .VScrollPaneScrollDiv').height()-scrollbarHeight});
				}
				if($('#'+divID + ' .HVScrollPaneContent').height() >0)
					offset= Math.ceil(((height-scrollbarHeight)/($('#'+divID + ' .HVScrollPaneContent').height()))*$('#'+divID + ' .VScrollPaneScrollDiv').height());
				else 
					offset = 0;
				
				
				
				$('#'+divID + ' .VScrollPaneScrollBar').css({"height":offset});
				var scrollb = $('#'+divID + ' .VScrollBarBottom').height();	
				
				
				
				if(offset >= $('#'+divID).height())
				{
					$('#'+divID + ' .VScrollPaneScrollDiv').css({"display":"none"});
					$('#'+divID + ' .HVScrollPaneContent').css({"width":width});
				}
				else if(offset > scrollb)
				{
					$('#'+divID + ' .VScrollBarTop').css({"height":offset-scrollb,"width":scrollbarWidth});
					$('#'+divID + ' .VScrollBarBottom').css({"height":scrollb,"width":scrollbarWidth,"top":offset-scrollb});
					$('#'+divID + ' .HVScrollPaneContent').css({"width":width-scrollbarWidth});
				}
				else if(offset > 0)
				{
					$('#'+divID + ' .VScrollBarTop').css({"height":offset,"width":scrollbarWidth});
					$('#'+divID + ' .VScrollBarBottom').css({"height":0,"width":scrollbarWidth,"top":0});
					$('#'+divID + ' .HVScrollPaneContent').css({"width":width-scrollbarWidth});
				}
				else
				{
					$('#'+divID + ' .VScrollPaneScrollDiv').css({"display":"none"});
					$('#'+divID + ' .VScrollPaneContent').css({"width":width});
				}
			}
			else
			{
				$('#'+divID + ' .VScrollPaneScrollDiv').css({"display":"none"});
				$('#'+divID + ' .VScrollPaneContent').css({"width":width});
			}
			
			$('#'+divID + ' .HVScrollBarCorner').css({"height":scrollbarHeight,"width":scrollbarWidth});
			$('#'+divID + ' .HVScrollContentWrapper').css({"height":height-scrollbarHeight,"width":width-scrollbarWidth});
			HOffset = ($('#'+divID + ' .HVScrollPaneContent').width()-(width-scrollbarWidth))/($('#'+divID + ' .HScrollPaneScrollDiv').width()-$('#'+divID + ' .HScrollPaneScrollBar').width());
			VOffset = ($('#'+divID + ' .HVScrollPaneContent').height()-(height-scrollbarHeight))/($('#'+divID + ' .VScrollPaneScrollDiv').height()-$('#'+divID + ' .VScrollPaneScrollBar').height());
		}
		/**
			private function: call back function for mouse wheel
		*/
		function mWheelProc(e)
		{
			var offset;
			if(scrollbarWidth > 0)
			{
				if($('#'+divID + ' .HVScrollPaneContent').height() >0)
					offset= VOffset;
				else 
					offset = 0;
			
				var delta =0;
				if(!e) e=window.event;
				if(e.wheelDelta) delta=-e.wheelDelta;
				if(e.detail) delta=e.detail;
				delta = delta > 0? 3:-3;
				var top = $('#'+divID + ' .VScrollPaneScrollBar').get(0).offsetTop +delta;
				if(top < 0)
					top = 0;
				if(top + $('#'+divID + ' .VScrollPaneScrollBar').height() > $('#'+divID + ' .VScrollPaneScrollDiv').height())
					top = $('#'+divID + ' .VScrollPaneScrollDiv').height()- $('#'+divID + ' .VScrollPaneScrollBar').height();
				$('#'+divID + ' .VScrollPaneScrollBar').css({"top":top});
				$('#'+divID + ' .HVScrollPaneContent').css({"top":top * -offset});
			}
			else if(scrollbarHeight > 0)
			{
				if($('#'+divID + ' .HVScrollPaneContent').width() >0)
					offset= HOffset;
				else 
					offset = 0;
			
				var delta =0;
				if(!e) e=window.event;
				if(e.wheelDelta) delta=-e.wheelDelta;
				if(e.detail) delta=e.detail;
				delta = delta > 0? 3:-3;
				var left = $('#'+divID + ' .HScrollPaneScrollBar').get(0).offsetLeft +delta;
				if(left < 0)
					left = 0;
				if(left + $('#'+divID + ' .HScrollPaneScrollBar').width() > $('#'+divID + ' .HScrollPaneScrollDiv').width())
					left = $('#'+divID + ' .HScrollPaneScrollDiv').width()- $('#'+divID + ' .HScrollPaneScrollBar').width();
				$('#'+divID + ' .HScrollPaneScrollBar').css({"left":left});
				$('#'+divID + ' .HVScrollPaneContent').css({"left":left * -offset});
			}
		}
		/**
			public function: create the Scroll Pane
		*/
		this.Create = function()
		{
			init();
			if(!ScrollPane.addChckTrggr(dDv,'mousewheel',mWheelProc)||!ScrollPane.addChckTrggr(dDv,'DOMMouseScroll',mWheelProc)){dDv.onmousewheel=mWheelProc;};
			$('#'+divID+' .HScrollPaneScrollBar').mousedown(
				function(event)
				{
					checkedHElement = this;
					originMousePos = event.pageX;
					return false;
				}
			);
			$('#'+divID+' .VScrollPaneScrollBar').mousedown(
				function(event)
				{
					checkedVElement = this;
					originMousePos = event.pageY;
					return false;
				}
			);
			$().mouseup(
				function()
				{
					checkedHElement = null; 
					checkedVElement = null;
					isSelectTextScroll = false;
					timer.stopTimer(divID+'SelectTextScroll');
					return false;
				}
			).mousemove(
				function(event)
				{
					if(checkedHElement != null)
					{
						var pos = $('#'+divID + ' .HScrollPaneScrollBar').get(0).offsetLeft + event.pageX - originMousePos;// + originOffset;
						if(pos < 0 )
							pos = 0;
						if(pos + $('#'+divID + ' .HScrollPaneScrollBar').width() > $('#'+divID + ' .HScrollPaneScrollDiv').width())
							pos = $('#'+divID + ' .HScrollPaneScrollDiv').width() - $('#'+divID + ' .HScrollPaneScrollBar').width();
						$(checkedHElement).css({"left":pos});
						originMousePos = event.pageX;
						
						if($('#'+divID + ' .HVScrollPaneContent').width() >0)
							offset= HOffset;
						else 
							offset = 0;
						
						$('#'+divID + ' .HVScrollPaneContent').css({"left":pos * -offset});
					}
					if(checkedVElement != null)
					{
						var pos = $('#'+divID + ' .VScrollPaneScrollBar').get(0).offsetTop + event.pageY - originMousePos;// + originOffset;
						if(pos < 0 )
							pos = 0;
						if(pos + $('#'+divID + ' .VScrollPaneScrollBar').height() > $('#'+divID + ' .VScrollPaneScrollDiv').height())
							pos = $('#'+divID + ' .VScrollPaneScrollDiv').height() - $('#'+divID + ' .VScrollPaneScrollBar').height();
						$(checkedVElement).css({"top":pos});
						originMousePos = event.pageY;
						
						if($('#'+divID + ' .HVScrollPaneContent').height() >0)
							offset= VOffset;
						else 
							offset = 0;
							
						$('#'+divID + ' .HVScrollPaneContent').css({"top":pos * -offset});
					}
					/*if(isSelectTextScroll)
					{
						timer.stopTimer(divID+'SelectTextScroll');
						var scrolly = 0;
						var scrollx = 0;
						if(event.pageY > ScrollPane.getObjectPosition($('#'+divID + ' .HVScrollContentWrapper').get(0)).y  + $('#'+divID + ' .HVScrollContentWrapper').height())
						{
							if(scrollbarWidth > 0)
								scrolly = 10;
						}
						else if(event.pageY < ScrollPane.getObjectPosition($('#'+divID + ' .HVScrollContentWrapper').get(0)).y)
						{
							if(scrollbarWidth > 0)
								scrolly = -10;
						}
						
						if(event.pageX > ScrollPane.getObjectPosition($('#'+divID + ' .HVScrollContentWrapper').get(0)).x  + $('#'+divID + ' .HVScrollContentWrapper').width())
						{
							if(scrollbarHeight > 0)
								scrollx = 10;
						}
						else if(event.pageX < ScrollPane.getObjectPosition($('#'+divID + ' .HVScrollContentWrapper').get(0)).x )
						{
							if(scrollbarHeight > 0)
								scrollx = -10;
						}
						//$('#testing').html(scrolly + ' '+event.pageY);
						if(scrolly != 0  || scrollx != 0)
						{
							timer.startTimer(divID+'SelectTextScroll',
								function()
								{
									var offset;
									if($('#'+divID + ' .HVScrollPaneContent').height() >0)
										offset= VOffset;
									else 
										offset = 0;
									
									var top = $('#'+divID + ' .VScrollPaneScrollBar').get(0).offsetTop +scrolly;
									//$('#testing').html(top +' ' + e.pageX+' '+scrolly+' '+ ScrollPane.getObjectPosition($('#'+divID + ' .VScrollPaneScrollBar').get(0)).y);
									if(top < 0)
										top = 0;
									if(top + $('#'+divID + ' .VScrollPaneScrollBar').height() > $('#'+divID + ' .VScrollPaneScrollDiv').height())
										top = $('#'+divID + ' .VScrollPaneScrollDiv').height()- $('#'+divID + ' .VScrollPaneScrollBar').height();
									$('#'+divID + ' .VScrollPaneScrollBar').css({"top":top});
									$('#'+divID + ' .HVScrollPaneContent').css({"top":top * -offset});
									
									if($('#'+divID + ' .HVScrollPaneContent').width() >0)
										offset= HOffset;
									else 
										offset = 0;
									var left = $('#'+divID + ' .HScrollPaneScrollBar').get(0).offsetLeft +scrollx;
									//$('#testing').html(left +' ' + e.pageX+' '+delta+' '+ScrollPane.getObjectPosition($('#'+divID + ' .HScrollPaneScrollBar').get(0)).x);
									if(left < 0)
										left = 0;
									if(left + $('#'+divID + ' .HScrollPaneScrollBar').width() > $('#'+divID + ' .HScrollPaneScrollDiv').width())
										left = $('#'+divID + ' .HScrollPaneScrollDiv').width()- $('#'+divID + ' .HScrollPaneScrollBar').width();
									$('#'+divID + ' .HScrollPaneScrollBar').css({"left":left});
									$('#'+divID + ' .HVScrollPaneContent').css({"left":left * -offset});
								},
								15
							);
						}
					}*/
					return false;
				}
			).mouseenter(
				function()
				{
					checkedHElement = null; 
					checkedVElement = null;
					//isSelectTextScroll = false;
					//timer.stopTimer(divID+'SelectTextScroll');
					return false;
				}
			);
			
			$('#'+divID + ' .VScrollPaneScrollDiv').mousedown(function(e)
				{
					timer.startTimer(divID+'VMousePress',
						function()
						{
							var offset;
							if(scrollbarWidth > 0)
							{
								if($('#'+divID + ' .HVScrollPaneContent').height() >0)
									offset= VOffset;
								else 
									offset = 0;
								
								var delta = 0;
								if(e.pageY > ScrollPane.getObjectPosition($('#'+divID + ' .VScrollPaneScrollBar').get(0)).y + $('#'+divID + ' .VScrollPaneScrollBar').height())
									delta = 10;
								else if (e.pageY < ScrollPane.getObjectPosition($('#'+divID + ' .VScrollPaneScrollBar').get(0)).y )
									delta = -10;
								
								var top = $('#'+divID + ' .VScrollPaneScrollBar').get(0).offsetTop +delta;
								
								//$('#testing').html(top +' ' + e.pageX+' '+delta+' '+ ScrollPane.getObjectPosition($('#'+divID + ' .VScrollPaneScrollBar').get(0)).y);
								if(top < 0)
									top = 0;
								if(top + $('#'+divID + ' .VScrollPaneScrollBar').height() > $('#'+divID + ' .VScrollPaneScrollDiv').height())
									top = $('#'+divID + ' .VScrollPaneScrollDiv').height()- $('#'+divID + ' .VScrollPaneScrollBar').height();
								$('#'+divID + ' .VScrollPaneScrollBar').css({"top":top});
								$('#'+divID + ' .HVScrollPaneContent').css({"top":top * -offset});
							}
						},
						15
					);
				}
			).mouseup(function()
				{
					timer.stopTimer(divID+'VMousePress');
				}
			).mouseout(function(){timer.stopTimer(divID+'VMousePress');});
			
			$('#'+divID + ' .HScrollPaneScrollDiv').mousedown(function(e)
				{
					timer.startTimer(divID+'HMousePress',
						function()
						{
							var offset;
							if(scrollbarHeight > 0)
							{
								if($('#'+divID + ' .HVScrollPaneContent').width() >0)
									offset= HOffset;
								else 
									offset = 0;
								
								var delta = 0;
								if(e.pageX > ScrollPane.getObjectPosition($('#'+divID + ' .HScrollPaneScrollBar').get(0)).x + $('#'+divID + ' .HScrollPaneScrollBar').width())
									delta = 10;
								else if (e.pageX < ScrollPane.getObjectPosition($('#'+divID + ' .HScrollPaneScrollBar').get(0)).x)
									delta = -10;
								
								var left = $('#'+divID + ' .HScrollPaneScrollBar').get(0).offsetLeft +delta;
								
								//$('#testing').html(left +' ' + e.pageX+' '+delta+' '+ScrollPane.getObjectPosition($('#'+divID + ' .HScrollPaneScrollBar').get(0)).x);
								if(left < 0)
									left = 0;
								if(left + $('#'+divID + ' .HScrollPaneScrollBar').width() > $('#'+divID + ' .HScrollPaneScrollDiv').width())
									left = $('#'+divID + ' .HScrollPaneScrollDiv').width()- $('#'+divID + ' .HScrollPaneScrollBar').width();
								$('#'+divID + ' .HScrollPaneScrollBar').css({"left":left});
								$('#'+divID + ' .HVScrollPaneContent').css({"left":left * -offset});
							}
						},
						15
					);
				}
			).mouseup(function()
				{
					timer.stopTimer(divID+'HMousePress');
				}
			).mouseout(function(){timer.stopTimer(divID+'HMousePress');});
			
			/*$('#'+divID + ' .HVScrollContentWrapper').mousedown(function()
				{
					isSelectTextScroll = true;
				}
			).mouseenter(
				function()
				{
					timer.stopTimer(divID+'SelectTextScroll');
				}
			);*/
			
			//$('#'+divID + ' .HVScrollPaneWrapper').mousemove(function(){return false;})
			
		}
		/**
			public function: get the position of the scroll bar
			@return top: top position of the verticle scroll bar, left: left position of the horizontal scroll bar
		*/
		this.getScrollBarPos = function()
		{
			return {"top":$('#'+divID + ' .VScrollPaneScrollBar').offset().top,"left":$('#'+divID + ' .HScrollPaneScrollBar').offset().left};
		}
		/**
			public function: set the postion of the scroll bar
			@parm top the top position of the verticle scroll bar
			@parm left the left position of the horizonal scroll bar
		*/
		this.setScrollBarPos = function(top,left)
		{
			if(left + $('#'+divID + ' .HScrollPaneScrollBar').width() > $('#'+divID + ' .HScrollPaneScrollDiv').width())
				$('#'+divID + ' .HScrollPaneContent').css({"left": $('#'+divID + ' .HScrollPaneScrollDiv').width() - $('#'+divID + ' .HScrollPaneScrollBar').width()});
			else if(left < 0)
				$('#'+divID + ' .HScrollPaneContent').css({"left": 0});
			else
				$('#'+divID + ' .HScrollPaneContent').css({"left": left});
			
			if(top + $('#'+divID + ' .VScrollPaneScrollBar').height() > $('#'+divID + ' .VScrollPaneScrollDiv').height())
				$('#'+divID + ' .VScrollPaneContent').css({"top": $('#'+divID + ' .VScrollPaneScrollDiv').height() - $('#'+divID + ' .VScrollPaneScrollBar').height()});
			else if(top < 0)
				$('#'+divID + ' .VScrollPaneContent').css({"top": 0});
			else
				$('#'+divID + ' .VScrollPaneContent').css({"top": top});
		}
	};