
//about 

//http://threedubmedia.com/demo/drag/

// good and simple drag and drop tutorial
//http://luke.breuer.com/tutorial/javascript-drag-and-drop-tutorial.aspx

console.log('> drag.js is iniciated;');

var _startX = 0;			// mouse starting positions
var _startY = 0;
var _offsetX = 0;			// current element offset
var _offsetY = 0;
var _dragElement;			// needs to be passed from OnMouseDown to OnMouseMove
var _oldZIndex = 0;			// we temporarily increase the z-index during drag
var _debug;// = document.getElementById("debug");	// makes life easier

var dragDebugOn = true;	// true to make drag debug on screen, false - turn off drag debug on sreen


//InitDragDrop();


	
	function drag_and_check_xy() {
		$(ssId)
			.append('<div class="drag" id="drag"><div>');
		InitDragDrop();
		$('#drag')
			.css({
				"position":"absolute",
				'top':'700px',
				'left':'0px',
				'width': '50px',
				'height': '50px',
				'pointer': 'move',
				'border':'1px solid #000000',
				'background' : '#aaaaaa',
				'opacity' : '0.5',
				'z-index': 1000
			});
	}

function InitDragDrop()
{
	console.log('InitDragDrop iniciated');
	document.onmousedown = OnMouseDown;
	document.onmouseup = OnMouseUp;
}

function OnMouseDown(e)
{
	var sectionName = 'section'+ (inSection+1);
    var slideName = 'slide' + (inSlide +1);
    var ssId='#'+sectionName+slideName; // section and slide name
	
	$('#pageContainer').append('<span id="debug"></span>');
	_debug = document.getElementById("debug");
	if (dragDebugOn) {
		$('#debug').css('z-index','50');
	}
	else{
		$('#debug').hide();
	}
	console.log('OnMouseDown(e) iniciated');	
	// IE is retarded and doesn't pass the event object
	if (e == null) 
		e = window.event; 
	
	// IE uses srcElement, others use target
	var target = e.target != null ? e.target : e.srcElement;
	console.log('target= '+target.className);
	
	if (dragDebugOn) {
		_debug.innerHTML = target.className == 'drag' 
			? 'draggable element clicked' 
			: 'NON-draggable element clicked';
	}
		
	// for IE, left click == 1
	// for Firefox, left click == 0
	if ((e.button == 1 && window.event != null || 
		e.button == 0) && 
		target.className == 'drag')
	{
		console.log('drag is startded for = '+target.className);
		// grab the mouse position
		_startX = e.clientX;
		_startY = e.clientY;
		console.log('_startX=' +_startX +'; _startY'+_startY);
		
		
		// grab the clicked element's position
		_offsetX = ExtractNumber(target.style.left);
		_offsetY = ExtractNumber(target.style.top);
		
		console.log('_offsetX=' +_offsetX +'; _offsetY'+_offsetY);
		
		// bring the clicked element to the front while it is being dragged
		_oldZIndex = target.style.zIndex;
		target.style.zIndex = 10000;
		
		// we need to access the element in OnMouseMove
		_dragElement = target;
		console.log('_dragElement = '+_dragElement);
		console.log(_dragElement);

		// tell our code to start moving the element with the mouse
		document.onmousemove = OnMouseMove;
		
		// cancel out any text selections
		document.body.focus();
		
		// prevent text selection in IE
		document.onselectstart = function () { return false; };
		// prevent IE from trying to drag an image
		target.ondragstart = function() { return false; };
		
		// prevent text selection (except IE)
		return false;
	}
}

function ExtractNumber(value)
{
	var n = parseInt(value);
	
	return n == null || isNaN(n) ? 0 : n;
}

function OnMouseMove(e)
{
	//console.log('_offsetX=' +_offsetX +'; _offsetY'+_offsetY);
	if (e == null) 
		var e = window.event; 

	// this is the actual "drag code"
	_dragElement.style.left = (_offsetX + e.clientX - _startX) + 'px';
	_dragElement.style.top = (_offsetY + e.clientY - _startY) + 'px';
	
	//console.log('_offsetX=' +_offsetX +'; _offsetY'+_offsetY);
	_debug.innerHTML = '(' + _dragElement.style.left + ', ' + _dragElement.style.top + ')';
	
}

function OnMouseUp(e)
{
	$('#debug').remove();
	if (_dragElement != null)
	{
		_dragElement.style.zIndex = _oldZIndex;

		// we're done with these events until the next OnMouseDown
		document.onmousemove = null;
		document.onselectstart = null;
		_dragElement.ondragstart = null;

		// this is how we know we're not dragging
		_dragElement = null;
		
		_debug.innerHTML = 'mouse up';
	}
}

	