// Effect.Tooltip
// Nick Stakenburg
// requires - prototype     : http://www.prototypejs.org
//          - scriptaculous : http://script.aculo.us

Event.observe(window, 'load', function() {
    $$('td.prdbld img').each( function(element) {
        new Effect.Tooltip(element.id);
    });
    if ($("erhalt_link")) {
      Event.observe($("erhalt_link"), 'mouseover', function(event) {
         $('erhaltung').show();
      });
      Event.observe($("erhalt_link"), 'mouseout', function() {
         $('erhaltung').hide();
      });
    }
});



Effect.Tooltip = Class.create();
  Object.extend(Object.extend(Effect.Tooltip.prototype, Effect.Base.prototype), {
  initialize: function(element, content) {
    this.element = $(element);
    if(!this.element) throw(Effect._elementDoesNotExistError);
    var options = Object.extend({
      content: content,
      title: false,
      classNameWrapper: 'tooltip_wrapper',
      classNameContentWrapper: 'tooltip_content_wrapper',
      offset: {'x':-6, 'y':19 }
    }, arguments[2] || {});
    this.start(options);
  },
  setup: function() {
    // add observers
    this.element.observe('mousemove', this.showTip.bind(this));
    this.element.observe('mouseout', this.hideTip.bind(this));
  },
  buildTip: function() {
    
    // create a wrapper
    this.wrapper = document.createElement('div');
    this.wrapper.className = this.options.classNameWrapper;
    Element.setStyle(this.wrapper, {
      position: 'absolute',
      display: 'none'
    });
    
    // add content_wrapper
    var bild = document.createElement('img');
    bild.src = this.element.src.replace(/k.jpg/, this.element.alt + ".jpg");
    	this.wrapper.appendChild(bild);
    // add wrapper to the body
    document.body.appendChild(this.wrapper);
  },
  showTip: function(event){
    if (!this.wrapper) this.buildTip();
    this.positionTip(event);
    this.wrapper.show();
  },
  hideTip: function(){
    if (typeof this.wrapper != "undefined")
    this.wrapper.hide();
  },
  positionTip: function(event){
    var offsets = {'x': this.options.offset['x'],'y': this.options.offset['y']};
    var mouse = {'x': Event.pointerX(event), 'y': Event.pointerY(event)};
    var page = {'x':this.viewportSize()['x'], 'y':this.viewportSize()['y']};
    var tip = {'x': mouse['x'] + this.options.offset['x'] + this.wrapper.getWidth(),
    'y' : mouse['y'] + this.options.offset['y'] + this.wrapper.getHeight()};

    // inverse x or y to keep tooltip within viewport
    //if(tip['x']>page['x']) { offsets['x'] = 0-(this.wrapper.getWidth() + this.options.offset['x']); }
    offsets['x'] = 0-(this.wrapper.getWidth() + this.options.offset['x']);
    //if(tip['y']>page['y']) { offsets['y'] = 0-(this.wrapper.getHeight() + this.options.offset['y']); }

    this.wrapper.setStyle({
      left: mouse['x'] + offsets['x'] + 'px',
     // left: 
      top: mouse['y'] + offsets['y'] + 'px'
    });
  },
  viewportSize : function(){
    var x = self.innerWidth || (document.documentElement.clientWidth || document.body.clientWidth);
    var y = self.innerHeight || (document.documentElement.clientHeight || document.body.clientHeight);
    return {'x': x, 'y': y};
  }
});