var growl = new Class({
  Implements: Options,

  options: {
    caption: 'aPilot',
    text: 'welcome buddy :)',
    icon: 'growl',
    root: '/css/global/ui/img/growl/',
    // dimensions: [190, 52],
    dimensions: [200, 58],
    lang: lang,
    canvas: new canvas()
  },
  
  initialize: function(options) {
    this.setOptions(options);
    // if (BrowserPlus) {
    //   var icon   = 'http://apilot.beta.apilot.cz'+this.options.root+this.options.icon+'.png'
    //   var message   = this.options.text.substitute(this.options.lang);
    //   var title = this.options.caption.substitute(this.options.lang);
    //   
    //   BrowserPlus.init(function(res) {  
    //     if (res.success) {  
    //       BrowserPlus.require({
    //         services: [{service: "Notify"}]
    //         },  
    //         function(r) {  
    //           if (r.success) {  
    //             BrowserPlus.Notify.show({
    //               'title': title,
    //               'message': message,
    //               'icon': icon
    //             },  
    //             function(){});  
    //         }
    //       });  
    //     }  
    //   });
    //   
    //   // 
    //   return;
    // }
    
   
    // alert(this.options.text);
        
    this.growl   = new Element('div', {'class': 'growl', 'styles': {'opacity': 0, 'width': this.options.dimensions[0], 'height': this.options.dimensions[1]}});
    this.ct      = new Element('div', {'class': 'ct', 'styles': { 'height': this.options.dimensions[1]}});
    this.caption = new Element('h3',  {'class': 'caption'});
    this.text    = new Element('div', {'class': 'text'});
    // this.canvas  = new Element('canvas', {'id': 'growl_canvas', 'width': this.options.dimensions[0], 'height': this.options.dimensions[1]});
    this.img     = new Element('img', {'src': this.options.root+this.options.icon+'.png', 'alt': 'growl icon'});
    
    // lang conversion
    this.options.text    = this.options.text.substitute(this.options.lang);
    this.options.caption = this.options.caption.substitute(this.options.lang);
    
    // this.canvas.set('html', '<div></div>');
    
    // var top = 5;
        
    // if (document.getElement('.growl'))
    // {
    //   top = document.getElement('.growl').getCoordinates().top+5;
    // }
    // if ($('left')) {
    //   this.growl.setStyle('width', $$('#left .bd')[0].getStyle('width'));
    // }

    this.growl.setStyle('top', -this.options.dimensions[1]);

    // this.growl.setStyles('heigt', 0);
    // this.growl.setStyles('left', 10);
    
    this.caption.set('text', this.options.caption);
    this.text.set('text', this.options.text);
    this.img.inject(this.ct, 'top');
    this.caption.inject(this.ct, 'top');
    this.text.inject(this.ct);
    this.ct.injectInside(this.growl);
    // this.canvas.injectInside(this.growl);
    this.growl.inject(document.body, 'top');
    this.growl_show_hide(this.growl);
    // 
    // this.ctx = this.options.canvas.ctx('growl_canvas');
    // this.options.canvas.rounded({
    //   ctx: this.ctx,
    //   x: 0,
    //   y: 0,
    //   width: this.options.dimensions[0],
    //   height: this.options.dimensions[1],
    //   radius: [8,1,1],
    //   color: '#000',
    //   opacity: 0.8
    // });
  },
  growl_show_hide: function (growl)
  {
    // new sound('blow');   
    var fx = new Fx.Morph(this.growl, {
      duration: 1000,
      transition: Fx.Transitions.Quart.easeOut,
      onComplete: function()
      {
        // for second execute of complete by chain
        if (this.call)
        {
          this.dispose();
        }
        this.call = true
      }.bind(growl)
    });
    
    fx.start({
     'opacity': [0, 1],
     'top': [-58, 0]
   }).chain(function() {
     // executes 2 seconds after completion of above effect
     this.start.delay(3000, this, {
       'opacity': [1, 0],
       'top': [0, -58]
     });
   });
  }
});

window.addEvent('load', function(){
  (function(){
    if ($$('#report2growl div'))
    {
      $$('#report2growl div').each(function(report, i){
        (function(){
          new growl({
            caption: report.getElement('h3').get('text'),
            icon: report.getProperty('rel'),
            text: report.getElement('p').get('text')
          });
        }.delay(1000+3000*i, report));
                
        if (action = report.getElement('.action')) {
          if (action.hasClass('higlight')) {
            id = action.getProperty('rel');
            $$('#list-elements li[value='+id+']').addClass('selected');
          }
        }
        
      });
    }
  }).delay(1000);
});