/* floatAround.js */
$(document).ready(function(){
	
	var startStop = 1; //control toggle

	var floaters = []; //array of floating objects
	
	//object for creating animated elements that fade in or out while moving to a random point.
	var Animation = function(elementID){
		
		//store a reference to the instance of the Animation object, 
		//so we can invoke floatAround from the callback.
		var _this = this; 
		
		//opa is opacity at the end of the fade
		this.opa = 1;
		
		this.floatAround = function(){
			var time = (Math.random() * 1500) + 1500; //random time 1000 - 1500 milliseconds
			//alert($('#content').height() - $(elementID).height());
		    var top = Math.random() * ($('#content').height() - $(elementID).height()); //example: random * (400px - image-height)
		    var left = Math.random() * ($('#content').width() - $(elementID).height());
			$(elementID).animate(
					{	opacity:(this.opa), 
						marginTop:top+'px', 
						marginLeft:left+'px'	
					}, 
					time, 
					'linear',
					function(){ //callback
						if(startStop == 1){
							_this.floatAround(); //loop
						}
					}
			);
			this.opa = this.opa > 0 ? 0 : 1;
		};
	};
	
	//user may click on the containing div to stop the animation.
	$('#content').toggle(
		function(){
			startStop = 0;
		}, 
		function(){
			startStop = 1;
		}
	);
	
	//start the animation
	for(var i = 0; i < 4; i += 1){
		floaters[i] = new Animation('#animate_me' + i);
		floaters[i].floatAround();
	}
});