0
@@ -1,15 +1,15 @@
0
-/*  Window.Growl, version 2.0: http://icebeat.bitacoras.com
0
- *  Daniel Mota aka IceBeat <daniel.mota@gmail.com>
0
+/*  Growl for Prototype
0
+ *  Thomas Reynolds <tdreyno@gmail.com>
0
 --------------------------------------------------------------------------*/
0
 var Growl = {};
0
 
0
 Growl.Base = Class.create({
0
-	
0
   options: {
0
-		image: 'http://www.icebeat.bitacoras.com/public/mootools/growl/growl.jpg',
0
-		title: 'Window.Growl by Daniel Mota',
0
-		text: 'http://icebeat.bitacoras.com',
0
-		duration: 2
0
+		image:   'growl.jpg',
0
+		title:   'Default popup title',
0
+		text:    'Lorem ipsum, whatever',
0
+		autohide: 2,
0
+		animated: 0.75
0
   },
0
   
0
   initialize: function(background) {
0
@@ -23,7 +23,7 @@ Growl.Base = Class.create({
0
   create: function() {
0
     var block_elem = new Element('div').hide().setStyle(Object.extend({
0
       position:   'absolute',
0
-			'z-index':  '999',
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
@@ -42,38 +42,51 @@ Growl.Base = Class.create({
0
   },
0
   
0
   show: function(block_elem, options) {
0
-		block_elem.show();
0
-		this.hide.bind(this).delay(options.duration);
0
+		if (this.options.animated)
0
+			new Effect.Appear(block_elem, { duration: this.options.animated });
0
+		else
0
+			block_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
   },
0
   
0
   hide: function(elem) {
0
-		elem.hide();
0
+		if (this.options.animated)
0
+			new Effect.Fade(elem, { duration: this.options.animated });
0
+		else {
0
+			elem.hide();
0
+			elem.remove();
0
+		}
0
   }
0
-	
0
 });
0
 
0
 Growl.Smoke = Class.create(Growl.Base, {
0
   initialize: function($super) {
0
     this.queue = [];
0
-		$super(arguments[1] || 'http://www.icebeat.bitacoras.com/public/mootools/growl/smoke.png', {
0
-			div: { width: '298px', height: '73px' },
0
-			img: { float: 'left', margin: '12px;' },
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[0] || {});
0
+		var options  = Object.extend(this.options, arguments[1] || {});
0
     block_elem = this.create();
0
     
0
-		var delta = document.viewport.getScrollOffsets()[1]+10+((this.queue.length)*83);
0
-		block_elem.setStyle({ 'top':delta+'px', 'right':'10px', 'display':'block'});
0
+		var delta = document.viewport.getScrollOffsets()[1] + 10 + this.from_top;
0
+		block_elem.setStyle({ top: delta+'px' });
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
     
0
+		this.from_top += 83;
0
     this.queue.push(block_elem);
0
     $super(block_elem, options);
0
   },
0
@@ -81,12 +94,14 @@ Growl.Smoke = Class.create(Growl.Base, {
0
   hide: function($super) {
0
     var elem = this.queue.shift();
0
     $super(elem);
0
-		elem.remove();
0
+		
0
+		if (this.queue.length == 0)
0
+			this.from_top = 0;
0
   }
0
 });
0
 
0
-/*Gr0wl.Bezel = Class.create(Gr0wl.Base, {
0
-	
0
+/*
0
+Gr0wl.Bezel = Class.create(Gr0wl.Base, {
0
   create: function() {
0
     this.i=0;
0
     this.parent({
0
@@ -115,7 +130,7 @@ Growl.Smoke = Class.create(Growl.Base, {
0
     this.i--;
0
     this.callChain();
0
   }
0
-	
0
 });
0
 
0
-Gr0wl.Bezel.implement(new Chain);*/
0
\ No newline at end of file
0
+Gr0wl.Bezel.implement(new Chain);
0
+*/
0
\ No newline at end of file

0
@@ -4,11 +4,39 @@
0
 <title>Window.Growl 2.0</title>
0
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
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="http://icebeat.bitacoras.com/mootools/growl/css.css" type="text/css" />
0
+<style type="text/css" media="screen">
0
+  * {
0
+  	margin: 0;
0
+  	padding: 0; }
0
+
0
+  body {
0
+  	margin:50px;
0
+  	font: 13px/14px "Lucida Grande", Arial, Helvetica, Verdana, sans-serif; }
0
+
0
+  a {
0
+  	color:#666; }
0
+
0
+  a:hover {
0
+  	text-decoration:none; }
0
+
0
+  ul, li {
0
+  	margin:10px; }
0
+
0
+  pre {
0
+  	width:450px;
0
+  	background-color:#0C1021;
0
+  	padding:20px;
0
+  	margin:25px 0px; }
0
+
0
+  code {
0
+  	color:#7D93B8;
0
+  	font: 12px/13px Monaco, Courier, monospace; }
0
+</style>
0
 </head>
0
 <body>
0
-	<h3><img src="http://icebeat.bitacoras.com/mootools/growl/logo.jpg" alt="Window.Growl 2.0" title="Window.Growl 2.0"></h3>
0
+	<h3><img src="logo.jpg" alt="Window.Growl 2.0" title="Window.Growl 2.0"></h3>
0
   <ul>
0
     <li><a href="#" id="smoke" title="Show msg Smoke">Show Growl Smoke.</a></li>
0
     <li><a href="#" id="bezel" title="Show msg Bezel">Show Growl Bezel.</a></li>
0
@@ -26,17 +54,21 @@
0
   <script type="text/javascript" charset="utf-8">
0
     var growl = new Growl.Smoke;
0
     $('smoke').observe('click', function(event) {
0
-      growl.show();
0
+      growl.show({
0
+        image: 'http://www.gravatar.com/avatar.php?gravatar_id=a4c4bd782c415f9ec93fe11e5694bf06&rating=PG&size=48',
0
+        title: 'Hey look, it&rsquo;s me!',
0
+        autohide: 0
0
+      });
0
       event.stop();
0
     });
0
     
0
-		$('bezel').observe('click', function(event) {
0
-			var growl = new Growl.Bezel;
0
-			growl.show({
0
-				title: 'Window.Growl<br />By Daniel Mota'
0
-			});
0
-			event.stop();
0
-		});
0
+    // $('bezel').observe('click', function(event) {
0
+    //  var growl = new Growl.Bezel;
0
+    //  growl.show({
0
+    //    title: 'Window.Growl<br />By Daniel Mota'
0
+    //  });
0
+    //  event.stop();
0
+    // });
0
   </script>
0
 </body>
0
 </html>
0
\ No newline at end of file