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

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

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

    MXA.Website.Kaldenbroeck.EventView.initializeBase(this, [element]);
    var date = new Date();
    this._year = date.getFullYear();
    this._month = date.getMonth();
    this._dayElements = [];
    this._monthElements = [];

    this._dayNames = ['zondag', 'maandag', 'dinsdag', 'woensdag', 'donderdag', 'vrijdag', 'zaterdag'];
    this._monthNames = ['jan', 'feb', 'mrt', 'apr', 'mei', 'jun', 'jul', 'aug', 'sep', 'okt', 'nov', 'dec'];
    this.addCssClass('EventView');

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

    this._monthPicker = document.createElement('div');
    this._monthPicker.className = 'cvMonthPicker';
    element.appendChild(this._monthPicker);
    this._createMonthPicker(this._monthPicker);

    this._calendar = document.createElement('table');
    this._calendar.className = 'cvEventList';
    element.appendChild(this._calendar);
    this._createCalendar(this._calendar);

    this._agendaTextContainer = document.createElement('div');
    this._agendaTextContainer.className = 'cvCalenderText';
    element.appendChild(this._agendaTextContainer);

    var agendaText = document.createElement('div');
    agendaText.className = 'cvHeader';
    agendaText.innerHTML = document.datasource.statictext.events;

    this._agendaTextContainer.appendChild(agendaText);

    Cufon.replace([agendaText]);
}

