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

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

MXA.Website.Kaldenbroeck.ArticleView = function (element) {
    this._lastStyle = null;
    this._offset = 127;
    MXA.Website.Kaldenbroeck.ArticleView.initializeBase(this, [element]);
    this.addCssClass('ArticleView');

    this._titleContainer = document.createElement('div');
    this._titleContainer.className = 'tarTitleContainer';

    this._title = document.createElement('div');
    this._title.className = 'tarTitle';
    this._titleContainer.appendChild(this._title);

    this._slogan = document.createElement('div');
    this._slogan.className = 'tarSlogan';
    this._titleContainer.appendChild(this._slogan);


    var backButton = document.createElement('div');
    backButton.className = 'dttBack';
    backButton.innerHTML = document.datasource.statictext.overview;
    element.appendChild(backButton);
    var _this = this;
    $addHandler(backButton, 'click', Function.createDelegate(_this, _this._onBackClick));

    var categoryElement = document.createElement('div');
    element.appendChild(categoryElement);
    this._categories = $create(MXA.Website.Kaldenbroeck.CategoryControl, null, null, null, categoryElement);
    this._categories.add_itemClick(Function.createDelegate(_this, _this._onArticleClick));
    this._articleContainer = document.createElement('div');
    this._articleContainer.className = 'tarContainer';
    var overlay = document.createElement('div');
    overlay.className = 'tarOverlay';

    element.appendChild(this._articleContainer);

    this._container = document.createElement('div');
    this._container.className = 'tarContentContainer';
    this._articleContainer.appendChild(this._container);
    this._articleContainer.appendChild(overlay);
    this._container.appendChild(this._titleContainer);

    this._templates = {};
    this._activeTemplate = null;
    this._loadTemplates();
    Cufon.replace(backButton);
}

