/**
 * Registration components
 *
 * @author Mista K.
 */


(function () {

    var assets;

    var validators = {
        stub: function () {
            return true;
        },
        nonEmptyString: function (value) {
            return value.length > 0;
        },
        validEmailString: function (value) {
            return /.+@.+\.[a-z]+/.test(value);
        },
        equalPasswords: function (value) {
            return $('#reg-password').val() === value && value.length > 0;
        },
        validZipCode: function (value) {
            return /^\d{5}/.test(value);
        },
        validPhone: function (value) {
            return /^\s?\+[0-9]+\s?$/.test(value);
        },
        validPhoneOrEmpty: function (value) {
            return /^\s?(\+[0-9]+)?\s?$/.test(value);
        }
    };



    TRAVEL.Registration = function (target) {

        var self = this, root = target;

        var defaultCallback = function (data) {
            if (data.status == 'success') {
                var url = data.url.length ? decodeURIComponent(data.url) : baseUrl;
                //var url = data.url.length ? baseUrl + decodeURIComponent(data.url) : baseUrl;
                window.location = url.replace("//", "/");
            } else if(data.status == 'error') {
                $('#reg-error').html(data.errorMsg);
            }
        };

        // inject assets
        assets = TRAVEL.Assets.Registration;
        // registration data
        var regData;

        function enableSubmit() {
            var result, cb;

            cb = document.getElementById('reg-agree');
            result = cb == null || cb.checked;

            $.each(regData, function () {
                result = result && (this.optional === true ? true : this.valid);
            });

            $('#reg-submit').attr('disabled', !result);
        }


        function focusHandler() {
            this.parentNode.parentNode.parentNode.className = 'focus';
        }

        function blurHandler() {
            var id = this.id, v = regData[id] ? regData[id].validator(this.value) : false;
            regData[id].valid = v;
            this.parentNode.parentNode.parentNode.className = v ? '' : 'warning';

            enableSubmit();
        }



        this.createUser = function (callback) {

            callback = callback || defaultCallback;

            var obj = [];

            obj.push('<div id="registration" class="user content-space">',
                '<h1 class="title">', assets.userpagetitle, '</h1>',
                '<div id="reg-error" class="error"></div>',
                '<div class="note">', assets.infoproducer, '</div>',
                '<form>',
                    '<table class="form"><tbody>',
/*
                        '<tr>',
                            '<td class="field-name"><span>', assets.login, '</span><sup>*</sup></td>',
                            '<td><div class="input-wrapper"><input id="reg-username" class="input" type="text" value="" /></div>',
                            '<div class="info">', assets.infologin, '</div><div class="warn">', assets.wrnlogin, '</div></td>',
                        '</tr>',
*/
                        '<tr>',
                            '<td class="field-name"><span>', assets.firstname, '</span></td>',
                            '<td><div class="input-wrapper"><input id="reg-first-name" class="input" type="text" value="" /></div>',
                            '<div class="info">', assets.infofirstname, '</div><div class="warn">', assets.wrnfirstname, '</div></td>',
                        '</tr>',
                        '<tr>',
                            '<td class="field-name"><span>', assets.lastname, '</span></td>',
                            '<td><div class="input-wrapper"><input id="reg-last-name" class="input" type="text" value="" /></div>',
                            '<div class="info">', assets.infolastname, '</div><div class="warn">', assets.wrnlastname, '</div></td>',
                        '</tr>',
/*
                        '<tr>',
                            '<td class="field-name"><span>', assets.password, '</span><sup>*</sup></td>',
                            '<td><div class="input-wrapper"><input id="reg-password" class="input" type="password" value="" /></div>',
                            '<div class="info">', assets.infopassword, '</div><div class="warn">', assets.wrnpassword, '</div></td>',
                        '</tr>',
                        '<tr>',
                            '<td class="field-name"><span>', assets.confirm, '</span><sup>*</sup></td>',
                            '<td><div class="input-wrapper"><input id="reg-password2" class="input" type="password" value="" /></div>',
                            '<div class="info">', assets.infopasswordconfirm, '</div><div class="warn">', assets.wrnpasswordconfirm, '</div></td>',
                        '</tr>',
*/
                        '<tr>',
                            '<td class="field-name"><span>', assets.email, '</span></td>',
                            '<td><div class="input-wrapper"><input id="reg-email" class="input" type="text" value="" /></div>',
                            '<div class="info">', assets.infoemail, '</div><div class="warn">', assets.wrnemail, '</div></td>',
                        '</tr>',
                        '<tr>',
                            '<td class="field-name"><span>', assets.mobile, '</span></td>',
                            '<td><div class="input-wrapper"><input id="reg-mobile" class="input" type="text" value="" /></div>',
                            '<div class="info">', assets.infomobile, '</div><div class="warn">', assets.wrnmobile, '</div></td>',
                        '</tr>',
/*
                        '<tr>',
                            '<td class="field-name"><span>', assets.phone, '</span></td>',
                            '<td><div class="input-wrapper"><input id="reg-phone" class="input" type="text" value="" /></div>',
                            '<div class="info">', assets.infophonenotrequired, '</div><div class="warn">', assets.wrnphonenotrequired, '</div></td>',
                        '</tr>',
                        '<tr>',
                            '<td class="field-name"><span>', assets.fax, '</span></td>',
                            '<td><div class="input-wrapper"><input id="reg-fax" class="input" type="text" value="" /></div>',
                            '<div class="info">', assets.infofaxnotrequired, '</div><div class="warn">', assets.wrnfaxnotrequired, '</div></td>',
                        '</tr>',
*/
                        '<tr>',
                            '<td class="field-name"><span>', assets.country, '</span></td>',
                            '<td><div class="input-wrapper"><input id="reg-country" class="input" type="text" value="" /></div>',
                            '<div class="info">', assets.infocountry, '</div><div class="warn">', assets.wrncountry, '</div></td>',
                        '</tr>',
                        '<tr>',
                            '<td class="field-name"><span>', assets.city, '</span></td>',
                            '<td><div class="input-wrapper"><input id="reg-city" class="input" type="text" value="" /></div>',
                            '<div class="info">', assets.infocity, '</div><div class="warn">', assets.wrncity, '</div></td>',
                        '</tr>',
                        '<tr>',
                            '<td class="field-name"><span>', assets.address, '</span></td>',
                            '<td><div class="input-wrapper"><input id="reg-address" class="input" type="text" value="" /></div>',
                            '<div class="info">', assets.infoaddress, '</div><div class="warn">', assets.wrnaddress, '</div></td>',
                        '</tr>',
                        '<tr>',
                            '<td class="field-name"><span>', assets.zip, '</span></td>',
                            '<td><div class="input-wrapper"><input id="reg-zipcode" class="input" type="text" value="" /></div>',
                            '<div class="info">', assets.infozip, '</div><div class="warn">', assets.wrnzip, '</div></td>',
                        '</tr>',
/*
                        '<tr>',
                            '<td class="field-name"><span>', assets.orgnumber, '</span></td>',
                            '<td><div class="input-wrapper"><input id="reg-orgnumber" class="input" type="text" value="" /></div>',
                            '<div class="info">', assets.infoorgnumbernotrequired, '</div><div class="warn">', assets.wrnorgnumbernotrequired, '</div></td>',
                        '</tr>',
*/
                        '<tr>',
                            '<td>&nbsp;</td>',
                            '<td><div class="agreement"><input id="reg-agree" class="checkbox" type="checkbox" value="" />',
                                '<span>', assets.iamagree.sprintf('<a href="'+assets.userAgreementLink+'" target="blank">'+assets.agreementlink+'</a>'), '</span></div></td>',
                        '</tr>',
                        '<tr>',
                            '<td>&nbsp;</td>',
                            '<td><div class="register">',
                                '<table class="btn btn31-yellow"><tbody><tr>',
                                    '<td class="btn-left"><span></span></td>',
                                    '<td class="btn-center">',
                                        '<span unselectable="on"><button id="reg-submit" type="button" class="btn-text" disabled="disabled">', assets.registerbtn, '</button></span>',
                                    '</td>',
                                    '<td class="btn-right"><span></span></td>',
                                '</tr></tbody></table>',
                            '</div></td>',
                        '</tr>',
                    '</tbody></table>',
                '</form>',
            '</div>');

            $(root).html(obj.join(''));

            $('input.input', root).focus(focusHandler).blur(blurHandler).filter(':first').focus();
            $('input.checkbox', root).click(enableSubmit);

            $('div.register .btn').click(function () {
                var model = {
//                    username: $('#reg-username').val(),
//                    password: $('#reg-password').val(),
//                    password2: $('#reg-password2').val(),
                    firstname: $('#reg-first-name').val(),
                    lastname: $('#reg-last-name').val(),
                    email: $('#reg-email').val(),
                    mobile: $('#reg-mobile').val(),
//                    phone: $('#reg-phone').val(),
//                    fax: $('#reg-fax').val(),
                    country: $('#reg-country').val(),
                    city: $('#reg-city').val(),
                    address: $('#reg-address').val(),
                    zipcode: $('#reg-zipcode').val(),
//                    orgnumber: $('#reg-orgnumber').val(),
                    agree: $('#reg-agree').attr('checked')
                };
                var ajaxLink = baseUrl + 'ajaxCommand.service?command=travel.JSONNewUserCommand';

                TRAVEL.postJSON(ajaxLink, model, callback);
            });

            regData = {
//                'reg-username': {optional: false, valid: false, validator: validators.nonEmptyString},
                'reg-first-name': {optional: false, valid: false, validator: validators.nonEmptyString},
                'reg-last-name': {optional: false, valid: false, validator: validators.nonEmptyString},
//                'reg-password': {optional: false, valid: false, validator: validators.nonEmptyString},
//                'reg-password2': {optional: false, valid: false, validator: validators.equalPasswords},
                'reg-email': {optional: false, valid: false, validator: validators.validEmailString},
                'reg-mobile': {optional: false, valid: false, validator: validators.validPhone},
//                'reg-phone': { optional: true, valid: false, validator: validators.validPhoneOrEmpty},
//                'reg-fax': { optional: true, valid: false, validator: validators.validPhoneOrEmpty},
                'reg-country': {optional: false, valid: false, validator: validators.nonEmptyString},
                'reg-city': {optional: false, valid: false, validator: validators.nonEmptyString},
                'reg-address': {optional: false, valid: false, validator: validators.nonEmptyString},
                'reg-zipcode': {optional: false, valid: false, validator: validators.validZipCode}
//                'reg-orgnumber': {optional: true, valid: false, validator: validators.stub}
            };

        };


        function requestDestList(id, type) {

            var ajaxLink = baseUrl + 'ajaxCommand.service?command=travel.GetDestListCommand';

            TRAVEL.postJSON(ajaxLink, 'sp='+id, function(data) {
                var dests = data.dests;
                var i, id, zindex, wrapper, nextType, buf = [];

                if (type === 'province') {
                     wrapper = $('#reg-province-wrapper');
                     nextType = 'city';
                } else if (type === 'city') {
                     wrapper = $('#reg-city-wrapper');
                } else if (type === 'country') {
                     wrapper = $('#reg-country-wrapper');
                     nextType = 'province';
                } else
                    return;

                zindex = wrapper.children().css("zIndex");

                buf.push('<select>');
                buf.push('<option value="0" selected="selected">&nbsp;</option>');
                for (i = 0; i < dests.length; i++) {
                    buf.push('<option value="', dests[i].id, '">', dests[i].name, '</option>');
                }
                buf.push('</select>');
                wrapper.html(buf.join(''));

                $('select', wrapper).jNice(zindex);

                if(nextType) {
                    $('select', wrapper).change(function () {
                        requestDestList($(this).val(), nextType);
                    });
                } else {
                    $('select', wrapper).change(function () {
                        id = this.parentNode.parentNode.id.replace('-wrapper', '');
                        regData[id].valid = regData[id].validator(this.value);
                        enableSubmit();
                    });
                }
            });

        }


        this.createProducer = function (callback) {

            callback = callback || defaultCallback;

            var obj = [];

            obj.push('<div id="registration" class="producer content-space">',
                '<h1 class="title">', assets.producerpagetitle, '</h1>',
                '<div class="note">', assets.infoproducer, '</div>',
                '<div id="reg-error" class="error"></div>',
                '<form>',
                    '<table class="form"><tbody>',
                        '<tr>',
                            '<td class="field-name"><span>', assets.login, '</span></td>',
                            '<td><div class="input-wrapper"><input id="reg-username" class="input" type="text" value="" /></div>',
//                            '<div class="info">', assets.infologin, '</div><div class="warn">', assets.wrnlogin, '</div>',
                            '<div class="static-info">',
                                '<div style="float: left; margin-right: 1em;">',
                                    '<table class="btn btn20"><tbody><tr>',
                                        '<td class="btn-left"><span></span></td>',
                                        '<td class="btn-center">',
                                            '<span unselectable="on"><button id="login-check" type="button" class="btn-text">', assets.checkbtn, '</button></span>',
                                        '</td>',
                                        '<td class="btn-right"><span></span></td>',
                                    '</tr></tbody></table>',
                                '</div>',
                                '<span class="static-info-msg">', assets.checkinfo, '</span>',
                            '</div>',
                            '</td>',
                        '</tr>',
                        '<tr>',
                            '<td class="field-name"><span>', assets.adminname, '</span></td>',
                            '<td><div class="input-wrapper"><input id="reg-first-name" class="input" type="text" value="" /></div>',
                            '<div class="info">', assets.infoadminname, '</div><div class="warn">', assets.wrnadminname, '</div></td>',
                        '</tr>',
                        '<tr>',
                            '<td class="field-name"><span>', assets.adminlastname, '</span></td>',
                            '<td><div class="input-wrapper"><input id="reg-last-name" class="input" type="text" value="" /></div>',
                            '<div class="info">', assets.infoadminname, '</div><div class="warn">', assets.wrnadminname, '</div></td>',
                        '</tr>',
                        '<tr>',
                            '<td class="field-name"><span>', assets.orgname, '</span></td>',
                            '<td><div class="input-wrapper"><input id="reg-orgname" class="input" type="text" value="" /></div>',
                            '<div class="info">', assets.infoorgname, '</div><div class="warn">', assets.wrnorgname, '</div></td>',
                        '</tr>',
                        '<tr>',
                            '<td class="field-name"><span>', assets.password, '</span></td>',
                            '<td><div class="input-wrapper"><input id="reg-password" class="input" type="password" value="" /></div>',
                            '<div class="info">', assets.infopassword, '</div><div class="warn">', assets.wrnpassword, '</div></td>',
                        '</tr>',
                        '<tr>',
                            '<td class="field-name"><span>', assets.confirm, '</span></td>',
                            '<td><div class="input-wrapper"><input id="reg-password2" class="input" type="password" value="" /></div>',
                            '<div class="info">', assets.infopasswordconfirm, '</div><div class="warn">', assets.wrnpasswordconfirm, '</div></td>',
                        '</tr>',
                        '<tr>',
                            '<td class="field-name"><span>', assets.orgnumber, '</span></td>',
                            '<td><div class="input-wrapper"><input id="reg-orgnumber" class="input" type="text" value="" /></div>',
                            '<div class="info">', assets.infoorgnumber, '</div><div class="warn">', assets.wrnorgnumber, '</div></td>',
                        '</tr>',
                        '<tr>',
                            '<td class="field-name"><span>', assets.country, '</span></td>',
                            '<td><div id="reg-country-wrapper" class="input-wrapper optional">',
                                '<select>',
                                    '<option value="0" selected="selected">&nbsp;</option>',
                                    '<option value="999">Sweden</option>',
                                '</select>',
                            '</div></td>',
                        '</tr>',
                        '<tr>',
                            '<td class="field-name"><span>', assets.province, '</span></td>',
                            '<td><div id="reg-province-wrapper" class="input-wrapper optional">',
                                '<select>',
                                    '<option selected="selected">&nbsp;</option>',
                                '</select>',
                            '</div></td>',
                        '</tr>',
                        '<tr>',
                            '<td class="field-name"><span>', assets.city, '</span></td>',
                            '<td><div id="reg-city-wrapper" class="input-wrapper">',
                                '<select>',
                                    '<option selected="selected">&nbsp;</option>',
                                '</select>',
                            '</div></td>',
                        '</tr>',
                        '<tr>',
                            '<td class="field-name"><span>', assets.address, '</span></td>',
                            '<td><div class="input-wrapper"><input id="reg-address" class="input" type="text" value="" /></div>',
                            '<div class="info">', assets.infoaddress, '</div><div class="warn">', assets.wrnaddress, '</div></td>',
                        '</tr>',
                        '<tr>',
                            '<td class="field-name"><span>', assets.zip, '</span></td>',
                            '<td><div class="input-wrapper"><input id="reg-zipcode" class="input" type="text" value="" /></div>',
                            '<div class="info">', assets.infozip, '</div><div class="warn">', assets.wrnzip, '</div></td>',
                        '</tr>',
                        '<tr>',
                            '<td class="field-name"><span>', assets.mobile, '</span></td>',
                            '<td><div class="input-wrapper"><input id="reg-mobile" class="input" type="text" value="" /></div>',
                            '<div class="info">', assets.infomobile, '</div><div class="warn">', assets.wrnmobile, '</div></td>',
                        '</tr>',
                        '<tr>',
                            '<td class="field-name"><span>', assets.phone, '</span></td>',
                            '<td><div class="input-wrapper"><input id="reg-phone" class="input" type="text" value="" /></div>',
                            '<div class="info">', assets.infophone, '</div><div class="warn">', assets.wrnphone, '</div></td>',
                        '</tr>',
                        '<tr>',
                            '<td class="field-name"><span>', assets.fax, '</span></td>',
                            '<td><div class="input-wrapper"><input id="reg-fax" class="input" type="text" value="" /></div>',
                            '<div class="info">', assets.infofax, '</div><div class="warn">', assets.wrnfax, '</div></td>',
                        '</tr>',
                        '<tr>',
                            '<td class="field-name"><span>', assets.adminemail, '</span></td>',
                            '<td><div class="input-wrapper"><input id="reg-email" class="input" type="text" value="" /></div>',
                            '<div class="info">', assets.infoemail, '</div><div class="warn">', assets.wrnemail, '</div></td>',
                        '</tr>',
                        '<tr>',
                            '<td>&nbsp;</td>',
                            '<td><div class="agreement"><input id="reg-agree" class="checkbox" type="checkbox" value="" />',
                                '<span>', assets.iamagree.sprintf('<a href="'+assets.producerAgreementLink+'" target="blank">'+assets.agreementlink+'</a>'), '</span></div></td>',
                        '</tr>',
                        '<tr>',
                            '<td>&nbsp;</td>',
                            '<td><div class="register">',
                                '<table class="btn btn31-yellow"><tbody><tr>',
                                    '<td class="btn-left"><span></span></td>',
                                    '<td class="btn-center">',
                                        '<span unselectable="on"><button id="reg-submit" type="button" class="btn-text" disabled="disabled">', assets.registerbtn, '</button></span>',
                                    '</td>',
                                    '<td class="btn-right"><span></span></td>',
                                '</tr></tbody></table>',
                            '</div></td>',
                        '</tr>',
                    '</tbody></table>',
                '</form>',
            '</div>');

            $(root).html(obj.join(''));

            $('#reg-country-wrapper select').change(function () {
                requestDestList(this.value, 'province');
            });
            $('#reg-province-wrapper select').change(function () {
                requestDestList(this.value, 'city');
            });

            $("#registration select", root).jNice();

            $('input.input', root).focus(focusHandler).blur(blurHandler).filter(':first').focus();
            $('input.checkbox', root).click(enableSubmit);

            $('div.register .btn').click(function () {
                var model = {
                    username: $('#reg-username').val(),
                    password: $('#reg-password').val(),
                    password2: $('#reg-password2').val(),
                    firstname: $('#reg-first-name').val(),
                    lastname: $('#reg-last-name').val(),
                    email: $('#reg-email').val(),
                    mobile: $('#reg-mobile').val(),
                    phone: $('#reg-phone').val(),
                    fax: $('#reg-fax').val(),
                    city: $("#reg-city-wrapper select").val(),
                    address: $('#reg-address').val(),
                    zipcode: $('#reg-zipcode').val(),
                    orgname: $('#reg-orgname').val(),
                    orgnumber: $('#reg-orgnumber').val(),
                    agree: $('#reg-agree').attr('checked')
                };
                var ajaxLink = baseUrl + 'ajaxCommand.service?command=travel.JSONNewProducerCommand';

                TRAVEL.postJSON(ajaxLink, model, callback);
            });

            TRAVEL.Button($('#login-check').parents('.btn'), 'click', function () {
                var ajaxLink = baseUrl + 'ajaxCommand.service?command=travel.JSONValidateUsernameCommand';

                var ele = $('#login-check').parents('div.static-info').find('span.static-info-msg');
                var timer = null;

                function doMessageChange(msg) {
                    if (timer) {
                        clearTimeout(timer);
                    }
                    $(ele).fadeOut('fast', function () {
                        $(ele).html(msg).fadeIn('fast', function () {
                            if (msg !== assets.checkinfo) {
                                timer = setTimeout(function () {
                                    timer = null;
                                    doMessageChange(assets.checkinfo);
                                }, 2000);
                            }
                        });
                    });
                }

                var name = $('#reg-username').val();
                if (name.length === 0) {
                    return;
                }

                TRAVEL.getJSON(ajaxLink, 'sp=' + name, function (data) {
                    if (data.status && (data.status === 'success' || data.status === 'ok')) {
                        lastCheckedLogin = data.name;
                        doMessageChange(assets.checkok);
                        $('#reg-username').focus().blur();
                    } else {
                        doMessageChange(assets.checkfail);
                    }
                });

            });

            var lastCheckedLogin;

            regData = {
                'reg-username': {optional: false, valid: false, validator: function (value) {
                    return value.length > 0 && value === lastCheckedLogin;
                }},
                'reg-first-name': {optional: false, valid: false, validator: validators.nonEmptyString},
                'reg-last-name': {optional: false, valid: false, validator: validators.nonEmptyString},
                'reg-orgname': {optional: false, valid: false, validator: validators.nonEmptyString},
                'reg-password': {optional: false, valid: false, validator: validators.nonEmptyString},
                'reg-password2': {optional: false, valid: false, validator: validators.equalPasswords},
                'reg-orgnumber': {optional: false, valid: false, validator: validators.nonEmptyString},
                'reg-email': {optional: false, valid: false, validator: validators.validEmailString},
                'reg-mobile': {optional: false, valid: false, validator: validators.validPhone},
                'reg-phone': { optional: false, valid: false, validator: validators.validPhone},
                'reg-fax': { optional: false, valid: false, validator: validators.validPhone},
                'reg-city': {optional: false, valid: false, validator: validators.nonEmptyString},
                'reg-address': {optional: false, valid: false, validator: validators.nonEmptyString},
                'reg-zipcode': {optional: false, valid: false, validator: validators.validZipCode}
            };

        };

    };

    TRAVEL.ProfilePage = function (target) {

        var self = this, root = target;

        // inject assets
        assets = TRAVEL.Assets.Registration;

        this.create = function (model) {

            var obj = [];

            obj.push(
                '<div id="registration" class="user content-space">',
                    '<div id="profile"></div>',
                    '<div id="password"></div>',
                    '<div id="avatar"></div>',
                '</div>');

            $(root).html(obj.join(''));

            var profile = $("#profile").get(0);
            var password = $("#password").get(0);
            var avatar = $("#avatar").get(0);

            var profileComponent = new TRAVEL.ProfileSection(profile);
            profileComponent.create(model.profile);

            var passwordComponent = new TRAVEL.ChangePasswordSection(password);
            passwordComponent.create();

            var avatarComponent = new TRAVEL.UserPictureSection(avatar);
            avatarComponent.create(model.avatar);
        };
    };

    TRAVEL.ProfileSection = function (target) {

        var self = this, root = target;

        // inject assets
        assets = TRAVEL.Assets.Registration;

        var regData = {}, lastCheckedLogin = '';

        function enableSubmit() {
            var result, cb;

            cb = document.getElementById('reg-agree');
            result = cb == null || cb.checked;

            $.each(regData, function () {
                result = result && (this.optional === true ? true : this.valid);
            });

            $('#reg-submit').attr('disabled', !result);
        }

        function focusHandler() {
            this.parentNode.parentNode.parentNode.className = 'focus';
        }

        function blurHandler() {
            var id = this.id, v = regData[id] ? regData[id].validator(this.value) : false;
            regData[id].valid = v;
            this.parentNode.parentNode.parentNode.className = v ? '' : 'warning';

            enableSubmit();
        }

        this.create = function (model) {

            var obj = [];

            obj.push(
                '<h1 class="title">', assets.profilesectioncaption, '</h1>',
                '<div id="reg-error" class="error"></div>',
                model.success === true ? '<div class="success">'+assets.datasaved+'</div>' : '',
                '<div class="note">', assets.infooptional, '</div>',
                '<form>',
                    '<table class="form"><tbody>',
                        '<tr>',
                            '<td class="field-name"><span>', assets.login, '</span></td>',
                            '<td><div class="input-wrapper"><input id="reg-username" class="input" type="text" value="', model.login, '" /></div>',
                            '<div class="static-info">',
                                '<div style="float: left; margin-right: 1em;">',
                                    '<table class="btn btn20"><tbody><tr>',
                                        '<td class="btn-left"><span></span></td>',
                                        '<td class="btn-center">',
                                            '<span unselectable="on"><button id="login-check" type="button" class="btn-text">', assets.checkbtn, '</button></span>',
                                        '</td>',
                                        '<td class="btn-right"><span></span></td>',
                                    '</tr></tbody></table>',
                                '</div>',
                                '<span class="static-info-msg">', assets.checkinfo, '</span>',
                            '</div></td>',
                        '</tr>',
                        '<tr>',
                            '<td class="field-name"><span>', assets.name, '</span></td>',
                            '<td><div class="input-wrapper"><input id="reg-name" class="input" type="text" value="', model.name, '" /></div>',
                            '<div class="info">', assets.infoname, '</div><div class="warn">', assets.wrnname, '</div></td>',
                        '</tr>',
                        '<tr>',
                            '<td class="field-name"><span>', assets.email, '</span></td>',
                            '<td><div class="input-wrapper"><input id="reg-email" class="input" type="text" value="', model.email, '" /></div>',
                            '<div class="info">', assets.infoemail, '</div><div class="warn">', assets.wrnemail, '</div></td>',
                        '</tr>',
                        '<tr>',
                            '<td class="field-name"><span>', assets.mobile, '</span></td>',
                            '<td><div class="input-wrapper"><input id="reg-mobile" class="input" type="text" value="', model.mobile, '" /></div>',
                            '<div class="info">', assets.infomobile, '</div><div class="warn">', assets.wrnmobile, '</div></td>',
                        '</tr>',
                        '<tr>',
                            '<td class="field-name"><span>', assets.phone, '</span>', TRAVEL.isProducer ? '' : '<sup>*</sup>', '</td>',
                            '<td><div class="input-wrapper"><input id="reg-phone" class="input" type="text" value="', model.phone, '" /></div>',
                            TRAVEL.isProducer ?
                                '<div class="info">'+assets.infophone+'</div><div class="warn">'+assets.wrnphone+'</div></td>' :
                                '<div class="info">'+assets.infophonenotrequired+'</div><div class="warn">'+assets.wrnphonenotrequired+'</div></td>',
                        '</tr>',
                        '<tr>',
                            '<td class="field-name"><span>', assets.fax, '</span>', TRAVEL.isProducer ? '' : '<sup>*</sup>', '</td>',
                            '<td><div class="input-wrapper"><input id="reg-fax" class="input" type="text" value="', model.fax, '" /></div>',
                            TRAVEL.isProducer ?
                                '<div class="info">'+assets.infofax+'</div><div class="warn">'+assets.wrnfax+'</div></td>' :
                                '<div class="info">'+assets.infofaxnotrequired+'</div><div class="warn">'+assets.wrnfaxnotrequired+'</div></td>',
                        '</tr>',
                        '<tr>',
                            '<td class="field-name"><span>', assets.country, '</span></td>',
                            '<td><div class="input-wrapper"><input id="reg-country" class="input" type="text" value="', model.country, '" /></div>',
                            '<div class="info">', assets.infocountry, '</div><div class="warn">', assets.wrncountry, '</div></td>',
                        '</tr>',
                        '<tr>',
                            '<td class="field-name"><span>', assets.city, '</span></td>',
                            '<td><div class="input-wrapper"><input id="reg-city" class="input" type="text" value="', model.city, '" /></div>',
                            '<div class="info">', assets.infocity, '</div><div class="warn">', assets.wrncity, '</div></td>',
                        '</tr>',
                        '<tr>',
                            '<td class="field-name"><span>', assets.address, '</span></td>',
                            '<td><div class="input-wrapper"><input id="reg-address" class="input" type="text" value="', model.address, '" /></div>',
                            '<div class="info">', assets.infoaddress, '</div><div class="warn">', assets.wrnaddress, '</div></td>',
                        '</tr>',
                        '<tr>',
                            '<td class="field-name"><span>', assets.zip, '</span></td>',
                            '<td><div class="input-wrapper"><input id="reg-zipcode" class="input" type="text" value="', model.zip, '" /></div>',
                            '<div class="info">', assets.infozip, '</div><div class="warn">', assets.wrnzip, '</div></td>',
                        '</tr>',
                        '<tr>',
                            '<td class="field-name"><span>', assets.orgnumber, '</span>', TRAVEL.isProducer ? '' : '<sup>*</sup>', '</td>',
                            '<td><div class="input-wrapper"><input id="reg-orgnumber" class="input" type="text" value="', model.orgnumber, '" /></div>',
                            TRAVEL.isProducer ?
                                '<div class="info">'+assets.infoorgnumber+'</div><div class="warn">'+assets.wrnorgnumber+'</div></td>' :
                                '<div class="info">'+assets.infoorgnumbernotrequired+'</div><div class="warn"></div></td>',
                        '</tr>',
                        '<tr>',
                            '<td>&nbsp;</td>',
                            '<td><div class="register">',
                                '<table class="btn btn31-yellow"><tbody><tr>',
                                    '<td class="btn-left"><span></span></td>',
                                    '<td class="btn-center">',
                                        '<span unselectable="on"><button id="reg-submit" type="button" class="btn-text" disabled="disabled">', assets.savebtn, '</button></span>',
                                    '</td>',
                                    '<td class="btn-right"><span></span></td>',
                                '</tr></tbody></table>',
                            '</div></td>',
                        '</tr>',
                    '</tbody></table>',
                '</form>');

            $(root).html(obj.join(''));

            $('input.input', root).focus(focusHandler).blur(blurHandler).filter(':first').focus();

            TRAVEL.Button($('div.register .btn'), 'click', function () {
                var newmodel = {
                    login: $('#reg-username').val() != model.login ? $('#reg-username').val() : undefined,
                    name: $('#reg-name').val() != model.name ? $('#reg-name').val() : undefined,
                    email: $('#reg-email').val() != model.email ? $('#reg-email').val() : undefined,
                    mobile: $('#reg-mobile').val() != model.mobile ? $('#reg-mobile').val() : undefined,
                    phone: $('#reg-phone').val() != model.phone ? $('#reg-phone').val() : undefined,
                    fax: $('#reg-fax').val() != model.fax ? $('#reg-fax').val() : undefined,
                    country: $('#reg-country').val() != model.country ? $('#reg-country').val() : undefined,
                    city: $('#reg-city').val() != model.city ? $('#reg-city').val() : undefined,
                    address: $('#reg-address').val() != model.address ? $('#reg-address').val() : undefined,
                    zipcode: $('#reg-zipcode').val() != model.zip ? $('#reg-zipcode').val() : undefined,
                    orgnumber: $('#reg-orgnumber').val() != model.orgnumber ? $('#reg-orgnumber').val() : undefined
                };
                var ajaxLink = baseUrl + 'ajaxCommand.service?command=travel.command.JSONEditUserCommand';

                TRAVEL.postJSON(ajaxLink, newmodel, function (data) {
                    if (data.success === true) {
                        self.create(data);
                    } else {
                        $('#reg-error').html(data.reason);
                    }
                });
            });

            TRAVEL.Button($('#login-check').parents('.btn'), 'click', function () {
                var ajaxLink = baseUrl + 'ajaxCommand.service?command=travel.JSONValidateUsernameCommand';

                var ele = $('#login-check').parents('div.static-info').find('span.static-info-msg');
                var timer = null;

                function doMessageChange(msg) {
                    if (timer) {
                        clearTimeout(timer);
                    }
                    $(ele).fadeOut('fast', function () {
                        $(ele).html(msg).fadeIn('fast', function () {
                            if (msg !== assets.checkinfo) {
                                timer = setTimeout(function () {
                                    timer = null;
                                    doMessageChange(assets.checkinfo);
                                }, 2000);
                            }
                        });
                    });
                }

                TRAVEL.getJSON(ajaxLink, 'sp=' + $('#reg-username').val(), function (data) {
                    if ((data.status && (data.status === 'success' || data.status === 'ok')) || (data.name && data.name === model.login)) {
                        lastCheckedLogin = data.name;
                        doMessageChange(assets.checkok);
                        $('#reg-username').focus().blur();
                    } else {
                        doMessageChange(assets.checkfail);
                    }
                });

            });

            regData = {
                'reg-username': {optional: false, valid: true, validator: function (value) {
                    return value === model.login || value === lastCheckedLogin;
                }},
                'reg-name': {optional: false, valid: false, validator: validators.nonEmptyString},
                'reg-email': {optional: false, valid: false, validator: validators.validEmailString},
                'reg-mobile': {optional: false, valid: false, validator: validators.validPhone},
                'reg-phone': {optional: false, valid: false, validator: TRAVEL.isProducer ? validators.validPhone : validators.validPhoneOrEmpty},
                'reg-fax': {optional: false, valid: false, validator: TRAVEL.isProducer ? validators.validPhone : validators.validPhoneOrEmpty},
                'reg-country': {optional: false, valid: false, validator: validators.nonEmptyString},
                'reg-city': {optional: false, valid: false, validator: validators.nonEmptyString},
                'reg-address': {optional: false, valid: false, validator: validators.nonEmptyString},
                'reg-zipcode': {optional: false, valid: false, validator: validators.validZipCode},
                'reg-orgnumber': {optional: false, valid: false, validator: TRAVEL.isProducer ? validators.nonEmptyString : validators.stub}
            };

            $('input.input', root).blur();
        };
    };

    TRAVEL.ChangePasswordSection = function (target) {

        var self = this, root = target;

        // inject assets
        assets = TRAVEL.Assets.Registration;

        var regData;

        function enableSubmit() {
            var result, cb;

            cb = document.getElementById('reg-agree');
            result = cb == null || cb.checked;

            $.each(regData, function () {
                result = result && (this.optional === true ? true : this.valid);
            });

            $('#password-submit').attr('disabled', !result);
        }

        function focusHandler() {
            this.parentNode.parentNode.parentNode.className = 'focus';
        }

        function blurHandler() {
            var id = this.id, v = regData[id] ? regData[id].validator(this.value) : false;
            regData[id].valid = v;
            this.parentNode.parentNode.parentNode.className = v ? '' : 'warning';

            enableSubmit();
        }

        this.create = function(model) {

            var obj = [];

            model = model || {};

            obj.push(
                '<h1 class="title">', assets.changepasswordsectioncaption, '</h1>',
                '<div id="password-error" class="error"></div>',
                model.success != undefined ? '<div id="password-success" class="success">'+model.success+'</div>' : '',
                '<form>',
                    '<table class="form"><tbody>',
                        '<tr>',
                            '<td class="field-name"><span>', assets.currentpassword, '</span></td>',
                            '<td><div class="input-wrapper"><input id="reg-current-password" class="input" type="password" value="" /></div>',
                            '<div class="info">', assets.infocurrentpassword, '</div><div class="warn">', assets.wrncurrentpassword, '</div></td>',
                        '</tr>',
                        '<tr>',
                            '<td class="field-name"><span>', assets.password, '</span></td>',
                            '<td><div class="input-wrapper"><input id="reg-password" class="input" type="password" value="" /></div>',
                            '<div class="info">', assets.infopassword, '</div><div class="warn">', assets.wrnpassword, '</div></td>',
                        '</tr>',
                        '<tr>',
                            '<td class="field-name"><span>', assets.confirm, '</span></td>',
                            '<td><div class="input-wrapper"><input id="reg-password2" class="input" type="password" value="" /></div>',
                            '<div class="info">', assets.infopasswordconfirm, '</div><div class="warn">', assets.wrnpasswordconfirm, '</div></td>',
                        '</tr>',
                        '<tr>',
                            '<td>&nbsp;</td>',
                            '<td><div class="register">',
                                '<table class="btn btn31-yellow"><tbody><tr>',
                                    '<td class="btn-left"><span></span></td>',
                                    '<td class="btn-center">',
                                        '<span unselectable="on"><button id="password-submit" type="button" class="btn-text" disabled="disabled">', assets.savebtn, '</button></span>',
                                    '</td>',
                                    '<td class="btn-right"><span></span></td>',
                                '</tr></tbody></table>',
                            '</div></td>',
                        '</tr>',
                    '</tbody></table>',
                '</form>');

            $(root).html(obj.join(''));

            $('input.input', root).focus(focusHandler).blur(blurHandler);

            $('#password-submit').click(function () {
                var newmodel = {
                    currentpassword: $('#reg-current-password').val(),
                    newpassword: $('#reg-password').val()
                };
                var ajaxLink = baseUrl + 'ajaxCommand.service?command=travel.command.JSONChangePassword';

                TRAVEL.postJSON(ajaxLink, newmodel, function (data) {
                    if (data.success === true) {
                        model = { success : assets.passwordchanged };
                        self.create(model);
                    } else {
                        if (data.reason === 0)
                            $('#password-error').html(assets.wrongpassword);
                    }
                });
            });

            regData = {
                'reg-current-password': {optional: false, valid: false, validator: validators.nonEmptyString},
                'reg-password': {optional: false, valid: false, validator: validators.nonEmptyString},
                'reg-password2': {optional: false, valid: false, validator: validators.equalPasswords}
            };
        };
    };

    TRAVEL.UserPictureSection = function (target) {

        var self = this, root = target;

        // inject assets
        assets = TRAVEL.Assets.Registration;

        this.create = function(model) {

            var obj = [];

            model = model || {};

            obj.push(
                '<h1 class="title">', assets.profilepicturesectioncaption, '</h1>',
                '<div id="password-error" class="error"></div>',
                model.uploaded != undefined ? '<div id="password-upload-success" class="success">'+assets.pictureuploadedmessage+'</div>' : '',
                model.deleted != undefined ? '<div id="password-delete-success" class="success">'+assets.picturedeletedmessage+'</div>' : '',
                '<table class="form"><tbody>',
                    model.id != undefined ? '<tr><td class="field-name"><span>User picture</span></td><td><div class="input-wrapper">' +
                                            '<div class="img-wrapper"><img src="'+model.src+'" /></div>' +
                                            '<table class="btn btn31-yellow"><tbody><tr>'+
                                                '<td class="btn-left"><span></span></td>'+
                                                '<td class="btn-center">'+
                                                    '<span unselectable="on"><button id="delete-submit" type="button" class="btn-text">'+assets.deletebtn+'</button></span>'+
                                                '</td>'+
                                                '<td class="btn-right"><span></span></td>'+
                                            '</tr></tbody></table>'+
                                            '</div></tr>' : "",
                    '<tr>',
                        '<td class="field-name"><span>', assets.upload, '</span></td>',
                        '<td><div class="input-wrapper"><input name="upload" id="upload" type="file" style="margin-bottom: 4px;" /></div>',
                    '</tr>',
                    '<tr>',
                        '<td>&nbsp;</td>',
                        '<td><div class="register">',
                            '<table class="btn btn31-yellow"><tbody><tr>',
                                '<td class="btn-left"><span></span></td>',
                                '<td class="btn-center">',
                                    '<span unselectable="on"><button id="upload-submit" type="button" class="btn-text">', assets.uploadbtn, '</button></span>',
                                '</td>',
                                '<td class="btn-right"><span></span></td>',
                            '</tr></tbody></table>',
                        '</div></td>',
                    '</tr>',
                '</tbody></table>');

            $(root).html(obj.join(''));

            var fileInput = document.getElementById("upload");
            var uploadButton = document.getElementById("upload-submit")

            var uploadCallback = function (responseText) {
                var jsonExpression = "(" + responseText + ")";
                var _model = eval(jsonExpression);

                if (_model.success === false)
                    $(document.getElementById("password-error")).html(_model.reason).show();
                else {
                    _model.uploaded = true;
                    self.create(_model);
                }
            };

            var pictureUpload = new AjaxFileUpload( {
                    baseLink : baseUrl + "ajaxCommandHTML.service",
                    serviceName : "travel.command.AvatarUpload",
                    input : fileInput,
                    callback : uploadCallback
                } );

            uploadButton.onclick = function () {
                var fileName = fileInput.value;
                if (fileName.length == 0) {
                    alert(assets.choosefile);
                    return;
                }
                else if (!fileInput.value.match(/.+\.jpg$|.+\.gif$|.+\.png$|.+\.jpeg$/i)) {
                    alert(assets.choosegraphicfile);
                    return;
                }
                pictureUpload.upload();
            };

            if (model.id != undefined) {
                var deleteButton = document.getElementById("delete-submit")
                deleteButton.onclick = function () {
                    var url = baseUrl + "ajaxCommand.service?command=travel.command.AvatarDelete"
                    TRAVEL.postJSON(url, "", function (_model) {
                        _model.deleted = true;
                        self.create(_model);
                    })
                };
            }
        };
    };
})();