var ctlPager_bottom = 0;
var ctlPager_top = 1;


function Pager( parent, opt, debugLog )
{

	this.construct = function( parent, opt, debugLog )
	{

        	this._id = parent;
        	this._eParent = parent;


		this.clear();


		this._opt = opt;
		
		this._dbg = debugLog;

		this._sfWait = new Surface( 'sf_' + parent + '_wait', parent, debugLog );
		this._url = window.location + '?ctlId=' + this._id;
		this._patchUrl = this._url + '&get=patch';

	}

	this._id = '';
	this._sfCtl = null;
	this._eParent = null;

	this._activePage = 0;
	this._pages = null;
	this._pageCnt = 0;

	this._opt = null;

	this._renderCallback = null;
	this._tabScrollSpeed = 3;
	this._rendered = false;

	this._dbg = null;

	this._sfWait = null;
	this._url = '';
	this._patchUrl = '';

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

	this.add = function( page )
	{
		var tmp;

		if( page != null ) {
			tmp = page;
		}
		else {
			tmp = new Page( this._pipe );
		}

		this._pages.push( tmp );

        	this._pageCnt++;

		return tmp;
	}

	this.remove = function( index )
	{
		this._pages.splice( index, 1 );
		this._pageCnt--;
	}

	this.clear = function()
	{
		this._pages = new Array();
		this._pageCnt = 0;
	}

	this.count = function()
	{
		return this._pageCnt;
	}

	this.setTabScrollSpeed = function( speed )
	{
		this._tabScrollSpeed = speed;
	}
	
	this.getTabScrollSpeed = function()
	{
		return this._tabScrollSpeed;
	}


	this.setActivePage = function( pindex )
	{
        	var self = this;

		window.status = '';

        	if( pindex != this._activePage ) {

	        	sfOldPage = this._pages[ self._activePage ].getSurface();
        		sfNewPage = this._pages[ pindex ].getSurface();

	        	sfOldBtn = this._pages[ self._activePage ].getButtonSurface();
        		sfNewBtn = this._pages[ pindex ].getButtonSurface();

			self._activePage = pindex;

			sfNewPage.onUpdate( function( sfNewPage ) {

                        	sfNewBtn.onUnlock( function( sfNewBtn ) {
	       	                	sfNewBtn.setCssClass( 'pager-pageButton-active' );
                       	        	sfNewBtn.lock();
                               		sfNewBtn.update();

					sfNewBtn.complete();

               	        		sfNewBtn.paint();
	               	        });

                                sfNewBtn.unlock();
                	        sfNewBtn.paint();


				var page = self._pages[ pindex ];

				if( page.getControlRendered() == false ) {
					var ctl = page.getControlInstance();

					if( ctl != null ) {
						ctl.paint();
					}

					page.setControlRendered( true );
				}

				if( page ) {
					page.doRefresh( null );
				}



			});


			sfOldPage.onUpdate( function( sfOldPage ) {

                        	sfOldBtn.onUnlock( function( sfOldBtn ) {
	       	                	sfOldBtn.setCssClass( 'pager-pageButton-inactive' );
                       	        	sfOldBtn.lock();
                               		sfOldBtn.update();

                                        sfOldBtn.complete();

					sfNewPage.show();
					//sfNewPage.show( 'slow' );
					sfNewPage.paint();

	               	        });

                                sfOldBtn.unlock();
                	        sfOldBtn.paint();


			});


			//sfOldPage.hide( 'slow' );
			sfOldPage.hide();
			sfOldPage.paint();





		 }
	}





	this._renderPageBtn = function( self, sfBtnBar, pindex, lastBtn )
	{

        	var self = this;

        	var sfPageBtn = new Surface( sfBtnBar.getId() + '_pageBtn_' + pindex, sfBtnBar, this._dbg );


		if( pindex < self._pages.length ) {

			var page = self._pages[ pindex ];

			page.setButtonSurface( sfPageBtn );

			if( pindex != this._activePage ) {
				sfPageBtn.setCssClass( 'pager-pageButton-inactive' );
			}
			else {
				sfPageBtn.setCssClass( 'pager-pageButton-active' );
			}



			sfPageBtn.setText( page.getCaption(), sfAlign_middle );


			sfPageBtn.expand( false, true );
			sfPageBtn.optimise( true, false );

			if( lastBtn != null ) {

				sfPageBtn.setX( lastBtn.getX() + lastBtn.getWidth() );

			}

			sfPageBtn.lock();

			//window.status += '  ' + sfPageBtn.getId() + ': ' + sfPageBtn._Lprop.optimise.width + ' ' + sfPageBtn._Lprop.optimise.height + ' ' + sfPageBtn._Lprop.expand.width + ' ' + sfPageBtn._Lprop.expand.height;

			sfPageBtn.onUpdate( function() {

				sfPageBtn.onMouseUp( function() {
					self.setActivePage( pindex );
				});

				// recursive function to create the next button AFTER we have updated this one
				if( pindex < self.count() - 1 ) {
					self._renderPageBtn( self, sfBtnBar, pindex + 1, sfPageBtn );
				}

			});

			//sfPageBtn.update();

			sfPageBtn.show();
			sfPageBtn.complete();
			sfPageBtn.paint();

		}
	}

	this._renderBtnBar = function( sfCtlBar, sfPrevBtn, sfNextBtn )
	{

        	var sfBtnBar = new Surface( sfCtlBar.getId() + '_btnBar', sfCtlBar, this._dbg );

        	sfBtnBar.setCssClass( 'pager-pageBar' );

		sfBtnBar.setX( sfPrevBtn.getWidth() );


		sfBtnBar.setWidth( sfCtlBar.getWidth() - ( sfPrevBtn.getWidth() + sfNextBtn.getWidth() ) );


		sfBtnBar.expand( false, true );

		sfBtnBar.lock();

		var self = this;

		sfBtnBar.onUpdate( function() {

                	// render all the page buttons


			var sfPage = self._renderPageBtn( self, sfBtnBar, 0 );
		});




		sfBtnBar.show();
		sfBtnBar.complete();
		sfBtnBar.paint();

        	return sfBtnBar;

	}


	this._renderControls = function( sfCtlBar )
	{
		var sfPrevBtn = new Surface( sfCtlBar.getId() + '_prevBtn', sfCtlBar, this._dbg );
                var sfNextBtn = new Surface( sfCtlBar.getId() + '_nextBtn', sfCtlBar, this._dbg );

		sfPrevBtn.setCssClass( 'pager-prevBtn' );
		sfNextBtn.setCssClass( 'pager-nextBtn' );

		sfPrevBtn.hAlign( sfAlign_left );
		sfPrevBtn.setWidth( 20 );
		sfPrevBtn.expand( false, true );

		sfNextBtn.hAlign( sfAlign_right );
		sfNextBtn.setWidth( 20 );
		sfNextBtn.expand( false, true );



		sfPrevBtn.lock();
		sfNextBtn.lock();


		var self = this;

		sfPrevBtn.onUpdate( function() {
			sfNextBtn.onUpdate( function() {
				var btnBar = self._renderBtnBar( sfCtlBar, sfPrevBtn, sfNextBtn );
				
				sfPrevBtn.onMouseDown( function() {
					//window.status = 'start';
                                	btnBar.startScroll( true, false, false ,false, 4 );
				});


				sfPrevBtn.onMouseUp( function() {

                                	//window.status = 'stop';
					btnBar.stopScroll();
				});

				sfNextBtn.onMouseDown( function() {

                                	btnBar.startScroll( false, false, true, false, 4 );
				});


				sfNextBtn.onMouseUp( function() {

                                	btnBar.stopScroll();
				});


			});
		});

		/*
		sfPrevBtn.onUpdate( function( sfPrevBtn ) {



		});
		*/

		sfPrevBtn.show();
		sfPrevBtn.complete();
		sfPrevBtn.paint();

		sfNextBtn.show();
		sfNextBtn.complete();
		sfNextBtn.paint();
	}

	this._renderCtlBar = function( sfCtl )
	{
		var sfCtlBar = new Surface( sfCtl.getId() + '_ctlBar', sfCtl, this._dbg );


		sfCtlBar.setCssClass( 'pager-controlBar' );

                sfCtlBar.setHeight( 20 );

		if( this._opt != null ) {
			if( this._opt.position == ctlPager_bottom ) {
				sfCtlBar.vAlign( sfAlign_bottom );
			}
			else if( this._opt.position == ctlPager_top ) {
				sfCtlBar.vAlign( sfAlign_top );
			}
		}
		else sfCtlBar.vAlign( sfAlign_bottom );


		sfCtlBar.expand( true, false );

		sfCtlBar.lock();


		var self = this;

		sfCtlBar.onUpdate( function() {
			self._renderControls( sfCtlBar );
		});


		//sfCtlBar.update();

		sfCtlBar.show();

		sfCtlBar.complete();

		sfCtlBar.paint();

		return sfCtlBar;
	}


	this._renderPage = function( sfCtl, sfCtlBar, page, pindex, opindex )
	{

		var id = '';

		id = sfCtl.getId() + '_page_' + pindex;

		//sfPager_ctlPager_page_0_surfaceElement
        	var sfPage = new Surface( id, sfCtl, this._dbg );


        	page.setSurface( sfPage );


        	sfPage.setCssClass( 'pager-pageCanvas' );
        	
        	//TEMP
        	//sfPage.setText( page.getCaption() );

		




		if( this._opt != null ) {
			if( this._opt.position == ctlPager_bottom ) {
				sfPage.setY( 0 );
			}
			else if( this._opt.position == ctlPager_top ) {
				sfPage.setY( sfCtlBar.getHeight() );
			}
		}
		else sfPage.setY( 0 );

        	sfPage.setHeight( sfCtl.getHeight() - sfCtlBar.getHeight() );

        	sfPage.expand( true, false );

        	sfPage.lock();


		if( this._activePage == pindex ) {
			sfPage.onUpdate( function() {
				if( page.getControlRendered() == false ) {
					var ctl = page.getControlInstance();

					if( ctl != null ) {
						//alert( ctl.getId() );
						ctl.paint();
					}

					page.setControlRendered( true );
				}
			});	
		}


        	//sfPage.update();

        	if( pindex == opindex ) {
	        	sfPage.show();
	        }
	        else {
			sfPage.hide();
		}

		sfPage.complete();

		sfPage.paint();

		return sfPage;

	}

	this._renderLayout = function( openingPage )
	{
		if( !openingPage ) {
			this._activePage = 0;
		}
		else {
			this._activePage = openingPage;
		}

        	this._sfCtl = new Surface( 'sfPager_' + this.getId(), this._eParent, this._dbg );


                this._sfCtl.setCssClass( 'pager-canvas' );

		this._sfCtl.expand( true, true );

		this._sfCtl.lock();


		var self = this;

		this._sfCtl.onUpdate( function( sfCtl ) {

	                var sfCtlBar = self._renderCtlBar( sfCtl );


			for( p in self._pages ) {

                		var page = self._pages[ p ];

				var sfPage = self._renderPage( sfCtl, sfCtlBar, page, p, openingPage );

			}

                        //alert( sfCtl._callbacks.complete );
		});


		//

		this._sfCtl.onComplete( function( self ) {

			//alert( 'complete ' );

			//self.show();

			//self.paint();


		});




                this._sfCtl.update();
                this._sfCtl.complete();

		this._sfCtl.show( 'slow' );


		/*
		var dbg = '';
		for( var i = 0; i < this._sfCtl._pipe._cmd.count(); i++ ) {
                	dbg += ' -> ' + this._sfCtl._pipe._cmd.peek( i ).cmd ;
		}
		alert( dbg );
		*/


		this._sfCtl.paint();


	}

	this._renderLoadingScreen = function()
	{

		this._sfWait.onUnlock( function( sfWait ) {

			sfWait.setCssClass( "wait-control" );
			
			sfWait.expand( true, true );

			//sfWait.setText( '<img src="/images/loading.gif" />' );
			sfWait.lock();
			sfWait.update();

		});
	
		this._sfWait.unlock();

		this._sfWait.paint();
	}

	this._doWait = function( show, callback )
	{
		var self = this;

		if( show ) {
	
			

			if( callback ) {
				this._sfWait.onShow( function( sfWait ) {
					callback( self );
				});
			}

			this._sfWait.show();
		}
		else {
			

			if( callback ) {

				this._sfWait.onHide( function( sfWait ) {
					callback( self );
				});
			}

			this._sfWait.hide( 'slow' );
		}

		this._sfWait.paint();
		
	}

	this.paint = function( openingPage )
	{

		var self = this;

		this._renderLoadingScreen();

		this._doWait( true, function( self ) {

			$.get( self._url + '&get=json&structId=pages', null, 
			function( ret, code ) {
			
				if( code == 'success' ) {
			
					var pagerInfo = parseJSON( ret );		

					if( pagerInfo != null ) {

						if( pagerInfo.clientErrorCode == 0 ) {

							if( pagerInfo.pages != null ) {
								for( var p in pagerInfo.pages ) {

									var node = pagerInfo.pages[ p ];
	
									var page = self.add();


									page.setCaption( node.caption );
									page.setControl( node.control, node.controlId );
								



								}

								self._doWait( false, function() {
			
									self._renderLayout( 0 );
								});	

							}
						}
						else {
							eval( pagerInfo.clientErrorHandler + '(' + pagerInfo.clientErrorCode + ');' );
						}
					}
				}
			});

		});



	}

	this.onRender = function( callback )
	{

	}


	this.show = function( fadeSpeed )
	{

	}

	this.refresh = function( refreshOptions )
	{
		for( var p in this._pages ) {
			var page = this._pages[ p ];
			page.refresh( refreshOptions );		
		}

		var activePage = this._pages[ this._activePage ];

		if( activePage ) {
			activePage.doRefresh( refreshOptions );
		}
		
	}




	this.construct( parent, opt, debugLog );

}