/*

	Draggable.js
    Drag the component with the mouse and send the new position on mouseup
    as Ajax request to the a url to register the new position.
	
    Assumed to be defined by the calling application
    DOAJAX			# If false, then don't do Ajax call on update position
    FLOATCLASS
    FLOATLABELID
    FLOATWINDOWID
    LABELHEIGHT
    UPDATEPOSITION
    SIDVERSION
    AJAXURL
    
    Debugging, when the label does not follow the mouse or stays glued when released:
    - Check of the target if of type of the content of FLOATCLASS
    - Check if there is another error happening during click, drag or release
*/
Drag = {
	_move: null,
	_down: null,
	
	start: function(e) {
		e.stop();

		// We need to remember what we're dragging.
		Drag._target = e.target();  
		/*
			There's no cross-browser way to get offsetX and offsetY, so we
			have to do it ourselves. For performance, we do this once and
			cache it.
		*/
		Drag._originalPosition = elementPosition(Drag._target)
		Drag._offset = Drag._diff(e.mouse().page, Drag._originalPosition);

		Drag._move = connect(document, 'onmousemove', Drag._drag);
		Drag._down = connect(document, 'onmouseup', Drag._stop);
	},

	_offset: null,
	_target: null,
	_originalPosition: null,
	_hasMoved: null,
	
	_diff: function(lhs, rhs) {
		//log(lhs.x, rhs.x, lhs.y, rhs.y);
		return {'x': lhs.x - rhs.x, 'y': lhs.y - rhs.y}
	},
		
	_drag: function(e) {
		e.stop();
		if (Drag._target.id == FLOATLABELID){	   
			setElementPosition(
				Drag._target,
				Drag._diff(e.mouse().page, Drag._offset));
			var targetPosition = elementPosition(Drag._target)	
			var activityForm = getElement(FLOATWINDOWID);
			//log(targetPosition.x, targetPosition.y, getElementPosition(activityForm));
			if (activityForm){
				// Test in case there is not following target defined yet.
				// Then make it follow the label.
				//log(activityForm, activityForm.id, targetPosition.x, targetPosition.y + LABELHEIGHT, getElementPosition(activityForm))
				setElementPosition(activityForm, {'x': targetPosition.x, 'y': targetPosition.y + LABELHEIGHT});
			} else {
				log('Cannot find the drag window content id', FLOATWINDOWID);
			}
		}
	},
	
	_stop: function(e) {
		//log(Drag._target.id);
		if (DOAJAX && Drag._target.id == FLOATLABELID){
			var targetPosition = elementPosition(Drag._target)	
			var activityForm = getElement(FLOATWINDOWID);
			if (activityForm){
				// Test in case there is not following target defined yet.
				// Then make it take the same final position as the label.
				setElementPosition(activityForm, {'x': targetPosition.x, 'y': targetPosition.y + LABELHEIGHT});
			} else {
				log('Cannot find the drag window content id', FLOATWINDOWID);
			}
			// Now call the ajax with the current target position.
			var params = {
				'event': 		UPDATEPOSITION, 
				'_sid': 		SIDVERSION,
				'x':			targetPosition.x,
				'y':			targetPosition.y,
				'appid':		FLOATWINDOWID,
                'ajax':         1,
            }
			var d = loadJSONDoc(AJAXURL, params);	
			//log('Mouse up', AJAXURL, params, targetPosition.x, targetPosition.y)
			//log(SIDVERSION)
			d.addErrback(Drag._loadError);
			d.addCallback(Drag._load);
		}
		disconnect(Drag._move);
		disconnect(Drag._down);	
		
	},
	_loadError: function(results) {
		log('Load Error')
		//log(results);
	},
	_load: function(results) {
		//log(results);
	}
};

connect(window, 'onload',   
	function() {
		/*
			Find all DIVs tagged with the draggable class, and connect them to
			the Drag handler.
		*/		var d = getElementsByTagAndClassName('div', FLOATCLASS);
		forEach(d,
			function(elem) {
				connect(elem, 'onmousedown', Drag.start);
			});
						
	});