MXA.Website.Kaldenbroeck.EventView.prototype =
{

    initialize: function () {
        MXA.Website.Kaldenbroeck.EventView.callBaseMethod(this, 'initialize');
        var _this = this;
        $addHandler(this._monthPicker, 'click', Function.createDelegate(_this, _this._onMonthChange));
        $addHandler(this._calendar, 'click', Function.createDelegate(_this, _this._onItemClick));
        this.setSize();
    },
    _onBackClick: function () {
        if (document.datasource != null && document.datasource.categories != null) {
            $app.goto('', document.datasource.categories.category);
        }
        else {
            $app.goto('');
        }
    },

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


    clear: function () {
    },

    _onItemClick: function (evt) {
        var e = evt.target;
        while (e != null && e.datasource == null && e != this._element) {
            e = e.parentNode;
        }

        if (e != null && e.datasource != null) {

            var template = $app._lightbox.setTemplate(MXA.Website.Kaldenbroeck.CalendarItemTemplate, 'Calendar');
            template.set_datasource(this._datasource);
            template._selectedIndex = parseInt(e.datasource);
            template.databind();
            $app._lightbox.show();
            $app._lightbox.setSize();
        }
    },

    _onMonthChange: function (evt) {
        var e = evt.target;
        while (e != null && e.month == null) {
            e = e.parentNode;
        }
        if (this._month == e.month && this._year == e.year) {
            return;
        }
        if (e != null && $(e).hasClass('empty') == false) {
            this._month = e.month;
            this._year = e.year;

            var _this = this;
            $(this._calendar).animate({ opacity: 0 }, 100, function () {
                _this.databind();
                $(_this._calendar).animate({ opacity: 1 }, 300);
            });

        }
    },

    _createMonthPicker: function (container) {
        var currentMonth = this._month;
        var renderingMonth = this._month;
        var renderingYear = this._year;

        for (var i = 0; i < 12; i++) {

            var element = document.createElement('div');
            element.innerHTML = this._monthNames[renderingMonth];
            element.className = 'cvMonth';
            container.appendChild(element);
            element.month = renderingMonth;
            element.year = renderingYear;
            if (renderingMonth == currentMonth) {
                element.className = 'cvMonth selected';
            }
            this._monthElements[renderingMonth] = element;
            renderingMonth++;
            if (renderingMonth >= 12) {
                renderingMonth = 0;
                renderingYear++;
            }
        }

        Cufon.replace(this._monthElements);
    },

    _createCalendar: function (table) {


    },

    setSize: function () {
        var t = (document.documentElement.clientHeight - this._calendar.clientHeight) / 2;
        if (t < 50) {
            t = 50;
        }

        var l = (document.documentElement.clientWidth - this._calendar.clientWidth) / 2;

        if (l < 300) {
            l = 300;
        }

        this._calendar.style.left = l + 'px';

        this._monthPicker.style.left = (l + 2) + 'px';
        //this._calendar.style.top = t + 'px';

        var b = (this._element.parentNode.parentNode.clientHeight - this._agendaTextContainer.clientHeight) / 2;

        if (b < 230) {
            b = 230;
        }

        this._agendaTextContainer.style.bottom = b + 'px';
    },

    databind: function () {

        if (this._datasource == null) {
            return;
        }

        for (var i = 0; i < this._calendar.rows.length; i++) {
            var row = this._calendar.rows[i];
            row.parentNode.removeChild(row);
        }

        var year = this._year;
        var currentMonth = this._month;
        var events = [];

        var source = this._datasource;
        $(this._monthElements).removeClass('empty').addClass('empty');
        if (source.length == 0) {
            return;
        }

        var isEmpty = true;
        while (isEmpty == true) {

            for (var i in source) {
                var item = source[i];
                if (item.month == currentMonth + 1 && item.year == year) {
                    events[i] = item;
                    isEmpty = false;
                }

                var monthElement = this._monthElements[parseInt(item.month) - 1];

                if ($(monthElement).hasClass('empty') == true) {
                    $(monthElement).removeClass('empty');
                }


            }

            if (isEmpty == true) {
                currentMonth++;

                if (currentMonth == this._month && year >= this._year + 1) {
                    break;
                }

                if (currentMonth == 11) {
                    currentMonth = 0;
                    year++;
                }

            }
        }

        this._year = year;
        this._month = currentMonth;


        for (var i in events) {
            var item = events[i];
            var date = new Date(item.year, item.month - 1, item.day);
            var day = date.getDay();

            var row = document.createElement('tr');
            row.datasource = i;
            this._calendar.appendChild(row);
            var dayCell = document.createElement('td');
            dayCell.className = 'cvDateContent';
            row.appendChild(dayCell);
            var content = document.createElement('div');
            content.className = 'cvContentContainer';
            var overlay = document.createElement('div');
            overlay.className = 'cvItemOverlay';


            dayCell.appendChild(content);
            content.appendChild(overlay);

            var dayInfo = document.createElement('div');
            dayInfo.className = 'cvDayInfo';
            content.appendChild(dayInfo);

            var dayName = document.createElement('div');
            dayName.className = 'cvDayName';
            dayName.innerHTML = this._dayNames[day];
            dayInfo.appendChild(dayName);

            var dateElement = document.createElement('div');
            dateElement.className = 'cvDate';
            dateElement.innerHTML = item.day + ' / ' + item.month;
            dayInfo.appendChild(dateElement);

            var textCell = document.createElement('td');
            textCell.className = 'cvItemText';
            row.appendChild(textCell);

            var itemContent = document.createElement('div');
            itemContent.className = 'cvContentContainer';
            var itemOverlay = document.createElement('div');
            itemOverlay.className = 'cvItemOverlay';

            textCell.appendChild(itemContent);
            itemContent.appendChild(itemOverlay);

            var eventTitle = document.createElement('div');
            eventTitle.className = 'cvItemTitle';
            eventTitle.innerHTML = item.title;
            itemContent.appendChild(eventTitle);

            var clickToOpen = document.createElement('div');
            clickToOpen.className = 'cvClickToOpen';
            clickToOpen.innerHTML = document.datasource.statictext.clickformoreinfo;
            itemContent.appendChild(clickToOpen);

            Cufon.replace([dayName, dateElement, eventTitle, clickToOpen]);

            dayInfo.style.left = (dayCell.clientWidth - dayInfo.clientWidth) / 2 + 'px';

        }


        $(this._monthElements).removeClass('selected');
        $(this._monthElements[currentMonth]).addClass('selected');
        this.setSize();

    }

}




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