var Dom = YAHOO.util.Dom;
var Event = YAHOO.util.Event;
var DDM = YAHOO.util.DragDropMgr;

YAHOO.example.DDApp = {
	init: function() 
	{
		var orderlist = Dom.get('orderlist');
		var listitems = YAHOO.util.Dom.getElementsBy(function (el) { return true; }, 'li', orderlist);
		for (i = 0; i < listitems.length; i++)
		{
			new YAHOO.example.DDList(listitems[i].id);
		}
		new YAHOO.util.DDTarget(orderlist);
		this.initialOrder = '';
		this.arrInitialOrder = new Array();
		this.saveInitialOrder();
		this.saveOrder();
	},

	saveInitialOrder: function(e) 
	{
		var orderlist = Dom.get('orderlist');
		this.initialOrder = orderlist.innerHTML;
		var listitems = YAHOO.util.Dom.getElementsBy(function (el) { return true; }, 'li', orderlist);
		for (i = 0; i < listitems.length; i++)
		{
			this.arrInitialOrder.push(listitems[i].id);
		}
	},

	saveOrder: function(e) 
	{
		var resulttext = '';
		var orderresult = Dom.get('orderresult');
		var orderlist = Dom.get('orderlist');
		listitems = YAHOO.util.Dom.getElementsBy(function (el) { return true; }, 'li', orderlist);
		for (i = 0; i < listitems.length; i++)
		{
			resulttext += listitems[i].id;
			if (i < listitems.length-1) resulttext += ':';
		}
		orderresult.value = resulttext;
	},
	
	restoreOrder: function() 
	{
		var orderlist = Dom.get('orderlist');
		orderlist.innerHTML = this.initialOrder;
		this.init();
	}
};

YAHOO.example.DDList = function(id, sGroup, config) 
{
	YAHOO.example.DDList.superclass.constructor.call(this, id, sGroup, config);
	var el = this.getDragEl();
	Dom.setStyle(el, "opacity", 0.67); // The proxy is slightly transparent
	Dom.addClass(el, 'proxy');
	el.resizeFrame = false;

	this.goingUp = false;
	this.lastY = 0;
};

YAHOO.extend(YAHOO.example.DDList, YAHOO.util.DDProxy, 
	{
		startDrag: function(x, y) 
		{
			// make the proxy look like the source element
			var dragEl = this.getDragEl();
			var clickEl = this.getEl();
			Dom.setStyle(clickEl, "visibility", "hidden");
			dragEl.innerHTML = clickEl.innerHTML;
		},

		endDrag: function(e) 
		{
			var srcEl = this.getEl();
			var proxy = this.getDragEl();
			// Show the proxy element and animate it to the src element's location
			Dom.setStyle(proxy, "visibility", "");
			var a = new YAHOO.util.Motion( 
				proxy, { 
					points: { 
						to: Dom.getXY(srcEl)
					}
				}, 
				0.2, 
				YAHOO.util.Easing.easeOut 
			)
			var proxyid = proxy.id;
			var thisid = this.id;
			// Hide the proxy and show the source element when finished with the animation
			a.onComplete.subscribe(function() 
			{
				Dom.setStyle(proxyid, "visibility", "hidden");
				Dom.setStyle(thisid, "visibility", "");
			});
			a.animate();
			YAHOO.example.DDApp.saveOrder();
		},

		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 (DDM.interactionInfo.drop.length === 1) 
			{
				// The position of the cursor at the time of the drop (YAHOO.util.Point)
				var pt = DDM.interactionInfo.point; 
				// The region occupied by the source element at the time of the drop
				var region = DDM.interactionInfo.sourceRegion; 
			}
		},

		onDrag: function(e) 
		{
			// Keep track of the direction of the drag for use during onDragOver
			var y = 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 = Dom.get(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
				}
				DDM.refreshCache();
			}
		}
	}
);

Event.onDOMReady(YAHOO.example.DDApp.init, YAHOO.example.DDApp, true);