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

Type.registerNamespace("MXA.FP.View.ContactView");

MXA.FP.View.ContactView = function (element) {

    MXA.FP.View.ContactView.initializeBase(this, [element]);
    this.addCssClass('ContactView');

    this._articleContainer = document.createElement('div');
    this._articleContainer.className = 'cvContactContainer';
    element.appendChild(this._articleContainer);

    var background = document.createElement('div');
    background.className = 'cvBackground';
    this._articleContainer.appendChild(background);


    this._next = document.createElement('div');
    this._next.className = 'cvNextButton';
    this._next.innerHTML = 'email sturen';
    this._articleContainer.appendChild(this._next);

    this._previous = document.createElement('div');
    this._previous.className = 'cvPreviousButton';
    this._previous.innerHTML = 'contactgegevens';
    this._articleContainer.appendChild(this._previous);


    this._addressPanel = document.createElement('div');
    this._addressPanel.className = 'cvAddress';
    this._articleContainer.appendChild(this._addressPanel);

    var contactLogo = document.createElement('div');
    contactLogo.className = 'cvContactLogo';
    this._addressPanel.appendChild(contactLogo);

    var devider = document.createElement('div');
    devider.className = 'cvDevider';
    this._addressPanel.appendChild(devider);

    var addressObject;

    if (document.datasource.organisation != null) {
        addressObject = document.datasource.organisation.address;
    }
    else {
        addressObject = {};
    }


    var addressLine1 = document.createElement('div');
    addressLine1.className = 'cvAddress1';
    addressLine1.innerHTML = addressObject.street + ' ' + addressObject.housenumber;
    this._addressPanel.appendChild(addressLine1);

    var addressLine2 = document.createElement('div');
    addressLine2.innerHTML = addressObject.zipcode + ' ' + addressObject.city;
    addressLine2.className = 'cvAddress2';
    this._addressPanel.appendChild(addressLine2);

    var telephone = document.createElement('div');
    if (document.datasource.organisation != null) {
        telephone.innerHTML = 't. ' + document.datasource.organisation.phone;
    }
    telephone.className = 'cvTelephone';
    this._addressPanel.appendChild(telephone);

    var email = document.createElement('div');
    if (document.datasource.organisation != null) {
        email.innerHTML = 'e. ' + document.datasource.organisation.email;
    }
    email.className = 'cvEmail';
    this._addressPanel.appendChild(email);


    this._emailPanel = document.createElement('div');
    this._emailPanel.className = 'cvContact';
    this._articleContainer.appendChild(this._emailPanel);


    var introText = document.createElement('div');
    introText.className = 'cvIntroText';
    introText.innerHTML = 'bedankt!';
    this._emailPanel.appendChild(introText);

    this._formContainer = document.createElement('div');
    this._formContainer.className = 'cvContactForm';

    this._formStatusContainer = document.createElement('div');
    this._formStatusContainer.className = 'cvContactFormStatus';
    $(this._formStatusContainer).css({ opacity: 0 });

    this._emailPanel.appendChild(this._formContainer);
    this._emailPanel.appendChild(this._formStatusContainer);

    this._name = document.createElement('input');
    this._name.className = 'cvName';
    this._name.value = this._name.defaultValue = 'Naam';
    this._name.requiredMessage = 'Naam is vereist';

    this._formContainer.appendChild(this._name);

    this._email = document.createElement('input');
    this._email.className = 'cvEmail';
    this._email.value = this._email.defaultValue = 'Email';
    this._email.requiredMessage = 'Email is vereist';
    this._email.validationExpression = '\\b[A-Z0-9._%-]+@[A-Z0-9.-]+\\.[A-Z]{2,4}\\b';
    this._email.validationMessage = 'Ongeldig email adres';

    this._formContainer.appendChild(this._email);

    this._message = document.createElement('textarea');
    this._message.className = 'cvMessage';
    this._message.value = this._message.defaultValue = 'Bericht';
    this._message.requiredMessage = 'Bericht is vereist';

    this._formContainer.appendChild(this._message);

    var sendButton = document.createElement('div');
    sendButton.className = 'cvSendMessage';
    sendButton.innerHTML = 'verzenden';
    this._formContainer.appendChild(sendButton);

    var _this = this;
    $(this._previous).css({ opacity: 0 });
    $addHandler(this._next, 'click', Function.createDelegate(_this, _this._showMail));
    $addHandler(this._previous, 'click', Function.createDelegate(_this, _this._showContact));
    $addHandler(this._name, 'focus', Function.createDelegate(this, this._onFormFocus));
    $addHandler(this._email, 'focus', Function.createDelegate(this, this._onFormFocus));
    $addHandler(this._message, 'focus', Function.createDelegate(this, this._onFormFocus));

    $addHandler(this._name, 'blur', Function.createDelegate(this, this._onFormBlur));
    $addHandler(this._email, 'blur', Function.createDelegate(this, this._onFormBlur));
    $addHandler(this._message, 'blur', Function.createDelegate(this, this._onFormBlur));

    $addHandler(sendButton, 'click', Function.createDelegate(this, this._onSendClick));
    $(this._emailPanel).hide();

    Cufon.replace([sendButton, introText, this._next, this._previous, addressLine1, addressLine2, telephone, email]);
}

