var bubbles = new Class({
  options: {
    bubbles: ['lg', 'md', 'sm'],
    className: 'bubble',
    fps: 18,
    imgdir: imgurl+'/style_images/public/images/bubbles/',
    lag: .6, // 0 = no lag, 1 = all lag
    offsets: { lg: { x: 40, y: -10 }, md: { x: 28, y: 5 }, sm: { x: 14, y: 5 }},
    z: 99
  },

  initialize: function(el, options){
    if (window.ie6){ return false; }

    this.setOptions(options);
    
    this.bubbles = [];
    this.page = { x: 0, y: 0 };
    
    this.options.bubbles.each(function(bubble, i){
      this[bubble] = new Element('div', { 
        'class': this.options.className + '-' + bubble,
        'styles': { 'position': 'absolute', 'top': 0, 'left': 0, 'visibility': 'hidden', 'zIndex': (this.options.z - i) }      

      }).inject(document.body);
      
      for (var n = 0; n < 20; n++){
        if (n < 10){ n = '0' + n; }

        var frame = bubble + '-' + n + '.png';
        
        // preload all frames
        new Element('img', { src: this.options.imgdir + frame });        
      }
    }, this);
    
    
    var elements = $ES('a[title]');
    
    elements.each(function(el){
      el.addEvent('mousemove', function(event){ this.page = event.page; }.bindWithEvent(this));      
    }, this);
    
    this.tips = new Tips(elements, { 
      'offsets': { x: 28, y: -28 }, 
      'onShow': this.show.bind(this), 
      'onHide': this.hide.bind(this) 
    });    
  },
  
  show: function(){    
    this.tips.toolTip.setStyle('visibility', 'visible');
    
    this.bubbles = this.options.bubbles.copy(); // reset visible bubbles

    this.bubbles.each(function(bubble){ 
      this[bubble].setProperty('f', $random(1, 20));
      this[bubble].setStyle('visibility', 'visible'); 
    }, this);

    $clear(this.timer);
    this.animate();
  },
  
  hide: function(){
    this.tips.toolTip.setStyle('visibility', 'hidden');
    
    this.bubbles.each(function(bubble){ this[bubble].setStyle('visibility', 'hidden'); }, this);

    $clear(this.timer);
  },
  
  animate: function(){
    this.bubbles.each(function(bubble){
      var f = this[bubble].getProperty('f').toInt();
      var f = (f + 1) % 20; // next frame

      this[bubble].setProperty('f', f);

      if (f < 10){ f = '0' + f; }

      var frame = bubble + '-' + f + '.png';

      this[bubble].setStyle('backgroundImage', 'url(' + this.options.imgdir + frame + ')');
    }, this);
    
    this.position();
    
    this.timer = this.animate.delay(Math.round(1000 / this.options.fps), this);  
  },
  
  position: function(){
    var win = {'x': window.getWidth(), 'y': window.getHeight()};
    var scroll = {'x': window.getScrollLeft(), 'y': window.getScrollTop()};
    var prop = {'x': 'left', 'y': 'top'};

    this.bubbles.each(function(bubble, i){
      var tip = {'x': this[bubble].offsetWidth, 'y': this[bubble].offsetHeight};
      
      for (var z in prop){
        var offsets = (this.options.offsets[bubble]) ? this.options.offsets[bubble] : this.options.offsets;
        
        var sp = this[bubble].getStyle(prop[z]).toInt();        
        var ep = ((this.page[z] + offsets[z] + tip[z] - scroll[z]) > win[z]) ? this.page[z] - offsets[z] - tip[z] : this.page[z] + offsets[z];
        var dp = ep - sp;
        
        var mod = 1 - ((i + 1) / this.options.bubbles.length) * this.options.lag;

        this[bubble].setStyle(prop[z], sp + (dp * mod));
      }      
    }, this);
  }
});

bubbles.implement(new Events, new Options);
window.addEvent('domready', function(){
			new bubbles();
			});