// JavaScript Document
var bubble_list = new Array();
if (!bubble_frame) var bubble_frame = document.body;
var bubble_image;
var bubble_file = "assets/templates/christinabernard/images/bubble_lightblue.png";
function bubble( size, offsetx, interval, parent )
{
	this.parent		= parent;
	this.size_base	= size;
	this.size_cur	= size;
	this.size_scale = 0.5;
	this.x_base		= offsetx;
	this.x_cur		= this.x_base - (this.size_cur / 2);
	this.x_scale	= 20;
	this.y_cur		= parent.offsetHeight;
	this.y_step		= 8;
	this.sin_period	= 20;			// number of cycles
	this.interval	= interval;			// 800 msecond
	this.obj		= null;
	this.imgobj		= null;
	// next_interval only used by bubble_run
	this.next_interval = this.interval;
	this.acceration	= 4;
	this.update_position = function()
	{
		this.size_cur += this.size_scale;
		this.y_cur -= this.y_step;			// bubble are always going up
		this.x_cur = this.x_base + Math.round( this.x_scale * Math.sin( (this.y_cur / this.sin_period) ) ) - (this.size_cur / 2);
		this.interval -= this.acceration;
		// handle bubble float over the ceiling
		if ( (this.y_cur + this.size_cur) < 0 )
			return false;
		else
			return true;
	};
}

var first_run = true;
var cycle = 0;
function bubble_refresh()
{
	// redraw all bubbles
	var str;
	str = "";
	bubble_frame.innerHTML = "";
	for( var b = 0; b < bubble_list.length; b++ ){
		str += "<div class=\"animobj\" id=\"bubblediv_" + b + "\" style=\"left: " + bubble_list[b].x_cur + "px; top: " + bubble_list[b].y_cur + "px; \"/> <img id=\"bubbleimg_" + b + "\" src=\"" + bubble_file + "\" style=\"width: " + bubble_list[b].size_cur + "px; height: " + bubble_list[b].size_cur + "px;\"/></div>";
	}
	bubble_frame.innerHTML = str;
	// cache the bubble instances in bubble_list
	for( var b = 0; b < bubble_list.length; b++ ){
		bubbleId = "bubblediv_" + b;
		bubbleimgId = "bubbleimg_" + b;
		bubble_list[b].obj = document.getElementById(bubbleId);
		bubble_list[b].imgobj = document.getElementById(bubbleimgId);
	}
}

function bubble_update()
{
	for( var b = 0; b < bubble_list.length; b++ ){
		// the div
		bubble_list[b].obj.style.left = bubble_list[b].x_cur + "px";
		bubble_list[b].obj.style.top = bubble_list[b].y_cur + "px";
		// the image
//		alert( bubble_list[b].obj.firstChild );
		bubble_list[b].imgobj.style.height = bubble_list[b].size_cur + "px";
		bubble_list[b].imgobj.style.width = bubble_list[b].size_cur + "px";
//		alert( bubble_list[b].obj.firstChild );
	}
}

var start_debug	= false;

function bubble_run()
{
	var next_interval = 100000;
	var start_debug	= false;

//	if ( start_debug == true )
//		alert( "bubble_run " + bubble_list.length );


	if ( first_run == true ){
		first_run = false;
	}
	else{
		bubble_update();
	}

	// get next interval
	for( var b = 0; b < bubble_list.length; b++ ){
		if ( next_interval > bubble_list[b].next_interval ){
			// limit interval to 1/100 sec
			if ( bubble_list[b].next_interval >= 10 ) 
				next_interval = bubble_list[b].next_interval;
			else
				next_interval = 10;
		}	
	}

	// update next_interval
	for( var b = 0; b < bubble_list.length; b++ ){
//		if ( start_debug == true )
//			alert( "b = " + b + "  next_interval = " + bubble_list[b].next_interval );
		if ( bubble_list[b].next_interval <= next_interval ){
			if ( bubble_list[b].update_position() == true ){
				// reset b.next_interval
				bubble_list[b].next_interval = bubble_list[b].interval;
			}
			else{
				// remove bubble
//				alert( "b = " + b + "  bubble next_interval = " + bubble_list[b].next_interval + "  next_interval = " + next_interval );
				bubble_list[b].obj.style.visibility = "hidden";
				bubble_list.splice(b, 1);
//				alert( "bubble length " + bubble_list.length );
//				start_debug = true;
				b -= 1; 
			}
		}
		else{
			bubble_list[b].next_interval -= next_interval;
		}
	}
//	if ( next_interval <= 10 )
//		alert( "next interval = " + next_interval );
	
	setTimeout('bubble_run()',next_interval);
}

function bubble_start( parent )
{
	bubble_image= new Image();
	bubble_image.src = bubble_file;
	bubble_frame = parent;
	// 1. refresh all bubbles
	bubble_list[0] = new bubble( 32, 300, 400, parent );
	bubble_list[1] = new bubble( 16, 700, 800, parent );
	bubble_list[2] = new bubble( 8, 500, 600, parent );
	bubble_list[3] = new bubble( 24, 800, 300, parent );
	bubble_refresh();
	// 2. save bubble instances into bubble_list[]

	bubble_run();
}

function onload_bubble()
{
	// avoid show bubble in video pages
	if( document.getElementById("video") ){
		return;
	}
	bubble_start( document.getElementById("animation") );
}

addLoadEvent( onload_bubble );