/**Copyright (c) 2006, 2007, 2008, 2009, 2010 Data Illusion Zumbrunn. (http://www.dataillusion.com). All rights reserved.
*Redistributions of source code must retain the above copyright notice and is licensed under the Feedback Server End User License Agreement version provided with this package
*/

YAHOO.namespace("DataIllusion.FeedbackServer");

YAHOO.DataIllusion.FeedbackServer.RankingList = function(id, sGroup, rankHiddenFieldId, config) {

	YAHOO.DataIllusion.FeedbackServer.RankingList.superclass.constructor.call(this, id, sGroup, config);

	this.orderGroup = sGroup;
	this.rankResultdId = rankHiddenFieldId;

	var el = this.getDragEl();
	Dom.setStyle(el, "opacity", 0.67);

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

	this.setDefaultContent(document.getElementById("selection" + this.orderGroup));


	if (document.getElementById("bucket" + this.orderGroup)) {

		this.setDefaultContent(document.getElementById("bucket" + this.orderGroup));
	}
};

YAHOO.extend(YAHOO.DataIllusion.FeedbackServer.RankingList, YAHOO.util.DDProxy, {

	orderGroup: null,
	rankResultdId: null,

	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;

		Dom.setStyle(dragEl, "color", Dom.getStyle(clickEl, "color"));
		Dom.setStyle(dragEl, "fontFamily", Dom.getStyle(clickEl, "fontFamily"));
		Dom.setStyle(dragEl, "fontSize", Dom.getStyle(clickEl, "fontSize"));
		Dom.setStyle(dragEl, "backgroundColor", Dom.getStyle(clickEl, "backgroundColor"));
		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
		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", "");
		});

		var orderElement = document.getElementById("selection" + this.orderGroup);
		if (orderElement) {
			document.getElementById(this.rankResultdId).value = this.getItemList(orderElement)
		}

		a.animate();

		this.setDefaultContent(document.getElementById("selection" + this.orderGroup));
		if (document.getElementById("bucket" + this.orderGroup)) {

			this.setDefaultContent(document.getElementById("bucket" + this.orderGroup));
		}

		clientAction();
	},

	getItemList: function(ul) {
		var items = ul.getElementsByTagName("li");
		var out = "";
		for (i = 0; i < items.length; i = i + 1) {
			out += items[i].id + ",";
		}
		return out;
	},

	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;

			// 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 = Dom.get(id);
				var destDD = DDM.getDDById(id);
				destEl.appendChild(this.getEl());
				destDD.isEmpty = false;
				DDM.refreshCache();
			}

			this.setDefaultContent(document.getElementById("selection" + this.orderGroup));
			if (document.getElementById("bucket" + this.orderGroup)) {

				this.setDefaultContent(document.getElementById("bucket" + this.orderGroup));
			}

		}

		clientAction();
	},

	setDefaultContent: function(ul) {
		var items = ul.getElementsByTagName("li");
		if (items.length == 0) {
			ul.style.width = "100px";
			ul.style.height = "40px";
		}
		else {
			ul.style.height = "";
			ul.style.width = "";
		}
	},

	getVisualHeight: function(ul) {

		var items = ul.getElementsByTagName("li");
		var height = 0;
		for (i = 0; i < items.length; i = i + 1) {
			height += parseInt(document.getElementById(items[i].id).offsetHeight);
		}

		return (height == 0 || height <= 100) ? 100 : height;
	},

	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;

		this.setDefaultContent(document.getElementById("selection" + this.orderGroup));
		if (document.getElementById("bucket" + this.orderGroup)) {

			this.setDefaultContent(document.getElementById("bucket" + this.orderGroup));
		}

		clientAction();
	},

	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();
		}

		clientAction();
	}
});