var growl_config = {
	
	setup: false,
	parent: 'growl-notifications'

};

var growl = Class.create({ 
	
	title: '',
	message: '',
	type: '',
	parent: '',
	
	initialize: function( title, msg, type ) {
		
		if( !type ) { type = 'notice'; }
	
		if( growl_config.setup === false || !$( growl_config.parent ) ) {
			
			document.body.insert({bottom: '<ul id="' + growl_config.parent + '"></ul>'});
			growl_config.setup = true;
			
		}
		
		this.title		= title;
		this.message	= msg;
		this.type		= type;
		this.parent		= $( growl_config.parent );
		var time		= new Date();
		this.id			= 'growl_' + time.getTime();
		
		this.send();
	
	},
	
	send: function() {
	
		var html = this.design();
		
		this.parent.insert({bottom:html});
		
		this.fadeIn();
		
	},
	
	fadeIn: function() {
			
		var Appear	= new Effect.Appear( this.id, {
			
			afterFinish: function() {
					
				this.itsShowing( 2 );
				
			}.bind(this)
			
		});
	
		$( this.id ).observe( 'mouseover', function( e ) {
	
			Appear.cancel();
			
			$( this.id ).show();
	
			this.itsShowing( 2 );
	
		}.bind(Appear).bind(this));

	
	},

	itsShowing: function( delay ) {

		$( this.id ).stopObserving( 'mouseover' );
	
		var self	= this;
		var Fade	= new Effect.Fade( this.id, {
	
			delay: 			delay,
			duration:		2,
			to:				0.2,
			
			beforeStart:	function( e ) {
	
				$( self.id ).observe( 'mouseover', function( e ) {
	
					$( self.id ).stopObserving( 'mouseout' );
					
					Fade.cancel();
					
					$( self.id ).style.opacity = '1';
					$( self.id ).style.display = 'block';
	
					$( self.id ).observe( 'mouseout', function( e ) {
	
						self.itsShowing( 0 );				
	
					});
	
				}.bind(Fade));
	
			},
	
			afterFinish:function( e ) {
	
				$( self.id ).remove();
	
			}
	
		});
	
	},
		
	design: function() {
		
		var config = { 'id': this.id, 'title': this.title, 'message': this.message };

		switch( this.type ) {
	
			case 'success':
	
				config.className = 'green';
	
				break;
	
			case 'failure':
	
				config.className = 'red';
	
				break;
	
			case 'notice':
	
				config.className = 'grey';
	
				break;
				
			case 'blue':
				
				config.className = 'blue';
				
				break;
	
		}
	
		var tmp = new Template( '<li class="#{className}" id="#{id}" style="display: none;"><div class="top"></div><div class="spacer"><div class="close" id="#{id}-exit"></div><div class="fyi"><div class="icon"></div><div class="text"><h2>#{title}</h2><p>#{message}</p></div></div></div><div class="bottom"/></li>' );
	
		return tmp.evaluate( config );
	
	}
	
});