/**
 * Extends the YAHOO.util.DDProxy class to create a re-usable widget for
 * Drag/Drop List Items
 * 
 * @param String
 *            id ID of the
 *            <li> element
 */
nmdgf.widgets.DragDropListItem = function(id) {
	nmdgf.widgets.DragDropListItem.superclass.constructor.call(this, id);

	YAHOO.util.Dom.setStyle(this.getDragEl(), "opacity", 0.67); // The proxy is
	// slightly transparent
	this.goingUp = false;
	this.lastY = 0;
	this.endDragEvent = new YAHOO.util.CustomEvent('endDrag', this);
};

YAHOO.extend(nmdgf.widgets.DragDropListItem, YAHOO.util.DDProxy, {
	
	/**
	 * CustomEvent that fires after the item is dropped, and the animation is complete
	 */
	endDragEvent : null,

	startDrag : function(x, y) {
		// make the proxy look like the source element
		var dragEl = this.getDragEl();
		var clickEl = this.getEl();
		YAHOO.util.Dom.setStyle(clickEl, "visibility", "hidden");
	
		dragEl.innerHTML = clickEl.innerHTML;
	
		YAHOO.util.Dom.setStyle(dragEl, "color", YAHOO.util.Dom.getStyle(clickEl,
				"color"));
		YAHOO.util.Dom.setStyle(dragEl, "backgroundColor", YAHOO.util.Dom.getStyle(
				clickEl, "backgroundColor"));
		YAHOO.util.Dom.setStyle(dragEl, "border", "2px solid gray");
	},
	
	endDrag : function(e) {
	
		var srcEl = this.getEl();
		var proxy = this.getDragEl();
	
		// Show the proxy element and animate it to the src element's location
		YAHOO.util.Dom.setStyle(proxy, "visibility", "");
		var a = new YAHOO.util.Motion(proxy, {
			points : {
				to :YAHOO.util.Dom.getXY(srcEl)
			}
		}, 0.2, YAHOO.util.Easing.easeOut)
	
		// Set values to variables so they are available in the scope of the
		// callback
		var proxyid = proxy.id;
		var thisid = this.id;
		var that = this;
	
		// Hide the proxy and show the source element when finished with the
		// animation
		//Must clear proxy innerHTML to remove any possible duplicate ids in the clone 
		a.onComplete.subscribe( function() {
			YAHOO.util.Dom.setStyle(proxyid, "visibility", "hidden");
			YAHOO.util.Dom.setStyle(thisid, "visibility", "");
			proxy.innerHTML = '';
			that.endDragEvent.fire();
		});
		a.animate();
	},
	
	onDragDrop : function(e, id) {
		// If there is one drop interaction, the li was dropped either on the list,
		// or it was dropped on the current location of the source element.
		if (YAHOO.util.DragDropMgr.interactionInfo.drop.length === 1) {
	
			// The position of the cursor at the time of the drop (YAHOO.util.Point)
			var pt = YAHOO.util.DragDropMgr.interactionInfo.point;
	
			// The region occupied by the source element at the time of the drop
			var region = YAHOO.util.DragDropMgr.interactionInfo.sourceRegion;
	
			// Check to see if we are over the source element's location. We will
			// append to the bottom of the list once we are sure it was a drop in
			// the negative space (the area of the list without any list items)
			if (!region.intersect(pt)) {
				var destEl = nmdgf.byId(id);
				var destDD = YAHOO.util.DragDropMgr.getDDById(id);
				destEl.appendChild(this.getEl());
				destDD.isEmpty = false;
				YAHOO.util.DragDropMgr.refreshCache();
			}
	
		}
	
	},
	
	onDrag : function(e) {
	
		// Keep track of the direction of the drag for use during onDragOver
		var y = YAHOO.util.Event.getPageY(e);
	
		if (y < this.lastY) {
			this.goingUp = true;
		} else if (y > this.lastY) {
			this.goingUp = false;
		}
	
		this.lastY = y;
	},
	
	onDragOver : function(e, id) {
	
		var srcEl = this.getEl();
		var destEl = nmdgf.byId(id);
	
		// We are only concerned with list items, we ignore the dragover
		// notifications for the list.
		if (destEl.nodeName.toLowerCase() == "li") {
			var orig_p = srcEl.parentNode;
			var p = destEl.parentNode;
	
			if (this.goingUp) {
				p.insertBefore(srcEl, destEl); // insert above
			} else {
				p.insertBefore(srcEl, destEl.nextSibling); // insert below
			}
	
			YAHOO.util.DragDropMgr.refreshCache();
		}
	}

});