JSTooltip = Class.create();
  Object.extend(Object.extend(JSTooltip.prototype,Effect.Base.prototype), {
  initialize: function(element, content) {
    this.element = $(element);
    this.timer = null;
    this.isvis = false;
    if(!this.element) return;
    var options = Object.extend({
      content: content,
      url: false,
      title: false,
      delay: 1000,
      className: 'tooltip',
      offset: {'x':16, 'y':16}
    }, arguments[2] || {});
    this.start(options);
    this.element.observe('mousemove', this.showTip.bind(this));
    this.element.observe('mouseout', this.hideTip.bind(this));    
  },
  urlLoaded: function(response) {
    Element.update(this.tip,response.responseText);
    if(this.isvis) {
      this.positionTip2();
      this.wrapper.show();
      setTimeout(this.positionTip2.bind(this), 100);
    }
  },
  loadContent: function() {
      this.timer = null;
      var string = this.options.url.substring(this.options.url.indexOf('?'));
      var url = this.options.url.replace(string,'');
      var params = string.replace('?','');  
      this.newsAjax = new Ajax.Request( url, 
      { method: 'get', parameters: params, onComplete: this.urlLoaded.bind(this) });
      this.options.url = false;
  },
  buildTip: function() {
    this.wrapper = document.createElement('div');
    this.wrapper.className = this.options.className;
    Element.setStyle(this.wrapper, {
      position: 'absolute',
      display: 'none'
    });
    if(this.options.title) {
      var title = document.createElement('div');
      title.className = 'title';
      Element.update(title, this.options.title);
      this.wrapper.appendChild(title);
    }
    this.tip = document.createElement('div');
    this.tip.className = 'content';
    if(this.options.url!=false) {
      Element.update(this.tip, "<center><img src=\""+window.contextPath+"/modules/javascript/images/loader.gif\"/></center>"); // Inhalt einfügen
    } else {
      Element.update(this.tip, this.options.content); // Inhalt einfügen
    }
    this.wrapper.appendChild(this.tip);
    document.body.appendChild(this.wrapper);
  },
  showTip: function(event){
    if (!this.wrapper) this.buildTip();
    if(this.isvis == false && this.options.url!=false) {
      this.timer = setTimeout(this.loadContent.bind(this), this.options.delay);
    }
    this.isvis = true;
    this.positionTip(event);
    this.wrapper.show();
  },
  hideTip: function(){
    if(this.timer!=null && window.clearTimeout) {
       clearTimeout(this.timer);
       this.timer = null;
    }
    this.isvis = false;
    if(this.wrapper)
      this.wrapper.hide();
  },
  positionTip: function(event){
    this.mouse = {'x': Event.pointerX(event), 'y': Event.pointerY(event)};
    this.positionTip2();
  },
  positionTip2: function() {
    Position.prepare();
    var offsets = {'x': this.options.offset['x'],'y': this.options.offset['y']};
    var pageX = (Prototype.Browser.Opera ? document.body.clientWidth: document.documentElement.clientWidth);
    var pageY = (Prototype.Browser.Opera ? document.body.clientHeight:
    (Prototype.Browser.WebKit ? this.innerHeight : document.documentElement.clientHeight));
    var tip = {'x': this.mouse['x'] + this.options.offset['x'] + this.wrapper.getWidth(),
    'y' : this.mouse['y'] + this.options.offset['y'] + this.wrapper.getHeight()};
	if(tip['x']>pageX+Position.deltaX) { 
	   offsets['x'] = -this.wrapper.getWidth() - this.options.offset['x'];
	   if(this.mouse['x']+offsets['x']<Position.deltaX)
	     offsets['x'] = this.options.offset['x'];
	}
    if(tip['y']>pageY+Position.deltaY) { 
      offsets['y'] = offsets['y']+pageY+Position.deltaY-tip['y'];
    }

    this.wrapper.setStyle({
      left: this.mouse['x'] + offsets['x'] + 'px',
      top: this.mouse['y'] + offsets['y'] + 'px'
    });
  }
});

