/*
	JavaScript Library
	------------------	
	Copyright    : Smart-Info Limited, All Right Reserved.
	Author       : Jacky Cheung
	Class        : jScroll
	Description  : JavaScript Scroll Bar
	
	Create Date  : 9 February 2009
	Last Modify  : 26 February 2009
*/

function jScroll ( container, dragger, background, top, bottom )
{
	this.CONTAINER 				= document.getElementById ( container );
	this.DRAGGER				= dragger[0];
	this.DRAGGER_WIDTH			= dragger[1];
	this.DRAGGER_HEIGHT			= dragger[2];
	this.DRAGGER_CLASS			= dragger[3] || null;
	
	this.BACKGROUND 			= ( background != null ) ? background[0] : "";
	this.BACKGROUND_WIDTH		= background[1];
	this.BACKGROUND_HEIGHT		= background[2];
	
	this.BUTTON_TOP				= ( top != null ) ? top[0] : "";
	this.BUTTON_TOP_WIDTH		= ( top != null ) ? top[1] || 0 : 0;
	this.BUTTON_TOP_HEIGHT		= ( top != null ) ? top[2] || 0 : 0;
	
	this.BUTTON_BOTTOM			= ( bottom != null ) ? bottom[0] : "";
	this.BUTTON_BOTTOM_WIDTH	= ( bottom != null ) ? bottom[1] || 0 : 0;
	this.BUTTON_BOTTOM_HEIGHT	= ( bottom != null ) ? bottom[2] || 0 : 0;
	
	this.BACKGROUND_DIV			= null;
	this.DRAGGER_DIV			= null;
	this.BUTTON_TOP_DIV			= null;
	this.BUTTON_BOTTOM_DIV		= null;
		
	this.SAVE_MOUSE_X			= null;
	this.SAVE_MOUSE_Y			= null;		
	this.MOUSE_X				= null;
	this.MOUSE_Y				= null;
	
	this.SCROLL_TOP				= null;
	this.SCROLL_LEFT			= null;
	this.SCROLL_SPEED			= 5;
	
	this.PADDING				= 5;
	
	this.DIFF_TOP				= this.BACKGROUND_HEIGHT;
	this.IS_RELATIVE			= ( this.CONTAINER.parentNode.style.position.toUpperCase() == "RELATIVE" ) ? true : false;
	
	this.INTERVAL_ID			= 0;
	
	this.create();
}

	this.jScroll.prototype.create = function ( )
	{
		var THIS = this;
		this.CONTAINER.style.overflow  = "hidden";
		this.CONTAINER.style.position  = "relative";
		this.CONTAINER.style.textAlign = "left";

		// Hidden
		if ( this.CONTAINER.scrollHeight >= this.BACKGROUND_HEIGHT )
		{
			this.CONTAINER.style.width = ( parseInt ( this.CONTAINER.style.width ) - this.BACKGROUND_WIDTH - this.PADDING ) + "px";
		}

		this.BACKGROUND_HEIGHT = this.BACKGROUND_HEIGHT - this.BUTTON_TOP_HEIGHT - this.BUTTON_BOTTOM_HEIGHT;
		
		
		var top, left;
		
		// Create Top Button
			top  = ( !this.IS_RELATIVE ) ? F.getAbsoluteOffsetTop  ( this.CONTAINER ) : 0;
			left = ( !this.IS_RELATIVE ) ? F.getAbsoluteOffsetLeft ( this.CONTAINER ) + this.CONTAINER.offsetWidth + this.PADDING : this.CONTAINER.offsetWidth + this.PADDING;
			var objStyle = {
			   style:{
				   position			: "absolute",
				   top				: top + "px",
				   left				: left + "px",
				   width			: this.BUTTON_TOP_WIDTH + "px",
				   height			: this.BUTTON_TOP_HEIGHT + "px",
				   overflow			: "hidden",
				   cursor			: "pointer"
			   }
			}
			if ( F.checkBrowser() == "ie6" ) objStyle.style["filter"] = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\""+this.BUTTON_TOP+"\")"
			else objStyle.style["backgroundImage"] = this.BUTTON_TOP;
			
			var div = F.createElement ( "div", "jSCROLL_BUTTON_TOP_" + this.CONTAINER, objStyle );
			this.BUTTON_TOP_DIV = div;
			this.CONTAINER.parentNode.appendChild ( div );

		// Create Bottom Button
			top  = ( !this.IS_RELATIVE ) ? F.getAbsoluteOffsetTop ( this.CONTAINER ) + this.BACKGROUND_HEIGHT + this.BUTTON_TOP_HEIGHT : this.BACKGROUND_HEIGHT + this.BUTTON_TOP_HEIGHT;
			left = ( !this.IS_RELATIVE ) ? F.getAbsoluteOffsetLeft ( this.CONTAINER ) + this.CONTAINER.offsetWidth + this.PADDING : this.CONTAINER.offsetWidth + this.PADDING;
			var objStyle = {
			   style:{
				   position			: "absolute",
				   top				: top + "px",
				   left				: left + "px",
				   width			: this.BUTTON_BOTTOM_WIDTH + "px",
				   height			: this.BUTTON_BOTTOM_HEIGHT + "px",
				   overflow			: "hidden",
				   cursor			: "pointer"
			   }
		    };
			if ( F.checkBrowser() == "ie6" ) objStyle.style["filter"] = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\""+this.BUTTON_BOTTOM+"\")"
			else objStyle.style["backgroundImage"] = this.BUTTON_BOTTOM;
			
			var div = F.createElement ( "div", "jSCROLL_BUTTON_BOTTOM_" + this.CONTAINER, objStyle );
			this.BUTTON_BOTTOM_DIV = div;
			this.CONTAINER.parentNode.appendChild ( div );

		// Create Background
			top  = ( !this.IS_RELATIVE ) ? F.getAbsoluteOffsetTop ( this.CONTAINER ) + this.BUTTON_TOP_HEIGHT : this.BUTTON_TOP_HEIGHT;
			left = ( !this.IS_RELATIVE ) ? F.getAbsoluteOffsetLeft ( this.CONTAINER ) + this.CONTAINER.offsetWidth + this.PADDING : this.CONTAINER.offsetWidth + this.PADDING;
			var objStyle = {
			   style:{
					position		: "absolute", 
					top				: top + "px", 
					left			: left + "px",
					width			: this.BACKGROUND_WIDTH + "px",
					height			: this.BACKGROUND_HEIGHT + "px"
			   }
			}
			if ( F.checkBrowser() == "ie6" ) objStyle.style["filter"] = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\""+this.BACKGROUND+"\", sizingMethod=\"scale\")"
			else objStyle.style["backgroundImage"] = this.BACKGROUND;
			
			var div = F.createElement ( "div", "jSCROLL_" + this.CONTAINER, objStyle );
			this.BACKGROUND_DIV = div;
			this.CONTAINER.parentNode.appendChild ( div );
		
		// Create Dragger
			top  = ( !this.IS_RELATIVE ) ? F.getAbsoluteOffsetTop ( this.CONTAINER ) + this.BUTTON_TOP_HEIGHT : this.BUTTON_TOP_HEIGHT;
			left = ( !this.IS_RELATIVE ) ? F.getAbsoluteOffsetLeft ( this.CONTAINER ) + this.CONTAINER.offsetWidth + this.PADDING : this.CONTAINER.offsetWidth + this.PADDING;

			var objStyle = {
			   style:{
				   position			: "absolute",
				   top				: top + "px",
				   left				: left + "px",
				   width			: this.DRAGGER_WIDTH + "px",
				   height			: this.DRAGGER_HEIGHT + "px",
				   cursor			: "pointer"
			   }
			}
			
			if ( this.DRAGGER_CLASS == null ) 	
			{
				if ( F.checkBrowser() == "ie6" ) objStyle.style["filter"] = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\""+this.DRAGGER+"\")"
				else objStyle.style["backgroundImage"] = this.DRAGGER;
			}
			var div = F.createElement ( "div", "jSCROLL_DRAG_" + this.CONTAINER, objStyle );
			if ( this.DRAGGER_CLASS != null ) div.className = this.DRAGGER_CLASS;
			
			this.DRAGGER_DIV = div;
			this.CONTAINER.parentNode.appendChild ( div );
		
		// Mouse Event
			this.DRAGGER_DIV.onmousedown = function ( e )
			{
				THIS.getMouseXY ( e, THIS, true );
				document.onmouseup = function() { THIS.clearEvent ( THIS ); } 
				document.onmousemove = function ( e ) { THIS.getMouseXY ( e, THIS ); }
				return false;
			}
			this.DRAGGER_DIV.onmouseup = function () { THIS.clearEvent ( THIS ); }
			
			if ( this.BUTTON_TOP_DIV != null )
			{
				// Top Button
				this.BUTTON_TOP_DIV.onmousedown = function ( e )
				{
					THIS.INTERVAL_ID = setInterval ( function() { THIS.moveDragger ( THIS.SCROLL_SPEED ) }, 10 );
					document.onmouseup = function(){ THIS.clearEvent ( THIS ); };
				}
				this.BUTTON_TOP_DIV.onmouseup = function(){ THIS.clearEvent ( THIS ); };
			}
			
			if ( this.BUTTON_BOTTOM_DIV != null )
			{
				// Bottom Button
				this.BUTTON_BOTTOM_DIV.onmousedown = function ( e )
				{
					THIS.INTERVAL_ID = setInterval(function() { THIS.moveDragger ( -THIS.SCROLL_SPEED ) }, 10 );
					document.onmouseup = function(){ THIS.clearEvent ( THIS ); };
				}
				this.BUTTON_BOTTOM_DIV.onmouseup = function() { THIS.clearEvent ( THIS ); };
			}			

			// Mouse Wheel
			if ( this.CONTAINER.addEventListener ) 
			{
				this.CONTAINER.addEventListener('DOMMouseScroll', function ( e ) { THIS.wheel( e, THIS ); }, false);
			}
			this.CONTAINER.onmousewheel =  function ( e ) { THIS.wheel ( e, THIS ); };
  
		if ( !this.IS_RELATIVE )
		{
			// Window Resize
			window.onresize = function () { THIS.renderResize ( THIS ); };
		}
		
		if ( this.CONTAINER.scrollHeight <= this.BACKGROUND_HEIGHT )
		{
			if ( this.BACKGROUND_DIV != null ) this.BACKGROUND_DIV.style.display 	= "none";
			if ( this.DRAGGER_DIV != null ) this.DRAGGER_DIV.style.display = "none";
		}
	}
	
	this.jScroll.prototype.getMouseXY = function ( e, THIS, init )
	{
		var e = window.event ? window.event : e;
		
		if ( document.layers ) { THIS.MOUSE_X = e.pageX; }
		else if ( document.all ) { THIS.MOUSE_X = window.event.clientX + document.body.scrollLeft; }
		else if  (document.getElementById ) { THIS.MOUSE_X = e.pageX; }
		
		if ( document.layers ) { THIS.MOUSE_Y = e.pageY; }
		else if ( document.all ) { THIS.MOUSE_Y = window.event.clientY + document.body.scrollTop; }
		else if ( document.getElementById ) { THIS.MOUSE_Y = e.pageY; }
		
		if ( init )
		{
			THIS.SAVE_MOUSE_X = THIS.MOUSE_X;
			THIS.SAVE_MOUSE_Y = THIS.MOUSE_Y;
		} else {
			var DIFF_Y = THIS.SAVE_MOUSE_Y - THIS.MOUSE_Y;
			THIS.moveDragger ( DIFF_Y );
			THIS.SAVE_MOUSE_Y = THIS.MOUSE_Y;
		}
	}
	
	this.jScroll.prototype.moveDragger = function ( DIFF_Y )
	{
		document.onselectstart = function () { return false; }
		var B_TOP = ( !this.IS_RELATIVE ) ? F.getAbsoluteOffsetTop ( this.BACKGROUND_DIV ) : this.BUTTON_TOP_HEIGHT;
		
		var TO_Y = ( parseInt ( this.DRAGGER_DIV.style.top ) - DIFF_Y );
		TO_Y = ( TO_Y < B_TOP ) ? B_TOP : ( ( TO_Y > B_TOP + this.BACKGROUND_HEIGHT - this.DRAGGER_HEIGHT ) ? B_TOP + this.BACKGROUND_HEIGHT - this.DRAGGER_HEIGHT : TO_Y );
		this.DRAGGER_DIV.style.top = TO_Y + "px";

		
		this.DIFF_TOP = TO_Y;
		
		var D_TOP = ( !this.IS_RELATIVE ) ? F.getAbsoluteOffsetTop ( this.DRAGGER_DIV ) : parseInt ( this.DRAGGER_DIV.style.top );
		var P = ( D_TOP - B_TOP ) / ( this.BACKGROUND_HEIGHT - this.DRAGGER_HEIGHT ) * 100;
		this.CONTAINER.scrollTop = ( this.CONTAINER.scrollHeight - this.BACKGROUND_HEIGHT - this.DRAGGER_HEIGHT ) * P / 100;
		
		document.body.scrollTop = this.BODY_SCROLL_TOP;
	}
	
	this.jScroll.prototype.clearEvent = function ( THIS )
	{
		clearInterval ( THIS.INTERVAL_ID );
		document.onmouseup = null;
		document.onselectstart = null;
		document.onmousemove = null;
		window.onscroll = null;
	}
	 
	this.jScroll.prototype.wheel = function ( event, THIS )
	{
		this.SCROLL_TOP  = F.getBodyScrollTop();
		this.SCROLL_LEFT = F.getBodyScrollLeft();
		
        var delta = 0;
        if ( !event ) event = window.event;
        if ( event.wheelDelta ) { delta = event.wheelDelta / 120; } 
		else if ( event.detail ) { delta = -event.detail / 3; }
        
		THIS.moveDragger ( delta * 6 );
		
	}
	
	this.jScroll.prototype.renderResize = function ( THIS )
	{
		THIS.BACKGROUND_DIV.style.left = ( F.getAbsoluteOffsetLeft ( THIS.CONTAINER ) + THIS.CONTAINER.offsetWidth + THIS.PADDING ) + "px";
		THIS.BACKGROUND_DIV.style.top = ( F.getAbsoluteOffsetTop ( THIS.CONTAINER ) + THIS.BUTTON_TOP_HEIGHT ) + "px";
		
		THIS.DRAGGER_DIV.style.left = ( F.getAbsoluteOffsetLeft ( THIS.CONTAINER ) + THIS.CONTAINER.offsetWidth + THIS.PADDING ) + "px";
		THIS.DRAGGER_DIV.style.top = (F.getAbsoluteOffsetTop ( THIS.CONTAINER ) + (THIS.DIFF_TOP - THIS.BACKGROUND_HEIGHT ) ) + "px";
	}
	
	this.jScroll.prototype.showLog = function ( value )
	{
		var l = document.getElementById("log");
		if ( l )
		{
			l.innerHTML += "<br>" + value;
			l.scrollTop = l.scrollHeight;
		}
	}