﻿function setSelectObservers(select) {
    select.observe('change', function(event) {
        showOtherField(event.element());
    });
    
    var other = $(select.id + '_other');
    var link = other.childElements()[1];
    Event.observe(link, 'click', function(event) {
        hideOtherField(event.element());
        event.stop();
        return false;
    });
}

function hideOtherField(link) {
	if(link.parentNode) {
		var id = $(link.parentNode).readAttribute('id').split('_').without('other').join('_');
	    document.getElementById(id + '_other').style.display = 'none';
	    document.getElementById(id).style.display = 'inline';
	    document.getElementById(id).selectedIndex = 0;	
	}
    return false;
}

function initForm(event) {
    //set observers for tracking all changes
    var select1 = $('Materialart_1_Beduerfniss');
    setSelectObservers(select1);
    
    var form = $('anfrage1');
    var elements = form.getElements();
    form.getElements().each(function(element) {
        $(element).observe('blur', saveForm);
        $(element).observe('change', saveForm);
    });

    form.observe('submit', onAnfrageSubmit);

    //restore saved values
    var remote = new Offertanfrage();
    var formData = remote.read();
    if (formData != null) {
        Form.deserialize(form, formData);
    }

    showOtherField(select1);

    if (!autoselection.empty()) {
        $('sujet_1').value = autoselection;
    }
    
    //make optional fields collapsable
    $('optionalFields').style.display = 'none';
    $$('.showOptional').each(function(element) {
        element.observe('click', toggleOptionalFields);
    });
}

function onAnfrageSubmit(event) {
    event.stop();
    var formValid = true;
    var form = event.element();
    elements = form.getElements();

    elements.each(function(element) {
        if (element.hasClassName('required') && element.value.empty()) {
            formValid = false;
            element.style.backgroundColor = '#FF4444';
        } else if (element.hasClassName('email') && !element.value.match(/^((\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*)\s*[,]{0,1}\s*)+$/)) {
            formValid = false;
            element.style.backgroundColor = '#FF4444';
        } else if (element.hasClassName('numeric') && !element.value.match(/^([0-9]+)$/)) {
            formValid = false;
            element.style.backgroundColor = '#FF4444';
        } else if (element.hasClassName('required') || element.hasClassName('email') || element.hasClassName('numeric')) {
        element.style.backgroundColor = '#FFFFFF';
        }
    });

    if (formValid) {
        form.stopObserving('submit', onAnfrageSubmit);
        elements.each(function(element) {
            element.onclick = function() { };
            element.onblur = function() { };
            var type = element.type.toLowerCase();
            if ((type == 'checkbox' && !element.checked) ||
                (type == 'text' && element.value.empty())) {
                var hidden = new Element('input', { type: 'hidden', name: element.name, value: '-' });
                form.insert({ bottom: hidden });
                element.remove();
            }
        });

        form.submit();
    } else {
        alert(validationMessage);
    }
    
    return false;
}

function toggleOptionalFields(event) {
    event.stop();
    var img = $$('img.showOptional')[0];

    if ($('optionalFields').style.display == 'none') {
        $('optionalFields').style.display = 'block';
        img.src = img.src.replace(/open/, 'close');
    } else {
        $('optionalFields').style.display = 'none';
        img.src = img.src.replace(/close/, 'open');
    }
}

function showOtherField(select) {
    if (select.selectedIndex == (select.length - 1)) {
        select.style.display = 'none';
        document.getElementById(select.id + '_other').style.display = 'inline';
    }
}

function saveForm(event) {
    var remote = new Offertanfrage();
    var formData = remote.save(Form.serialize('anfrage1'));
}

Event.observe(window, 'load', initForm);
