var Field = Class.create();
Field.prototype = {

	field:null,
	container:null,
	ispassword:false,
	mask:null,
	focusListener:null,
	blurListener:null,

	initialize: function (element) {
		Element.extend(element);
		this.field = element;
		if(Element.readAttribute(this.field,'alt')) {
			this.container = new Element('span');
			this.field.parentNode.insertBefore(this.container, this.field);
			this.container.appendChild(element);
			this.focusListener = this.activate.bindAsEventListener(this);
			this.blurListener = this.desactivate.bindAsEventListener(this);
			this.mask = new Element('input',{'type':'text', 'value':Element.readAttribute(element,'alt'), "class":this.field.className});
			this.mask.addClassName("empty");
			this.field.parentNode.insertBefore(this.mask, this.field);
			if(this.field.value!="") {
				Element.hide(this.mask);
				Event.observe(this.field, "blur", this.blurListener);
			} else {
				Element.hide(this.field);
				Event.observe(this.mask, "focus", this.focusListener, false);
			}
		}

	},

	activate: function (e) {
		Event.observe(this.field, "blur", this.blurListener);
		Event.stopObserving(this.field, "focus", this.focusListener, false);
		Element.show(this.field);
		Element.hide(this.mask);
		this.field.focus();
	},

	desactivate: function (e) {
		if(this.field.value=="") {
			Element.show(this.mask);
			Element.hide(this.field);
			Event.stopObserving(this.field, "blur", this.blurListener, false);
			Event.observe(this.mask, "focus", this.focusListener, false);
		}
	}

}

/*
var Field = Class.create();
Field.prototype = {
	
	field:null,
	ispassword:false,
	mask:null,
	focusListener:null,
	blurListener:null,
	submitListener:null,
	
	initialize: function (element) {
		
		Element.extend(element);
		this.field = element;	
		this.isPassword = (Element.readAttribute(this.field,'type')=='password');
		
		if(Element.readAttribute(this.field,'alt')) {
			this.focusListener = this.activate.bind(this);
			this.blurListener = this.desactivate.bind(this);
			this.submitListener = this.submit.bind(this);
			if(this.isPassword) {
				Element.hide(this.field);
				this.mask = new Element('input',{'type':'text', 'value':Element.readAttribute(element,'alt')});
				this.field.parentNode.insertBefore(this.mask, this.field);
				if(this.field.value!="") Element.hide(this.mask);
				Event.observe(this.mask, "focus", this.focusListener);
			} else {
				if(this.field.value=="") {
					this.field.value = Element.readAttribute(element,'alt');
					this.field.addClassName("empty");
				}
				Event.observe(this.field, "focus", this.focusListener);
			}
			Event.observe(this.field.up('form'), "submit", this.submitListener);
		}
		
	},
	
	activate: function (e) {
		Event.observe(this.field, "blur", this.blurListener);
		Event.stopObserving(this.field, "focus", this.focusListener, false);
		this.field.removeClassName("empty");
		if(this.isPassword) {
			Element.show(this.field);
			Element.hide(this.mask);
			this.field.focus();
		}
		if(this.field.value==Element.readAttribute(this.field,'alt')) this.field.value = "";
	},
	
	desactivate: function (e) {
		Event.stopObserving(this.field, "blur", this.blurListener, false);
		if(this.field.value=="") {
			if(this.isPassword) {
				Element.show(this.mask);
				Element.hide(this.field);
			} else {
				this.field.value = Element.readAttribute(this.field,'alt');
				this.field.addClassName("empty");
			}
		}
		if(this.isPassword) {
			Event.observe(this.mask, "focus", this.focusListener, false);
		} else {
			Event.observe(this.field, "focus", this.focusListener, false);
		}
	},
	
	submit: function (e) {
		Event.stopObserving(this.field.up('form'), "submit", this.submitListener);
		if(this.field.value==Element.readAttribute(this.field,'alt')) this.field.value="";
	}
	
}
*/
var FieldCheckbox = Class.create();
FieldCheckbox.prototype = {
	
	checkbox:null,
	span:null,
	elementHeight:25,
	
	initialize: function(element) {
		Element.extend(element);
		this.checkbox = element;
		this.span = new Element("span");
		this.span.className = 'customCheckbox';
		this.checkbox.className = null;
		Element.hide(this.checkbox);
		this.checkbox.parentNode.insertBefore(this.span, this.checkbox);
		$$('label[for='+Element.readAttribute(this.checkbox,'id')+']').each(function(label) {
			Event.observe(label, "mousedown", function(e) {this.check(e)}.bind(this), false);
			Element.writeAttribute(label,"for",null);
		}.bind(this));
		Event.observe(this.span, "mousedown", function(e) {this.pushed(e)}.bind(this), false);
		Event.observe(this.span, "mouseup", function(e) {this.check(e)}.bind(this), false);
		this.clear();
	},

	pushed: function(e) {
		if(this.checkbox.checked) {
			this.span.style.backgroundPosition = "0 "+(this.elementHeight*3);
		} else {
			this.span.style.backgroundPosition = "0 -"+this.elementHeight+"px";
		}
	},
	
	check: function(e) {
		if(this.checkbox.checked) {
			this.span.style.backgroundPosition = "0 0";
			this.checkbox.checked = false;
		} else {
			this.span.style.backgroundPosition = "0 -"+(this.elementHeight*2)+"px";
			this.checkbox.checked = true;
		}
		if(this.checkbox.readAttribute("onChange")) {
			eval(this.checkbox.readAttribute("onChange"));
		}
	},
	
	clear: function(e) {
		if(this.checkbox.checked) {
			this.span.style.backgroundPosition = "0 -"+(this.elementHeight*2)+"px";
		} else {
			this.span.style.backgroundPosition = "0 0";
		}
	}
}