MXA.Website.Kaldenbroeck.ArticleView.prototype =
{

    initialize: function () {
        MXA.Website.Kaldenbroeck.ArticleView.callBaseMethod(this, 'initialize');
    },

    _loadTemplates: function () {
        this._loadTemplate('Text', MXA.Website.Kaldenbroeck.TextTemplate);
        this._loadTemplate('Gallery', MXA.Website.Kaldenbroeck.GalleryTemplate);
    },

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

    _onBackClick: function () {
        if (document.datasource != null && document.datasource.categories != null) {
            $app.goto('', document.datasource.categories.category);
        }
        else {
            $app.goto('');
        }
    },

    _onArticleClick: function (sender, args) {
        var _this = this;
        $app.goto('Articles/' + this._categoryName + '/' + args.commandArgument.title, this._datasource);
    },

    updatePath: function () {
        var type = null;
        var info = this._getsource();
        var source = info.data;
        var _this = this;
        var e = document.body;
        if ($.browser.msie || $.browser.mozilla) {
            e = document.documentElement;
        }
        if (e.scrollTop > 0) {
            $(e).animate({ scrollTop: 0 }, 600, 'easeOutExpo', function () {
                _this._showView(source.type, source);
            });
        }
        else {
            _this._showView(source.type, source);
        }

        this._categories.activateIndex(info.index);
    },

    setSize: function () {
        this._element.style.height = '';
        this._articleContainer.style.width = (document.documentElement.clientWidth - 385) + 'px';
        if (this._activeTemplate != null) {
            this._activeTemplate.setSize();
            var maxWidth = this._activeTemplate.getMaxWidth();
            if (maxWidth > 0) {
                this._articleContainer.style.maxWidth = maxWidth + 'px';
            }
            else {
                this._articleContainer.style.maxWidth = '';

            }
            var _this = this;

            if (this._isActivated == true) {
                this._updateArticleSize(function () {
                    var rects = _this._articleContainer.getClientRects();
                    if (rects != null) {
                        var b = rects[0].bottom;
                        _this._element.style.height = (b - 9) + 'px';
                    }
                });
            }
            else {
                var rects = _this._articleContainer.getClientRects();
                if (rects != null) {
                    var b = rects[0].bottom;
                    _this._element.style.height = (b - 9) + 'px';
                }
            }
        }

    },

    hide: function () {
        this._isActivated = false;
        this._articleContainer.style.height = '';
        this._title.innerHTML = '';
        this._slogan.innerHTML = '';
        if (this._activeTemplate != null) {
            this._activeTemplate.hide();
            this._activeTemplate = null;
        }

        MXA.Website.Kaldenbroeck.ArticleView.callBaseMethod(this, 'hide');
    },


    setPath: function (value) {
        this._categoryName = value[0];
        this._articleName = value[1];
    },

    _getsource: function () {

        var source = null;
        var index = 0;
        if (this._categoryName != null) {
            for (var i in this._datasource) {
                var item = this._datasource[i];
                if (item.title == this._categoryName) {
                    source = item.articles.article;

                    break;
                }
            }


        }
        else {
            source = this._datasource[i].articles.article;
        }
        var response = null;
        if (this._articleName != null) {
            for (var i in source) {
                var current = source[i];
                if (current.title == this._articleName) {
                    response = current;
                    index = i;
                    break;
                }
            }
        }
        else {
            response = source[0];
            index = 0;
        }

        return { data: response, index: index };
    },

    databind: function () {
        $app._bgManager.activateType(this._categoryName);
        this._categories.clear();
        var source = null;
        if (this._categoryName != null) {
            for (var i in this._datasource) {
                var item = this._datasource[i];
                if (item.title == this._categoryName) {
                    source = item.articles.article;
                    break;
                }
            }


        }
        else {
            source = this._datasource[i].articles.article;
        }


        var index = 0;

        if (source != null) {
            if (this._articleName != null) {
                for (var i in source) {
                    var current = source[i];
                    if (current.title == this._articleName) {
                        index = i;
                        break;
                    }
                }
            }
            var item = source[index];
            this._categories.set_datasource(source);
            this._showView(item.type, item);
        }
        else {
            this._categories.set_datasource(null);
        }


        this._categories.databind();
        this._categories.activateIndex(index);

    },

    _updateArticleSize: function (callback) {
        var template = this._activeTemplate;
        var _this = this;
        var fullHeight = template.getHeight();

        if (fullHeight > 0) {
            fullHeight = fullHeight + _this._titleContainer.clientHeight + _this._offset;

            if ($(_this._element).hasClass('animating') == false) {
                $(_this._element).addClass('animating');
            }

            if (fullHeight != _this._articleContainer.clientHeight) {
                $(_this._articleContainer).stop(true).animate({ height: (fullHeight) + 'px' }, 600, 'easeOutExpo', callback);
            }
            else if (callback != null) {
                callback();
            }
        }


    },


    _showView: function (type, source) {

        var template = this._templates[type];
        var _this = this;
        if (this._activeTemplate != null) {
            this._activeTemplate.deactivate(function () {
                _this._activeTemplate.hide();
                template.show();
                $(template._element).css({ opacity: 0 });
                _this._activeTemplate = template;
                template.set_datasource(source);
                template.databind();
                _this._updateArticleSize(function () {
                    template.activate(function () {
                        $(_this._element).removeClass('animating');
                    });
                    var rects = _this._articleContainer.getClientRects();
                    if (rects != null && rects.length > 0) {
                        var b = rects[0].bottom;
                        _this._element.style.height = (b - 9) + 'px';
                    }
                    this._isActivated = true;
                });


            });
        }
        else {
            $(template._element).css({ opacity: 1 });
            template.show();
            this._activeTemplate = template;
            template.set_datasource(source);
            template.databind();
            var h = template.getHeight();

            if (h > 0) {
                var h = h + this._offset + _this._titleContainer.clientHeight;
                _this._articleContainer.style.height = h + 'px';
            }
            else {
                _this._articleContainer.style.height = '';
            }

            return template;
        }
    },

    _loadTemplate: function (name, type) {

        var element = document.createElement('div');
        this._container.appendChild(element);
        var _this = this;
        var template = $create(type, { 'title': _this._title, 'slogan': _this._slogan }, null, null, element);
        template._categories = this._categories;
        this._templates[name] = template;
    },

    setStyle: function (name) {
        if (this._lastStyle != null) {
            $(this._element).removeClass(this._lastStyle);
        }

        $(this._element).addClass(name);
        this._lastStyle = name;
    }


}



MXA.Website.Kaldenbroeck.ArticleView.registerClass('MXA.Website.Kaldenbroeck.ArticleView', MXA.Website.Kaldenbroeck.View);