$(function() {
	bubbles();
});

function bubbles() {

	$('a.beaker').append('<span class="bubbles"><span class="strip"></span></span>');

	var bgPosition = 0;

	var resetBg = function() {
		var self = this;
		$('.strip', this).css({
			'top': 0
		});
	};

	var moveBg = function() {
		var self = this;
		bgPosition += 200;
		$('.strip', this).css({
			'top': -bgPosition + 'px'
		});
	};

	$('.item a').hover(function() {
		//alert('on');
		var parentItem = $(this).parents('.item');
		var theBubbles = $('.bubbles', parentItem);
		bubblingInterval = setInterval(function() {});
		//bubblingTimeout = setTimeout(function() {
			$(theBubbles).stop().animate({ 'opacity': 1 }, 900, 'easeOutSine');
			bubblingInterval = setInterval(function() {
				moveBg.apply(theBubbles);
			}, 90);	
		//}, 100)
		
	},function() {
		//clearTimeout(bubblingTimeout);
		clearInterval(bubblingInterval);
		var parentItem = $(this).parents('.item');
		var theBubbles = $('.bubbles', parentItem);
		bgPosition = 0;
		$(theBubbles).stop().animate({ 'opacity': 0 }, 500, 'easeOutSine', function() {
			resetBg.apply(theBubbles);
		});
	});

};