/**
 * Floaters
 *
 * Provides a "blackbox" plugin to add horizontally-floating
 * images in the background of a page.  The only requirements
 * are an outer wrapper block element that spans the full page
 * and an inner wrapper block element that contains the page's
 * content.
 *
 * 1. Wrap your site in outer and inner wrapper blocks.
 * 2. Specify a list of images to float in the FLOATER_IMGS array.
 * 3. Specify the IDs of the two wrapper block elements in the
 *    WRAPPER_OUTER and WRAPPER_INNER vars.
 * 4. Set the width and height of the largest floater image in the
 *    FLOATER_WIDTH and FLOATER_HEIGHT vars.
 *
 * @author Gordon Clemmons
 * @dependencies prototype.js (http://www.prototypejs.org/)
 */

// config vars
var NUM_FLOATERS		= 8;
var FLOATER_SPEED		= 20;
var FLOATER_WIDTH		= 565;
var FLOATER_HEIGHT		= 160;
var FLOATER_IMGS		= new Array(
	'images/clouds1.png',
	'images/clouds2.png',
	'images/clouds3.png'
);
var WRAPPER_OUTER		= 'wrapper-outer';
var WRAPPER_INNER		= 'wrapper';

// internal vars
var DIRECTION_LEFT		= 'left';
var DIRECTION_RIGHT		= 'right';
var agent				= navigator.userAgent.toLowerCase();
var version				= parseFloat( navigator.appVersion );
var isIE6				= ( agent.indexOf('msie') > -1 && version < 7 );

var _containmentBox;
var _floaters;


function sizeContainmentBox()
{
	var bodySizes	= Element.getDimensions( $(WRAPPER_OUTER) );
	_containmentBox.style.width		= bodySizes['width'] + 'px';
	_containmentBox.style.height	= bodySizes['height'] + 'px';
}

function setBgImage( floaterDiv )
{
	var floaterBgIdx	= Math.floor( Math.random() * FLOATER_IMGS.length );
	var floaterBgPath	= FLOATER_IMGS[ floaterBgIdx ];
	if ( isIE6 )
		floaterDiv.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="'+ floaterBgPath +'")';
	else
		floaterDiv.style.backgroundImage = 'url('+ floaterBgPath +')';
}

function initAnimation()
{
	var bodySizes	= Element.getDimensions( $(WRAPPER_OUTER) );

	// create the containment box
	_containmentBox = document.createElement( 'div' );
	_containmentBox.style.position	= 'absolute';
	_containmentBox.style.top		= '0px';
	_containmentBox.style.left		= '0px';
	_containmentBox.style.overflow	= 'hidden';
	$(WRAPPER_OUTER).insertBefore( _containmentBox, $(WRAPPER_INNER) );
	$(WRAPPER_INNER).style.position		= 'relative';
	$(WRAPPER_INNER).style.zIndex		= 1000;
	sizeContainmentBox();

	// create the floater elements
	_floaters	= new Array();
	for ( var f = 0; f < NUM_FLOATERS; f++ )
	{
		var direction		= ( f % 2 ) ? DIRECTION_LEFT : DIRECTION_RIGHT;
		var floater			= {
			'direction':	direction
		};
		var floaterDiv			= document.createElement( 'div' );
		floaterDiv.style.position	= 'absolute';
		floaterDiv.style.top		= ( -FLOATER_HEIGHT + Math.floor( Math.random() * ( bodySizes['height'] + FLOATER_HEIGHT ) ) ) +'px';
		floaterDiv.style.left		= ( -FLOATER_WIDTH + Math.floor( Math.random() * ( bodySizes['width'] + FLOATER_WIDTH ) ) ) +'px';
		floaterDiv.style.width		= FLOATER_WIDTH + 'px';
		floaterDiv.style.height		= FLOATER_HEIGHT + 'px';
		floaterDiv.style.backgroundRepeat	= 'no-repeat';
		setBgImage( floaterDiv );
		floaterDiv.style.zIndex = -1 - f;
		floater.div = floaterDiv;
		_containmentBox.appendChild( floater.div );
		_floaters.push( floater );
	}

	setTimeout( "animationLoop()", 1000 / FLOATER_SPEED );
}

function animationLoop()
{
	var bodySizes	= Element.getDimensions( $(WRAPPER_OUTER) );
	for ( var f = 0; f < _floaters.length; f++ )
	{
		var floater = _floaters[ f ];
		var posLeft	= parseInt( floater.div.style.left );
		// left-moving floaters
		if ( floater.direction == DIRECTION_LEFT )
		{
			posLeft -= 1;
			// if the floater has moved off the screen, start it over and give it a new top position
			if ( posLeft < 0 - FLOATER_WIDTH )
			{
				posLeft = ( bodySizes['width'] + 5 );
				floater.div.style.top = ( -FLOATER_HEIGHT + Math.floor( Math.random() * ( bodySizes['height'] + FLOATER_HEIGHT ) ) ) +'px';
				setBgImage( floater.div );
			}
			floater.div.style.left = posLeft + 'px';
		// right-moving floaters
		} else {
			posLeft += 1;
			// if the floater has moved off the screen, start it over and give it a new top position
			if ( posLeft > bodySizes['width'] + 5 )
			{
				posLeft = ( -5 - FLOATER_WIDTH );
				floater.div.style.top = ( -FLOATER_HEIGHT + Math.floor( Math.random() * ( bodySizes['height'] + FLOATER_HEIGHT ) ) ) +'px';
				setBgImage( floater.div );
			}
			floater.div.style.left = posLeft + 'px';
		}
	}
	setTimeout( "animationLoop()", 1000 / FLOATER_SPEED );
}

window.onload = initAnimation;
window.onresize = sizeContainmentBox;