function Bubble(anker) {

  var button;
  var timer;
  var alt;

  this.STOPP = 0;
  this.FLYOUT = 2;
  this.FLYIN = 4;
  this.MAX_RIGHT = -24;
  this.STARTPOS = -8;
  this.SPEED = 3;

  var right = this.STARTPOS;
  var phase = this.STOPP;

  this.start = function(e) {
    phase = this.FLYOUT;
  }

  this.end = function(e) {
    phase = this.FLYIN;
  }

  this.setPhase = function(newphase) {
    phase = newphase;
  }

  this.nextFrame = function() {
    switch (phase) {
      case this.FLYOUT:
        right -= this.SPEED;
        if (right <= this.MAX_RIGHT) {
          phase = this.STOPP;
          right = this.MAX_RIGHT;
        }
        button.style.right = right + "px";
        break;
      case this.FLYIN:
        right += this.SPEED;
        if (right >= this.STARTPOS) {
          right = this.STARTPOS;
          phase = this.STOPP;
        }
        button.style.right = right + "px";
        break;
    }
    return phase;
  }

  this.installEventHandler = function() {
    if (anker.addEventListener) {
      anker.addEventListener('mouseover', this.start.bindAsEventListener(this), false);
      anker.addEventListener('mouseout', this.end.bindAsEventListener(this), false);
    } else {
      anker.attachEvent('onmouseover', this.start.bindAsEventListener(this));
      anker.attachEvent('onmouseout', this.end.bindAsEventListener(this));
    }
  }

  this.getAlt = function() {
    return alt;
  }

  this.installCSS = function() {
    button.style.right = this.STARTPOS + 'px';
  }

  this.init = function() {
    this.installEventHandler();
    var spans = anker.getElementsByTagName('span');
    for (var i = 0; i < spans.length; i++) {
      if (spans[i].className.split(" ").contains("bubble_button")) {
        button = spans[i];
        break;
      }
    }
    alt = button.getAttribute('alt'); 
    this.installCSS();
  }

  this.init();
}


var Bubbles = {
  bubbles : null,
  timer : null,
  timeout : 50,
  counter : 0,

  init : function() {
    Bubbles.bubbles = new Array();
    Bubbles.findBubbles();
    Bubbles.startAnimation();
  },

  nextFrame : function() {
    var ps = 0;
    for (var i = 0; i < Bubbles.bubbles.length; i++) {
      ps += Bubbles.bubbles[i].nextFrame();
    }
    Bubbles.startAnimation();
    Bubbles.counter++;
    /*
    window.status = Bubbles.counter;
    if (Bubbles.counter > 400) {
      window.clearTimeout(Bubbles.timer);
    }
    */
    if (Bubbles.counter == 10) { Bubbles.bubbles[0].setPhase(Bubbles.bubbles[0].FLYOUT); }
    if (Bubbles.counter == 15) { Bubbles.bubbles[0].setPhase(Bubbles.bubbles[0].FLYIN); }
    if (Bubbles.counter == 12) { Bubbles.bubbles[1].setPhase(Bubbles.bubbles[1].FLYOUT); }
    if (Bubbles.counter == 17) { Bubbles.bubbles[1].setPhase(Bubbles.bubbles[1].FLYIN); }
    if (Bubbles.counter == 14) { Bubbles.bubbles[2].setPhase(Bubbles.bubbles[2].FLYOUT); }
    if (Bubbles.counter == 19) { Bubbles.bubbles[2].setPhase(Bubbles.bubbles[2].FLYIN); }
    if (Bubbles.bubbles[3]) {
      if (Bubbles.counter == 18) { Bubbles.bubbles[3].setPhase(Bubbles.bubbles[3].FLYOUT); }
      if (Bubbles.counter == 23) { Bubbles.bubbles[3].setPhase(Bubbles.bubbles[3].FLYIN); }
    }
  },

  startAnimation : function() {
    Bubbles.timer = window.setTimeout("Bubbles.nextFrame()", Bubbles.timeout);
  },

  findBubbles : function() {
    var anker = document.getElementsByTagName('a');
    for (var i = 0; i < anker.length; i++) {
      if (anker[i].className.split(" ").contains('bubble')) {
        if (!anker[i].className.split(" ").contains('active')) {
          Bubbles.bubbles.push(new Bubble(anker[i], this));
        }
      }
    }
  }
}

function anim_init() {
  Bubbles.init(); 
}

/*
// jetzt im Layout
window.addEventListener ?
  window.addEventListener('load', anim_init, false) :
  window.attachEvent('onload', anim_init);
*/