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

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

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

    MXA.Website.Kaldenbroeck.CategoryView.initializeBase(this, [element]);
    this.addCssClass('CategoryView');
    this._items = [];
    this._isDatabound = false;
    this._positionMethod = 0;
}

MXA.Website.Kaldenbroeck.CategoryView.prototype =
{

    initialize: function () {
        MXA.Website.Kaldenbroeck.CategoryView.callBaseMethod(this, 'initialize');
        var _this = this;
        $addHandler(this._element, 'click', Function.createDelegate(_this, _this._onClick));

    },

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

    clear: function () {
        //this._items = [];
        //this._element.innerHTML = '';

    },

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

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

        if (e != null) {
            var args = new Sys.EventArgs();
            args.datasource = e._datasource;
            this.raiseEvent('itemClick', args);
        }
    },

    _getOffset: function (minOffset, maxOffset) {

        var random = Math.random();
        return parseInt((maxOffset - minOffset) * random) + minOffset;
    },

    add_itemClick: function (handler) {
        this.get_events().addHandler('itemClick', handler);
    },

    remove_itemClick: function (handler) {
        this.get_events().removeHandler('itemClick', handler);
    },

    setSize: function () {

        if ((document.documentElement.clientWidth >= 1200 && this._positionMethod == 1)
        || (document.documentElement.clientWidth <= 1200 && this._positionMethod == 0)) {
            this.positionItems();
        }

    },

    positionItems: function () {

        if (document.documentElement.clientWidth >= 1200) {
            this._positionMethod = 0;
        }
        else {
            this._positionMethod = 1;
        }

        var bottomPos = 0;

        for (var i in this._items) {
            var item = this._items[i];
            var previousItem = null;
            if (i > 0) {
                previousItem = this._items[i - 1];
            }
            this.positionItem(item, previousItem, parseInt(i));

            var b = item.getClientRects()[0].bottom;
            if (b > bottomPos) {
                bottomPos = b;
            }
        }
        if (this._items.length % 2 == 0) {
            this._element.style.height = (bottomPos + 50) + 'px';
        }
        else {
            this._element.style.height = (bottomPos + 250) + 'px';
        }
    },

    positionItem: function (item, previousItem, index) {
        if (document.documentElement.clientWidth >= 1200) {
            this._posFull(item, previousItem, index);
        }
        else {
            this._posMinimal(item, previousItem, index);
        }
    },

    _posMinimal: function (item, lastItem, index) {
        var top = 30;


        if (lastItem != null) {
            top = lastItem.getClientRects()[0].bottom + 40 + this._getOffset(10, 50);
        }


        var hOffset = this._getOffset(30, 150);
        if (index % 2 == 0) {
            item.style.left = hOffset + 'px';
            item.style.right = '';
        }
        else {
            item.style.right = hOffset + 'px';
            item.style.left = '';
        }
        item.style.top = top + 'px';
    },

    _posFull: function (item, lastItem, index) {


        var hOffset = this._getOffset(60, 150);
        var top = 30;
        var posItem = this._items[index - 2];
        if (index == 1) {
            top = this._getOffset(30, 150);
        }
        else if (posItem != null) {
            var bottom = posItem.getClientRects()[0].bottom;
            top = bottom + this._getOffset(30, 150);
        }

        item.style.top = top + 'px';

        if (index % 2 == 0) {
            item.style.left = hOffset + 'px';
            item.style.right = '';
        }
        else {
            item.style.right = hOffset + 'px';
            item.style.left = '';
        }
    },

    databind: function () {
        var source = this._datasource;
        if (source != null && source.length == null) {
            source = [source];
        }
        if (this._isDatabound == false) {
            this.createItems(source);
            this._isDatabound = true;
        }

        this.positionItems();
    },

    createItems: function (data) {


        for (var i in data) {
            var item = data[i];
            this.createItem(item);
        }
        Cufon.replace(this._items);
    },

    createItem: function (item) {

        var tc = document.createElement('div');
        tc.className = 'tovItem ' + item.style;
        tc._datasource = item;

        var overlay = document.createElement('div');
        overlay.className = 'tovOverlay';

        var container = document.createElement('div');
        container.className = 'tovContentContainer';

        tc.appendChild(overlay);
        tc.appendChild(container);
        var titleContainer = document.createElement('div');
        titleContainer.className = 'tovTitleContainer';

        var title = document.createElement('div');
        title.className = 'tovTitle';
        title.innerHTML = item.title;

        var slogan = document.createElement('div');
        slogan.className = 'tovSlogan';
        if (item.slogan == null) {
            slogan.innerHTML = '';
        }
        else {
            slogan.innerHTML = item.slogan;
        }
        titleContainer.appendChild(title);
        titleContainer.appendChild(slogan);

        container.appendChild(titleContainer);

        var body = document.createElement('div');
        body.className = 'tovBody';
        body.innerHTML = item.intro;
        container.appendChild(body);

        this._element.appendChild(tc);

        var footer = document.createElement('div');
        footer.className = 'tovFooter';

        var knowMore = document.createElement('div');
        knowMore.innerHTML = document.datasource.statictext.wanttoknowmore;
        knowMore.className = 'tovKnowMore';

        footer.appendChild(knowMore);
        var clickToOpen = document.createElement('div');
        clickToOpen.innerHTML = document.datasource.statictext.clickhere;
        clickToOpen.className = 'tovClickToOpen';
        footer.appendChild(clickToOpen);

        container.appendChild(footer);
        //this.positionItem(tc);
        this._items.push(tc);

    }
}



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