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

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

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

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

    this._dayNames = ['zo', 'ma', 'di', 'wo', 'do', 'vr', 'za'];
    this._monthNames = ['jan', 'feb', 'mrt', 'apr', 'mei', 'jun', 'jul', 'aug', 'sep', 'okt', 'nov', 'dec'];
    this.addCssClass('CalendarView');

    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 = 'cvCalendar';
    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 = 'Agenda';

    this._agendaTextContainer.appendChild(agendaText);

    Cufon.replace([agendaText]);

    this._previewContainer = document.createElement('div');
    this._previewContainer.className = 'cvEventPreview';

    var arrow = document.createElement('div');
    arrow.className = 'cvEventPreviewArrow';
    this._previewContainer.appendChild(arrow);

    this._previewContainer.content = document.createElement('div');
    this._previewContainer.appendChild(this._previewContainer.content);


    element.appendChild(this._previewContainer);
}

MXA.Website.Kaldenbroeck.CalendarView.prototype =
{

    initialize: function () {
        MXA.Website.Kaldenbroeck.CalendarView.callBaseMethod(this, 'initialize');
        var _this = this;
        $addHandler(this._monthPicker, 'click', Function.createDelegate(_this, _this._onMonthChange));
        $addHandler(this._calendar, 'click', Function.createDelegate(_this, _this._onItemClick));
        $addHandler(this._calendar, 'mouseover', Function.createDelegate(_this, _this._onMouseOver));
        $addHandler(this._calendar, 'mouseout', Function.createDelegate(_this, _this._onMouseOut));

    },
    _onBackClick: function () {
        if (document.datasource != null && document.datasource.categories != null) {
            $app.goto('', document.datasource.categories.category);
        }
        else {
            $app.goto('');
        }
    },
    dispose: function () {
        MXA.Website.Kaldenbroeck.CalendarView.callBaseMethod(this, 'dispose');
    },

    _onMouseOver: function (evt) {

        var e = evt.target;

        while (e != null && e != this._calendar && e.datasource == null) {
            e = e.parentNode;
        }



        if (e.datasource != null && this._previewContainer.activeItem != e) {
            this._previewContainer.activeItem = e;
            this._previewContainer.content.innerHTML = '';
            var rects = e.getClientRects()[0];
            this._previewContainer.style.left = rects.right + 'px';
            this._previewContainer.style.top = rects.top + 'px';


            var items = [];
            for (var i = 0; i < e.datasource.length; i++) {
                var index = parseInt(e.datasource[i]);
                var item = this._datasource[index];
                var element = document.createElement('div');
                items.push(element);
                if (i == e.datasource.length - 1) {
                    element.className = 'cvPreviewItem last';
                }
                else {
                    element.className = 'cvPreviewItem';
                }

                element.innerHTML = item.title;
                this._previewContainer.content.appendChild(element);

            }

            Cufon.replace(items);

            this._showPreview();

        }
        else if (this._previewContainer.activeItem != null && this._previewContainer.activeItem != e) {
            this._hidePreview();
        }



    },

    _showPreview: function () {
        $(this._previewContainer).stop().show().animate({ opacity: 1 }, 600);
    },

    _hidePreview: function () {

        var _this = this;
        this._previewContainer.activeItem = null;
        $(this._previewContainer).animate({ opacity: 0 }, 300, function () {
            $(_this._previewContainer).hide();
        });

    },

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

        while (e != null && e != this._calendar && e.datasource == null) {
            e = e.parentNode;
        }

        if (this._previewContainer.activeItem != null && e != this._previewContainer.activeItem) {
            this._hidePreview();
        }
    },


    clear: function () {
    },

    _onItemClick: function (evt) {
        var e = evt.target;
        this._hidePreview();
        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) {
        this._dayElements = [];
        var headerElements = [];
        var header = document.createElement('tr');

        table.appendChild(header);

        for (var j = 0; j < 7; j++) {

            var cell = document.createElement('th');
            var overlay = document.createElement('div');
            overlay.className = 'cvOverlay';
            var text = document.createElement('div');
            text.className = 'cvContent';
            text.innerHTML = this._dayNames[j];
            cell.appendChild(overlay);
            cell.appendChild(text);
            header.appendChild(cell);
            headerElements.push(text);

        }

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

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

            for (var j = 0; j < 7; j++) {
                var cell = document.createElement('td');
                cell.className = 'cvDay';
                var container = document.createElement('div');
                container.className = 'cvDayContainer';
                cell.appendChild(container);

                var overlay = document.createElement('div');
                overlay.className = 'cvOverlay';
                var text = document.createElement('div');
                text.className = 'cvContent';
                var counter = document.createElement('div');
                counter.className = 'cvCounter';
                container.appendChild(overlay);
                container.appendChild(text);
                container.appendChild(counter);
                row.appendChild(cell);
                this._dayElements.push(cell);
                cell.contentElement = text;
                cell.counter = counter;
            }



        }
        Cufon.replace(headerElements);

    },

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

        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) {
                    if (events[item.day] == null) {
                        events[item.day] = [];
                    }
                    events[item.day].push(i);
                    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;


        var currentDate = new Date(year, currentMonth, 1);
        var day = currentDate.getDay();
        currentDate.setDate(currentDate.getDate() - day);
        var elements = [];

        for (var i in this._dayElements) {

            var month = currentDate.getMonth();
            var day = currentDate.getDate();
            var cell = this._dayElements[i];
            cell.counter.innerHTML = '';
            cell.datasource = null;
            if (currentMonth == month) {
                cell.className = 'cvDay cvCurrentMonth';
                if (events[day] != null) {
                    cell.className = 'cvDay cvCurrentMonth selected';
                    cell.datasource = events[day];
                    if (cell.datasource.length == 1) {
                        cell.counter.innerHTML = '1 event';
                    }
                    else {
                        cell.counter.innerHTML = cell.datasource.length + ' events';
                    }
                    Cufon.replace([cell.counter]);
                }
                else {
                    cell.className = 'cvDay cvCurrentMonth';
                    cell.counter.innerHTML = '';
                }
            }
            else {
                cell.className = 'cvDay';
            }



            cell.contentElement.innerHTML = day;
            currentDate.setDate(currentDate.getDate() + 1);
            elements.push(cell.contentElement);
        }

        $(this._monthElements).removeClass('selected');
        $(this._monthElements[currentMonth]).addClass('selected');
        Cufon.replace(elements);

    }

}




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