var maxx = '';
var maxy = '';

window.onload = function() {
	
	// var maxX
	// var maxY
	maxx = (typeof window.innerWidth != 'undefined' ? window.innerWidth : document.body.offsetWidth) - 100;
	maxy = (typeof window.innerHeight != 'undefined' ? window.innerHeight : document.body.offsetHeight) - 100;

	// intelligentMovement
	// createBoxes according to page dimensions
	for( var x = 0; x<50; x++ ) {
		
		var d = document.createElement('div');
		d.id = 'box' + x;
		d.className = 'box';
		
		d.style.top = ( Math.random() * maxy ) + 'px';
		d.style.left = ( Math.random() * maxx ) + 'px';
		
		d.innerHTML = 'box' + x;
		
		document.body.appendChild( d );
	}
	
	Event.observe( document, 'mousemove', function(e) {
//		$('footer').innerHTML = e.clientX + 'x' + e.clientY;
		$A( document.getElementsByClassName('box') ).each(
			function (a) {
				moveOut( a.id, e );
			}
		);
	} );
}

function moveOut( id, e ) {
//	   ( ( $(id).offsetTop ) < e.clientY ) && 
//	   ( e.clientY < ( $(id).offsetTop + $(id).offsetHeight ) ) && 
//	   ( ( $(id).offsetLeft ) < e.clientX ) && 
//	   ( e.clientX < ( $(id).offsetLeft + $(id).offsetWidth ) ) 
	if( 
	   ( ( $(id).offsetTop - 5 ) < e.clientY ) && 
	   ( e.clientY < ( $(id).offsetTop + $(id).offsetHeight + 5 ) ) && 
	   ( ( $(id).offsetLeft - 5 ) < e.clientX ) && 
	   ( e.clientX < ( $(id).offsetLeft + $(id).offsetWidth + 5 ) ) 
	) {
	//--------------------------------------------------------------->>
		if( ( $(id).offsetTop + $(id).offsetHeight / 2 ) > e.clientY ) {
			var top = ( $(id).offsetTop + $(id).offsetHeight ) +'px'
		} else {
			var top = ( $(id).offsetTop - $(id).offsetHeight ) +'px';
		}
	//---------------------------------------------------------------<<

	//--------------------------------------------------------------->>
		if( !( parseInt(top) < 0 || parseInt(top) > maxy ) ) {
			new Effect.Morph( id, {
				style: {
					top: top
				},
				duration: 0.25
//				fps: 8
			} );
		}
	//---------------------------------------------------------------<<
	}
}