/**
 *  Class to substitute checkboxes and radio buttons with custom
 *  images, while keeping the full functionality (both for
 *  clicking and keyboard navigation)
 *
 *  @author: Ivan Dilber (ivan@cp-dev.com)
 */


/**
 *  Constructor of the class
 *  @param: checkbox_on - set image to be used for checkbox in checked state
 *  @param: checkbox_off - set image to be used for checkbox in unchecked state
 *  @param: radio_on - set image to be used for radio button when selected
 *  @param: radio_off - set image to be used for radio button when not selected
 */
function CustomizeInputs(checkbox_on, checkbox_off, radio_on, radio_off) {
	//set image sources
	this.checkbox_on_src = checkbox_on;
	this.checkbox_off_src = checkbox_off;
	this.radio_on_src = radio_on;
	this.radio_off_src = radio_off;

	//preload images
	this.preload = new Array();
	this.preload[0] = new Image();
	this.preload[0].src = this.checkbox_on_src;
	this.preload[1] = new Image();
	this.preload[1].src = this.checkbox_off_src;
	this.preload[2] = new Image();
	this.preload[2].src = this.radio_on_src;
	this.preload[3] = new Image();
	this.preload[3].src = this.radio_off_src;
}

/**
 *  This method does all the work
 *  @param: formName - name of the form to customize, or leave it blank to customize
 *                     the 1st form on the page ( document.form[0] )
 */
CustomizeInputs.prototype.init = function (formName) {
	if( this.supported() ){
		this.customize(formName);
        /*alert("sve je ql :)");*/
    }
    /*else
        alert("nije podrzano :(");*/
}



/* --- JUST PRIVATE METHODS BELOW THIS POINT, DON'T CALL THEM DIRECTLY --- */

CustomizeInputs.prototype.supported = function () {
    var agt=navigator.userAgent.toLowerCase();

    // Browser Detection stuff
    var major  = parseInt(navigator.appVersion);
    var ie     = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1));
    var ie3    = (ie && (major < 4));
    var ie4    = (ie && (major == 4) && (agt.indexOf("msie 4")!=-1) );
	var iemac  = (ie && (agt.indexOf("mac")!=-1));

	return !( iemac || ie3 || ie4 || !document.getElementById);
}

CustomizeInputs.prototype.customize = function (formName) {
	if(formName)
		var myForm = document.forms[formName];
	else
		var myForm = document.forms[0];

	if(!myForm)
			return;

	var thisobj = this;

	//reset images to initial state
	myForm.onreset = function() { thisobj.customize(this.name); }
    
	var inputs = myForm.getElementsByTagName('input');
    
	for (var i=0; i < inputs.length; i++) {       

		//RADIO BUTTONS
		if(inputs[i].type=="radio") {

			//hide element
			inputs[i].style.position="absolute"; inputs[i].style.left = "-2000px";

			var tmpimg = document.createElement('img');
			tmpimg.src = (inputs[i].defaultChecked || inputs[i].checked)? this.radio_on_src : this.radio_off_src;
			tmpimg.className = 'radioImage';

			tmpimg.radio = inputs[i];
			inputs[i].image = tmpimg;

			inputs[i].parentNode.insertBefore(tmpimg,inputs[i]);

			tmpimg.onclick = function () { thisobj.toggleRadioStyleImg(this.radio, this); return false;};
			inputs[i].onclick = function () { thisobj.toggleRadioStyleInput(this, this.image);};

			inputs[i].onfocus = function (){ this.image.className = 'radioImageFocus'; };
			inputs[i].onblur  = function (){ this.image.className = 'radioImage';};
		}

		//CHECKBOXES
		if(inputs[i].type=="checkbox") {           

			//hide element
			inputs[i].style.position="absolute"; inputs[i].style.left = "-2000px";
			if(inputs[i].defaultChecked)
				inputs[i].checked = 'checked';

			var tmpimg = document.createElement('img');
			tmpimg.src = inputs[i].checked? this.checkbox_on_src : this.checkbox_off_src;
			tmpimg.className = 'checkboxImage';

			tmpimg.checkbox = inputs[i];
			inputs[i].image = tmpimg;

			inputs[i].parentNode.insertBefore(tmpimg,inputs[i]);

			tmpimg.onclick = function () { thisobj.toggleCheckStyleImg(this.checkbox, this); return false;};			
            inputs[i].onclick = function () { thisobj.toggleCheckStyleInput(this, this.image); return true;};

			inputs[i].onfocus = function (){ this.image.className = 'checkboxImageFocus'; };
			inputs[i].onblur  = function (){ this.image.className = 'checkboxImage';};

		}

	}    
}


CustomizeInputs.prototype.toggleRadioStyleImg = function (inputObj, imgObj) {

	var radios = inputObj.form.elements[inputObj.name];

	for(var i=0; i<radios.length; i++) {
			radios[i].image.src = this.radio_off_src;
	}
	inputObj.focus(); // set focus for tab navigation
	inputObj.checked = 'checked';
	imgObj.src = this.radio_on_src;
}

CustomizeInputs.prototype.toggleRadioStyleInput = function (inputObj, imgObj) {
	var radios = inputObj.form.elements[inputObj.name];

	for(var i=0; i<radios.length; i++) {
			radios[i].image.src = this.radio_off_src;
	}

	imgObj.src = this.radio_on_src;
}

CustomizeInputs.prototype.toggleCheckStyleImg = function (inputObj, imgObj) {
	inputObj.checked = inputObj.checked ? null : 'checked';
	inputObj.focus();
    //inputObj.click();    
	imgObj.src = inputObj.checked? this.checkbox_on_src : this.checkbox_off_src;
}

CustomizeInputs.prototype.toggleCheckStyleInput = function (inputObj, imgObj) {
	imgObj.src = inputObj.checked? this.checkbox_on_src : this.checkbox_off_src;
}