var Button = Class.create();
Button.prototype = {
	
	field:null,
	button:null,
	clickListener:null,
	
	initialize: function (element) {
		
		Element.extend(element);
		this.field = element;
		this.button = new Element('a', {'class':this.field.className}).update(this.field.value);
		this.field.parentNode.insertBefore(this.button, this.field);
		Element.hide(this.field);
		this.clickListener = this.click.bind(this);
		Event.observe(this.button, "click", this.clickListener);
		
	},
	
	click: function (e) {
		this.field.up('form').submit();
	}
	
}


var listOrder = Class.create();
listOrder.prototype = {
	
	action:null,
	list:null,
	
	initialize: function (el) {
		this.action = el.title;
		this.list = el;
		this.initItems(this.list);
		var isTree = this.list.hasClassName("tree");
		Sortable.create(this.list,{tree:isTree, handle:"movable", onUpdate:function() {
			var options = {
				method: "get",
				parameters: Sortable.serialize(this.list),
				onSuccess: function(transport) {
					this.showNumbers();
				}.bind(this)
			}
			new Ajax.Request(this.action, options)
		}.bind(this), onChange:function(element) {
		}.bind(this)});
		this.list.title = "";
		this.showNumbers();
		if(isTree) {
			var message = "";
			for(var i=0;i<Droppables.drops.length;i++) {
				var droppable = Droppables.drops[i];
				droppable.tree = false;
				for(var j=0;j<droppable._containers.length;j++) {
					if(droppable._containers[j]==this.list && droppable.element!=this.list && droppable.element.up('li')!=this.list) {
						droppable._containers[j] = droppable.element.up('ul');
					}
					if(droppable._containers[j]==this.list && droppable.element!=this.list && droppable.element.tagName.toLowerCase()=='ul') {
						droppable._containers[j] = droppable.element;
					}
					message += droppable.element.tagName +"="+droppable._containers[j].id+"\n";
				}
			}
		}
	},
	
	initItems: function (el) {
		for(var j=0;j<el.childNodes.length;j++) {
			if(el.childNodes[j].tagName && el.childNodes[j].tagName.toLowerCase() == 'li') {
				var li = el.childNodes[j];
				li.id = this.list.id+"_"+li.id;
				var move = new Element("div").update("");
				move.addClassName("moveicon");
				li.appendChild(move);
				Element.insert(li.down(0), {before:move});
				Element.hide(move);
				Event.observe(li, "mouseover", function(ev) {this.showMove(ev)}.bind(this), false);
				Event.observe(li, "mouseout", function(ev) {this.hideMove(ev)}.bind(this), false);
				if(li.down('ul') && !li.down('ul').hasClassName("fixed")) {
					this.initItems(li.down('ul'));
				}
			}
		}
	},
	
	showNumbers: function () {
		var num = 1;
		for(var j=0;j<this.list.childNodes.length;j++) {
			if(this.list.childNodes[j].tagName && this.list.childNodes[j].tagName.toLowerCase() == 'li') {
				if(this.list.childNodes[j].down('span.num')) {
					this.list.childNodes[j].down('span.num').innerHTML = num;
					num++;
				}
			}
		}
	},
	
	showMove: function (ev) {
		var li = (Event.element(ev).up("li")) ? Event.element(ev).up("li") : Event.element(ev);
		li.addClassName("moveable");
		li.down("div.moveicon").show();
	},
	
	hideMove: function (ev) {
		var li = (Event.element(ev).up("li")) ? Event.element(ev).up("li") : Event.element(ev);
		li.removeClassName("moveable");
		li.down("div.moveicon").hide();
	},
	
	dispose: function () {
	
	}
	
}

function initFields() {
	$$('.orderable').each(function (field, index) {var myOrder = new listOrder(field);}.bind(this));
	$$('input[type=submit]').each(function (field, index) {var myField = new Button(field);}.bind(this));
}
Event.observe(document, 'dom:loaded', initFields, false);