var ds_Plugin_Calendar = ds_Base.extend({
    options: {

    },

    numMonth: 5,
    tableWidth: null,
    tableHeight: null,
    amountMonths: 12,
    bSubmitting: false,
    
    initialize: function(options) {
        this.setOptions(options);
        var oSize = $E('.calendar').getParent().getSize();
        this.tableWidth = oSize.size.x + 6;
        oSize = $E('.calendarSlider').getSize();
        this.tableHeight = oSize.size.y + 50;
        this.initCalendar();
    },

    initCalendar: function () {

        this.initMonthHolders();
        var sliderWidth = $$('.monthHolder').length * this.tableWidth + 1000;
        $E('.calendar').setStyle('width', sliderWidth + 'px');
        $E('.calendar').setStyle('position', 'relative');
        $E('.calendar').setStyle('height', this.tableHeight + 'px');
        $E('.calendarSlider').setStyle('position', 'absolute');
        var left = (this.tableWidth * this.numMonth) * -1;
        left = left - 6;
        $E('.calendarSlider').setStyle('left', left + 'px');
        this.addScrollEvents();
    },

    initMonthHolders: function () {
        $each ($$('div.monthHolder'), function (elm) {
            elm.setStyle('width', this.tableWidth + 'px');
            elm.setStyle('float', 'left');
            elm.setStyle('display', 'block');
        }, this);
    },

    addScrollEvents: function () {
        $ES('th.previousMonth a').each(function (elm) {
            elm.addEvent('click', this.scrollToPreviousMonth.bind(this));
        }, this);
        $ES('th.nextMonth a').each(function (elm) {
            elm.addEvent('click', this.scrollToNextMonth.bind(this));
        }, this);
    },

    scrollToPreviousMonth: function (e) {
        var evt = new Event(e);
        evt.stop();
        var startPos = (this.tableWidth * this.numMonth) * -1;
        if (this.numMonth > 0) {
            this.numMonth--;
            var left = (this.tableWidth * this.numMonth) * -1;
            $E('div.calendarSlider').effect('left', {duration: 200, transition: Fx.Transitions.linear}).start(startPos,left);
        } else if (!this.bSubmitting) {
            this.bSubmitting = true;
            $(evt.target).addClass('loading');
            var aHref = $E('div.calendarSlider').getFirst().getElement('th.previousMonth a').getProperty('href').split('/');
            var uri = '/Web/Agenda/get-monthly-calendar/month/' + aHref[5] + '/year/' + aHref[7] + '/type/previous';
            oAjax = new ds_Plugin_Ajax();
            oAjax.getAjax(uri , this.injectPreviousCalendar.bind(this), true);
        }
    },

    scrollToNextMonth: function (e) {
        var evt = new Event(e);
        evt.stop();
        if (this.numMonth < ($$('.monthHolder').length - 1)) {
            var startPos = (this.tableWidth * this.numMonth) * -1;
            this.numMonth++;
            var left = (this.tableWidth * this.numMonth) * -1;
            $E('div.calendarSlider').effect('left', {duration: 200, transition: Fx.Transitions.linear}).start(startPos,left);
        } else if (!this.bSubmitting) {
            $(evt.target).addClass('loading');
            this.bSubmitting = true;
            var aHref = $E('div.calendarSlider').getLast().getElement('th.nextMonth a').getProperty('href').split('/');
            var uri = '/Web/Agenda/get-monthly-calendar/month/' + aHref[5] + '/year/' + aHref[7] + '/type/next';
            oAjax = new ds_Plugin_Ajax();
            oAjax.getAjax(uri , this.injectNextCalendar.bind(this), true);
        }
    },

    injectPreviousCalendar: function (sResponse) {
        this.numMonth = 11;
        var width = (($$('.monthHolder').length + 12) * this.tableWidth) + 1000;
        //inject new html
        $E('div.calendarSlider').setHTML(sResponse + $E('div.calendarSlider').innerHTML);

        //Set new width of the slider
        $E('div.calendarSlider').setStyle('width', width + 'px');

        // because html is injected on the left the slider needs to be repositioned
        var left = (this.tableWidth * -13); 
        var startPos = left;
        $E('div.calendarSlider').setStyle('left', left + 'px');

        $E('div.calendarSlider').getElements('.monthHolder').each(function (elm) {elm.setStyle('width', this.tableWidth);}, this);
        $E('div.calendarSlider').getElements('.monthHolder').each(function (elm) {elm.setStyle('float', 'left');});
        $E('div.calendarSlider').getElements('.monthHolder').each(function (elm) {elm.setStyle('display', 'block');});

        $ES('div.calendarSlider th.previousMonth a').each(function (elm) {
            elm.removeClass('loading');
        });
        
        //calculate new month for sliding
        left = (this.tableWidth * -11);
        $E('div.calendarSlider').effect('left', {duration: 200, transition: Fx.Transitions.linear}).start(startPos,left);
        this.addScrollEvents();
        this.bSubmitting = false;
    },

    injectNextCalendar: function (sResponse) {
        var width = (($$('.monthHolder').length + 12) * this.tableWidth) + 1000;

        $E('div.calendarSlider').setHTML($E('div.calendarSlider').innerHTML + sResponse);
        
        this.addScrollEvents();

        $E('div.calendarSlider').setStyle('width', width);
        $E('div.calendarSlider').getElements('.monthHolder').each(function (elm) {elm.setStyle('width', this.tableWidth);}, this);
        $E('div.calendarSlider').getElements('.monthHolder').each(function (elm) {elm.setStyle('float', 'left');});
        $E('div.calendarSlider').getElements('.monthHolder').each(function (elm) {elm.setStyle('display', 'block');});

        this.initMonthHolders();
        
        var startPos = (this.tableWidth * this.numMonth) * -1;

        $ES('div.calendarSlider th.nextMonth a').each(function (elm) {
            elm.removeClass('loading');
        });

        this.numMonth++;
        var left = (this.tableWidth * this.numMonth) * -1;
        $E('div.calendarSlider').effect('left', {duration: 200, transition: Fx.Transitions.linear}).start(startPos,left);
        this.bSubmitting = false;
    }
});

ds_Plugin_Calendar.implement(new Options);