var jsAlert = Class.create({

	title:		'',
	contents:	Array(),
	handlers:	Array(),
	changing:	false,
	initialize:	function() {
		
		$( 'popup-holder' ).innerHTML = '';
		this.contents = Array();
		this.title = '';
	
	},
	
	addTab: function( tabName, body ) {
	
		this.contents[ ( this.contents.length ) ]  = Array( tabName, body );
		
		return this;
		
	},

	addAjaxTab: function( tabName, url, params ) {

		params.action	= url;
			
		new Ajax.Request( Klydo.AJAX, {
	
			parameters: params,
			onSuccess: function( e ) {

				var data = eval( '(' + e.responseText + ')' );
	
				this.contents[ ( this.contents.length ) ]  = Array( tabName, data.html );
	
				return this;

			}

		});
		
	},
	
	hideOverlay: function() {
		
		Event.stopObserving( 'popup-overlay', 'click' );
		
		new Effect.Morph( 'popup-overlay', {
			
			style: 'opacity: 0',
			afterFinish: function() {
				
				$( 'popup-overlay' ).style.display = 'none';
			
			}
		
		});
	
	},
	
	destroy: function() {
	
		Event.stopObserving( 'popup-overlay', 'click' );
		
		new Effect.Morph( 'popup-overlay', {
			
			style: 'opacity: 0',
			afterFinish: function() {
				
				$( 'popup-overlay' ).style.display = 'none';
			
			}
		
		});
		
		new Effect.Fade( 'popup-holder', { duration: 0.3, afterFinish:function() { $('popup-holder').innerHTML = ''; $( 'popup-holder' ).style.display = 'block'; } });
		
		if( this.handlers[ 'close' ] ) {
			
			for( var i = 0; i < this.handlers[ 'close' ].length; i++ ) {
			
				this.handlers[ 'close' ][ i ]();
			
			}
		
		}
		
	},
	
	showOverlay: function( opacity ) {
		
		if( this.moving ) {
			
			return false;
		
		}
		
		this.moving = true;
		
		$( 'popup-overlay' ).style.display = 'block';
		
		if( !opacity ) {
		
			opacity = '0.4';
		
		}
		
		new Effect.Morph( 'popup-overlay', {
			
			style: 'opacity: ' + opacity,
			duration: 0.3,
			afterFinish: function() {
			
				this.moving = false;
			
				$( 'popup-overlay' ).observe( 'click', function( i ) {
							
					$( 'popup-overlay').stopObserving( 'click' );
		
					new Effect.Morph( 'popup-overlay', {
						
						style: 'opacity: 0',
						afterFinish: function() {
							
							$( 'popup-overlay' ).style.display = 'none';
						
						}
					
					});			
					
					if( this.handlers[ 'close' ] ) {
						
						for( var i = 0; i < this.handlers[ 'close' ].length; i++ ) {
						
							this.handlers[ 'close' ][ i ]();
						
						}
					
					}

					new Effect.Fade( 'popup-holder', { duration: 0.3, afterFinish:function() { $('popup-holder').innerHTML = ''; $( 'popup-holder' ).style.display = 'block'; } });

				}.bind(this));
			
			}.bind(this)
		
		});
	
	},
	
	show: function() {
	
		var html  = '<div id="popup">';
			html += '	<div id="popup-close"></div>';
			html += '	<div id="popup-top"></div>';
			html += '	<div id="popup-spacer">';
			html += '		#{content}';
			html += '	</div>';
			html += '	<div id="popup-bottom"></div>';
			html += '</div>';
			
		var template = new Template( html );
		
		var tabs	= '';
		var array;
		
		if( this.contents.length > 1 ) {

			var content	= '';
			
			for( var i = 0; i < this.contents.length; i++ ) {
	
				array = this.contents[ i ];
	
				tabs	+= '<div class="tab" id="tab-' + i + '">'	+ array[ 0 ] + '</div>';
				content	+= '<div id="tab-' + i + '-content">' + array[ 1 ] + '</div>';
	
			}
			
		} else {
		
			array = this.contents[ 0 ];
			
			var content	= '<div id="tab-0-content"><h1 id="h1-title-popup">' + array[ 0 ] + '</h1><div id="content-popup">' + array[ 1 ] + '</div></div>';
	
		}
		
		var params = {
		
			'tabs': tabs,
			'content': content
		
		};
				
		var popup = template.evaluate( params );

		$( 'popup-holder' ).style.visibility = 'hidden';
		$( 'popup-holder' ).innerHTML = popup;
		
		var height = document.documentElement.clientHeight;
		    height = ( height / 2 );
		    height = ( height - ( $( 'popup-holder' ).clientHeight / 2 ) );
		    		
		$( 'popup-holder' ).style.top = height + 'px';

		var width = document.documentElement.clientWidth;
		    width = ( width / 2 );
		    width = ( width - ( $( 'popup-holder' ).clientWidth / 2 ) );

		$( 'popup-holder' ).style.left = width + 'px';
		
		$( 'popup-holder' ).style.display = 'none';
		$( 'popup-holder' ).style.visibility = 'visible';
		$( 'popup-holder' ).style.position	= 'absolute';
		
		$( 'popup-close' ).observe( 'click', function( e ) {
		
			this.destroy();
		
		}.bind(this));
		
		new Effect.Appear( 'popup-holder' );
		
		this.showOverlay();
	
	},
	
	moveToMiddle: function() {

		var height = document.documentElement.clientHeight;
		    height = ( height / 2 );
		    height = ( height - ( $( 'popup-holder' ).clientHeight / 2 ) );
		    		
		$( 'popup-holder' ).style.top = height + 'px';

		var width = document.documentElement.clientWidth;
		    width = ( width / 2 );
		    width = ( width - ( $( 'popup-holder' ).clientWidth / 2 ) );

		$( 'popup-holder' ).style.left = width + 'px';
			
	},
	
	registerCloseButton: function( element ) {
	
		element.observe( 'click', function() {
		
			this.destroy();
		
		}.bind(this));
	
	},
	
	addHandler: function( handle, func ) {
		
		if( !this.handlers[ handle ] ) {
		
			this.handlers[ handle ]	= Array();
			
		}
		
		this.handlers[ handle ].push( func );
	
	}

});