/*
	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
	
	Old Usage	 : jScroll ( container, dragger, background, top, bottom );
	New Usage 	 : 30 November 2009 - jScroll ( container, { objects }, { attributes } );
*/

function jScroll ( container, object, attributes )
{
	this.CONTAINER = document.getElementById ( container );
	
	if ( object != undefined )
	{
		/* Drag */
			if ( object.drag != undefined )
			{
				this.DRAGGER				= object.drag[0];
				this.DRAGGER_WIDTH			= object.drag[1];
				this.DRAGGER_HEIGHT			= object.drag[2];
				this.DRAGGER_CLASS			= object.drag[3] || null;
				this.DRAGGER_OVER			= object.drag[4] || null;
			}
		
		/* Detection Face */
			if ( object.face != undefined )
			{
				this.BACKGROUND 			= ( object.face != null ) ? object.face[0] : "";
				this.BACKGROUND_WIDTH		= object.face[1];
				this.BACKGROUND_HEIGHT		= object.face[2];
			}
		
		/* Up Button */
			this.BUTTON_TOP = "";
			this.BUTTON_TOP_WIDTH = 0;
			this.BUTTON_TOP_HEIGHT = 0;
			if ( object.up != undefined && object.up != null )
			{
				this.BUTTON_TOP				= object.up[0];
				this.BUTTON_TOP_WIDTH		= object.up[1] || 0;
				this.BUTTON_TOP_HEIGHT		= object.up[2] || 0;
				this.BUTTON_TOP_CLASS		= object.up[3] || null;
				this.BUTTON_TOP_OVER		= object.up[4] || null;
			}

		/* Down Button */
			this.BUTTON_BOTTOM = "";
			this.BUTTON_BOTTOM_WIDTH = 0;
			this.BUTTON_BOTTOM_HEIGHT = 0;
			if ( object.down != undefined && object.down != null )
			{
				this.BUTTON_BOTTOM			= object.down[0];
				this.BUTTON_BOTTOM_WIDTH	= object.down[1] || 0;
				this.BUTTON_BOTTOM_HEIGHT	= object.down[2] || 0;
				this.BUTTON_BOTTOM_CLASS	= object.down[3] || null;
				this.BUTTON_BOTTOM_OVER		= object.down[4] || null;
			}
	}

	
	/* Preset Attributes */
		this.PADDING = 5;
		this.SCALE_DRAG = false;
		this.INIT_POSITION = true;
		this.AUTO_HIDDEN = true;
		this.MARGIN = 0;
		this.MODE = "";
		
		if ( attributes != undefined )
		{
			if ( attributes.padding 		!= undefined ) this.PADDING = attributes.padding;
			if ( attributes.scaleDrag 		!= undefined ) this.SCALE_DRAG = attributes.scaleDrag;
			if ( attributes.initPosition	!= undefined ) this.INIT_POSITION = attributes.initPosition;
			if ( attributes.autoHidden		!= undefined ) this.AUTO_HIDDEN = attributes.autoHidden;
			if ( attributes.margin			!= undefined ) this.MARGIN = attributes.margin;
			if ( attributes.mode			!= undefined ) this.MODE = attributes.mode;
		}
	
	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.DIFF_TOP				= this.BACKGROUND_HEIGHT;
	this.IS_RELATIVE			= ( this.CONTAINER.parentNode.style.position.toUpperCase() == "RELATIVE" ) ? true : false;
	
	this.INTERVAL_ID			= 0;
	
	/* Auto Hidden */
	if ( this.AUTO_HIDDEN )
	{
		if ( this.CONTAINER.scrollHeight > this.BACKGROUND_HEIGHT + this.BUTTON_TOP_HEIGHT + this.BUTTON_BOTTOM_HEIGHT )
		{
			this.create();
			/* Init Setup Position */
				if ( this.INIT_POSITION )
				{
					this.moveDragger ( 0 );
				}
			
		}
	}
}

	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.CONTAINER.style.width = ( parseInt ( this.CONTAINER.offsetWidth ) - this.BACKGROUND_WIDTH + this.PADDING ) + "px";
		}
		
		this.BACKGROUND_HEIGHT = this.BACKGROUND_HEIGHT - this.BUTTON_TOP_HEIGHT - this.BUTTON_BOTTOM_HEIGHT - ( this.MARGIN * 2 );
		
		var top, left;
		
		// Create Top Button
			top  = ( !this.IS_RELATIVE ) ? F.getAbsoluteOffsetTop  ( this.CONTAINER ) + this.MARGIN : this.MARGIN;
			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 ( this.BUTTON_TOP != "" && this.BUTTON_TOP_CLASS == null )
			{
				if ( F.checkBrowser() == "ie6" && this.MODE == "png" ) objStyle.style["filter"] = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\""+this.BUTTON_TOP+"\")"
				else objStyle.style["backgroundImage"] = this.BUTTON_TOP;
			} else {
				objStyle.className = this.BUTTON_TOP_CLASS;
			}
			
			var div = F.createElement ( "div", "jSCROLL_BUTTON_TOP_" + this.CONTAINER, objStyle );
			this.BUTTON_TOP_DIV = div;
			this.CONTAINER.parentNode.appendChild ( div );
			
			/* Set RollOver Effect */
			if ( this.BUTTON_TOP_CLASS != null && this.BUTTON_TOP_OVER != null )
			{
				div.onmouseover = function() { this.className = THIS.BUTTON_TOP_OVER;  }
				div.onmouseout  = function() { this.className = THIS.BUTTON_TOP_CLASS; }
			}


		// Create Bottom Button
			top  = ( !this.IS_RELATIVE ) ? F.getAbsoluteOffsetTop ( this.CONTAINER ) + this.BACKGROUND_HEIGHT + this.BUTTON_TOP_HEIGHT + this.MARGIN : this.BACKGROUND_HEIGHT + this.BUTTON_TOP_HEIGHT + this.MARGIN ;
			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 ( this.BUTTON_BOTTOM != "" && this.BUTTON_BOTTOM_CLASS == null )
			{
				if ( F.checkBrowser() == "ie6" && this.MODE == "png" ) objStyle.style["filter"] = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\""+this.BUTTON_BOTTOM+"\")"
				else objStyle.style["backgroundImage"] = this.BUTTON_BOTTOM;
			} else {
				objStyle.className = this.BUTTON_BOTTOM_CLASS;
			}
			
			var div = F.createElement ( "div", "jSCROLL_BUTTON_BOTTOM_" + this.CONTAINER, objStyle );
			this.BUTTON_BOTTOM_DIV = div;
			this.CONTAINER.parentNode.appendChild ( div );

			/* Set RollOver Effect */
			if ( this.BUTTON_BOTTOM_CLASS != null && this.BUTTON_BOTTOM_OVER != null )
			{
				div.onmouseover = function() { this.className = THIS.BUTTON_BOTTOM_OVER; }
				div.onmouseout = function() { this.className = THIS.BUTTON_BOTTOM_CLASS; }
			}


		// Create Background
			top  = ( !this.IS_RELATIVE ) ? F.getAbsoluteOffsetTop ( this.CONTAINER ) + this.BUTTON_TOP_HEIGHT + this.MARGIN: this.BUTTON_TOP_HEIGHT + this.MARGIN;
			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" && this.MODE == "png" ) 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.MARGIN : this.BUTTON_TOP_HEIGHT + this.MARGIN;
			left = ( !this.IS_RELATIVE ) ? F.getAbsoluteOffsetLeft ( this.CONTAINER ) + this.CONTAINER.offsetWidth + this.PADDING : this.CONTAINER.offsetWidth + this.PADDING;
			
			if ( this.SCALE_DRAG )
			{
				var P = ( this.BACKGROUND_HEIGHT / this.CONTAINER.scrollHeight * 100 );
				this.DRAGGER_HEIGHT = this.BACKGROUND_HEIGHT * P / 100;
			}

			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 != "" && this.DRAGGER_CLASS == null ) 	
			{
				if ( F.checkBrowser() == "ie6" && this.MODE == "png" ) objStyle.style["filter"] = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\""+this.DRAGGER+"\")"
				else objStyle.style["backgroundImage"] = this.DRAGGER;
			} else {
				objStyle.className = this.DRAGGER_CLASS;
			}
			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.DRAGGER_DIV.onmouseout = null;
				if ( THIS.DRAGGER_DIV != null && THIS.DRAGGER_OVER != null ) THIS.DRAGGER_DIV.className = THIS.DRAGGER_OVER;
				
				THIS.getMouseXY ( e, THIS, true );
				document.onmouseup = function() 
				{ 
					THIS.clearEvent ( THIS ); 
					if ( THIS.DRAGGER_DIV != null && THIS.DRAGGER_CLASS != null ) THIS.DRAGGER_DIV.className = THIS.DRAGGER_CLASS;
				} 
				document.onmousemove = function ( e ) { THIS.getMouseXY ( e, THIS ); }
				return false;
			}
			this.DRAGGER_DIV.onmouseup = function () 
			{ 
				THIS.clearEvent ( THIS ); 
				if ( THIS.DRAGGER_DIV != null && THIS.DRAGGER_CLASS != null ) THIS.DRAGGER_DIV.className = THIS.DRAGGER_CLASS;
			}
			
			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.MARGIN : this.BUTTON_TOP_HEIGHT+ this.MARGIN;
		
		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.BUTTON_TOP_HEIGHT + this.BUTTON_BOTTOM_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;
		}
	}

	this.jScroll.prototype.reset = function ( height )
	{
		if ( height != undefined ) this.BACKGROUND_HEIGHT = height;
		
		// Display Scrollbar
			if ( this.CONTAINER.scrollHeight <= this.BACKGROUND_HEIGHT ) this.display ( "none" );
			else this.display ( "block" );
		
		if ( height != undefined ) this.BACKGROUND_HEIGHT = this.BACKGROUND_HEIGHT - this.BUTTON_TOP_HEIGHT - this.BUTTON_BOTTOM_HEIGHT - ( this.MARGIN * 2 );
		
		if ( this.BACKGROUND_DIV != null ) this.BACKGROUND_DIV.style.height = this.BACKGROUND_HEIGHT + "px";
		if ( this.BUTTON_BOTTOM_DIV != null )
		{
			var top = ( !this.IS_RELATIVE ) ? F.getAbsoluteOffsetTop ( this.CONTAINER ) + this.BACKGROUND_HEIGHT + this.BUTTON_TOP_HEIGHT + this.MARGIN : this.BACKGROUND_HEIGHT + this.BUTTON_TOP_HEIGHT + this.MARGIN;
			this.BUTTON_BOTTOM_DIV.style.top = top + "px";
		}
		
		if ( this.SCALE_DRAG && this.DRAGGER_DIV != null )
		{
			var P = ( this.BACKGROUND_HEIGHT / this.CONTAINER.scrollHeight * 100 );
			this.DRAGGER_HEIGHT = this.BACKGROUND_HEIGHT * P / 100;
			this.DRAGGER_DIV.style.height = this.DRAGGER_HEIGHT + "px";
			
			var P = this.CONTAINER.scrollTop / this.CONTAINER.scrollHeight;
			var Y = (this.BACKGROUND_HEIGHT ) * P;
			this.DRAGGER_DIV.style.top = Y + this.BUTTON_TOP_HEIGHT + this.MARGIN + "px";
		}
	}
	
	this.jScroll.prototype.display = function ( value )
	{
		if ( this.BUTTON_TOP_DIV != null ) this.BUTTON_TOP_DIV.style.display = value;
		if ( this.BUTTON_BOTTOM_DIV != null ) this.BUTTON_BOTTOM_DIV.style.display = value;
		if ( this.BACKGROUND_DIV != null ) this.BACKGROUND_DIV.style.display = value;
		if ( this.DRAGGER_DIV != null ) this.DRAGGER_DIV.style.display = value;
		
		if ( value == "none" )
		{
			if ( this.DRAGGER_DIV != null )
			{
				this.CONTAINER.scrollTop = 0;
				var top  = ( !this.IS_RELATIVE ) ? F.getAbsoluteOffsetTop ( this.CONTAINER ) + this.BUTTON_TOP_HEIGHT + this.MARGIN : this.BUTTON_TOP_HEIGHT + this.MARGIN;
				this.DRAGGER_DIV.style.top = top + "px";
			}
		}
	}