// THINGS TO DO

// create a reset state, back to zero point, reset navigation

var Pagination = new Class({


	initialize: function( element ){

		//alert("P INIT : " + element );

		this.featureElement = $(element);  //feature_ID  elemen
		var h = this.featureElement.getSize().scrollSize.y;
		this.currentHeight = h;
		this.isOpen = false;
		//alert("CH : " + h );
		this._currentPage;
		this.pageNumArray = new Array();
		if (!this.featureElement.hasClass('hide')) {
			this.featureElement.addClass('hide');
			$$('.hide').setStyles({
				overflow: 'hidden',
				height: 0   //lost the height as it was causing the other column to shrink to 0
			});
		}
		//this.featureElement.setStyle( "display", "block");
	
	},
	
	reload: function(){
		
		this.featureElement.setStyle( "height", 0 );
		var h = this.featureElement.getSize().scrollSize.y;
		//alert("Reload : " + h );
		var newh = this.featureElement.getStyle('height').toInt();
		//alert("New H : " + newh );
		this.currentHeight = h;
		new Fx.Style( this.featureElement, 'height', {transition: Fx.Transitions.Circ.easeInOut}).start(h);
	},
	
	removeNavigation: function(){
		var hasNavigation = $chk( this.navigation );
		if( hasNavigation ){
			this.navigation.remove();
		}
		//alert("Has Navigation : " + hasNavigation );
	},
	
	setPaging: function( doAnimate ) {
		
		this.pages = this.featureElement.getElementsBySelector('.page');
		//alert("SP : " + this.pages.length );
		if( this.pages.length > 0 ){
		
			//mask the feature element, move the wrapper
			//this.navigation;
			
			this.featureWrap = this.featureElement.getFirst(); //featureWrap within feature
			//alert( $(this.featureWrap).getProperty('class') );
			//next prev buttons
			this.previous;
			this.next;
			this.selected = 0;
			
			this.startY = this.featureElement.getPosition().y;

			
			var firstItem = this.pages[0].getSize();
			var h = firstItem.scrollSize.y;
			this.currentHeight = h;
			/*
			if (!this.featureElement.hasClass('hide')) {
				this.featureElement.addClass('hide');
				$$('.hide').setStyles({
					overflow: 'hidden',
					height: h
				});
			}
			*/
			
			this.navigation = new Element('div', {
				'class': 'navigation'
			});
			$( this.navigation ).injectAfter( this.featureElement );
			this.createPageLinks( $( this.navigation ) );
			//alert( " DO ANIMATE : " + doAnimate );
			if( doAnimate != false ){
				//alert("ANIMATE");
			this.animate( 0 );
			}
			//this.showNavigation( false );
		}
		
	},
	
	/* 'href': '#top' allows smooth scrolling back to the top of the page when a number or prev / next are clicked */
	createPageLinks: function( navElement ){
	
		var totalPages = this.pages.length;
		var unorderedList = new Element('ul');
		$(unorderedList).injectInside( navElement );
		
		/* Previous Button */
		var item = new Element( 'li' );
		$(item).injectInside( unorderedList );
		this.previous = new Element('a', {
			    'class': '',
			    'href': '#'
			});
			
		$(this.previous).injectInside( $(item) );
		this.toggleNextPrev( $(this.previous), -1 );
		this.previous.setText( "" );
		/* End Previous Button */
		
		for( var i=0; i < totalPages; i++ ){
		
			var listItem = new Element( 'li' );
			
			if ( i < totalPages ) {
				listItem.setText("|");
			}
			
			if (i==0) {
				listItem.setHTML("<img src='images/pages.gif' />");
				item.addClass('navigation_active');
			}

			$(listItem).injectInside( unorderedList );
			var item = new Element('a', {
			    'class': '',
			    'href': '#'
			});
			
			//if (i==0) {
			//	item.addClass('navigation_active');
			//}
						
			$(item).injectInside( $(listItem) );
			item.setText( i + 1 );
			this.pageNumArray.push( item );
			this.addClick( $(item), i );
		}
		
		/* Next Button */
		var item = new Element( 'li' );
		//item.setText("|");
		$(item).injectInside( unorderedList );
		this.next = new Element('a', {
			    'class': '',
			    'href': '#'
			});
			
		$(this.next).injectInside( $(item) );
		this.toggleNextPrev( $(this.next), 1 );
		$(this.next).setText( "" );
		/* End Next Button */
		
	},
	
	
	addClick: function( element, i ){
	
		element.addEvent('click',  function( e ){
				e = new Event(e).stop();
				this.animate( i );
				//$$('.navigation_active').removeClass('navigation_active');
				//element.addClass('navigation_active');
				}.bind(this)
			);
	},
	
	
	toggleNextPrev: function( element, direction ){
	
		element.addEvent('click',  function( e ){
				e = new Event(e).stop();
				var n = this.selected + direction;
				this.animate( n );
				//$$('.navigation_active').removeClass('navigation_active');
				//var listItems = this.navigation				
				//listItems[2].addClass('navigation_active');
				}.bind(this)
			);
	
	},
	
	animate: function( page ){
		
		if( page >= 0 && page < this.pages.length ){
		//if( page >= 0 && page < this.pages.length ){
		
			this.setActive( page );
			
			var currentLoc = this.featureWrap.getPosition().y;

			var pageElement = this.pages[page];
			
			var ypos = pageElement.getPosition().y;
			var diff = (( currentLoc - ypos )  );
			var size = pageElement.getSize().scrollSize.y;
			//alert("DIFF : " + diff );
			//alert("Size : " + size );
			//alert("animate : " + size );
			new Fx.Style( this.featureWrap, 'margin-top', {transition: Fx.Transitions.Circ.easeInOut}).start(diff);
			new Fx.Style( this.featureElement, 'height', {transition: Fx.Transitions.Circ.easeInOut}).start(size);
			var scroll = new Fx.Scroll(window).toElement('top');  //scroll the entire window to the top
			
			this.selected = page;
			this.setCurrentHeight( size );
			this.checkNextPrev();
			
		}
		return false;
	},
	
	
	setActive: function( indice ){
		
		var e = this.pageNumArray[indice];
		e.addClass( 'navigation_active' );
		if( this._currentPage != null ){
			this._currentPage.removeClass( 'navigation_active' );
		}
		this._currentPage = e;
	},
	
	
	checkNextPrev: function(){
		
		var n = this.selected;
		var prevText = n <= 0 ? "" : "< Previous";
		var nextText = n >= this.pages.length - 1 ? "" : "Next >";
		$(this.previous).setText( prevText );
		$(this.next).setText(nextText);
		
		/*
		if( nextText == "" ){
			var prevPipe = $(this.next).getParent();
			if( prevPipe != undefined ){
				var hasPipe = prevPipe.getText();
				alert("HP : " + hasPipe );
				if( hasPipe == "|" ){
					prevPipe.setText( " " ); //destroys the a tag
				}
			}
		}
		*/
	},
	
	showNavigation: function( value ){
	
		if( this.navigation ){
			if( value ){
				this.navigation.setStyle( "display", "block" );
			}else{
				this.navigation.setStyle( "display", "none" );
			}
		}
	},

		
	close: function(){
		
		this.setIsOpen( false );
		this.showNavigation(false );
		new Fx.Style( this.featureElement, 'height', {transition: Fx.Transitions.Circ.easeInOut}).start(0).chain(function(){ this.setDisplayOption( false );}.bind(this));
	},
	
	setDisplayOption: function ( value ){
		//alert("DONE");
		//var style = value == true ? "block" : "none";
		//this.featureElement.setStyle( "display", "none" );
	},
	
	open: function(){
		//alert("show");
		//this.featureElement.setStyle( "display", "block");
		this.setIsOpen( true );
		this.showNavigation(true );
		new Fx.Style( this.featureElement, 'height', {transition: Fx.Transitions.Circ.easeInOut}).start(this.currentHeight);
	},
	
	reset: function(){
		
		this.showNavigation( false );
	},
	
	setIsOpen : function( value ){
		this.isOpen = value;
	},
	
	getIsOpen : function(){
		return this.isOpen;
	},
	
	setCurrentHeight: function( h ){
		this.currentHeight = h;
	},
	
	
	getCurrentHeight: function(){
		return this.currentHeight;
	}
	
	
});

/* allow our class to broadcast events to anyone listening */
Pagination.implement(new Events);