MXA.FP.View.ContactView.prototype =
{
    initialize: function () {
        MXA.FP.View.ContactView.callBaseMethod(this, 'initialize');
    },

    dispose: function () {
        MXA.FP.View.ContactView.callBaseMethod(this, 'dispose');
    },

    _onSendClick: function () {
        var isValid = this._validateForm();
        if (isValid == true) {
            this._formStatusContainer.innerHTML = 'Bezig met verzenden';
            Cufon.replace(this._formStatusContainer);
            $(this._formStatusContainer).animate({ opacity: 1 }, 600);
            $(this._formContainer).animate({ opacity: 0 }, 100);
            Sources.Service.ApplicationService.SendMessage(this._name.value, this._email.value, this._message.value,
            Function.createDelegate(this, this._onSent), Function.createDelegate(this, this._onSentFailed));
        }
    },

    _validateItem: function (input) {
        var isValid = true;
        if (input.value == '' || input.value == input.defaultValue || input.value == input.requiredMessage) {
            if ($(input).hasClass('invalid') == false) {
                $(input).addClass('invalid');
            }

            input.value = input.requiredMessage;
            isValid = false;
        }
        else if (input.validationExpression != null) {
            var expr = new RegExp(input.validationExpression, "i");
            var result = expr.test(input.value);
            if (result == false) {
                if ($(input).hasClass('invalid') == false) {
                    $(input).addClass('invalid');
                }
                isValid = false;
                input.invalidValue = input.value;
                input.value = input.validationMessage;

            }
            else {
                $(input).removeClass('invalid');
            }
        }
        else {
            $(input).removeClass('invalid');
        }

        return isValid;
    },

    _validateForm: function () {
        var isNameValid = this._validateItem(this._name);
        var isEmailValid = this._validateItem(this._email);
        var isMessageValid = this._validateItem(this._message);
        return (isNameValid == true && isEmailValid == true && isMessageValid == true);
    },

    _onSent: function () {
        var _this = this;
        $(this._formStatusContainer).animate({ opacity: 0 }, 100, function () {
            _this._formStatusContainer.innerHTML = 'Bedankt voor uw bericht';
            _this._resetForm();
            Cufon.replace(_this._formStatusContainer);
            $(_this._formStatusContainer).animate({ opacity: 1 }, 600);
            setTimeout(Function.createDelegate(_this, _this._showForm), 2000);
        });

    },

    _resetFormItem: function (item) {
        if (item.value == item.defaultValue || item.value == item.requiredMessage) {
            item.value = item.defaultValue;
        }
        $(item).removeClass('invalid');
    },

    _resetForm: function () {
        this._message.value = this._message.defaultValue;
        $(this._message).removeClass('invalid');
        this._resetFormItem(this._name);
        this._resetFormItem(this._email);
    },

    _showForm: function () {
        $(this._formStatusContainer).animate({ opacity: 0 }, 100);
        $(this._formContainer).animate({ opacity: 1 }, 600);


    },

    _onSentFailed: function () {
        var _this = this;
        $(this._formStatusContainer).animate({ opacity: 0 }, 100, function () {
            _this._formStatusContainer.innerHTML = 'Fout tijdens het verzenden van uw bericht.';
            Cufon.replace(_this._formStatusContainer);
            $(_this._formStatusContainer).animate({ opacity: 1 }, 600);
            setTimeout(Function.createDelegate(_this, _this._showForm), 2000);
        });

    },

    _onFormFocus: function (evt) {
        $(evt.target).removeClass('invalid');
        if (evt.target.invalidValue != null) {
            evt.target.value = evt.target.invalidValue;
            evt.target.invalidValue = null;
        }
        else if (evt.target.value == evt.target.defaultValue || evt.target.value == evt.target.requiredMessage) {
            evt.target.value = '';
        }

    },

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

    },

    _showMail: function () {
        this._resetForm();
        var _this = this;
        $(_this._next).animate({ opacity: 0 }, document.datasource.animation.speed.contactOut);
        $(_this._addressPanel).animate({ opacity: 0 }, document.datasource.animation.speed.contactOut, function () {
            $(_this._addressPanel).hide();
            $(_this._emailPanel).css({ opacity: 0 }).show().animate({ opacity: 1 }, document.datasource.animation.speed.contactIn);
            $(_this._previous).animate({ opacity: 1 }, document.datasource.animation.speed.contactIn);
            _this.onResize();
        });

    },

    _showContact: function () {
        this._resetForm();
        var _this = this;
        $(_this._previous).animate({ opacity: 0 }, document.datasource.animation.speed.contactOut);
        $(_this._emailPanel).animate({ opacity: 0 }, document.datasource.animation.speed.contactOut, function () {
            $(_this._emailPanel).hide();
            $(_this._addressPanel).css({ opacity: 0 }).show().animate({ opacity: 1 }, document.datasource.animation.speed.contactIn);
            $(_this._next).animate({ opacity: 1 }, document.datasource.animation.speed.contactIn);
            _this.onResize();
        });
    },

    activate: function (callback) {

        if ($(this._element).hasClass('active') == false) {
            $(this._element).addClass('active');
        }
        this.onResize();
        var _this = this;
        $(_this._articleContainer).stop().animate({ right: '0%' }, 600, 'easeOutExpo', callback);

    },

    deActivate: function (callback) {
        var _this = this;
        $(_this._articleContainer).stop().animate({ right: '-50%' }, 600, 'easeOutExpo', function () {

            $(_this._element).removeClass('active');
            if (callback != null) {
                callback();
            }

        });

    },

    onResize: function () {

        var height = (this._articleContainer.clientHeight - this._addressPanel.clientHeight) / 2;
        this._addressPanel.style.top = height + 'px';
        var emailHeight = (this._articleContainer.clientHeight - this._emailPanel.clientHeight) / 2;
        this._emailPanel.style.top = emailHeight + 'px';
        var available;
        
        if (this._emailPanel.clientWidth == 0) {
            available = (document.documentElement.clientWidth / 2) - 84;
        }
        else {
            available = this._emailPanel.clientWidth - 84;
        }

        if ($.browser.msie) {
            this._name.style.width = (available / 2) - 9 + 'px';
            this._email.style.width = (available / 2) - 9 + 'px';
            this._message.style.width = (available) - 5 + 'px';
        }
        else {
            this._name.style.width = (available / 2) - 8 + 'px';
            this._email.style.width = (available / 2) - 8 + 'px';
            this._message.style.width = (available) - 5 + 'px';
        }


    },

    getBackgroundUrl: function () {
        return this.getStaticBackground('Contact');
    }
}

MXA.FP.View.ContactView.registerClass('MXA.FP.View.ContactView', MXA.FP.View.View);