0
@@ -17,6 +17,5 @@ Craig P Jolicoeur <cpjolicoeur@gmail.com - http://github.com/cpjolicoeur>
0
 
0
 == TODO ==
0
 
0
-* Make sure growl divs are removed when they are finished.
0
 * If using Effects, do a sanity check to make sure the needed libraries
0
 are included.
0
\ No newline at end of file

0
@@ -34,54 +34,36 @@ Growl.Base = Class.create({
0
     animated: 0.75
0
   },
0
   
0
-	initialize: function(background) {
0
-		this.background = background;
0
-		this.styles     = arguments[1] || {};
0
+	create: function(class_names) {
0
+		var elem = new Element('div', { class: class_names }).hide();
0
+		elem.insert({ bottom: new Element('img') });
0
+		elem.insert({ bottom: new Element('h3') });
0
+		elem.insert({ bottom: new Element('p') });
0
+		document.body.insert({ bottom: elem });
0
     
0
-		var image = new Image;
0
-		image.src = this.background;
0
+		return elem;
0
   },
0
   
0
-	create: function() {
0
-		var block_elem = new Element('div').hide().setStyle(Object.extend({
0
-			position:   'absolute',
0
-			zIndex:     '999',
0
-			color:      '#fff',
0
-			font:       '12px/14px "Lucida Grande", Arial, Helvetica, Verdana, sans-serif',
0
-			background: 'url(' + this.background + ') no-repeat'
0
-		}, this.styles.div || {}));
0
-		document.body.insert({ bottom: block_elem });
0
-		
0
-		$A([
0
-			new Element('img').setStyle(this.styles.img), 
0
-			new Element('h3').setStyle(this.styles.h3),
0
-			new Element('p').setStyle(this.styles.p) 
0
-		]).each(function(elem) {
0
-			block_elem.insert({ bottom: elem });
0
-		}.bind(this));
0
-		
0
-		return block_elem;
0
-	},
0
-	
0
-	show: function(block_elem, options) {
0
+	show: function(elem, options) {
0
     if (this.options.animated)
0
-			new Effect.Appear(block_elem, { duration: this.options.animated });
0
+			new Effect.Appear(elem, { duration: this.options.animated });
0
     else
0
-			block_elem.show();
0
+			elem.show();
0
     
0
     if (this.options.autohide)
0
-			this.hide.bind(this).delay(options.autohide);
0
-		else
0
-			block_elem.observe('click', this.hide.bindAsEventListener(this));
0
+			this.hide.bind(this, elem).delay(options.autohide);
0
+		else {
0
+			elem.observe('click', function(event) {
0
+				this.hide(event.findElement('div'));
0
+			}.bindAsEventListener(this));
0
+		}
0
   },
0
   
0
   hide: function(elem) {
0
     if (this.options.animated) {
0
       new Effect.Fade(elem, { 
0
-				duration: this.options.animated, 
0
-				afterFinishInternal: function(effect) {
0
-					effect.element.remove();
0
-				}
0
+				duration:            this.options.animated, 
0
+				afterFinishInternal: elem.remove.bind(elem)
0
       })
0
     } else
0
       elem.remove();
0
@@ -90,38 +72,32 @@ Growl.Base = Class.create({
0
 
0
 Growl.Smoke = Class.create(Growl.Base, {
0
   initialize: function($super) {
0
-		this.queue = [];
0
+		this.cache = $H({});
0
     this.from_top = 0;
0
-		$super(arguments[1] || 'smoke.png', {
0
-			div: { width: '298px', height: '73px', right: '10px' },
0
-			img: { float: 'left', margin: '12px' },
0
-			h3:  { margin: 0, padding: '10px 0', 'font-size': '13px' },
0
-			p:   { margin: '0 10px', 'font-size': '12px' }
0
-		});
0
   },
0
   
0
   show: function($super) {
0
     var options  = Object.extend(this.options, arguments[1] || {});
0
-		block_elem = this.create();
0
+		var elem = this.create(options.class_names || 'growl-smoke');
0
+		
0
+		var delta = document.viewport.getScrollOffsets()[1] + this.from_top;
0
+		elem.setStyle({ top: delta+'px' });
0
     
0
-		var delta = document.viewport.getScrollOffsets()[1] + 10 + this.from_top;
0
-		block_elem.setStyle({ top: delta+'px' });
0
+		elem.down('img').setAttribute('src', options.image);
0
+		elem.down('h3').update(options.title);
0
+		elem.down('p').update(options.text);
0
     
0
-		block_elem.down('img').setAttribute('src', options.image);
0
-		block_elem.down('h3').update(options.title);
0
-		block_elem.down('p').update(options.text);
0
+		this.from_top += elem.getHeight();
0
+		this.cache.set(elem.identify(), true);
0
     
0
-		this.from_top += 83;
0
-		this.queue.push(block_elem);
0
-		$super(block_elem, options);
0
+		$super(elem, options);
0
   },
0
   
0
-	hide: function($super) {
0
-		var elem = this.queue.shift();
0
+	hide: function($super, elem) {
0
     $super(elem);
0
-		// elem.remove(); TODO: we do need to remove the div when we are done
0
+		this.cache.unset(elem.identify());
0
     
0
-		if (this.queue.length == 0)
0
+		if (this.cache.keys().length == 0)
0
       this.from_top = 0;
0
   }
0
 });

0
@@ -6,6 +6,7 @@
0
 <script type="text/javascript" charset="utf-8" src="prototype-1.6.0.2.js"></script>
0
 <script type="text/javascript" charset="utf-8" src="effects.js"></script>
0
 <script type="text/javascript" charset="utf-8" src="growl.js"></script>
0
+<link rel="stylesheet" href="growl.css" type="text/css" media="screen"  />
0
 <style type="text/css" media="screen">
0
   * {
0
     margin: 0;