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

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

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

    MXA.FP.View.ProductBaseView.initializeBase(this, [element]);
    this.addCssClass('ProductBaseView');
    this._selectedIndex = 0;

    this._toolBarContainer = document.createElement('div');
    this._toolBarContainer.className = 'pvToolBar';
    element.appendChild(this._toolBarContainer);

    var overlay = document.createElement('div');
    overlay.className = 'pvOverlay';
    this._toolBarContainer.appendChild(overlay);

    this._toolsFadeElement = document.createElement('div');
    this._toolsFadeElement.className = 'pvToolsFadeElement';
    this._toolBarContainer.appendChild(this._toolsFadeElement);

    var previousButton = document.createElement('div');
    previousButton.className = 'pvPrevious';
    this._toolBarContainer.appendChild(previousButton);

    var nextButton = document.createElement('div');
    nextButton.className = 'pvNext';
    this._toolBarContainer.appendChild(nextButton);


    this._previousLabel = document.createElement('div');
    this._previousLabel.className = 'pvPreviousLabel';
    this._toolsFadeElement.appendChild(this._previousLabel);

    this._nextLabel = document.createElement('div');
    this._nextLabel.className = 'pvNextLabel';
    this._toolsFadeElement.appendChild(this._nextLabel);

    this._toolsContainer = document.createElement('div');
    this._toolsContainer.className = 'pvTools';

    this._toolsFadeElement.appendChild(this._toolsContainer);

    var dLeft = document.createElement('div');
    dLeft.className = 'pvDevider';
    this._toolsContainer.appendChild(dLeft);

    this._titleElement = document.createElement('div');
    this._titleElement.className = 'pvTitle';
    this._titleElement.innerHTML = '';
    this._toolsContainer.appendChild(this._titleElement);

    var infoElement = document.createElement('div');
    infoElement.className = 'pvInfo';
    this._toolsContainer.appendChild(infoElement);

    var dRight = document.createElement('div');
    dRight.className = 'pvDevider';
    this._toolsContainer.appendChild(dRight);

    this._detailsContainer = document.createElement('div');
    this._detailsContainer.className = 'pvDetailsContainer';
    this._toolsFadeElement.appendChild(this._detailsContainer);

    this._createDetails(this._detailsContainer);



    var _this = this;
    $addHandler(infoElement, 'click', Function.createDelegate(_this, _this._onInfoClick));

    Cufon.replace([this._titleElement, infoElement]);

    this._isExpanded = false;


    $addHandler(nextButton, 'click', Function.createDelegate(_this, _this._onNextClick));
    $addHandler(previousButton, 'click', Function.createDelegate(_this, _this._onPreviousClick));


    this._onExpandedDelegate = Function.createDelegate(_this, _this._onExpanded);
}

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

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

    _createDetails: function (container) {

        var table = document.createElement('table');
        table.className = 'pvDetails';
        container.appendChild(table);

        var descriptionRow = document.createElement('tr');
        table.appendChild(descriptionRow);

        var descriptionLabel = document.createElement('td');
        descriptionLabel.className = 'pvLabel';
        descriptionLabel.innerHTML = 'omschrijving';
        descriptionRow.appendChild(descriptionLabel);

        var description = document.createElement('td');
        descriptionRow.appendChild(description);

        this._description = document.createElement('div');
        this._description.className = 'pvDescription';

        description.appendChild(this._description);

        var contactRow = document.createElement('tr');
        table.appendChild(contactRow);
        var contactLabel = document.createElement('td');
        contactLabel.className = 'pvLabel';
        contactLabel.innerHTML = this.get_formTitle();
        contactRow.appendChild(contactLabel);


        var formRow = document.createElement('td');
        formRow.className = 'pvForm';
        contactRow.appendChild(formRow);

        var contentContainer = document.createElement('div');
        contentContainer.className = 'pvFormContent';
        formRow.appendChild(contentContainer);

        this._formContainer = document.createElement('div');
        this._formContainer.className = 'pvFormContainer';
        contentContainer.appendChild(this._formContainer);

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

        this._name = document.createElement('input');
        this._name.value = this._name.defaultValue = 'naam';
        this._name.requiredMessage = 'Naam is vereist';
        this._name.className = 'pvName';
        this._email = document.createElement('input');
        this._email.className = 'pvEmail';
        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._message = document.createElement('textarea');
        this._message.value = this._message.defaultValue = 'bericht';
        this._message.className = 'pvMessage';
        this._message.requiredMessage = 'Bericht is vereist';

        this._sendButton = document.createElement('div');
        this._sendButton.className = 'pvSend';
        this._sendButton.innerHTML = 'verzenden';

        this._formContainer.appendChild(this._name);
        this._formContainer.appendChild(this._email);
        this._formContainer.appendChild(this._message);
        this._formContainer.appendChild(this._sendButton);





        $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(this._sendButton, 'click', Function.createDelegate(this, this._onSendClick));


        Cufon.replace([descriptionLabel, contactLabel, this._sendButton]);
    },

    get_formTitle: function () {


    },

    _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);
            //setTimeout(Function.createDelegate(this, this._onSent), 1000);
            Sources.Service.ApplicationService.SendMessage(this._name.value, this._email.value, this._message.value,
            Function.createDelegate(this, this._onSent), Function.createDelegate(this, this._onSentFailed));
        }
    },

    _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);
        });

    },

    _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);
        });

    },

    _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);

    },

    _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;
        }

    },

    _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);
    },

    get_isLastItem: function () {
        var datasource = this.get_datasource();
        return (this._selectedIndex == datasource.length - 1);
    },

    get_isFirstItem: function () {
        return (this._selectedIndex == 0);
    },

    _hideTools: function (callback) {
        $(this._toolsFadeElement).animate({ opacity: 0 }, document.datasource.animation.speed.productOut, callback);
    },

    _showTools: function (callback) {
        $(this._toolsFadeElement).animate({ opacity: 1 }, document.datasource.animation.speed.productIn, callback);
    },

    _onNextClick: function () {
        this._resetForm();
        var index;
        if (this.get_isLastItem() == true) {
            index = 0;
        }
        else {
            index = this._selectedIndex + 1;
        }
        this.showIndex(index);
    },

    showIndex: function (index) {
        this._selectedIndex = index;
        var _this = this;
        this._updateImage();
        this._hideTools(function () {
            _this.databindItem();
            _this._showTools();
            _this.onResize(true);

        });
    },

    _onPreviousClick: function () {
        this._resetForm();
        var index;
        if (this.get_isFirstItem() == true) {
            var datasource = this.get_datasource();
            index = datasource.length - 1;
        }
        else {
            index = this._selectedIndex - 1;
        }
        this.showIndex(index);

    },

    _onExpanded: function (evt) {
        var rects = this._toolBarContainer.getClientRects()[0];
        if (evt.clientY < rects.top) {
            this._collapseToolbar();
        }
    },

    _animateIn: function (callback) {
        var pos = this._element.clientHeight - 60;
        $(this._toolBarContainer).css({ top: this._element.clientHeight + 'px' }).animate({ top: pos + 'px' }, callback);
    },

    _animateOut: function (callback) {
        if (this._isExpanded == true) {
            $removeHandler(window, 'mousemove', this._onExpandedDelegate);
        }

        $(this._toolBarContainer).animate({ top: this._element.clientHeight + 'px' }, callback);
        this._isExpanded = false;
    },

    _expandToolbar: function (callback) {
        var _this = this;
        var pos = this._element.clientHeight - this._detailsContainer.scrollHeight - 130;
        $(this._toolBarContainer).animate({ top: pos + 'px' }, document.datasource.animation.speed.toolBar, 'easeOutExpo', function () {
            $addHandler(window, 'mousemove', _this._onExpandedDelegate);
            if (callback != null) {
                callback();
            }

        });
        if ($(this._toolBarContainer).hasClass('expanded') == false) {
            $(this._toolBarContainer).addClass('expanded');
        }
        this._isExpanded = true;

    },

    _onInfoClick: function () {
        this._toggleToolbar();
    },

    _collapseToolbar: function (callback) {
        $removeHandler(window, 'mousemove', this._onExpandedDelegate);
        var pos = this._element.clientHeight - 60;
        $(this._toolBarContainer).animate({ top: pos + 'px' }, document.datasource.animation.speed.toolBar, 'easeOutExpo', callback);
        this._isExpanded = false;
        $(this._toolBarContainer).removeClass('expanded');
    },

    _toggleToolbar: function (callback) {
        if (this._isExpanded == false) {
            this._expandToolbar(callback);
        }
        else {
            this._collapseToolbar(callback);
        }
    },

    onResize: function (animate) {
        MXA.FP.View.ProductBaseView.callBaseMethod(this, 'onResize');
        var pos;
        if (this._isExpanded == false) {
            pos = this._element.clientHeight - 60;
        }
        else {
            pos = this._element.clientHeight - this._detailsContainer.scrollHeight - 130;
        }

        if (animate == true) {
            $(this._toolBarContainer).animate({ top: pos + 'px' }, 300, 'easeOutExpo');
        }
        else {
            this._toolBarContainer.style.top = pos + 'px';
        }




    },

    get_datasource: function () {


    },

    onSelected: function () {
        this._selectedIndex = 0;
    },

    _updateImage: function () {
        var ds = this.get_datasource();
        var source = ds[this._selectedIndex];
        this._bgManager.showBackground(source.image);
    },

    getBackgroundUrl: function () {
        var ds = this.get_datasource();
        if (ds == null) {
            return null;
        }
        return ds[0].image;
    },

    databind: function () {
        this.databindItem();
        this._template.databind();
    },

    databindItem: function () {
        var ds = this.get_datasource();
        if (ds == null) {
            return;
        }
        var source = ds[this._selectedIndex];
        this._titleElement.innerHTML = source.name;
        this._description.innerHTML = source.description;

        var previousIndex = 0;
        var nextIndex = 0;

        if (this.get_isFirstItem() == true) {
            previousIndex = ds.length - 1;
        }
        else {
            previousIndex = this._selectedIndex - 1;
        }

        if (this.get_isLastItem() == true) {
            nextIndex = 0;
        }
        else {
            nextIndex = this._selectedIndex + 1;
        }

        var previousItem = ds[previousIndex];
        var nextItem = ds[nextIndex];

        this._nextLabel.innerHTML = nextItem.name;
        this._previousLabel.innerHTML = previousItem.name;

        Cufon.replace([this._description, this._nextLabel, this._previousLabel, this._titleElement]);

    }
}

MXA.FP.View.ProductBaseView.registerClass('MXA.FP.View.ProductBaseView', MXA.FP.View.ExpandableView);