var FieldRadio = Class.create();
FieldRadio.prototype = {
	
	radio:null,
	span:null,
	elementHeight:25,
	
	initialize: function(element) {
		
		Element.extend(element);
		this.radio = element;
		this.span = new Element("span");
		this.span.className = 'customRadio';
		this.radio.className = null;
		Element.hide(this.radio);
		this.radio.parentNode.insertBefore(this.span, this.radio);
		if(this.radio.up('.disabled')) {
			this.pushed();
		} else {	
			$$('label[for='+Element.readAttribute(this.radio,'id')+']').each(function(label) {
				Event.observe(label, "mousedown", function(e) {this.check(e)}.bind(this), false);
				Element.writeAttribute(label,"for",null);
			}.bind(this));
			Event.observe(this.span, "mousedown", function(e) {this.pushed(e)}.bind(this), false);
			Event.observe(this.span, "mouseup", function(e) {this.check(e)}.bind(this), false);
			this.clear();
		}
	},

	pushed: function(e) {
		if(this.radio.checked) {
			this.span.style.backgroundPosition = "0 -"+(this.elementHeight*3)+"px";
		} else {
			this.span.style.backgroundPosition = "0 -"+this.elementHeight+"px";
		}
	},
	
	check: function(e) {
		this.span.style.backgroundPosition = "0 -"+(this.elementHeight*2)+"px";
		this.radio.checked = true;
		$$('input[type=radio][name='+this.radio.name+']').each(function(el) {
			if(el != this.radio) {
				el.checked = false;
				Element.previous(el,'span').style.backgroundPosition = "0 0";
			}
		}.bind(this));
	},
	
	clear: function(e) {
		if(this.radio.checked) {
			this.span.style.backgroundPosition = "0 -"+(this.elementHeight*2)+"px";
		} else {
			this.span.style.backgroundPosition = "0 0";
		}
	}
}

