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

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

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

    MXA.FP.View.SuggestedCompanyView.initializeBase(this, [element]);
    this.addCssClass('SuggestedCompanyView');
    this._activePage = 0;
    this._selectedIndex = 0;
    this._items = [];
    this._pagerItems = [];

    this._titleContainer = document.createElement('div');
    this._titleContainer.className = 'svTitle';
    this._titleContainer.innerHTML = 'toerisme';
    element.appendChild(this._titleContainer);

    this._categoryContainer = document.createElement('div');
    this._categoryContainer.className = 'svCategoryContainer';
    element.appendChild(this._categoryContainer);

    this._content = document.createElement('div');
    this._content.className = 'svContentContainer';
    element.appendChild(this._content);

    this._listContainer = document.createElement('div');
    this._listContainer.className = 'svListContainer';
    this._content.appendChild(this._listContainer);

    this._detailContainer = document.createElement('div');
    this._detailContainer.className = 'svDetailContainer';
    this._content.appendChild(this._detailContainer);

    this._imageMask = document.createElement('div');
    this._imageMask.className = 'svImageMask';
    this._detailContainer.appendChild(this._imageMask);


    this._mainImage = document.createElement('img');
    this._mainImage.className = 'svMainImage';

    this._imageMask.appendChild(this._mainImage);

    this._itemTitle = document.createElement('div');
    this._itemTitle.className = 'svItemTitle';
    this._detailContainer.appendChild(this._itemTitle);

    this._itemText = document.createElement('div');
    this._itemText.className = 'svItemText';
    this._detailContainer.appendChild(this._itemText);

    this._pageContainer = document.createElement('div');
    this._pageContainer.className = 'svPager';
    element.appendChild(this._pageContainer);


    var _this = this;
    Cufon.replace([this._titleContainer]);
    $addHandler(this._listContainer, 'click', Function.createDelegate(_this, _this._onItemClick));
    $addHandler(this._pageContainer, 'click', Function.createDelegate(_this, _this._onPageClick));
}

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

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

    onSelected: function () {
        this._bgManager.showBackground(null);
        //this._items = [];
        this._selectedIndex = 0;
        $(this._detailContainer).css({ opacity: 0 });

        for (var i = 0; i < 3; i++) {
            var item = this._items[i];
            $(item).css({ opacity: 0 });
        }
    },

    _onPageClick: function (evt) {
        var e = evt.target;

        while (e != null && e._value == null) {
            e = e.parentNode;
        }

        if (e != null) {
            this.gotoPage(e._value);
        }
    },

    gotoPage: function (page) {
        this._activePage = page;
        var offsetTop = (this._listContainer.clientHeight * this._activePage) + (this._activePage * 2);
        if (offsetTop > this._listContainer.scrollHeight - this._listContainer.clientHeight) {
            offsetTop = this._listContainer.scrollHeight - this._listContainer.clientHeight;
        }
        $(this._listContainer).animate({ scrollTop: offsetTop }, 600, 'easeOutExpo');

        $(this._pagerItems).removeClass('active');
        $(this._pagerItems[page]).addClass('active');

    },

    activate: function (callback) {
        if ($(this._element).hasClass('active') == false) {
            $(this._element).addClass('active');
        }
        this.onResize();
        var maxPageCount = this.get_pageSize();
        var delay = 200;
        var _this = this;
        for (var i = 0; i < maxPageCount; i++) {
            var item = this._items[i];
            if (item != null) {
                $(item).css({ display: 'block' });
                $(item).delay(delay).animate({ opacity: 1 });

                delay += 200;
            }
        }

        $(_this._detailContainer).delay(delay).animate({ opacity: 1 }, callback);
    },

    get_pageSize: function () {
        return Math.floor(this._content.clientHeight / 130);
    },

    get_pages: function () {
        var pageSize = this.get_pageSize();
        var source = this.get_datasource();
        if (source == null) {
            return 0;
        }
        return Math.ceil(source.length / pageSize);
    },

    onResize: function () {
        var rects = this._content.getClientRects()[0];
        if (rects != null) {
            var height = document.documentElement.clientHeight - rects.top - 80;
            this._content.style.height = height + 'px';
        }
        this._mainImage.style.top = '-' + ((this._mainImage.scrollHeight - this._imageMask.clientHeight) / 2) + 'px';

        var maxPageCount = this.get_pageSize();

        this._listContainer.style.height = (130 * 3) - 2 + 'px';


        for (var i in this._items) {
            var item = this._items[i];
            var image = item._image;
            var imageMask = item._imageMask;
            image.style.top = '-' + ((image.scrollHeight - imageMask.clientHeight) / 2) + 'px';
        }

        var activePage = 0;
        var pages = this.get_pages();
        this._pageContainer.innerHTML = '';
        this._pagerItems = [];
        for (var i = 0; i < pages; i++) {
            var pageItem = document.createElement('div');
            pageItem._value = i;
            if (i == activePage) {
                pageItem.className = 'svPageItem active';
            }
            else {
                pageItem.className = 'svPageItem';
            }

            this._pageContainer.appendChild(pageItem);
            this._pagerItems.push(pageItem);
        }
    },

    _onItemClick: function (evt) {

        var e = evt.target;

        while (e != null && e._value == null) {
            e = e.parentNode;
        }

        if (e != null) {
            this._selectedIndex = parseInt(e._value);
            this._setActive(this._selectedIndex);
            var _this = this;
            $(this._detailContainer).animate({ opacity: 0 }, 100, function () {
                _this._bindItem();
                $(_this._detailContainer).animate({ opacity: 1 }, 500);
            });

        }

    },

    get_datasource: function () {
        if (document.datasource.companies != null) {
            return document.datasource.companies.company;
        }
        return null;
    },

    _setActive: function (index) {
        $(this._items).removeClass('active');
        var item = this._items[index];
        if ($(item).hasClass('active') == false) {
            $(item).addClass('active');
        }

    },

    _bindItem: function () {
        var source = this.get_datasource();
        if (source == null) {
            return;
        }
        var ds = source[this._selectedIndex];

        this._itemTitle.innerHTML = ds.name;
        this._mainImage.src = ds.image;
        this._itemText.innerHTML = ds.description;
        Cufon.replace([this._itemTitle, this._itemText]);

        var item = this._items[this._selectedIndex];


        this._mainImage.style.top = '-' + ((this._mainImage.scrollHeight - this._imageMask.clientHeight) / 2) + 'px';
    },

    databind: function () {
        var ds = this.get_datasource();
        this._listContainer.innerHTML = '';

        for (var i in ds) {
            var item = ds[i];
            this.createItem(item, i);
        }

        this._bindItem();
        this._setActive(this._selectedIndex);



    },

    createItem: function (item, index) {

        var container = document.createElement('div');
        container._value = index;
        container.className = 'svItem';
        this._listContainer.appendChild(container);

        var content = document.createElement('div');
        content.className = 'svContent';

        var imageMask = document.createElement('div');
        imageMask.className = 'svImageMask';
        content.appendChild(imageMask);

        var image = document.createElement('img');
        image.src = item.thumbnail;
        image.className = 'svImage';
        imageMask.appendChild(image);

        var textContainer = document.createElement('div');
        textContainer.className = 'svTextContainer';
        content.appendChild(textContainer);

        var title = document.createElement('div');
        title.className = 'svIntro';
        title.innerHTML = item.name;
        textContainer.appendChild(title);

        var extraText = document.createElement('div');
        extraText.className = 'svSlogan';
        extraText.innerHTML = item.shortdescription;
        textContainer.appendChild(extraText);

        container.appendChild(content);
        container._image = image;
        container._imageMask = imageMask;
        this._items.push(container);

        Cufon.replace([title, extraText]);

    }


}

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