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 );
			}
		);
	} );

	var d = document.createElement('div');
//	d.className = 'box';
	d.id = 'box_drag';
	d.style.top = '20px';
	d.style.left = '20px';
	d.style.backgroundColor = '#000000';
	d.style.height = '100px';
	d.style.width = '100px';
	document.body.appendChild(d);
	
	//--------------------------------------------------------------->>
	new Draggable( 'box_drag', {
		onStart: function() {
			$('box_drag').left = $('box_drag').offsetLeft;
			$('box_drag').top = $('box_drag').offsetTop;
//			$('box').start = parseInt( genTime() );
//			useme = setInterval( function() {
//				duration++;
//			}, 1 );
		},
		onEnd: function() {
			var top = $('box_drag').offsetTop;
			var left = $('box_drag').offsetLeft;
			
			var dtop = ( $('box_drag').offsetTop - $('box_drag').top );
			var dleft = ( $('box_drag').offsetLeft - $('box_drag').left );
//			var duration = genTime() - $('box').start;
			
			var factor = 3;
			
			if( debug == true ) {
				$('footer').innerHTML = dtop + 'x' + dleft;
			}
			
			dtop = dtop / factor;
			dleft = dleft / factor;
			
			dtop = $('box_drag').offsetTop + dtop;
			dleft = $('box_drag').offsetLeft + dleft;
			
			// turn them into INTEGERS without DECIMALS
			// =]
			dtop = makeSurePositive( parseInt( dtop ) );
			dleft = makeSurePositive( parseInt( dleft ) );
			
//			duration = duration / 1000;
			
			if( debug == true ) {
				$('footer').innerHTML = $('footer').innerHTML + ' | ' + dtop + 'x' + dleft;
	//			$('footer').innerHTML = $('footer').innerHTML + ' | ' + duration;
			}

//			clearInterval( useme );
			
			new Effect.Morph( 'box_drag', {
				style: {
					top: ( ( dtop ) ) + 'px',
					left: ( ( dleft ) ) + 'px'
				},
//				duration: duration
				duration: 0.25
			} );
			
//			duration = 0;
		},
		starteffect: false,
		endeffect: false
//		onDrag: function( e ) {
//			$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
			} );
		}
	//---------------------------------------------------------------<<
	}
}

// var useme = 0;
// var duration = 0;
var debug = false;

function genTime() {
	var date = new Date();
	return ( addZero(date.getHours()) + '' + addZero(date.getMinutes()) + '' + addZero(date.getSeconds()) );
}

function addZero( i ) {
	if( i < 10 ) {
		i = "0" + i;
	}
	
	return i;
}

function makeSurePositive( i ) {
	if( i < 0 ) {
		i = 0;
	}
	
	return i;
}