var SelectBox = Class.create();
SelectBox.prototype = {
	
	select:null,
	element:null,
	caption:null,
	elementId:null,
	list:null,
	
	initialize: function(element) {
		
		this.select = element;
		this.elementId = $(this.select).id;
		this.element = new Element('div', {'class':'customSelect'});
		this.select.parentNode.insertBefore(this.element, this.select);
		
		this.caption = new Element('div', {'class':'caption'});
		this.caption.setAttribute('autocomplete','off');
		this.caption.setAttribute('readonly','readonly');
		this.element.appendChild(this.caption);
		
		this.list = new Element('div', {'id':this.elementId+'_options','class':'list'});
		this.select.className = null;
		//this.select.parentNode.insertBefore(this.list, this.select);
		var optionsList = new Element('ul');
		var options = this.select.getElementsByTagName('option');
		for(i=0; i<options.length;i++) {
			var myOption = new Element("li", {'id':options[i].value}).update(options[i].innerHTML);
			Event.observe(myOption, "click", function(e) {this.selectOption(e)}.bind(this),false);
			optionsList.appendChild(myOption);
		}
		if (this.select.selectedIndex>=0) {
			this.caption.innerHTML = options[this.select.selectedIndex].innerHTML;
		}
		this.list.appendChild(optionsList);
		this.element.appendChild(this.list);
		
		var selectWidth = Math.max(Math.min(this.list.getWidth(),200),50);
		this.element.setStyle({'width':selectWidth+'px'});
		this.element.setStyle({'height':this.list.down('li').getHeight()+'px'});
		this.caption.setStyle({'width':(selectWidth-5)+'px'});
		this.list.setStyle({'width':selectWidth+'px'});
		this.list.setStyle({'top':(this.element.getHeight()-1)+'px'});
		Element.hide(this.list);
		Element.hide(this.select);
		Event.observe(this.element, "mousedown", function(e) {this.open(e)}.bind(this),false);
	},
	
	open: function(e) {
		Element.show(this.list);
		Event.stopObserving(this.element, "mousedown", function(e) {this.open(e)}.bind(this),false);
		Event.observe(document, 'mousemove', function(e) {this.detectRollout(e)}.bind(this),false);
	},
	
	detectRollout: function(e) {
		if(this.list.getStyle('display')!='none') {
			var left = Element.cumulativeOffset(this.list).left;
			var top = Element.cumulativeOffset(this.list).top;
			var width = Element.getDimensions(this.list).width;
			var height = Element.getDimensions(this.list).height;
			var mouseX = Event.pointerX(e);
			var mouseY = Event.pointerY(e);
			if(mouseX<left-20 || mouseX>left+width+20 || mouseY<top-20 || mouseY>top+height+40) {
				this.close();
			}
		}
	},
	
	selectOption: function(e) {
		var option = e.element()
		this.caption.innerHTML = option.innerHTML;
		var options = this.select.getElementsByTagName('option');
		for(i=0; i<options.length;i++) {
			if(options[i].value == option.id) {
				this.select.selectedIndex = i;
				this.close();
				break;
			}
		}
	},
	
	close: function(e) {
		Event.stopObserving(document, 'mousemove', function(e) {this.detectRollout(e)}.bind(this),false);
		Event.observe(this.element, "mousedown", function(e) {this.open(e)}.bind(this),false);
		Element.hide(this.list);
	}
}

//------------------------------------------------------------------------------
// Order
//------------------------------------------------------------------------------

var listOrder = Class.create();
listOrder.prototype = {
	
	action:null,
	list:null,
	isTree:false,
	
	initialize: function (el) {
		this.action = el.title;
		this.list = el;
		this.initItems(this.list);
		this.isTree = this.list.hasClassName("tree");
		Sortable.create(this.list,{tree:this.isTree, handle:"move", onUpdate:function() {
			var options = {
				method: "get",
				parameters: Sortable.serialize(this.list),
				onSuccess: function(transport) {
				}.bind(this)
			}
			
			new Ajax.Request(this.action, options)
		}.bind(this), onChange:function(element) {
		}.bind(this)});
		this.list.title = "";
		if(this.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";
				}	
			}
			//alert(message);
		}
	},
	
	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];
				Element.extend(li);
				li.id = this.list.id+"_"+li.id;
				var move = new Element("div").update("");
				move.addClassName("move");
				li.appendChild(move);
				Element.insert(li.down(0), {before:move});
				if(li.down('ul') && this.isTree) {
					this.initItems(li.down('ul'));
				}
			}
		}
	},
	
	dispose: function () {
	
	}
	
}

