var gnr = Class.create({

	_page: 1,
	_sites: null,
	_working: false,
		
	initialize: function() {
		
		document.observe( 'dom:loaded', function() {
		
			this._sites	= $$( '.OP-showcase-sites ul' )[0 ];
			this.watchSites();
		
		}.bind(this));
	
	},
	
	watchSites: function() {

		$$( '.OP-showcase-selector-previous' )[0].observe( 'click', function( event ) {
		
			event.stop();
			
			var newPage	= ( this._page - 1 );

			if( newPage < 1 ) {
				
				newPage = this._sites.select( 'li' ).length;
			
			}

			this.goTo( newPage, 'left' );
		
		}.bind(this));	

		$$( '.OP-showcase-selector-next' )[0].observe( 'click', function( event ) {
		
			event.stop();
			
			var newPage	= ( this._page + 1 );
			
			if( newPage > 5 ) {
				
				newPage = 1;
			
			}
			
			this.goTo( newPage, 'right' );
		
		}.bind(this));
		
		$$( '.OP-showcase-selector-pins li' ).each( function( element ) {
		
			element.observe( 'click', function( event ) {
				
				event.stop();
				
				var newPage	 = Event.element( event ).className.split( ' ' )[0].split( 'pin-' )[ 1 ];
			
				if( newPage != this._page ) {
				
					if( newPage > this._page ) {
					
						var dir = 'right';
					
					} else {
						
						var dir = 'left';
					
					}
				
					this.goTo( newPage, dir );
				
				}
			
			}.bind(this));
		
		}.bind(this));
			
	},
	
	goTo: function( page, dir ) {
		
		if( this._working !== true ) {
			
			this._working = true;
			
			$$( 'li.pin-' + this._page )[ 0 ].removeClassName( 'selected' );
			$$( 'li.pin-' + page )[ 0 ].addClassName( 'selected' );
			
			this._sites.select( 'li.' + page )[0].setStyle({
			
				zIndex: 29
			
			});
			
			switch( dir ) {
			
				case 'left':
						
					new Effect.Morph( this._sites.select( 'li.' + this._page )[0], {
					
						style: {
						
							left: '-700px',
						
						},
						duration: 0.2,
						afterFinish: function() {
											
							this._sites.select( 'li.' + page )[0].setStyle({
							
								zIndex: 30
							
							});
								
							this._sites.select( 'li.' + this._page )[0].setStyle({
							
								zIndex: '0',
								left: '0px'
							
							});
							
							this._page = page;
							this._working = false;
						
						}.bind(this)
						
					});
					
					break;
					
				case 'right':

					new Effect.Morph( this._sites.select( 'li.' + this._page )[0], {
					
						style: {
						
							left: '700px',
						
						},
						duration: 0.2,
						afterFinish: function() {
											
							this._sites.select( 'li.' + page )[0].setStyle({
							
								zIndex: 30
							
							});
								
							this._sites.select( 'li.' + this._page )[0].setStyle({
							
								zIndex: '0',
								left: '0px',
							
							});
							
							this._page = page;
							this._working = false;
						
						}.bind(this)
						
					});
									
					break;
					
			}
					
		}
			
	}

});

var GNRation = new gnr();