Event.observe(window,'load',function(){
  // Artikel-Service
  if ($('bl-service')) {
    var outFunc = function(e) {
      var target = $(e.relatedTarget);
      if (
        !((target.hasClassName('service-nav-layer') || target.up('div.service-nav-layer')) != undefined)
          &&
        !((target.hasClassName('active') || target.up('a.active')) != undefined)
      ) {
        $('bl-service').removeClassName('active');
        $('bl-service-container').down('.service-nav-layer').hide();
      }
    }
    $('bl-service').observe('mouseover',function(){
      $('bl-service').addClassName('active');
      $('bl-service-container').down('.service-nav-layer').setStyle({display: 'block', top: '22px', right: '3px'}).observe('mouseout',outFunc);
    });
    $('bl-service').observe('mouseout',outFunc);
  }
  
  // Suche
  var bls = new blSuggest($('blq').observe('focus',function(){$('blq').addClassName('active');}).observe('blur',function(){$('blq').removeClassName('active');}), -1, 9);
  if ($F('blq')!='') {
    $('blq').activate();
    bls.get();
  }
});




var blSuggest = Class.create({
  val:'',
  timer:null,
  sugs:[],
  display:false,
  active:0,
  input:null,
  box:null,
  
  initialize: function(input, top, left) {
    this.input = $(input);
    this.input.observe('keyup',function(e){
      switch(e.keyCode){
        case 38: this.up(); break;
        case 40: this.down(); break;
        case 13: this.go(); break;
        case 27: this.stop(); break;
        default: this.get(); break;
      }
    }.bindAsEventListener(this));
    this.input.observe('blur',function() {
      this.unload.bind(this).delay(0.5);
    }.bindAsEventListener(this));
    var relDiv = $(document.createElement('div'));
    relDiv.setStyle({position:'relative'});
    this.box = $(document.createElement('div'));
    this.box.writeAttribute('class','blSuggest');
    this.box.setStyle({position:'absolute',top:$('blq').getDimensions().height+top+'px',left:left+'px',display:'none'});
    this.input.insert({before:relDiv.insert(this.box)});
  },
  get:function(val){
      var val = this.input.value;
    if (val!=this.val) {
      window.clearTimeout(this.timer);
      this.val = val;
      this.timer = this.call.bind(this).delay(0.3);
    }
  },
  call:function(){
    window.clearTimeout(this.timer);
    
    new Ajax.Request('/ajax.php?module=boersenlexikon&method=getSuggest', {
      method: 'post',
      parameters: {
        q: this.val
      },
      onComplete: this.set.bind(this)
    });
  },
  set:function(a){
    a = a.responseText.evalJSON();
    if (!a) this.unload();
    
    if (this.display) {
      this.sugs.each(function(itm){
        var aitm = a.find(function(i){ return itm.id == i.id });
        if (aitm == undefined) {
          $('blSuggest-'+itm.id).remove();
          this.sugs = this.sugs.without(itm);
        } else a = a.without(aitm);
      }.bind(this));
    } else {
      this.box.show();
      this.display = true;
    }

    a.each(function(itm){
      if (this.sugs.indexOf(itm) == -1) {
        this.sugs.push(itm);
        this.render(itm);
      }
    }.bind(this));
  },
  render:function(itm){
    if(itm.url != '#') {
        var link = $(document.createElement('a'));
        link.writeAttribute('href',itm.url);
        link.writeAttribute('id','blSuggest-'+itm.id);
        if (itm.cls) {
            link.addClassName(itm.cls);
        }
        link.update(itm.term);
        this.box.insert(link);
    } else {
        var noitm = $(document.createElement('span'));
        noitm.writeAttribute('id','blSuggest-0');
        noitm.update(itm.term)
        this.box.insert(noitm);
    }
  },
  unload:function(){
    window.clearTimeout(this.timer);
    this.sugs.each(function(itm){
      $('blSuggest-'+itm.id).remove();
    });
    this.sugs = [];
    this.active = 0;
    this.display = false;
    this.box.hide();
  },
  up:function(){
    if (this.active > 1)
      this.active--;
    else this.active = this.box.select('a').length;
    var lnk = this.box.down('a.active');
    if (lnk) lnk.removeClassName('active');
    lnk = this.box.down('a',this.active - 1);
    if (!lnk) {
      this.active = this.box.select('a').length;
      lnk = this.box.down(this.active - 1);
    }
    if (lnk) lnk.addClassName('active');
  },
  down:function(){
    this.active++;
    var lnk = this.box.down('a.active');
    if (lnk) lnk.removeClassName('active');
    lnk = this.box.down('a',this.active - 1);
    if (!lnk) {
      lnk = this.box.down('a');
      this.active = 1;
    }
    if (lnk) lnk.addClassName('active');
  },
  go:function(){
    var lnk = this.box.down('a.active');
    if (lnk) {
      this.input.value = lnk.innerHTML;
      self.location.href = lnk.href;
      this.unload();
    }
  },
  stop:function(){ this.unload(); }
});


function showWin(o) {
  var bdim = $(document.body).getDimensions();
  var vdim = document.viewport.getDimensions();
  var soff = document.viewport.getScrollOffsets();
  var top = (Math.round(vdim.height/2)+soff.top-Math.round(o.height/2)) - bdim.height;
  var left = 430-Math.round(o.width/2);

  var reldiv = $(document.createElement('div'));
  reldiv.setStyle({position:'relative'});

  var div_shaddow = $(document.createElement('div')).setStyle({
    position: 'absolute',
    width: o.width+'px',
    height: o.height+'px',
    top: top+'px',
    left: left+'px'
  }).addClassName('window_shaddow');

  var div_window = $(document.createElement('div')).setStyle({
    position: 'absolute',
    width: (o.width-2)+'px',
    height: (o.height-2)+'px',
    top: (top+10)+'px',
    left: (left+10)+'px'
  }).addClassName('window').insert($(document.createElement('div')).addClassName('window_close').update('X').observe('click',function(){
    $(this).remove();
  }.bindAsEventListener(reldiv))).insert(o.html);


  $(document.body).insert(reldiv.insert(div_shaddow).insert(div_window));
}

function send_article(article) {
  showWin({
    width: 500,
    height: 300,
    html: 'Artikel senden: <em>'+article+'</em>'
  });
}

function link_article(article) {
  showWin({
    width: 300,
    height: 198,
    html: '<strong style="display: block; padding: 3px;">HTML:</strong><textarea id="linktxt" cols="20" rows="5" style="width: 290px; font-size: 12px; height: 160px; margin: 2px; padding: 1px; border: 1px solid #ccc;">&lt;a href="'+self.location.href+'" title="B&amp;ouml;rsenlexikon, definition von '+article+'"&gt;'+article+'&lt;/a&gt;</textarea>'
  });
  
  $('linktxt').activate();
}