var bubbles = new Class({
	options: {
		bubbles: ['lg', 'md', 'sm'],
		className: 'bubble',
		fps: 18,
		imgdir: '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);