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

window.onload = function() {
	
	var d = document.createElement('div');
	d.className = 'box';
	d.id = 'box_drag';
	d.style.top = '20px';
	d.style.left = '20px';
	d.style.backgroundColor = '#000000';
	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 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;
}