// setup the namespace
if (typeof onepica == "undefined" || !onepica) {
    var onepica = {};
}

onepica.imageCheckboxes = Class.create({
	initialize: function () {
		this.on = '/skin/frontend/twins/default/images/bg/checkbox_checked.png';
		this.off = '/skin/frontend/twins/default/images/bg/checkbox.png';
		
	    this.process($$('input[type=checkbox]')); 
	},

	process: function (inputs) {
	    for(var i=0; i < inputs.length; i++) {        	
            var img = document.createElement('img');
            img.src = inputs[i].checked ? this.on : this.off;
            img.className = 'pointer';	
            inputs[i].parentNode.insertBefore(img, inputs[i]);
            inputs[i].style.display='none';
            
            Event.observe(img, 'click', this.toggle.bindAsEventListener(this, img, inputs[i], true));
            Event.observe(inputs[i], 'change', this.toggle.bindAsEventListener(this, img, inputs[i], false));

			if (inputs[i].onclick) {  // preserve onclick events
				img.observe('click', inputs[i].onclick);
			}
        } 
	},
	
	toggle: function() {
		var image = $A(arguments)[1];
		var checkbox = $A(arguments)[2];
		var change = $A(arguments)[3];
		
	    if(checkbox.checked) {
	        if(change) checkbox.checked = '';
	        image.src = change ? this.off : this.on;
	    } else {
	        if(change) checkbox.checked = 'checked';
	        image.src = change ? this.on : this.off;
	    }
	}
	
});

onepica.imageRadios = Class.create({
	initialize: function () {
		this.on = '/skin/frontend/twins/default/images/bg/checkbox_checked.png';
		this.off = '/skin/frontend/twins/default/images/bg/checkbox.png';
		
	    this.process($$('input[type=radio]'));
	},

	process: function (inputs) {
	    for(var i=0; i < inputs.length; i++) {
            var img = document.createElement('img');
            img.src = inputs[i].checked ? this.on : this.off;
            img.className = 'pointer imgRep_' + this._getSafeClassName(inputs[i].getAttribute('name'));
            inputs[i].parentNode.insertBefore(img, inputs[i]);
            inputs[i].style.display='none';
            
            Event.observe(img, 'click', this.toggle.bindAsEventListener(this, img, inputs[i], true));
            Event.observe(inputs[i], 'change', this.toggle.bindAsEventListener(this, img, inputs[i], false));
			
			if (inputs[i].onclick) {  // preserve onclick events
				img.observe('click', inputs[i].onclick);
			}
        } 	
	},
	
	getGroups: function() {
		return this.groups;
	},
	
	toggle: function() {
		var image = $A(arguments)[1];
		var radio = $A(arguments)[2];
		var change = $A(arguments)[3];
		
	    var imgs = $$('img.imgRep_' + this._getSafeClassName(radio.getAttribute('name')));
	    for(var i=0; i < imgs.length; i++) {
	    	imgs[i].src = this.off;
			radio.removeAttribute('checked');
			image.removeAttribute('checked');
        } 
        
	    radio.checked = 'checked';
	    image.src = this.on;
		image.setAttribute('checked', true);
	},
		
	_getSafeClassName: function (attribute) {
		return attribute.replace(/[^a-zA-Z0-9]/g, '');
	}
});