/// <reference name="MicrosoftAjax.js"/>

Type.registerNamespace("MXA.Website.Kaldenbroeck");

MXA.Website.Kaldenbroeck.ContactTemplate = function (element) {

    MXA.Website.Kaldenbroeck.ContactTemplate.initializeBase(this, [element]);
    this.addCssClass('ContactTemplate');

    this._mapElement = document.createElement('div');
    this._mapElement.className = 'ctMapContainer';
    element.appendChild(this._mapElement);

    this._mapImage = document.createElement('img');
    this._mapImage.className = 'ctMap';
    this._mapElement.appendChild(this._mapImage);

    this._formElement = document.createElement('div');
    this._formElement.className = 'ctFormContainer';
    element.appendChild(this._formElement);
    this._createForm(this._formElement);
    this._isContactVisible = false;

    this._messageElement = document.createElement('div');
    this._messageElement.className = 'ctFormMessage';
    this._messageElement.innerHTML = 'asdhaskdhaskd';
    element.appendChild(this._messageElement);
    $(this._messageElement).hide();

    this._isSending = false;

}

MXA.Website.Kaldenbroeck.ContactTemplate.prototype =
{

    initialize: function () {
        MXA.Website.Kaldenbroeck.ContactTemplate.callBaseMethod(this, 'initialize');
        if (document.datasource != null && document.datasource.organisation != null) {

            this._streetElement = document.createElement('div');
            this._cityElement = document.createElement('div');
            this._phoneElement = document.createElement('div');
            this._emailElement = document.createElement('div');
            this._titleContainer = document.createElement('div');
            this._titleContainer.className = 'ctAddress';
            this._element.appendChild(this._titleContainer);

            this._titleContainer.appendChild(this._streetElement);
            this._titleContainer.appendChild(this._cityElement);
            this._titleContainer.appendChild(this._phoneElement);
            this._titleContainer.appendChild(this._emailElement);

            var address = document.datasource.organisation.address;
            if (address != null) {
                this._streetElement.innerHTML = address.street + ' ' + address.housenumber;
                this._cityElement.innerHTML = address.zipcode + ' ' + address.city;
                this._emailElement.innerHTML = 'e ' + document.datasource.organisation.email;
                this._phoneElement.innerHTML = 't ' + document.datasource.organisation.phonenumber;

                var coordinates = address.street + ',' + address.housenumber + ',' + address.zipcode + ',' + address.city;
                this._mapImage.src = 'http://maps.googleapis.com/maps/api/staticmap?zoom=14&size=463x289&maptype=roadmap&markers=' + coordinates + '&sensor=false';
                Cufon.replace([this._title, this._streetElement, this._cityElement, this._phoneElement, this._emailElement]);
            }
        }
    },



    dispose: function () {
        MXA.Website.Kaldenbroeck.ContactTemplate.callBaseMethod(this, 'dispose');
    },

    updatePath: function () {
        this.databind();
    },

    _onFocus: function (evt) {


        if ($(evt.target).hasClass('invalid') == true) {
            evt.target.value = evt.target.userValue;
            evt.target.userValue = null;
            $(evt.target).removeClass('invalid');
        }

        if (evt.target.value == evt.target.defaultValue) {
            evt.target.value = '';
        }
    },

    _disableForm: function () {
        this._name.disabled = true;
        this._email.disabled = true;
        this._message.disabled = true;
    },

    _enableForm: function () {
        this._name.disabled = false;
        this._email.disabled = false;
        this._message.disabled = false;
    },

    getMaxWidth: function () {
        return 546;
    },

    _onBlur: function (evt) {
        if (evt.target.value == '') {
            evt.target.value = evt.target.defaultValue;
        }

        if (evt.target.validationExpression != null && evt.target.validationExpression != '') {
            var expr = new RegExp(evt.target.validationExpression, "i");
            var result = expr.test(evt.target.value);
            if (result == false) {
                evt.stopPropagation();
                evt.preventDefault();
                return false;
            }
        }
    },
    _createForm: function (container) {
        var _this = this;

        this._name = document.createElement('input');
        this._name.className = 'ctName';
        this._name.value = this._name.defaultValue = document.datasource.statictext.name;
        this._email = document.createElement('input');
        this._email.className = 'ctEmail';
        this._email.value = this._email.defaultValue = document.datasource.statictext.email;
        this._email.validationExpression = '\\b[A-Z0-9._%-]+@[A-Z0-9.-]+\\.[A-Z]{2,4}\\b';
        this._message = document.createElement('textarea');
        this._message.className = 'ctMessage';
        this._message.value = this._message.defaultValue = document.datasource.statictext.message;

        this._send = document.createElement('div');
        this._send.className = 'ctSendMessage';
        this._send.innerHTML = document.datasource.statictext.send;

        container.appendChild(this._name);
        container.appendChild(this._email);
        container.appendChild(this._message);
        container.appendChild(this._send);
        Cufon.replace([this._send]);

        $addHandler(this._name, 'focus', Function.createDelegate(_this, _this._onFocus));
        $addHandler(this._name, 'blur', Function.createDelegate(_this, _this._onBlur));
        $addHandler(this._email, 'focus', Function.createDelegate(_this, _this._onFocus));
        $addHandler(this._email, 'blur', Function.createDelegate(_this, _this._onBlur));
        $addHandler(this._message, 'focus', Function.createDelegate(_this, _this._onFocus));
        $addHandler(this._message, 'blur', Function.createDelegate(_this, _this._onBlur));
        $addHandler(this._send, 'click', Function.createDelegate(_this, _this._onSendClick));

    },

    _showMessage: function (message) {
        var _this = this;
        this._isSending = false;
        this._enableForm();
        this._messageElement.innerHTML = message;
        Cufon.replace([this._messageElement]);
        $(this._formElement).animate({ opacity: 0 }, 100, function () {
            _this._send.innerHTML = document.datasource.statictext.send;
            $(_this._element).removeClass('sending');
            Cufon.replace([_this._send]);
            $(_this._formElement).hide();
            $(_this._messageElement).css({ opacity: 0 }).show().animate({ opacity: 1 }, 600);
            $(_this._messageElement).delay(2000).animate({ opacity: 0 }, 100, function () {
                $(_this._messageElement).hide();
                $(_this._formElement).css({ opacity: 0 }).show().animate({ opacity: 1 }, 600);

            });

        });



    },

    _showAddress: function () {
        var _this = this;
        $(this._formElement).animate({ opacity: 0 }, 100, function () {
            $(_this._formElement).hide();
            $(_this._mapElement).show().animate({ opacity: 1 }, 600);
        });
    },

    _onSendClick: function () {
        this._isSending = true;
        this._disableForm();
        var _this = this;
        var valid = this._validate();
        if (valid == true) {
            if ($(this._element).hasClass('sending') == false) {
                $(this._element).addClass('sending');
            }
            this._send.innerHTML = document.datasource.statictext.sending;
            Cufon.replace([this._send]);
            Sources.Service.ApplicationService.SendMessage(this._name.value, this._email.value, this._message.value, Function.createDelegate(_this, _this._onMessageSent), Function.createDelegate(_this, _this._onMessageFailed));
        }
    },

    _onMessageSent: function () {

        this._showMessage(document.datasource.statictext.sent);
        this._resetForm();

    },

    _onMessageFailed: function (error) {

        var message = error.get_message();
        this._showMessage('Fout tijdens het verzenden van uw bericht');


    },

    _resetForm: function () {
        this._message.userValue = null;
        this._name.userValue = null;
        this._email.userValue = null;
        this._message.value = this._message.defaultValue;
    },

    _validate: function () {
        var isValid = true;
        if ($(this._name).hasClass('invalid') == true || this._name.value.length == 0 || this._name.value == this._name.defaultValue) {
            this._name.userValue = this._name.value;
            this._name.value = document.datasource.statictext.namerequired;
            if ($(this._name).hasClass('invalid') == false) {
                $(this._name).addClass('invalid');
            } isValid = false;
        }

        if (this._email.value.length > 0) {
            var expr = new RegExp(this._email.validationExpression, "i");
            var result = expr.test(this._email.value);
            if (result == false) {
                this._email.userValue = this._email.value;
                this._email.value = document.datasource.statictext.emailinvalid;
                if ($(this._email).hasClass('invalid') == false) {
                    $(this._email).addClass('invalid');
                }
                isValid = false;
            }

        }
        else if ($(this._email).hasClass('invalid') == true || this._email.value.length == 0 || this._email.value == this._email.defaultValue) {
            this._email.userValue = this._email.value;
            this._email.value = document.datasource.statictext.emailrequired;
            if ($(this._email).hasClass('invalid') == false) {
                $(this._email).addClass('invalid');
            }
            isValid = false;
        }



        if ($(this._message).hasClass('invalid') == true || this._message.value.length == 0 || this._message.value == this._message.defaultValue) {
            this._message.userValue = this._message.value;
            this._message.value = document.datasource.statictext.messagerequired;
            if ($(this._message).hasClass('invalid') == false) {
                $(this._message).addClass('invalid');
            }
            isValid = false;
        }

        return isValid;

    },

    _showContactForm: function () {
        this._resetForm();
        var _this = this;
        $(this._mapElement).animate({ opacity: 0 }, 100, function () {
            $(_this._mapElement).hide();
            $(_this._formElement).show().animate({ opacity: 1 }, 600);
        });
    },

    databind: function () {
        $(this._mapElement).show();
        $(this._formElement).hide();
        var _this = this;
        if (document.datasource != null && document.datasource.organisation != null) {
            this._title.innerHTML = document.datasource.organisation.name;
        }
        Cufon.replace([this._title]);
        this._categories.set_datasource([{ title: document.datasource.statictext.contact, delegate: Function.createDelegate(_this, _this._showContactForm) }, { title: document.datasource.statictext.route, delegate: Function.createDelegate(_this, _this._showAddress)}]);
        this._categories.databind();


    },

    getHeight: function () {
        return 0;
    }
}



MXA.Website.Kaldenbroeck.ContactTemplate.registerClass('MXA.Website.Kaldenbroeck.ContactTemplate', MXA.Website.Kaldenbroeck.Template);