/**
 *
 */
var BookingFormHTMLProvider = {

    getInput : function(field, value, style)
    {
        switch (field.getType()) {
            case 'hidden':
                return this.getHiddenInput(field); break;
            case 'text':
                return this.getTextField(field); break;
            case 'checkbox':
                return this.getCheckboxField(field, value); break;
            case 'radio':
                return this.getRadioField(field, value); break;
            case 'select':
                return this.getSelectField(field); break;
            case 'textarea':
                return this.getTextarea(field); break;
            case 'submit':
                return this.getSubmitField(field); break;
            case 'static':
                return this.getStaticField(field); break;
        }
    },

    getHiddenInput : function(field)
    {
        var attributes = field.getAttributes();
        attributes.type = 'hidden';
        attributes.name = field.name;
        attributes.value = field.value;

        return this.getHTMLTag('input', attributes, null);
    },

    getTextField : function(field)
    {
        var attributes = field.getAttributes();
        attributes.type = 'text';
        attributes.name = field.name;
        attributes.value = field.value;

        return this.getHTMLTag('input', attributes, null);
    },

    getCheckboxField : function(field, value)
    {
        var attributes = field.getAttributes();
        attributes.type = 'checkbox';

        if (field.value === value) {
            attributes['checked'] = 'checked';
        }

        if (!('class' in attributes)) {
            attributes['class'] = 'checkbox';
        } else {
            attributes['class'] += ' checkbox';
        }

        return this.getHTMLTag('input', attributes, null);
    },

    getRadioField : function(field, value)
    {
        var attributes = field.getAttributes();
        attributes.type = 'radio';

        if (field.value == value) {
            attributes['checked'] = 'checked';
        }

        if (!'class' in attributes) {
            attributes['class'] = 'radio';
        } else {
            attributes['class'] += ' radio';
        }

        return this.getHTMLTag('input', attributes, null);
    },

    getSelectField : function(field)
    {
        var attributes = field.getAttributes();

        var contents = [];
        var options = field.getFieldOptions();
        for (var i = 0; i < options.length; i++) {
            contents.push(this.getHTMLTag('option', options[i].attributes, null));
        }

        return this.getHTMLTag('select', attributes, contents);
    },

    getTextarea : function(field)
    {
        var attributes = field.getAttributes();
        attributes.value = field.value;

        return this.getHTMLTag('textarea', attributes, '');
    },

    getSubmitField : function(field)
    {
        var attributes = field.getAttributes();
        return this.getHTMLTag('input', attributes, null);
    },

    getStaticField : function(field)
    {
        var attributes = field.getAttributes();
        return this.getHTMLTag('span', attributes, field.value);
    },

    getFormHTML : function(form)
    {
        var contents = '';
        var hidden_inputs = '';
        var inputs = '';

        var field;
        var fields = form.getFields();

        for (var a in fields) {

            field = fields[a];

            if (field.getType() == 'hidden') {

                html = field.getHTML();
                if (!html) html = this.getHiddenInput(field);

                hidden_inputs += html;

            } else {

                html = field.getHTML();
                if (!html) html = this.getInput (field);
                inputs += html;

            }
        }

        if (hidden_inputs !== '') contents += '<div class="nodisplay">' + hidden_inputs + '</div>';
        if (inputs !== '') contents += inputs;

        return contents;
    },

    renderFormHTML : function(form, style)
    {
        var contents = this.getHTMLTag('h2', null, [['span', null, form.getConfig().title]]);
        contents += this.getFormHTML(form, style);

        html = this.getHTMLTag('form', form.getAttributes(), contents);

        return this.getHTMLTag('div', {'class' : 'form', 'id' : 'form-' + form.getAttributes().id + '-container'}, html);
    },

    renderFormErrorHTML : function(form, errs)
    {
        var element;

        var li = [];
        for (var a in errs) {
            for (var i = 0; i < errs[a].length; i++) {

                element = form.getElement(a);
                if (element) {
                    li.push(['li', null, [['label', {'for' : element.getId()}, errs[a][i]]]]);
                }
            }
        }

        return this.getHTMLTag('ul', {'class' : ' errors'}, li);
    },

    getTripInfo : function(prevForm, currentForm) {

        var contents = $('<dl id="trip-details"/>');

        var details = {};
        details.frmdestination_id = 'Bestemming';
        details.frmtrip_id = 'Reis';
        details.frmarrangement_id = 'Vertrekdatum';
        details.frmnum_participants = 'Aantal deelnemers';
        details.frmseparate_invoices = 'Factuur';

        var element;
        var value;
        var displayValue;
        for (var a in details) {

            displayValue = this.getDisplayValue(currentForm, prevForm, a);

            if (displayValue) {
                contents.append('<dt>' + displayValue.label + '</dt>');
                contents.append('<dd>' + displayValue.value + '</dd>');
            }
        }

        return contents;
    },

    getParticipantData : function(prevForm, currentForm) {

        var contents = $('<dl id="participant-details"/>');
        var element;
        var value;
        var displayValue;

        var details = {};

        // main booker
        details.frmpersonalia_1_frmfullname = '';
        details.frmpersonalia_1_frmdate_birth = '';
        details.frmpersonalia_1_frmroom_type_title = '';
        details.frmaddress_1_frmaddress = '';
        details.frmaddress_1_frmpostalcode_city = '';
        details.frmaddress_1_frmemail = '';
        details.frmaddress_1_frmphone = '';

        var num_participants = Number(currentForm.getElement('frmnum_participants').getValue());
        if (num_participants > 1) {
            for (var i = 2; i <= num_participants; i++) {
                details['frmpersonalia_' + i + '_frmfullname'] = 'Persoon #' + i;
                details['frmpersonalia_' + i + '_frmemail'] = '';
                details['frmpersonalia_' + i + '_frmdate_birth'] = '';
//                details['frmpersonalia_' + i + '_frmroom_type_title'] = '';
            }
        }

        var regex = /^(frm[personalia|address]+)\_(\d+)\_(.*)$/;
        var matches;
        var prefix;
        var number;
        var name;
        for (var a in details) {

            matches = regex.exec(a);

            if (matches) {

                prefix = matches[1];
                number = matches[2]
                name = matches[3];

                displayValue = {'label': details[a], 'value': ''};

                if (name === 'frmfullname') {

                    if (displayValue.label == '') displayValue.label = 'Naam (hoofdboeker)';

                    var elements = ['firstnames', 'middlename', 'lastname'];
                    for (var i = 0; i < elements.length; i++) {
                        element = currentForm.getElement(prefix + '_' + number + '_frm' + elements[i]);
                        if (element) {
                            displayValue.value += element.getDisplayValue() + ' ';
                        }
                    }

                    displayValue.value = $.trim(displayValue.value).replace(/\s{2,}/g, ' ');

                } else if (name === 'frmaddress') {

                    if (displayValue.label == '') displayValue.label = 'Adres';

                    var elements = ['street', 'house_number', 'house_number_extra'];
                    for (var i = 0; i < elements.length; i++) {
                        element = currentForm.getElement(prefix + '_' + number + '_frm' + elements[i]);
                        if (element) {
                            displayValue.value += element.getDisplayValue() + ' ';
                        }
                    }

                    displayValue.value = $.trim(displayValue.value).replace(/\s{2,}/g, ' ');

                } else if (name === 'frmpostalcode_city') {

                    if (displayValue.label == '') displayValue.label = 'PC/woonplaats';

                    var elements = ['postalcode', 'city'];
                    for (var i = 0; i < elements.length; i++) {
                        element = currentForm.getElement(prefix + '_' + number + '_frm' + elements[i]);
                        if (element) {
                            displayValue.value += element.getDisplayValue() + ' ';
                        }
                    }

                    displayValue.value = $.trim(displayValue.value).replace(/\s{2,}/g, ' ');

//                } else if (name === 'frmroom_type_title') {
//
//                    displayValue = this.getDisplayValue(currentForm, prevForm, a);
//                    if (displayValue.label == '') displayValue.label = 'Kamertype';

                } else {

                    displayValue = this.getDisplayValue(currentForm, prevForm, a);

                }

                if (displayValue) {

                    var dt = $('<dt/>').html(displayValue.label);
                    var dd = $('<dd/>').html(displayValue.value);

                    if ((name === 'frmfullname') && (number > 1)) {
                        dt.attr('class', 'participant');
                        dd.attr('class', 'participant');
                    }

                    contents.append(dt);
                    contents.append(dd);
                }
            }
        }

        return contents;

    },

    getTripOptions : function(prevForm, currentForm) {

        var contents = $('<dl id="trip-options"/>');

        var value;
        var displayValue;
        var element;




        var details = {};
        details.frmpersonalia_1_frmfullname = '';
        details.frmpersonalia_1_frmroom_type_title = '';

        var num_participants = Number(currentForm.getElement('frmnum_participants').getValue());
        if (num_participants > 1) {
            for (var i = 2; i <= num_participants; i++) {
                details['frmpersonalia_' + i + '_frmfullname'] = 'Persoon #' + i;
                details['frmpersonalia_' + i + '_frmroom_type_title'] = '';
            }
        }

        var regex = /^(frm[personalia]+)\_(\d+)\_(.*)$/;
        var matches;
        var prefix;
        var number;
        var name;
        for (var a in details) {

            matches = regex.exec(a);

            if (matches) {

                prefix = matches[1];
                number = matches[2]
                name = matches[3];

                displayValue = {'label': details[a], 'value': ''};

                if (name === 'frmfullname') {

                    if (displayValue.label == '') displayValue.label = 'Naam (hoofdboeker)';

                    var elements = ['firstnames', 'middlename', 'lastname'];
                    for (var i = 0; i < elements.length; i++) {
                        element = currentForm.getElement(prefix + '_' + number + '_frm' + elements[i]);
                        if (element) {
                            displayValue.value += element.getDisplayValue() + ' ';
                        }
                    }

                    displayValue.value = $.trim(displayValue.value).replace(/\s{2,}/g, ' ');

                } else if (name === 'frmroom_type_title') {

                    displayValue = this.getDisplayValue(currentForm, prevForm, a);
                    if (displayValue.label == '') displayValue.label = 'Kamertype';

                }

                if (displayValue) {

                    var dt = $('<dt/>').html(displayValue.label);
                    var dd = $('<dd/>').html(displayValue.value);

                    if ((name === 'frmfullname') && (number > 1)) {
                        dt.attr('class', 'participant');
                        dd.attr('class', 'participant');
                    }

                    contents.append(dt);
                    contents.append(dd);
                }
            }
        }



        var countryArrangement = currentForm.getElement('frmcountry_arrangement');

        if (countryArrangement) {

            var countryArrangementValue = countryArrangement.getValue();

            element = prevForm.getElement('frmcountry_arrangement');
            if (element) {

                contents.append('<dt class="participant">Landarrangement</dt>');
                contents.append('<dd class="participant">' + element.getDisplayValue(countryArrangementValue) + '</dd>');

                // country arrangement: yes
                if (Number(countryArrangementValue) == 1) {

                    // extend date
                    var extendDate = currentForm.getElement('frmextend_date');
                    if (extendDate) {

                        // extend date: yes
                        if (extendDate.getValue()) {

                            // extend hotel booking
                            var extendHotelBooking = currentForm.getElement('frmextend_hotel_booking');
                            if (extendHotelBooking) {
                                if (extendHotelBooking.getValue()) {

                                    var elements = ['frmcountryarrangement_yes_extend_hotel_booking_before_hotel',
                                                    'frmcountryarrangement_yes_extend_hotel_booking_before_room_type',
                                                    'frmcountryarrangement_yes_extend_hotel_booking_before_check_in',
                                                    'frmcountryarrangement_yes_extend_hotel_booking_after_hotel',
                                                    'frmcountryarrangement_yes_extend_hotel_booking_after_room_type',
                                                    'frmcountryarrangement_yes_extend_hotel_booking_after_check_out'];

                                    for (var j = 0; j < elements.length; j++) {

                                        displayValue = this.getDisplayValue(currentForm, prevForm, elements[j]);
                                        if (displayValue) {
                                            contents.append('<dt>' + displayValue.label + '</dt>');
                                            contents.append('<dd>' + displayValue.value + '</dd>');
                                        }
                                    }
                                }
                            }
                        }
                    }
                } else { // country arrangement: no


                    // extend trip?
                    var extendTrip = currentForm.getElement('frmextend_trip');
                    if (extendTrip && extendTrip.getValue()) {

                        // changed trip flights
                        var changeTripFlights = prevForm.getElement('frmchange_trip_flights');
                        for (var i = 0; i < changeTripFlights.options.length; i++) {
                            if (currentForm.getElement('frmchange_trip_flights[' + changeTripFlights.options[i].optionValue + ']')) {

                                var suffix = changeTripFlights.options[i].optionValue.substring(7); // strip 'flight_'
                                var elements = ['frmflight_' + suffix,
                                                'frmflight_' + suffix + '_alternative',
                                                'frmflight_' + suffix + '_to'];

                                for (var j = 0; j < elements.length; j++) {

                                    displayValue = this.getDisplayValue(currentForm, prevForm, elements[j]);
                                    if (displayValue) {
                                        contents.append('<dt>' + displayValue.label + '</dt>');
                                        contents.append('<dd>' + displayValue.value + '</dd>');
                                    }
                                }

                                // extended hotel
                                var extendHotelBooking = currentForm.getElement('frmextend_hotel_booking_' + suffix);
                                if (extendHotelBooking && extendHotelBooking.getValue()) {

                                    var elements = ['frmcountryarrangement_no_extend_hotel_booking_' + suffix + '_hotel',
                                                    'frmcountryarrangement_no_extend_hotel_booking_' + suffix + '_room_type',
                                                    'frmcountryarrangement_no_extend_hotel_booking_' + suffix + '_check_in',
                                                    'frmcountryarrangement_no_extend_hotel_booking_' + suffix + '_check_out'];

                                    for (var j = 0; j < elements.length; j++) {

                                        displayValue = this.getDisplayValue(currentForm, prevForm, elements[j]);
                                        if (displayValue) {
                                            contents.append('<dt>' + displayValue.label + '</dt>');
                                            contents.append('<dd>' + displayValue.value + '</dd>');
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }

        // insurance
        displayValue = this.getDisplayValue(currentForm, prevForm, 'frminsurance_type');
        if (displayValue) {

            contents.append('<dt>' + displayValue.label + '</dt>');
            contents.append('<dd>' + displayValue.value + '</dd>');

            var insuranceType = currentForm.getElement('frminsurance_type');
            if (insuranceType && (insuranceType.getValue() == 'ceasing')) {

                // insurance participants
                displayValue = this.getDisplayValue(currentForm, prevForm, 'frminsurance_participants');
                if (displayValue) {
                    contents.append('<dt>' + displayValue.label + '</dt>');
                    for (var i = 0; i < displayValue.value.length; i++) {
                        contents.append('<dd>' + displayValue.value[i] + '</dd>');
                    }
                }

                // insurance extensions
                displayValue = this.getDisplayValue(currentForm, prevForm, 'frminsurance_extensions');
                if (displayValue) {
                    contents.append('<dt>' + displayValue.label + '</dt>');
                    for (var i = 0; i < displayValue.value.length; i++) {
                        contents.append('<dd>' + displayValue.value[i] + '</dd>');
                    }
                }
            }
        }

        // cancellation insurance
        displayValue = this.getDisplayValue(currentForm, prevForm, 'frmcancellation_insurance');
        if (displayValue) {

            contents.append('<dt>' + displayValue.label + '</dt>');
            contents.append('<dd>' + displayValue.value + '</dd>');

            var cancellationInsurance = currentForm.getElement('frmcancellation_insurance');
            if (cancellationInsurance && (cancellationInsurance.getValue() == 'ceasing')) {

                // insurance extensions
                displayValue = this.getDisplayValue(currentForm, prevForm, 'frmcancellation_insurance_extensions');
                if (displayValue) {
                    contents.append('<dt>' + displayValue.label + '</dt>');

                    for (var i = 0; i < displayValue.value.length; i++) {
                        contents.append('<dd>' + displayValue.value[i] + '</dd>');
                    }
                }

                // insurance extra
                displayValue = this.getDisplayValue(currentForm, prevForm, 'frmcancellation_insurance_extra_fullname');
                if (displayValue) {
                    contents.append('<dt>' + displayValue.label + '</dt>');
                    contents.append('<dd>' + displayValue.value + '</dd>');
                }

                displayValue = this.getDisplayValue(currentForm, prevForm, 'frmcancellation_insurance_extra_datebirth');
                if (displayValue) {
                    contents.append('<dt>' + displayValue.label + '</dt>');
                    contents.append('<dd>' + displayValue.value + '</dd>');
                }
            }
        }

        // visum voucher
        displayValue = this.getDisplayValue(currentForm, prevForm, 'frmvisum_voucher');
        if (displayValue) {
            for (var i = 0; i < displayValue.value.length; i++) {
                contents.append('<dt>' + displayValue.value[i] + '</dt>');
                contents.append('<dd>Ja</dd>');
            }
        }

        // unicef
        displayValue = this.getDisplayValue(currentForm, prevForm, 'frmunicef');
        if (displayValue) {
            for (var i = 0; i < displayValue.value.length; i++) {
                contents.append('<dt>' + displayValue.value[i] + '</dt>');
                contents.append('<dd>Ja</dd>');
            }
        }

        return contents;
    },

    getDisplayValue : function(submitValues, form, elementName)
    {
        var value;
        var label;
        var displayValue;
        var element = submitValues.getElement(elementName);

        if (element) {
            value = element.getValue();

            element = form.getElement(elementName);
            if (element) {

                label = element.getLabel();

                // see if this is a date input
                if ((element.getType() == 'group') && (element.options.length) && (element.options[0].getType() === 'text') && (element.options[0].getName().substr(-4) == '_day')) {
                    displayValue = value;
                } else {
                    displayValue = element.getDisplayValue(value);
                    if (displayValue == '') {
                        displayValue = value;
                    }
                }

                return {'label' : label, 'value' : displayValue};
            }
        } else {

            // look for it in the form, this is the case with checkboxes
            element = form.getElement(elementName);
            if (element) {

                label = element.getLabel();
                displayValue = [];

                // get all possible options, and check if they are submitted
                var optionName;
                for (var i = 0; i < element.options.length; i++) {
                    optionName = elementName + '[' + element.options[i].optionValue + ']';

                    if (submitValues.getElement(optionName)) {
                        displayValue.push(element.options[i].getLabel());
                    }
                }

                return {'label' : label, 'value' : displayValue};

            }
        }

        return null;
    },

    /**
     * Returns string representing the node (and child nodes)
     * Useful if node must be added using document.write() for some reason
     * @param HTMLNode node The node to convert to string
     * @return String The node as string
     */
    getHTMLTag : function(tagName, attributes, contents)
    {
        var str = '';

        // add node name
        str = '<' + tagName;

        // add attributes
        if (attributes) {
            for (var a in attributes) {
                str += ' ' + a + '="' + attributes[a] + '"';
            }
        }

        // add content
        if (contents != null) {

            // close node
            str += '>';

            // add child nodes
            if (typeof(contents) == 'string') {

                str += contents;

            } else if ((typeof contents) == 'object') {

                for (var i = 0; i < contents.length; i++) {

                    var subconfig = contents[i];
                    var subnode = this.getHTMLTag(subconfig[0], subconfig[1], subconfig[2] ? subconfig[2] : []);

                    str += subnode;

                }
            }

            // add end node
            str += '</' + tagName + '>';

        } else {

            // fold and close node
            str += '/>';

        }

        return str;

    }
}