/* pannel
 * create pannel layer
 * by JSON
 * autor @ Miroslav Kovar
 * developed for Pilot.cz
 * usage:
 

 */
var pannel = new Class({
  Implements: Options,

  options: {
    config: {
      // type: shadowin
      shadowin: {
        closeFx: true,
        drag: true,
        resize: true,
        close: true,
        maximize: true,
        ftbar: true
      },
      
      // type: opacwin
      opacwin: {
        openFx: false,
        closeFx: true,
        drag: true,
        resize: true,
        close: true,
        maximize: true,
        modal: true
      },
      
      // type: flow
      flow: {
        openFx: true,
        closeFx: true,
        drag: false,
        resize: false,
        close: false,
        closeClick: true,
        maximize: false,
        ftbar: false,
        opacity: 0.8,
        dimensions: {
          x: 200,
          y: 110
        },
        color: '#000'
      }
    },
    footer: true,
    head: true,
    ftbar: false,
    modal: false,
    title: false,
    closeClick: false,
    closeEscape: true,
    onClose:   new Function(),
    onOpen:    new Function(),
    container: document.body,
    appBody: document.getElement('#dc'),
    resize_limit: {
      x: [200, 600],
      y: [200, 600]
    },
    dimensions: {
      x: 400,
      y: 300
    },
    offset: {
      x: 0,
      y: 0
    },
    zIndex: 300,
    canvas: new canvas()
  },
  
  initialize: function(options){
    this.setOptions(options);
    $extend(this.options, this.options.config[this.options.type]);
    $extend(this.options, options);
        
    this.open();
  },
  close: function(){
    
    this.options.onClose.run([], this);
    // console.log('pannel off');   
    document.removeEvents('pannel_clear');
    document.fireEvent('pannel_close');
    document.removeEvents('pannel_close');
    
    if (this.options.pointer)
    {
      this.options.pointer.removeClass('ui_pannel_opened');
    }
    
    window.removeEvents('keyup');
    if (this.options.closeClick)
    {
      this.options.appBody.removeEvents('click');
    }
    if (this.options.closeFx)
    {
      var closeFx = new Fx.Morph(this.pannel, {
        duration: 200,
        onComplete: function()
        {
          this.ui.dispose();
        }.bind(this)
      });
      
      if (this.options.type == 'shadowin')
      {
        closeFx.start({
          'opacity': [1, 0]
        });
      }
      if (this.options.type == 'opacwin')
      {
        closeFx.start({
          'opacity': [1, 0]
        });
      }
      if (this.options.type == 'flow')
      {
        if (!this.options.flip)
        {
          closeFx.start({
            'opacity': [1, 0],
            'top': [this.pannel.getPosition(this.options.container).y, this.pannel.getPosition(this.options.container).y+30]
          });
        }
        else {
          closeFx.start({
            'opacity': [1, 0],
            'top': [this.pannel.getPosition(this.options.container).y, this.pannel.getPosition(this.options.container).y-30]
          });
        }
        
      }
      if (this.options.type == 'prefwin')
      {
        new Fx.Morph(this.pannel, {
          duration: 400,
          transition: Fx.Transitions.Quint.easeOut,
          onComplete: function()
          {
            this.options.onClose();
            this.ui.dispose();
          }.bind(this)
        }).start({
          'top': [0, (this.pannel.getSize().y*-1)]
        });
      }
    }
    else {
      this.options.onClose();
      this.ui.dispose();
    }
  },
  closeEscape: function(){
    if (this.options.closeEscape)
    {
      window.addEvent('keyup', function(event)
      {
        event = new Event(event);
        if (event.key == 'esc')
        {
          this.close();
        }
      }.bind(this));
    }
  },
  closeClick: function(){
    if (this.options.closeClick)
    {
      this.options.appBody.addEvent('click', this.close.bind(this));
    }
  },
  open: function(){
    
    if (!this.options.pointer)
    {
      document.fireEvent('pannel_clear');
      document.addEvent('pannel_clear', this.close.bind(this));
    }
    else if (!this.options.pointer.hasClass('ui_pannel_opened'))
    {
      document.fireEvent('pannel_clear');
      document.addEvent('pannel_clear', this.close.bind(this));
    }
    else {
      return;
    }

    if (this.options.pointer)
    {
      this.options.pointer.addClass('ui_pannel_opened');
    }
    
    this.build();
    if (this.options.openFx)
    {
      this.pannel.setStyle('opacity', 0);
    }    
    this.coordinates();
    this.type();
    this.dimensions();
    this.pannel.addClass('opened');
    this.content();
    this.drag();
    this.resize();
    this.closeEscape();
    this.closeClick();
    this.ftbarShow();
    // this.buttons();
    this.img();
    
    if (this.options.openFx)
    {
      if (this.options.type == 'flow')
      {
        pannelFx = new Fx.Morph(this.pannel, {
          duration: 200
        });
        
        if (!this.options.flip)
        {
          pannelFx.start({
            'opacity': [0, 1],
            'top': [this.pannel.getPosition(this.options.container).y+30, this.pannel.getPosition(this.options.container).y]
          });
        }
        else {
          pannelFx.start({
            'opacity': [0, 1],
            'top': [this.pannel.getPosition(this.options.container).y-30, this.pannel.getPosition(this.options.container).y]
          });
        }
      }
    }
  },  
  build: function(){
    this.ui      = new Element('div', {'class': 'ui'});  
    this.pannel  = new Element('div', {'class': 'pannel '+this.options.type+' '+this.options.addClass});
    this.ct      = new Element('div', {'class': 'ct'});
    this.hd      = new Element('div', {'class': 'hd'});
    this.bdp     = new Element('div', {'class': 'bdp'});
    this.bd      = new Element('div', {'class': 'bd'});
    this.ftbar   = new Element('div', {'class': 'ftbar hdn'});
    this.ft      = new Element('div', {'class': 'ft'});
    this.butbar  = new Element('div', {'class': 'butbar'});
    this.canvas  = new Element('canvas', {'id': 'canvas'});
    
    this.pannel.setStyle('z-index', this.options.zIndex+1);
    
    if (this.options.head)
    {
      this.hd.inject(this.ct);
      this.build_head();
    }
    
    this.bd.inject(this.bdp);
    this.bdp.inject(this.ct);
    
    if (this.options.buttons)
    {
      this.butbar.inject(this.ct);
    }
    if (this.options.footer)
    {
      this.ft.inject(this.ct);
      this.build_foot();
    }
    
    this.ct.inject(this.pannel);
    this.canvas.inject(this.pannel);
    
    this.pannel.inject(this.ui);
    this.ui.inject(this.options.container, 'top');
    
    if (this.options.ftbar)
    {
      this.ftbar.inject(this.bdp, 'after');
    }
    if (this.options.modal)
    {
      if (this.options.closeClick)
      {
        this.modal = new modal({
          opacity: 0.5,
          fire: true,
          zIndex: this.options.zIndex,
          onClick: this.close.bind(this),
          clickClose: true
        });
      }
      else {
        this.modal = new modal({
          opacity: 0.5,
          fire: true,
          zIndex: this.options.zIndex
        });
        document.addEvent('pannel_close', this.modal.hide.bind(this.modal));
      }
    }
    this.pannel.setStyles({
      'width': this.options.dimensions.x,
      'height': this.options.dimensions.y
    });
  },
  type: function(){
    this.ctx = this.options.canvas.ctx('canvas');
    this.ctx.clearRect(0, 0, this.options.dimensions.x, this.options.dimensions.y);
    
    if (this.options.type == 'flow'){
      this.options.offset = {
        x: 0,
        y: 0,
        top: 10
      };
      
      if (!this.options.flip)
      {
        var offset = {x: 0, y: 10, height: 0};
      }
      else {
        var offset = {x: 0, y: 0, height: 10};
        this.options.offset.top = 0;
      }
      
      // body
      this.options.canvas.rounded({
        ctx: this.ctx,
        x: offset.x,
        y: offset.y,
        width: this.options.dimensions.x,
        height: this.options.dimensions.y-offset.height,
        radius: [8,1,1],
        color: this.options.color,
        opacity: this.options.opacity
      });

      trinagleOfsetX = offset.x+((this.options.dimensions.x/2)-6)+this.pannel.triangle.left;
      if (trinagleOfsetX < 0)
      {
        trinagleOfsetX = 8;
      }
      if (trinagleOfsetX > this.options.dimensions.x-26)
      {
        trinagleOfsetX = this.options.dimensions.x-26;
      }
      
      if (this.options.flip)
      {
        trinagleOfsetY = this.options.dimensions.y-10;
      }
      else {
        trinagleOfsetY = offset.y;
      }
          
      // triangle
      this.options.canvas.triangl({
        ctx: this.ctx,
        x: trinagleOfsetX,
        y: trinagleOfsetY,
        size: 20,
        color: this.options.color,
        opacity: this.options.opacity,
        flip: this.options.flip
      });
    }
    
    // type: opacwin
    if (this.options.type == 'opacwin'){
      this.options.offset = {
        x: 0,
        y: 0
      };
      
      var offset = {x: 0, y: 0}; 
      
      // body
      this.options.canvas.rounded({
        ctx: this.ctx,
        x: offset.x,
        y: offset.y,
        width: this.options.dimensions.x,
        height: this.options.dimensions.y,
        radius: [5,1,1],
        color: '#2C2C2C',
        opacity: 1
      });
      
      // body
      this.options.canvas.rounded({
        ctx: this.ctx,
        x: offset.x+1,
        y: offset.y+1,
        width: this.options.dimensions.x-2,
        height: this.options.dimensions.y-2,
        radius: [4,1,1],
        color: '#646464',
        opacity: 1
      });
      
      // body
      this.options.canvas.rounded({
        ctx: this.ctx,
        x: offset.x+1,
        y: offset.y+5,
        width: this.options.dimensions.x-2,
        height: this.options.dimensions.y-6,
        radius: [4,1,1],
        color: '#363636',
        opacity: 1
      });
           
      // body
      this.options.canvas.rounded({
        ctx: this.ctx,
        x: offset.x+2,
        y: offset.y+2,
        width: this.options.dimensions.x-4,
        height: this.options.dimensions.y-4,
        radius: [4,1,1],
        color: '#181818',
        opacity: 1
      });
      
      
      // hd
      this.options.canvas.rounded({
        ctx: this.ctx,
        x: offset.x+2,
        y: offset.y+2,
        width: this.options.dimensions.x-4,
        height: 18,
        radius: [5,1,0],
        color: '#656A6E',
        opacity: 1,
        gradient: true
      });
      
      // hd line
      this.options.canvas.rounded({
        ctx: this.ctx,
        x: offset.x+2,
        y: offset.y+10,
        width: this.options.dimensions.x-4,
        height: 9,
        radius: [0,0,0],
        color: '#202020',
        opacity: 0.9
      });
    }
    
    // type: shadowin
    if (this.options.type == 'shadowin'){
      this.options.offset = {
        x: 13,
        y: 8
      };
      
      var offset = {x: 0, y: 0};
      
      var offset_x = 0;
      var offset_y = 0;
      var radius   = 20;
      var opac     = 0.01;
      
      for (i=0;i<10;i++)
      {
        //shadow
        this.options.canvas.rounded({
          ctx: this.ctx,
          x: offset.x+offset_x,
          y: offset.y+offset_y,
          width: this.options.dimensions.x-(offset_x*2),
          height: this.options.dimensions.y-(offset_y*2),
          radius: [radius,1,1],
          color: '#3c3c3c',
          opacity: opac
        });
        opac = opac+0.006;
        offset_x++;
        offset_y++;
        radius--;
      }  
      
      // border
      this.options.canvas.rounded({
        ctx: this.ctx,
        x: offset.x+12,
        y: offset.y,
        width: this.options.dimensions.x-24,
        height: this.options.dimensions.y-14,
        radius: [0,1,1],
        color: '#A0A0A0',
        // color: [105,105,105],
        opacity: 1
      });
 
      // body
      this.options.canvas.rounded({
        ctx: this.ctx,
        x: 13,
        y: 1,
        width: this.options.dimensions.x-26,
        height: this.options.dimensions.y-16,
        radius: [0,1,1],
        color: '#E8E8E8',
        // color: [187,187,187],
        opacity: 1
      });
    }
  },
  coordinates: function(){
    // center this
    if (this.options.type == 'opacwin')
    {
      this.pannel.setStyles({
        'left': (window.getSize().x/2)-(this.pannel.getSize().x/2),
        'top': (window.getSize().y/2)-(this.pannel.getSize().y/2)
      });
    }
    if ((this.options.type == 'flow' || this.options.type == 'shadowin') && this.options.pointer)
    {
      this.pannel.triangle = {};
      this.pannel.triangle.left = 0;
      
      var setTop = 0, setLeft = 0;

      this.pannel.coordinates = this.pannel.getCoordinates();
      this.pointer = {coordinates: this.options.pointer.getCoordinates()};
                  
      if (!flowTriangleLeft) {
        var flowTriangleLeft = 0;
      }
      
      // left OR right
      setLeft = this.pointer.coordinates.left-(this.pannel.coordinates.width/2)+(this.pointer.coordinates.width/2)-5;
      
      if (this.options.setleft) {
        setLeft = this.options.setleft;
        this.pannel.triangle.left = (setLeft - (window.getWidth()-this.pannel.coordinates.width)) + 10 + this.options.setlefttriangl;
      }
            
      if (setLeft < 0) {
        this.pannel.triangle.left =  setLeft+10;
        setLeft = 10;
      }
      if (setLeft > window.getWidth()-this.pannel.coordinates.width) {
        this.pannel.triangle.left = (setLeft - (window.getWidth()-this.pannel.coordinates.width)) + 10;
        setLeft = this.pointer.coordinates.left-this.pannel.coordinates.width+this.pointer.coordinates.width-4;
      }
          
      // top OR bottom
      if (window.getHeight()-this.pointer.coordinates.bottom < (this.pannel.coordinates.height.toInt()+16))
      {
        setTop = this.pointer.coordinates.top-this.pannel.coordinates.height;
        $extend(this.options, {flip: true});
      }
      else {
        setTop = this.pointer.coordinates.top+this.pointer.coordinates.height;
      }
      
      if (this.options.setTop) {
        setTop += this.options.setTop;
      }
      
      if (this.options.relative) {
        this.pannel.setStyles({
          'left': this.pannel.coordinates.width/2*-1,
          'top': 0
        });
      }
      else {
        this.pannel.setStyles({
          'left': setLeft,
          'top': setTop
        });
      }
      
    }
  },
  build_head: function(){
    // head
    if (this.options.title)
    {
      this.hdHead = new Element('h3').set('text', this.options.title);;
      this.hdHead.inject(this.hd);
    }
    
    // maximize
    if (this.options.maximize)
    {
      this.hdMaximize = new Element('a', {'href': '#maximize', 'class': 'maximize'});
      this.hdMaximize.inject(this.hd);
      this.hdMaximize.addEvent('click', function(e){new Event(e).stop();});
      this.hdMaximize.addEvent('click', this.maximize.bind(this));
    }
    
    // close
    if (this.options.close)
    {
      this.hdClose = new Element('a', {'href': '#close', 'class': 'close'});
      this.hdClose.inject(this.hd);
      this.hdClose.addEvent('click', function(e){new Event(e).stop();});
      this.hdClose.addEvent('click', this.close.bind(this));
    }
  },
  build_foot: function(){
    // resize
    if (this.options.resize)
    {
      this.ftResize = new Element('div', {'class': 'resize'});
      this.ftResize.inject(this.ft);
    }
  },
  dimensions: function(){
    this.options.dimensions = this.pannel.getSize();

    this.ct.setStyles({
      'width':  this.options.dimensions.x-this.options.offset.x*2,
      'height': this.options.dimensions.y-this.options.offset.y*2,
      'left':   this.options.offset.x,
      'top': this.options.offset.top
    });
    
    //for w3c browsers
    // this.canvas.setStyles({
    //   width: this.options.dimensions.x,
    //   height: this.options.dimensions.y+10
    // });
    // for IE
    $('canvas').setProperties({
      width: this.options.dimensions.x,
      height: this.options.dimensions.y+10
    }); 
    
    var BDHeight = this.ct.getSize().y;
    
    if (this.options.head)
    {
      BDHeight -= this.hd.getSize().y;
    }
    if (this.options.footer)
    {
      BDHeight -= this.ft.getSize().y;
    }
    if (this.options.ftbar)
    {
      BDHeight -= this.ftbar.getSize().y;
    }
    if (this.options.buttons)
    {
      BDHeight -= this.butbar.getSize().y;
    }

    this.bd.setStyles({
      'width': this.ct.getSize().x,
      'height': BDHeight
    });
    
    if (this.iframe)
    {
      this.iframe.setProperty('height', this.bd.getSize().y);
      this.iframe.setProperty('width', this.bd.getSize().x);
    }
    this.type();
    
    //for resizing
    if (this.options.type == 'prefwin')
    {
      this.coordinates();
    }
    
    if (this.scrolls)
    {
      this.scrolls.update();
    }
    
    if (this.options.onResize) {
      this.options.onResize.run([],this);
    }
  },
  content: function(){
    if (!this.options.iframe)
    {
      if ($type(this.options.content) == 'string')
      {
        new ajax('html', {
          url: this.options.content,
          method: 'get',
          update: this.bd,
          onRequest: function(){
            this.ft.jaxer = new Element('div', {'class': 'jaxer'});
            this.ft.jaxer.inject(this.ft, 'top');
          }.bind(this),
          onSuccess: function(){
                        
            this.options.onOpen.attempt([], this);
            this.ft.jaxer.dispose();
            this.scrolls = new ScrollBar($$('.ui .pannel .ct .bdp')[0], $$('.ui .pannel .ct .bdp .bd')[0], {
                         'arrows': false,
                         'hScroll': false
            });
            this.buttons();
  
          }.bind(this)
        }).get();
      }
      else if ($type(this.options.content) == 'element')
      {
        this.scrolls = new ScrollBar($$('.ui .pannel .ct .bdp')[0], $$('.ui .pannel .ct .bdp .bd')[0], {
      		'arrows': false,
      		'hScroll': false
        });

        this.options.content.removeClass('hdn');
        var tab = new Element('div', {'class': 'pannel_tab'});
        if (this.options.content_tab > 0)
        {
          tab.setStyle('display', 'none');
        }
        this.options.content.inject(tab);
        tab.inject(this.bd);
        this.scrolls.update();
        this.buttons();
        
        if (this.options.onOpen) {
          this.options.onOpen.attempt('', this);
        }
        
      }
      else if ($type(this.options.content) == 'object')
      {
        // this.bd.textNode(this.options.content);
      
        this.scrolls = new ScrollBar($$('.ui .pannel .ct .bdp')[0], $$('.ui .pannel .ct .bdp .bd')[0], {
      		'arrows': false,
      		'hScroll': false
        });
        this.bd.set('html', '<div class="pannel_tab margin">'+this.options.content.text+'</div>');
        this.scrolls.update();
        this.buttons();
      }
      else if ($type(this.options.content) == 'array')
      {
        this.options.content.each(function(item, index){
          if (item.content)
          {
            if (item.title)
            {
              this.head_tab(item.title);
              this.options.content_tab = index;
            }
            if ($type(item.content) !== 'array')
            {
              this.options.content = item.content;
              this.content();
            }
            else {
              var content = new Element('div');
              item.content.each(function(item){

                var section = new Element('div', {'class': 'part', 'html': '<h3>'+item.title+'</h3>'});
                item.content.inject(section);
                     section.inject(content);
              });
              this.options.content = content;
              this.content();
            }
          }
        }.bind(this));
      }
    }
    else {
      this.iframe = new IFrame({
        src: this.options.content,
        id: 'pannel_iframe',
        frameborder: 0,
        height: this.bd.getSize().y,
        width: this.bd.getSize().x
      });
      this.iframe.inject(this.bd);
      if (this.options.onIframe) {
        this.options.onIframe(this);
      }
    }
  },
  head_tab: function(title){
    var mysetclass = '';
    if (title == 'strom')
    {
      mysetclass = ' active';
    }
    var a = new Element('a', {
      'class': 'headtitle'+mysetclass,
      'href': '#'
    }).set('text', title).inject(this.hd);
    
    this.hd.addClass('plustabs');
    
    a.addEvent('click', function(event, a){
        new Event(event).stop();
        
        a.getAllPrevious('a.headtitle').removeClass('active');
        a.addClass('active');
        a.getAllNext('a.headtitle').removeClass('active');
        
        this.bd.getChildren('div').setStyle('display', 'none');
        this.bd.getChildren('div')[a.getAllPrevious('a.headtitle').length].setStyle('display', 'block');
        // console.log(a.getAllPrevious('a.headtitle').length);
        this.scrolls.update();
        
      }.bindWithEvent(this, a));
  },
  ftbarShow: function(){
    if (this.options.ftbar)
    {
      // console.log('ftbar true');
      this.ftbarbutton = new Element('a', {'class': 'btn ftbar'})
      this.ftbarbutton.set('html', '<span>m</more>');
      this.ftbarbutton.inject(this.ft);
    
      this.ftbarbutton.addEvent('click', function(btn){
        // new Event(e).stop();
        btn.toggleClass('close');
      
        this.ftbar.toggleClass('hdn');
        this.dimensions();
      }.bind(this, this.ftbarbutton));
    }
  },
  maximize: function(){
    if (this.options.maximized)
    {
      this.pannel.removeClass('maximized');
      // console.log('unmaximized');
      new Fx.Morph(this.pannel, {
        duration: 300,
        onComplete: function() {
          this.pannel.setStyles({
            'height': this.options.maximized.height,
            'width': this.options.maximized.width
          });
          this.dimensions();
          
          new Fx.Morph(this.pannel, {
            duration: 200
          }).start({
            'top': [0, this.options.maximized.top],
            'left': [0, this.options.maximized.left],
            'opacity': [0, 1]
          });
          this.options.maximized = false;
        }.bind(this)
      }).start({
        'opacity': [1, 0]
      });
    }
    else {
      this.pannel.addClass('maximized');
      new Fx.Morph(this.pannel, {
        duration: 300,
        onStart: function(){
          this.options.maximized = this.pannel.getCoordinates();
        }.bind(this),
        onComplete: function() {
          this.pannel.setStyles({
            'height': window.getSize().y+this.options.offset.y*2,
            'width': window.getSize().x+this.options.offset.x*2
          });
        
          this.dimensions();
          new Fx.Morph(this.pannel, {
            duration: 200
          }).start({
            'opacity': [0, 1]
          });
        }.bind(this)
      }).start({
        'top': [this.pannel.getPosition().y, 0],
        'left': [this.pannel.getPosition().x, -1*this.options.offset.x],
        'opacity': [1, 0]
      });
    }
  },
  drag: function(){
    if (this.options.drag)
    {
      this.hd.addClass('drag');
      new Drag(this.pannel, {
          snap: 0,
          handle: this.hd,
          // modifiers: {x: 0},
          onSnap: function(el){
              el.addClass('dragging');
          },
          onComplete: function(el){
              el.removeClass('dragging');
          }
      });  
    }
  },
  resize: function (){
    if (this.options.resize)
    {      
      this.pannel.makeResizable({
        handle: this.ftResize,
        limit: this.options.resize_limit,
        onDrag: this.dimensions.bind(this)
      });
    }
  },
  buttons: function(){
    if (this.options.buttons && !this.butbar.getElement('.buttons'))
    {
      var buttons = new Element('div', {'class': 'buttons'});
    
      this.options.buttons.each(function(button, i){
        var btn = new Element('span', {'class': 'button'});
        // alert($type(button.caption));
        // if (!button.caption) {
        //           button.caption = 'notset';
        //         }

        btn.set('text', this.options.buttons[i].caption);

        if (button.click)
        {
          btn.addEvent('click', button.click.bind(this));  
        }
        if (button.type)
        {
          if (button.type == 'close')
          {
            btn.addEvent('click', this.close.bind(this)); 
          }
        }
        btn.tabIndex = i+1;
        if (button.active)
        {
          var focusbtn = i;
        }
        
        if (button.id) {
          btn.id = button.id;
        }
        
        if (button.styles) {
          btn.setStyles(button.styles);
        }
                
        btn.inject(buttons);
        if(button.enter)
        {
          var enterClick = function(event){
            if (event.key == 'enter')
            {
              event.preventDefault();
              document.getElement('.pannel_enter_click').fireEvent('click');
            }
          };
          
          btn.addClass('pannel_enter_click');
          btn.addEvent('keydown', enterClick);
          
          document.addEvent('pannel_close', function(){
            document.removeEvent('keyup', this);
          }.bind(enterClick));
        }
        if(button.space)
        {
          var spaceClick = function(event){
            if (event.key == 'space')
            {
              document.removeEvent('keydown', spaceClick);   
              document.getElement('.pannel_space_click').fireEvent('click');
            }
          };            
          btn.addClass('pannel_space_click');
          document.addEvent('keydown', spaceClick);
        }
      }.bind(this));

      buttons.inject(this.butbar);
      buttons.getLast('.button').focus();
      
    }
  },
  img: function() {
    if (this.options.img)
    {
      new Element('img', {'src': this.options.img, 'class': 'img'}).inject(this.bd, 'top');
    }
  }
});