var growlSettings	= {
	
	count: 0

};

var Growl	= Class.create({

	TITLE:		null,
	MESSAGE:	null,
	TYPE:		null,
	CONTAINER:	'ul.growl',
	CLASSNAME:	'growl-item',
	ID_SYNTAX:	'growl-item-#{count}',
	TEMPLATE:	'<li id="#{id}" class="growl-item #{type}" style="display: none; margin: 0; padding: 0;"><h1>#{title}</h1><p>#{message}</p></li>',
	DURATION:	1,
	DELAY:		2,
	ITEM:		{},
	EFFECT:		null,
	
	initialize: function( title, message, type ) {
	
		if( !type ) {
			
			type = 'notice';
		
		}
	
		this.TITLE		= title;
		this.MESSAGE	= message;
		this.TYPE		= type;

		this.show();
	
	},
	
	setContainer: function( container ) {
	
		this.CONTAINER = container;
	
	},
	
	setTemplate: function( template ) {
	
		this.TEMPLATE = template;
	
	},
	
	setIdSyntax: function( syntax ) {
		
		this.ID_SYNTAX = syntax;
	
	},
	
	setDuration: function( duration ) {
		
		this.DURATION = duration;
	
	},
	
	setDelay: function( delay ) {
		
		this.DELAY = delay;
	
	},
	
	show: function() {
	
		var container = $$( this.CONTAINER );
		
		if( container[ 0 ] ) {
			
			container = container[ 0 ];
			
			this.add( container );
		
		} else {
		
			throw SyntaxError( 'Invalid Growl container.' );
		
		}
	
	},
	
	add: function( container ) {
		
		var id		= new Template( this.ID_SYNTAX );
	 	id			= id.evaluate({
				
			'count': growlSettings.count
		
		});

		var html	= new Template( this.TEMPLATE );
		html		= html.evaluate({
			
			id:			id,
			type:		this.TYPE,
			title:		this.TITLE,
			message:	this.MESSAGE
		
		});
	
		container.insert({
		
			bottom: html
		
		});
		
		this.ITEM = {
			
			'id': id
		
		};
		
		this.fadeIn();
		
		growlSettings.count = ( growlSettings.count + 1 );
	
	},
	
	fadeIn: function() {
	
		var item	= $( this.ITEM.id );

		this.EFFECT	= new Effect.Appear( item, {
			
			delay:			this.DELAY,
			duration:		this.DURATION,
			afterFinish:	function( event ) {
			
				this.itsShowing( this.DELAY );
			
			}.bindAsEventListener(this)
		
		});
		
		item.observe( 'mouseover', function( event ) {
			
			this.EFFECT.cancel();
			
			item.setStyle({
				
				opacity: 1,
				display: 'block'
			
			});			
			item.show();
			
			this.itsShowing( this.DELAY );
		
		}.bindAsEventListener(this, item));
	
	},
	
	itsShowing: function( delay ) {
	
		var item	= $( this.ITEM.id );

		item.stopObserving( 'mouseover' );
		
		this.EFFECT = new Effect.Fade( item, {
		
			delay:			delay,
			duration:		this.DURATION,
			
			beforeStart:	this.before.bindAsEventListener(this, item),
			afterFinish:	this.after.bindAsEventListener(this,item)
					
		});
		
	},
	
	before: function( event ) {
			
		var args = $A(arguments);
		var item = args[ 1 ];
				
		item.observe( 'mouseover', function( e ) {
			
			item.stopObserving( 'mouseout' );
			
			this.EFFECT.cancel();
			
			item.setStyle({
				
				opacity: 1,
				display: 'block'
			
			});
		
			item.observe( 'mouseout', function( x ) {
			
				this.itsShowing( ( this.DURATION / 2 ) );
			
			}.bindAsEventListener(this));
		
		}.bindAsEventListener(this,item));	

	},
	
	after: function( event ) {
	
		var args = $A(arguments);
		var item = args[ 1 ];
		
		item.remove();
	
	}

});