/**
* @desc mooForms.js - custom radio and checkboxes for forms.
* @author Shaun Freeman <shaun@shaunfreeman.co.uk>
* @Copyright Shaun Freeman 2007
* @date Wed Oct 24 13:31:24 BST 2007 
* @license      GNU/GPL, see LICENSE.txt
*   This program is free software: you can redistribute it and/or modify
*   it under the terms of the GNU General Public License as published by
*   the Free Software Foundation, either version 3 of the License, or
*   (at your option) any later version.
*
*   This program is distributed in the hope that it will be useful,
*   but WITHOUT ANY WARRANTY; without even the implied warranty of
*   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
*   GNU General Public License for more details.
*
*   You should have received a copy of the GNU General Public License
*   along with this program.  If not, see <http://www.gnu.org/licenses/>.
* @version 1.0 - Wed Oct 24 13:31:24 BST 2007
*     - 1st release
*
* @version 1.1 - Sat Jan 19 15:31:36 GMT 2008
*     - added labelPosition
*     - put label on left or right
*
* @version 1.2 - Tue 25 Mar 2008 09:56:15 GMT 
*     - updated to work with mootools 1.2b-dev
*     - fixed ie drag 'n' drop so image clears
*
*/

var mooForms = new Class({

    Implements: [Options],

    options: {
			imageDir: './images/',
			checkboxImage: {image: 'checkbox.gif', width: 16, height: 20, small_height: 14},
			radioImage: {image: 'small_radio.gif', width: 16, height: 20},
			spacer: 'spacer.gif',
			inputs: ['checkbox', 'radio'],
			labelPosition: 'right',
			useSmall: false
    },
    
    initialize: function(element, options){
		
		if(options) this.setOptions(options);
		
        this.el = $(element);
        this.elid = element;
		
		this.options.inputs.each(function (input) {
        	this.build(input);
		}.bind(this));
		
		this.divs = this.el.getElements('div');
		
        this.divs.each(function(item){ 
		
            if (item.hasClass('checkbox') || item.hasClass('small_checkbox') || item.hasClass('radio')) {
				
                item.addEvents({
					
					'mousedown': function(event){
                    	new Event(event).stop();
                    	this.effect(item);
                    	return false;
					}.bind(this),
					
	 				'click': function(event){	 
		 				this.handle(item);
					}.bind(this)
					
				});
				
				// ie fix for default drag 'n' drop on image.
				if (Browser.Engine.trident) {
					
					item.getElement('img').ondragend = function(event){
						this.clear(item);
						return false;
					}.bind(this);
					
				}
				
				window.addEvent('click', function(event){
					this.clear(item);
				}.bind(this));
			}
			
		}.bind(this));
	},
 
    build: function(input){
    	
		formElement = this.el.getElements('input[type=' + input + ']');
		
        formElement.each(function (inputElement) {
			
			if (input == 'checkbox') {
				if(this.options.useSmall) {
					this.image = this.options.imageDir + "small_" + this.options.checkboxImage.image;
					this.imageHeight = this.options.checkboxImage.small_height;
				} else {
					this.image = this.options.imageDir + this.options.checkboxImage.image;
					this.imageHeight = this.options.checkboxImage.height;
				}
				this.imageWidth = this.options.checkboxImage.width;
				
			}
			
			if (input == 'radio') {
				this.image = this.options.imageDir + this.options.radioImage.image;
				this.imageWidth = this.options.radioImage.width;
				this.imageHeight = this.options.radioImage.height;
			}

			this.spacer = new Asset.image(this.options.imageDir + this.options.spacer);
			
			this.spacer.setStyles({
	//			'width': this.imageWidth,
	//			'height': this.imageHeight,
	//			'vertical-align': 'middle',
				'background-image': 'url(' + this.image + ')',
				'background-repeat': 'no-repeat'
	//			'background-position': 'top',
			});
			
			if(input == 'checkbox' && this.options.useSmall) {
				wrapper = new Element('div', {
					'class': 'small_checkbox',
					'styles': {
						'cursor': 'pointer', 
						'display': 'inline'
					}
				});	
			} else {
				wrapper = new Element('div', {
					'class': input,
					'styles': {
						'cursor': 'pointer', 
						'display': 'inline'
					}
				});
			}
			
			if (this.options.labelPosition == 'left') {
				label = inputElement.getPrevious();
				wrapper.injectBefore(inputElement)
					//	.adopt(label)
						.adopt(this.spacer)
						.adopt(inputElement); 
			} else {
				label = inputElement.getNext();
				wrapper.injectBefore(inputElement)
						.adopt(this.spacer)
						.adopt(inputElement)
					//	.adopt(label);
			}
			
			/*label.setStyles({
				'vertical-align': 'middle',
				'display': 'inline'
			});*/
			
			inputElement.setStyle('display', 'none');
			
            if (inputElement.getAttribute('checked')) {
                wrapper.addClass('selected');
				//this.spacer.setStyle('background-position', 'bottom');
			}
		}.bind(this)); 
	},
	
	getImageHeight: function(item){
		if (item.hasClass('checkbox')) {
			this.imageHeight = this.options.checkboxImage.height;
		} else {
			this.imageHeight = this.options.radioImage.height;
		}
	},
 	
    effect: function(item){
	  	
		this.getImageHeight(item);
		
        if(item.className == 'checkbox' || item.className == 'radio') {
//            item.getElement('img').setStyle('background-position', 'bottom');
		} else {
//			item.getElement('img').setStyle('background-position', 'bottom');
		}
	},
 
    handle: function(item){
    
        selector = item.getElement('input');
		
        if(item.className == 'checkbox' || item.className == 'small_checkbox') {
            selector.setProperty('checked', 'checked');
            item.addClass('selected');
	//		item.getElement('img').setStyle('background-position', 'bottom');
		} else if (item.className == 'checkbox selected' || item.className == 'small_checkbox selected') {
            selector.removeProperty('checked');
            item.removeClass('selected');
	//		item.getElement('img').setStyle('background-position', 'top');
		} else {
            selector.setProperty('checked', 'checked');
            item.addClass('selected');
	//		item.getElement('img').setStyle('background-position', '0 bottom');
            itemName = selector.getProperty('name');
            
			this.inputs = this.el.getElements('input[name=' + itemName + ']');
            
            this.inputs.each(function(radio){
                if (radio != selector) {
                    radio.getParent().removeProperty('checked');
                    radio.getParent().removeClass('selected');			
	//				radio.getParent().getElement('img').setStyle('background-position', 'top');
				}
			});
		}
	},
    
    clear: function(item){
	
	   	this.getImageHeight(item);
		
        if (item.className == 'checkbox' || item.className == 'small_checkbox' || item.className == 'radio') {
//			item.getElement('img').setStyle('background-position', 'top');
		} else if (item.className == 'checkbox selected' || item.className == 'small_checkbox selected' || item.className == 'radio selected') {
//			item.getElement('img').setStyle('background-position', 'bottom');
		}
	}
});