var customForms = new Class({
	Implements: Options,
	options: {
		checkboxHeight:25,
		radioHeight:25
		
	},
    initialize: function(options){
		this.setOptions(options);
		
		this.inputs = $$('input');
		this.selects = $$('select');
		this.textareas = $$('textarea');
		
		this.inputs.each(function(item, index) {
			var inputType = item.get('type');
			if((inputType == 'checkbox' || inputType == 'radio' || inputType == 'checkbox') && !item.hasClass('nostyle')) {
				var span = new Element('span', {'class':inputType});
				if(item.getProperty('checked')) {
					span.addClass('customCheck');
				}
				span.inject(item, 'before');
				item.addClass(inputType);
				item.addEvent('change', function(e) { this.clear();	}.bind(this));
				span.addEvent('mousedown', function(e) { this.pushed(index); }.bind(this));
				span.addEvent('mouseup', function(e) { this.check(index); }.bind(this));
				document.addEvent('mouseup', function(e) { this.clear(); }.bind(this));
			}
		}.bind(this));
		
		this.selects.each(function(item, index) {
			if(!item.hasClass('nostyle')) {
				var itemOptions = item.getElements('option');
				//actif = $(itemOptions[0]).get('html');
				var texte = $(item.getSelected()[0]).get('html');
				/*itemOptions.each(function(itemOption, indexOption) {
					if(itemOption.getProperty('selected') == 'selected') {
						texte = itemOption.get('html');
					}
				}.bind(this));*/
				var size = item.getSize();
				var largeur = size.x+10;
				//out('largeur:'+index+' :'+largeur+' ('+item.getStyle('width')+')');
				item.setStyle('width',largeur+'px');
				var div = new Element('div',{'class':'selectdiv','style':'display:block; width:'+largeur+'px; height:'+size.y+'px;'});
				var span = new Element('span', {'id':'select'+item.getProperty('name'),'class':'select','style':'width:'+largeur+'px'});
				var spanIn = new Element('span', {'class':'in'});
				//var spanIn2 = new Element('span', {'class':'in2'});
				var spanText = new Element('span', {'class':'text','html':texte});
				div.wraps(item);
				span.inject(item, 'before');
				spanIn.inject(span, 'bottom');
				//spanIn2.inject(spanIn, 'bottom');
				spanText.inject(spanIn, 'bottom');
				item.addEvent('change', function(e) { this.choose(index); }.bind(this));
			}
		}.bind(this));
	},
	pushed: function(index) {
		var element = $(this.inputs[index]);
		var span = element.getPrevious();
		var elementType = element.getProperty('type');
		span.removeClass('customClear');
		span.removeClass('customCheck');
		if(element.getProperty('checked')) {
			span.addClass('customCheckPushed');
		} else {
			span.addClass('customPushed');
		}
	},
	check: function(index) {
		var element = $(this.inputs[index]);
		var span = element.getPrevious();
		var elementType = element.getProperty('type');
		span.removeClass('customPushed');
		span.removeClass('customCheckPushed');
		if(element.getProperty('checked') && elementType == "checkbox") {
			span.addClass('customClear');
			element.removeProperty('checked');
		} else {
			if(elementType == "checkbox") {
				span.addClass('customCheck');
			} else {
				span.addClass('customCheck');
				var group = element.getProperty('name');
				this.inputs.each(function(item, index) {
					if(item.getProperty('name') == group && item != element) {
						item.getPrevious().removeClass('customCheck');
						item.getPrevious().addClass('customClear');
					}
				});
			}
			element.setProperty('checked', 'checked');
		}
	},
	clear: function() {
		this.inputs.each(function(item, index) {
			var itemType = item.getProperty('type');
			if(!item.hasClass('nostyle') && (itemType == 'radio' || itemType == 'checkbox')) {
				item.getPrevious().removeClass('customPushed');
				item.getPrevious().removeClass('customCheckPushed');
				if(item.getProperty('checked')) {
					item.getPrevious().removeClass('customClear');
					item.getPrevious().addClass('customCheck');
				} else {
					item.getPrevious().removeClass('customCheck');
					item.getPrevious().addClass('customClear');
				}
			}
		});
	},
	choose: function(index) {
		var element = $(this.selects[index]);
		var selectedOptions = element.getSelected();
		selectedOptions.each(function(item,index) {
			$('select'+element.getProperty('name')).getElement('.text').set('html',item.get('html'));
		});
	}
});
window.addEvent('domready', function(e) {
	var heidiForms = new customForms();
});