var scroll_horz = 1;
var scroll_vert = 2;

function ScrollBar( id, orientation, parent, debugLog ) {

	this.construct = function( id, orientation, parent, debugLog )
	{

		this._orientation = orientation;

		this._sfCtl = new Surface( 'sf_' + id, parent, debugLog );
	
		this._panels = new Array();

		this._speed = 10;

	}

	this._orientation = scroll_horz;
	this._sfCtl = null;
	this._sfDragger = null;
	this._sfDragContainer = null;

	this._scrollPos = 0;
	this._deltaScrollPos = 0;

	this._dragging = false;
	this._eventsAttached = false;

	this._id = '';
	this._speed = 0;
	
	this._deltaX = 0;
	this._deltaY = 0;

	this._panels = null;
	this._disabled = false;

	this.getId = function()
	{
		return this._id;
	}

	this.setSpeed = function( speed )
	{
		this._speed = speed;
	}

	this.addSurface = function( surface )
	{
		this._panels.push( surface );
	}

	this.enable = function()
	{
		this._disabled = false;
	}

	this.disable = function()
	{
		this.stop();

		this._disabled = true;
	}

	this.forward = function()
	{
		//window.status = 'forward';

		if( this._orientation == scroll_horz ) {

			for( var pnl in this._panels ) {
				this._panels[ pnl ].startScroll( false, false, true, false, this._speed, this );
			}
		}
		else if( this._orientation == scroll_vert ) {

			for( var pnl in this._panels ) {
				this._panels[ pnl ].startScroll( false, false, false, true, this._speed, this );
			}
		}
	}

	this.rewind = function()
	{
		//window.status = 'rewind';

		if( this._orientation == scroll_horz ) {
			for( var pnl in this._panels ) {
				this._panels[ pnl ].startScroll( true, false, false, false, this._speed, this );
			}

		}
		else if( this._orientation == scroll_vert ) {
			for( var pnl in this._panels ) {
				this._panels[ pnl ].startScroll( false, true, false, false, this._speed, this );
			}

		}
	}

	this.stop = function()
	{
		//window.status = 'still';

		for( var pnl in this._panels ) {
			this._panels[ pnl ].stopScroll();
		}
	
	}

	this.tick = function( surface )
	{
		var sfDragContainer = this._sfDragContainer;
		var sfDragger = this._sfDragger;


		if( this._orientation == scroll_horz ) {
			this._scrollPos = surface.getScrollPosition().left;
		}
		else if( this._orientation == scroll_vert ) {
			this._scrollPos = surface.getScrollPosition().top;
		}
		

		this.update();


	}

	this.update = function( scrollDelta )
	{

		if( !this._disabled ) {

			var sfDragger = this._sfDragger;

			var self = this;

			sfDragger.onUnlock( function( sfDragger, self, scrollDelta ) {
				var sfDragContainer = self._sfDragContainer;

				if( self._panels.length > 0 ) {

					var full = 0;
					var view = 0;
					var ratio = 0;

					var p = 0; // x or y
					var l = 0; // width or height
					var dl = 0; // sfDragContainer.getWidth() or sfDragContainer.getHeight()


					if( self._orientation == scroll_horz ) {

						for( var p in self._panels ) {
							full = max( full, self._panels[ p ].getScrollLength().width );
							view = max( view, self._panels[ p ].getWidth() );					
						}

						dl = sfDragContainer.getWidth();

					}
					else if( self._orientation == scroll_vert ) {

						for( var p in self._panels ) {
							full = max( full, self._panels[ p ].getScrollLength().height );
							view = max( view, self._panels[ p ].getHeight() );					
						}

						dl = sfDragContainer.getHeight();
					}

					ratio = view / full;
					l = dl * ratio;
					p = ( ( dl / full ) * self._scrollPos );


					if( scrollDelta ) {
						p = p + scrollDelta;
					}

					if( p < 0 ) {
						p = 0;
					}

					if( self._orientation == scroll_horz ) {

						if( p > dl - l ) p = dl - l;

						sfDragger.setX( Math.round( p ) );
						sfDragger.setWidth( Math.round( l ) );
					}
					else if( self._orientation == scroll_vert ) {

						if( p > dl - l ) p = dl - l;

						sfDragger.setY( Math.round( p ) );
						sfDragger.setHeight( Math.round( l ) );
					}

					if( scrollDelta ) {
						var tmp = 0;


						if( self._orientation == scroll_horz ) {
							tmp = full * ( p / ( dl ) );
						}
						else if( self._orientation == scroll_vert ) {
							tmp = full * ( p / ( dl ) );
						}

						tmp = Math.round( tmp );

						for( var pnl in self._panels ) {

							if( self._orientation == scroll_horz ) {
								self._panels[ pnl ].scrollTo( tmp, null );
							}
							else if( self._orientation == scroll_vert ) {
								self._panels[ pnl ].scrollTo( null, tmp );
							}

						}					

						self._deltaScrollPos = tmp;

						//window.status = "Pos: " + tmp;
					}

				}

				sfDragger.lock();

				if( !self._eventsAttached ) {

					sfDragger.onUpdate( function( sfDragger, self ) {

						sfDragger.onMouseDown( function( event ) {

							self._dragging = true;

							//window.status = 'START - X: ' + event.clientX + ' Y:' + event.clientY;

							self._deltaX = event.clientX;
							self._deltaY = event.clientY;

						});

						sfDragger.onMouseUp( function( event ) {

							self._scrollPos = self._deltaScrollPos;

							//window.status = '';

							self._dragging = false;
						});
	
						sfDragger.onMouseMove( function( event ) {

							if( self._dragging ) {

								var delta = 0;

								if( self._orientation == scroll_horz ) {

									delta = event.clientX - self._deltaX;

								}
								else if( self._orientation == scroll_vert ) {

									delta = event.clientY - self._deltaY;

								}

								self.update( delta );
						
								//window.status = 'DRAGGING - X: ' + event.clientX + ' Y:' + event.clientY + ' Delta - ' + delta;
							}
						});
					}, self );

					self._eventsAttached = true;
				}

				sfDragger.show();

				sfDragger.complete();
				sfDragger.unlock();

				sfDragger.paint( true );
			}, self, scrollDelta );

			sfDragger.unlock();

		}
		
	}

	this._render = function()
	{
		var self = this;

		this._sfCtl.expand( true, true );

		this._sfCtl.lock();
		
		this._sfCtl.onUpdate( function( sfCtl ) {

			var sfRewind = new Surface( sfCtl.getId() + '_rewind', sfCtl, self._debugLog );
			var sfForward = new Surface( sfCtl.getId() + '_forward', sfCtl, self._debugLog );


			var sfDragContainer = new Surface( sfCtl.getId() + '_dragContainer', sfCtl, self._debugLog );
			self._sfDragContainer = sfDragContainer;

			if( self._orientation == scroll_horz ) {
				sfRewind.hAlign( sfAlign_left );
				sfForward.hAlign( sfAlign_right );

				sfRewind.setWidth( 20 );
				sfForward.setWidth( 20 );

				sfRewind.expand( false, true );	
				sfForward.expand( false, true );

				sfRewind.setCssClass( 'scrollBar-rewind-horz' );
				sfForward.setCssClass( 'scrollBar-forward-horz' );


				sfDragContainer.setWidth( sfCtl.getWidth() - ( 20 + 20 ) );
				sfDragContainer.setX( 20 );
				sfDragContainer.setHeight( 20 );
				

			}
			else if( self._orientation == scroll_vert ) {
				sfRewind.vAlign( sfAlign_top );
				sfForward.vAlign( sfAlign_bottom );

				sfRewind.setHeight( 20 );
				sfForward.setHeight( 20 );

				sfRewind.expand( true, false );	
				sfForward.expand( true, false );		

				sfRewind.setCssClass( 'scrollBar-rewind-vert' );
				sfForward.setCssClass( 'scrollBar-forward-vert' );


				sfDragContainer.setWidth( 20 );
				sfDragContainer.setY( 20 );
				sfDragContainer.setHeight( sfCtl.getHeight() - ( 20 + 20 ) );
			}

			sfDragContainer.setCssClass( 'scrollBar-drag-container' );

			sfRewind.lock();

			sfForward.lock();

			sfDragContainer.lock();

			sfRewind.onUpdate( function( sfRewind ) {
				sfRewind.onMouseDown( function() {
					self.rewind();
				});

				sfRewind.onMouseUp( function() {
					self.stop();
				});
			});

			sfForward.onUpdate( function( sfForward ) {
				sfForward.onMouseDown( function() {
					self.forward();
				});

				sfForward.onMouseUp( function() {
					self.stop();
				});
			});

			sfDragContainer.onUpdate( function( sfDragContainer, self ) {

				var sfDragger = new Surface( sfDragContainer.getId() + '_dragger', sfDragContainer, self._debugLog );

				self._sfDragger = sfDragger;


				if( self._orientation == scroll_horz ) {
					sfDragger.setX( 0 );
					sfDragger.setHeight( 20 );
					sfDragger.setCssClass( 'scrollBar-dragger-horz' );
				}
				else if( self._orientation == scroll_vert ) {
					sfDragger.setY( 0 );
					sfDragger.setWidth( 20 );
					sfDragger.setCssClass( 'scrollBar-dragger-vert' );
				}

				

				//self.updateRatio();

			}, self );
	
			
			sfRewind.show();
			sfRewind.complete();
			sfRewind.unlock();

			
			sfForward.show();
			sfForward.complete();
			sfForward.unlock();


			sfDragContainer.show();
			sfDragContainer.complete();
			sfDragContainer.unlock();


		});


		this._sfCtl.show();
		this._sfCtl.unlock();
	

		//this._sfCtl.paint();

	}

	this.paint = function()
	{
		this._render();
	}

	this.construct( id, orientation, parent, debugLog );
}