//global variables that can be used by ALL the function son this page.
var inputs;
var selects;
var imgCheckboxFalse = 'http://www.kunstveiling.nl/resources/theme/kunstveiling/checkbox_false.png';
var imgCheckboxTrue = 'http://www.kunstveiling.nl/resources/theme/kunstveiling/checkbox_true.png';
var imgRadioFalse = 'http://www.kunstveiling.nl/resources/theme/kunstveiling/radio_false.png';
var imgRadioTrue = 'http://www.kunstveiling.nl/resources/theme/kunstveiling/radio_true.png';
var imgSelectArrow = 'http://www.kunstveiling.nl/resources/theme/kunstveiling/select_arrow.png';

//this function runs when the page is loaded, put all your other onload stuff in here too.

function changeClass(targetID){
    var target = document.getElementById(targetID);
    if(target.id == 'tabDescription') {
    	target.className = 'previewTabSelected';
        document.getElementById('tabSupplier').className = 'previewTab';
    }
    
    if(target.id == 'tabSupplier') {
        document.getElementById('tabDescription').className = 'previewTab';
        target.className = 'previewTabSelected';
    }    
}

function init() {
    replaceChecks();
}

function replaceChecks() {
    //get all the input fields on the page
    inputs = document.getElementsByTagName('input');
    selects = document.getElementsByTagName('select');
    //cycle trough the input fields
    
    for(var i=0; i < inputs.length; i++) {

        //check if the input is a checkbox
        if(inputs[i].getAttribute('type') == 'checkbox') {
            inputs[i].className = 'input_checkbox_common';
            //create a new image
//            var img = document.createElement('img');
//            
//            //check if the checkbox is checked
//            if(inputs[i].checked) {
//                img.src = imgCheckboxTrue;
//            } else {
//                img.src = imgCheckboxFalse;
//            }
//
//            //set image ID and onclick action
//            img.id = 'checkImage'+i;
//            //set image
//            inputs[i].onclick = new Function('checkChange('+i+', "Checkbox")');
//            //place image in front of the checkbox
//            inputs[i].parentNode.insertBefore(img, inputs[i]);
//            
//            //inputs[i].click();
//            //inputs[i].click();
//            //hide the checkbox
//            inputs[i].className = 'checkbox_js';
//            img.className = 'checkboximg_js';
        }
        if(inputs[i].getAttribute('type') == 'radio') {
            var img = document.createElement('img');
            
            if(inputs[i].checked) {
                img.src = imgRadioTrue;
            } else {
                img.src = imgRadioFalse;
            }
            img.id = 'checkImage'+i;
            img.onclick = new Function('checkChange('+i+', "Radio")');
            inputs[i].parentNode.insertBefore(img, inputs[i]);
            inputs[i].style.display='none';
        }
        if((inputs[i].getAttribute('type') == 'text') || (inputs[i].getAttribute('type') == 'password')) {
            if(!inputs[i].getAttribute('class')) {
                inputs[i].setAttribute('class', 'input_text');
            }
        }
        if((inputs[i].getAttribute('type') == 'submit') || (inputs[i].getAttribute('type') == 'button')) {
            if(!inputs[i].getAttribute('class')) {
                inputs[i].setAttribute('class', 'input_button_common');
            }
        }
    }
}

//change the checkbox status and the replacement image
function checkChange(i, type) {
    switch(type) {
        case 'Checkbox' :
            if(inputs[i].checked) {
                //inputs[i].checked = false;
                inputs[i].removeAttribute('checked');
                document.getElementById('checkImage'+i).src= imgCheckboxFalse;
            } else {
                inputs[i].setAttribute('checked', 'true');
                document.getElementById('checkImage'+i).src= imgCheckboxTrue;
            }
            break;
        case 'Radio' :
            if(!inputs[i].checked) {
                inputs[i].checked = true;
                document.getElementById('checkImage'+i).src= imgRadioTrue;
                for(var j = 0; j < inputs.length; j++){
                    if((inputs[j].getAttribute('name') == inputs[i].getAttribute('name')) && (!inputs[j].checked) && (inputs[j].getAttribute('type') == 'radio')) {
                        inputs[j].removeAttribute('checked');
                        document.getElementById('checkImage'+j).src = imgRadioFalse;
                    }
                }
            } 
            break;
    }
}

window.onload = init;