//------------------------------------------------------------------------------
// Vote
//------------------------------------------------------------------------------

var voteBoxes = Class.create();
voteBoxes.prototype = {
	
	action:null,
	list:null,
	mouseoverHandler:null,
	mouseoutHandler:null,
	defaultValue: 0,
	length: 0,
	
	initialize: function (el) {
		this.action = el.title;
		this.list = el;
		if(!this.list.hasClassName("inherit")) {
			this.mouseoverHandler = this.rollover.bindAsEventListener(this);
			this.mouseoutHandler = this.rollout.bindAsEventListener(this);
			this.mouseclickHandler = this.click.bindAsEventListener(this);
			this.initItems(this.list);
		}
		this.list.title = "";
	},
	
	initItems: function (el) {
		var index = 1;
		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];
				Element.extend(li);
				li.id = this.list.id+"_"+index;
				if(li.hasClassName("selected")) defaultValue = index;
				Event.observe(li.down('a'), "mouseover", this.mouseoverHandler);
				Event.observe(li.down('a'), "mouseout", this.mouseoutHandler);
				Event.observe(li.down('a'), "click", this.mouseclickHandler);
				index++;
			}
		}
		this.length = index-1;
	},
	
	rollover: function (ev) {
		var el = (Event.element(ev).tagName.toLowerCase()=="li") ? Event.element(ev) : Event.element(ev).up('li');
		var index = parseInt(el.id.substr(el.id.indexOf("_")+1,el.id.length));
		for(var i=1;i<=index;i++) {
			$(this.list.id+"_"+i).addClassName("selected");
		}
	},
	
	rollout: function (ev) {
		var el = (Event.element(ev).tagName.toLowerCase()=="li") ? Event.element(ev) : Event.element(ev).up('li');
		var index = parseInt(el.id.substr(el.id.indexOf("_")+1,el.id.length));
		for(var i=1;i<=index;i++) {
			if(i>this.defaultValue) {
				$(this.list.id+"_"+i).removeClassName("selected");
			}
		}
	},
	
	click: function (ev) {
		var el = (Event.element(ev).tagName.toLowerCase()=="li") ? Event.element(ev) : Event.element(ev).up('li');
		var index = parseInt(el.id.substr(el.id.indexOf("_")+1,el.id.length));
		var options = {
			method: "get",
			parameters: this.list.id+"="+index,
			onSuccess: function(transport) {
				var data = transport.responseText.evalJSON();
				var note = parseInt(data.NOTE);
				for(var i=1;i<=this.length;i++) {
					li = $(this.list.id+"_"+i);
					Event.stopObserving(li.down('a'), "mouseover", this.mouseoverHandler);
					Event.stopObserving(li.down('a'), "mouseout", this.mouseoutHandler);
					Event.stopObserving(li.down('a'), "click", this.mouseclickHandler);
					if(i<=note) li.addClassName("selected");
				}
				this.list.addClassName("inherit");
			}.bind(this)
		}
		new Ajax.Request(this.action, options);
	},
	
	dispose: function () {
	
	}
	
}


function initFields() {
	$$('input[type=text]').each(function (field, index) {var myField = new Field(field);}.bind(this));
	$$('input[type=password]').each(function (field, index) {var myField = new Field(field);}.bind(this));
	
	$$('input[type=checkbox]').each(function (field, index) {var myField = new FieldCheckbox(field);}.bind(this));
	$$('input[type=radio]').each(function (field, index) {var myField = new FieldRadio(field);}.bind(this));
	$$('select').each(function (field, index) {var myField = new SelectBox(field);}.bind(this));

	$$('.orderable').each(function (field, index) {var myOrder = new listOrder(field);}.bind(this));
	$$('.vote').each(function (field, index) {var myField = new voteBoxes(field);}.bind(this));
}

Event.observe(document, 'dom:loaded', initFields, false);