var Growl = new Class({
Implements: [Events, Options],
initialize: function(options){
this.setOptions(options);
},
create: function(title, content){
this.fireEvent('start');
this.container = new Element('div', {'class': 'growl'});
this.container.inject(this.options.where || document.body);
this.height = this.container.getDimensions().height;
this.container.setStyle(this.options.position.x, this.options.margin);
this.container.setStyle(this.options.position.y, this.options.margin);
this.closeBtn = new Element('button', {
'class': 'close', title: 'Close',
events: {
click: (function(){ this.close(); }).bind(this)
}
});
this.title = new Element('div', {
text: title, 'class': 'growlTitle ' + this.options.icon
}).adopt(this.closeBtn).inject(this.container);
this.content = new Element('div', {
html: content, 'class': 'growlContent'
}).inject(this.container);
},
display: function(){
this.container.fade(0, 1);
pushFx = new Fx.Tween(this.container, {
transition: Fx.Transitions.Circ.easeOut
});
if(this.options.duration != 0)
this.close.delay(this.options.duration, this);
this.fireEvent('display');
},
close: function(){
this.container.disintegrate();
this.fireEvent('close', this);
this.removeEvents('close');
}
});
var Growls = new Class({
options: {
position: {x: 'left', y: 'bottom'},
margin: 12,
icon: 'info',
growls: [],
duration: 4000
},
Implements: [Events, Options],
initialize: function(options){
this.setOptions(options);
},
growl: function(title, content, options){
if(!content) content = '';
if(!options) options = {};
var ng = new Growl($merge(this.options, options));
ng.addEvent('close', (function(gr){
this.options.growls.erase(gr);
this.pull.delay(600, this);
}).bind(this));
ng.create(title, content);
this.options.growls.unshift(ng);
this.push(ng);
if(options.close){
options.close = $splat(options.close);
options.close.each(function(gr){
gr.close.delay(500, gr);
});
}
return ng;
},
load: function(title, options){
return this.growl(title, '<div class="growlLoading"></div>', $extend({duration: 0}, options));
},
pull: function(){
this.totalHeight = 0;
this.options.growls.each(function(gr){
var el = gr.container;
this.totalHeight += el.getDimensions().height + this.options.margin;
el.tween(this.options.position.y, this.totalHeight - el.getDimensions().height);
}, this);
},
push: function(ng){
this.totalHeight = 0;
this.options.growls.each(function(gr){
var el = gr.container;
this.totalHeight += el.getDimensions().height + this.options.margin;
el.set('tween', {
transition: Fx.Transitions.Circ.easeOut
}).tween(this.options.position.y, this.totalHeight - el.getDimensions().height);
}, this);
ng.display.delay(500, ng);
this.pull();
},
start: function(queue){
this.queue(queue);
},
queue: function(queue){
this.run(0, queue);
},
run: function(i, queue){
var gr = this.growl(queue[i].title, queue[i].content, queue[i].options);
gr.addEvent('close', (function(){
if(i < queue.length - 1) this.run(i + 1, queue);
}).bind(this));
return queue[i];
}
});