var InfoWidgetPinBoard = {
	setup:
	function(id, options) {
		this.parameters = options['parameters'];
		this.infoBoxPane = document.getElementById(id);
		var boxes = [];
				
		for (var i = 0; i != this.infoBoxPane.childNodes.length; i++) {
			if (this.infoBoxPane.childNodes[i].nodeType != 1) continue;
			var drop = this.infoBoxPane.childNodes[i].getElementsByTagName('div')[0];
			var drag = drop.getElementsByTagName('div')[0];
						
			Droppables.add(drop, { onHover: this.onHover.bind(this) });
			new Draggable(drag, { revert: true, handle: 'handle', scroll: window, scrollSpeed: 30, zindex: 1000, reverteffect: this.revertEffect });
			boxes.push(drag.id.slice(7));
		}
		this.infoBoxOrder = boxes.join(' ');
		Draggables.addObserver({ onStart: this.onStart.bind(this), onEnd: this.onEnd.bind(this) });
	},

	onHover:
	function(dragA, dropB) {
		var dragB = dropB.getElementsByTagName('div')[0];
		var dropA = dragA.parentNode;
		if (dragB != this.lastDragB && dragA != dragB) {
			this.lastDragB = dragB;
			Element.removeClassName(dropA, 'active');
			Element.addClassName(dropB, 'active');
			dropB.removeChild(dragB);
			dropA.removeChild(dragA);
			dropB.appendChild(dragA);
			dropA.appendChild(dragB);
		}
		else {
			this.lastDragB = dragB;
		}
	},

	onStart:
	function(eventName, draggable) {
		Element.addClassName(draggable.element.parentNode, 'active');
	},

	onEnd:
	function(eventName, draggable) {
		this.lastDragB = null;
		var boxes = [];
		for (var i = 0; i != this.infoBoxPane.childNodes.length; i++) {
			if (this.infoBoxPane.childNodes[i].nodeType == 1) {
				boxes.push(this.infoBoxPane.childNodes[i].getElementsByTagName('div')[0].getElementsByTagName('div')[0].id.slice(7));
			}
		}
		var order = boxes.join(' ');
		
		if (order != this.infoBoxOrder) {
			new Ajax.Request('/ajaxincludes/profilePinBoardHandler.ajax.php', { method: 'post', parameters: this.parameters + '&MyPinBoard=' + encodeURIComponent(order) });
			this.infoBoxOrder = order;
		}
	},

	revertEffect:
	function(element, top_offset, left_offset) {
		var dur = Math.sqrt(Math.abs(top_offset^2)+Math.abs(left_offset^2))*0.02;
		element._revert = new Effect.Move(element, { x: -left_offset, y: -top_offset, duration: dur, afterFinish: function() { Element.removeClassName(element.parentNode, 'active'); }});
	}
};