/*

CUSTOM FORM ELEMENTS

Created by Ryan Fait
www.ryanfait.com

The only thing you need to change in this file is the following
variables: checkboxHeight, radioHeight and selectWidth.

Replace the first two numbers with the height of the checkbox and
radio button. The actual height of both the checkbox and radio
images should be 4 times the height of these two variables. The
selectWidth value should be the width of your select list image.

You may need to adjust your images a bit if there is a slight
vertical movement during the different stages of the button
activation.

Visit http://ryanfait.com/ for more information.

*/

/**
 * TODO: update this to be 100% MooTools
 */

var Custom = new Class({
	Implements: Options,
    options: {
        targetClass: 'abStyled',

		checkboxHeight: '25',
		radioHeight: '25',
		selectWidth: '100%',
		selectOffsetTop: -16,

		fauxClassNames: new Hash({'checkbox': 'abCheckBox', 'radio': 'abRadio', 'select': 'abSelect'}),
		
		elementsInfo: new Hash({
			'checkbox': {'class': '', '': ''},
			'radio': {},
			'select': {}
		})
    },
	initialize: function(options){
		this.setOptions(options);
		this.targetClass = this.options.targetClass;

		this.checkboxHeight = this.options.checkboxHeight;
		this.radioHeight = this.options.radioHeight;
		this.selectWidth = this.options.selectWidth;
		this.selectOffsetTop = this.options.selectOffsetTop;

		this.fauxClassNames = this.options.fauxClassNames;
		
		$$('input.' + this.targetClass).set('style', 'display: none;');
		$$('select.' + this.targetClass).set('style', 'position: relative; top: ' + this.selectOffsetTop + 'px; opacity: 0; filter: alpha(opacity=0); z-index: 5;');

		var inputs = document.getElementsByTagName("input"), span = Array(), textnode, option, active;
		
//		$$("input." + this.targetClass + '[type|=radio-checkbox]').each(function(el, i){
//			var type = el.get('tag');
//			span[i] = new Element('span', {'class': this.fauxClassNames.get(type), 'id': type + el.get('name') + i});
//			if(el.get('checked') == 'checked'){
//				span[i].set('style', 'background-position: 0 - ' + );
//			}
//			.inject(el, 'before');
//			el.addEvent('change', function(){
//				this.choose(span[i], el);
//			}.bind(this));
//			span[a] = document.createElement("span");
//			span[a].className = inputs[a].type;
//
//			if(inputs[a].checked == true) {
//				if(inputs[a].type == "checkbox") {
//					position = "0 -" + (this.checkboxHeight*2) + "px";
//					span[a].style.backgroundPosition = position;
//				} else {
//					position = "0 -" + (this.radioHeight*2) + "px";
//					span[a].style.backgroundPosition = position;
//				}
//			}
//			inputs[a].parentNode.insertBefore(span[a], inputs[a]);
//			inputs[a].onchange = this.clear();
//			span[a].onmousedown = this.pushed();
//			span[a].onmouseup = this.check();
//			document.onmouseup = this.clear();
//		}.bind(this));		
		
//		for(a = 0; a < inputs.length; a++) {
//			if((inputs[a].type == "checkbox" || inputs[a].type == "radio") && inputs[a].hasClass(this.targetClass)) {
//				span[a] = document.createElement("span");
//				span[a].className = inputs[a].type;
//
//				if(inputs[a].checked == true) {
//					if(inputs[a].type == "checkbox") {
//						position = "0 -" + (this.checkboxHeight*2) + "px";
//						span[a].style.backgroundPosition = position;
//					} else {
//						position = "0 -" + (this.radioHeight*2) + "px";
//						span[a].style.backgroundPosition = position;
//					}
//				}
//				inputs[a].parentNode.insertBefore(span[a], inputs[a]);
//				inputs[a].onchange = this.clear();
//				span[a].onmousedown = this.pushed();
//				span[a].onmouseup = this.check();
//				document.onmouseup = this.clear();
//			}
//		}

		$$("select." + this.targetClass).each(function(el, i){
			var type = el.get('tag');
			option = el.getElements("option");
			textnode = option[0].get('text');
			
			el.getElements("option").each(function(op, j){
				if(op.selected){
					textnode = op.get('text');
				}
			}.bind(this));
			span[i] = new Element('span', {'class': this.fauxClassNames.get(type), 'id': 'select' + el.get('name') + i}).set('text', textnode).inject(el, 'before');
			el.addEvent('change', function(){
				this.choose(span[i], el);
			}.bind(this));
		}.bind(this));		
    },
	pushed: function() {
		element = this.nextSibling;
		if(element.checked == true && element.type == "checkbox") {
			this.style.backgroundPosition = "0 -" + this.checkboxHeight*3 + "px";
		} else if(element.checked == true && element.type == "radio") {
			this.style.backgroundPosition = "0 -" + this.radioHeight*3 + "px";
		} else if(element.checked != true && element.type == "checkbox") {
			this.style.backgroundPosition = "0 -" + this.checkboxHeight + "px";
		} else {
			this.style.backgroundPosition = "0 -" + this.radioHeight + "px";
		}
	},
	check: function() {
		element = this.nextSibling;
		if(element.checked == true && element.type == "checkbox") {
			this.style.backgroundPosition = "0 0";
			element.checked = false;
		} else {
			if(element.type == "checkbox") {
				this.style.backgroundPosition = "0 -" + this.checkboxHeight*2 + "px";
			} else {
				this.style.backgroundPosition = "0 -" + this.radioHeight*2 + "px";
				group = this.nextSibling.name;
				inputs = document.getElementsByTagName("input");
				for(a = 0; a < inputs.length; a++) {
					if(inputs[a].name == group && inputs[a] != this.nextSibling) {
						inputs[a].previousSibling.style.backgroundPosition = "0 0";
					}
				}
			}
			element.checked = true;
		}
	},
	clear: function() {
		inputs = document.getElementsByTagName("input");
		for(var b = 0; b < inputs.length; b++) {
			if(inputs[b].type == "checkbox" && inputs[b].checked == true && inputs[b].hasClass(this.targetClass)) {
				inputs[b].previousSibling.style.backgroundPosition = "0 -" + this.checkboxHeight*2 + "px";
			} else if(inputs[b].type == "checkbox" && inputs[b].hasClass(this.targetClass)) {
				inputs[b].previousSibling.style.backgroundPosition = "0 0";
			} else if(inputs[b].type == "radio" && inputs[b].checked == true && inputs[b].hasClass(this.targetClass)) {
				inputs[b].previousSibling.style.backgroundPosition = "0 -" + this.radioHeight*2 + "px";
			} else if(inputs[b].type == "radio" && inputs[b].hasClass(this.targetClass)) {
				inputs[b].previousSibling.style.backgroundPosition = "0 0";
			}
		}
	},
	choose: function(target, trigger) {
		target.set('text', trigger.getSelected()[0].get('text'));
	}
});

window.addEvent('domready', function(){
	var abCustom = new Custom();
});