Class("Calendar", {

    does: [Joose.Singleton],

    has: {
        container: {
            is: 'rw',
            init: '#calendar'
        },

        numOfDays: {
            is: 'rw',
            init: [31, 0, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
        },

        months: {
            is: 'ro',
            init:  ['January','February','March','April','May','June','July','August','September','October','November','December']
        },

        days: {
            is: 'ro',
            init: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
        },

        currentMonth: {
            is: 'rw',
            init: 1
        },

        currentYear: {
            is: 'rw',
            init: 1
        },

        events: {
            is: 'rw',
            init: []
        }
    },

    after: {
        initialize: function(){
            var self = this;
            self.buildPager();
            self.getToday();
        }
    },

    methods: {
        getToday: function(){
            var self = this;
            var today = new Date();
            self.setCurrentMonth(today.getMonth() + 1);
            self.setCurrentYear(today.getFullYear());
            self.build(self.getCurrentMonth(), self.getCurrentYear());
        },

        build: function(month, year){
            var self = this;
            self.destroy();

            var oD = new Date(year, month-1, 1);
            oD.od=oD.getDay()+1;

            var todaydate = new Date()
            var scanfortoday=(year==todaydate.getFullYear() && month==todaydate.getMonth()+1)? todaydate.getDate() : 0

            self.numOfDays[1] = (((oD.getFullYear()%100!=0)&&(oD.getFullYear()%4==0))||(oD.getFullYear()%400==0))?29:28;
            //monthCalendar.dim[1]=(((oD.getFullYear()%100!=0)&&(oD.getFullYear()%4==0))||(oD.getFullYear()%400==0))?29:28;
            var t='<table cols="7"><tr class="days">';
            for (i = 0; i < 7; i++) {
                t += '<th>' + self.days[i] + '</th>';
            }
            t += '</tr><tr>';
            for(i=1;i<=42;i++){
                var x=((i-oD.od>=0)&&(i-oD.od<self.numOfDays[month-1]))? i-oD.od+1 : '&nbsp;';
                var z = parseInt(x);

                if (x==scanfortoday) //DD added
                    x='<span id="today">'+x+'</span>' //DD added
                if ((i % 7 == 1) || (i % 7 == 0)) {
                    if(!isNaN(z)){
                        //check if it's part of another month
                        t += '<td class="weekend" id="day_' + month + '_' + z + '_' + year + '"><span class="date">' + x + '</span> <ul></ul></td>';
                    }
                    else{
                        t += '<td class="weekend">' + x + '</td>';
                    }

                }
                else {
                    if(!isNaN(z)){
                        t += '<td id="day_' + month + '_' + z + '_' + year + '"> <span class="date">' + x + '</span><ul></ul></td>';

                    }
                    else{
                        t += '<td><span class="date">' + x + '</span></td>';
                    }
                }

                if(((i)%7==0)&&(i<36))t+='</tr><tr>';
            }
            t+='</tr></table>'
            $(self.getContainer()).append(t);
            self.setTitle(month, year);

            CalEvent.destroy();

            var from = month + '/1/' + year;
            var to = month + '/' + self.getNumOfDays()[month-1] + '/' + year;
            self.getEvents(from, to);

        },

        destroy: function(){
            var self = this;
            $('table', self.getContainer()).remove();
        },

        buildPager: function(){
            var self = this;
            var html = $('<ul id="calendarPager"><li id="paging"><a href="#" id="previous">&lt; Previous Month</a> <a id="next" href="#">Next Month &gt;</a></li>\n\
                            <li id="month"><span></span></li>\n\
                          </ul>');
            $(self.getContainer()).before(html);
            self.paging();
        },

        paging: function(){
            var self = this;
            $('#previous').click(function(){
                self.previousMonth();
                return false;
            })
            $('#next').click(function(){
                self.nextMonth();
                return false;
            })
        },


        previousMonth: function(){
            var self = this;
            self.setCurrentMonth(self.getCurrentMonth() - 1);
            if (self.getCurrentMonth() ==  0) {
                self.setCurrentMonth(12);
                self.setCurrentYear(self.getCurrentYear() - 1);
            }
            self.build(self.getCurrentMonth(), self.getCurrentYear());
        //monthCalendar.getMonthDayEvents(monthCalendar.month + '/1/' + monthCalendar.year, monthCalendar.month + '/' + monthCalendar.dim[monthCalendar.month - 1] + '/' + monthCalendar.year);
        },

        nextMonth: function(){
            var self = this;
            self.setCurrentMonth(self.getCurrentMonth() + 1);
            if (self.getCurrentMonth() % 13 !== self.getCurrentMonth()) {
                self.setCurrentMonth(self.getCurrentMonth() % 12);
                self.setCurrentYear(self.getCurrentYear() + 1);
            }
            self.build(self.getCurrentMonth(), self.getCurrentYear());
        //monthCalendar.getMonthDayEvents(monthCalendar.month + '/1/' + monthCalendar.year, monthCalendar.month + '/' + monthCalendar.dim[monthCalendar.month - 1] + '/' + monthCalendar.year);
        },

        setTitle: function(month, year){
            var self = this;
            $('#calendarPager #month span').text(self.getMonths()[month-1] + ' ' + year);
        },

        getEvents: function(from, to){
            var self = this;
            $.ajax({
                type: "POST",
                url: "jsonEvents.php",
                data: "{'startDay':'" + from + "', 'endDay':'" + to + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(result){
                    self.buildEvents(result);
                },
                error: function(xhr, status, error){
                    var err = eval("(" + xhr.responseText + ")");
                    alert(err.Message)
                }
            });
        },

        buildEvents: function(events){
            var self = this;
            $.each(events, function(){
                var event = new CalEvent({
                    id: 'event__' + this.Id,
                    title: this.Name,
                    image: this.Image,
                    description: this.Description,
                    startTime: this.StartTime,
                    endTime: this.EndTime,
                    startDate: this.StartDate,
                    endDate: this.EndDate,
                    location: this.Location,
                    city: this.City,
                    phone: this.Phone,
                    email: this.Email
                })
                self.events.push(event);
            })
            self.setupPopup();
            self.alternateEvents();
        },

        alternateEvents: function(){
            $('ul li:even', self.getContainer).addClass('even');
        },

        setupPopup: function(){
            var self = this;
            $('ul li a', self.getContainer()).click(function(){
                var id = $(this).parents('li').attr('id');
                CalEvent.find(id);
                return false;
            })
        },

        buildFilters: function(types){
            var self = this;
            var html = '<div id="calendarFilter"><label>Filter:</label><select class="medium">';
            html += '<option value="All">All</option>';
            $.each(types, function(){
                var eventType = this.replace(/ /g, '');
                html += '<option value="'+ eventType +'">'+ this +'</option>';
            })
            html += '</select></div>';
            $('#calendarPager').before(html);
            self.filterEvents();
        },

        filterEvents: function(){
            var self = this;
            $('#calendarFilter select').change(function(){
                var filter = $(this).val();

                if(filter !== 'All'){
                    $('li', self.getContainer()).css('visibility', 'hidden');
                    $('.' + filter, self.getContainer()).css('visibility', 'visible');
                }
                else{
                    $('li', self.getContainer()).css('visibility', 'visible');
                }
            })
        }
    }
})


Class("CalEvent", {
    has: {
        id: {
            is: 'rw',
            init: '0'
        },

        title: {
            is: 'rw',
            init: ''
        },

        description: {
            is: 'rw',
            init: ''
        },

        startTime: {
            is: 'rw',
            init: ''
        },

        endTime: {
            is: 'rw',
            init: ''
        },

        startDate: {
            is: 'rw',
            init: ''
        },

        endDate: {
            is: 'rw',
            init: ''
        },

        url: {
            is: 'rw',
            init: ''
        },

        location: {
            is: 'rw',
            init: ''
        },

        city: {
            is: 'rw',
            init: ''
        },

        phone: {
            is: 'rw',
            init: ''
        },

        email: {
            is: 'rw',
            init: ''
        },
        image: {
            is: 'rw',
            init: ''
        }
    },

    after: {
        initialize: function(){
            var eventDate = this.startDate.replace(/\//g, '_');
            $('#day_'+ eventDate + ' ul').append('<li id="' + this.id + '"><a href="#">' + this.title +'</a></li>')
        }
    },

    methods: {
        buildPopup: function(){
            CalEvent.destroy();
            var description = this.description;

            /*if(description.length > 150){
                description = description.substring(0, 149) + ' ...';
            }*/

            var html = '<div id="calendarPopup">\n\
                        <div id="calendarDescription">';
            if(this.image !== ''){
                html +=  '<img src="UserFiles/Events/' + this.image + '" alt="" />';
            }
            html += description + '<br /><hr />' +
            '<strong>Location</strong>: ' + this.location + ', ' + this.city;
            var date = new Date(this.startDate);
            this.startDate = date.getDate() + ' ' + calendar.months[date.getMonth()] + ' ' + date.getFullYear();
            if(this.startTime !== null){
                html +=  '<br /><strong>Start Time: </strong>' + this.startDate + ' on ' + this.startTime;
            }
            var ending = new Date(this.endDate);
            this.endDate = ending.getDate() + ' ' + calendar.months[ending.getMonth()] + ' ' + ending.getFullYear();
            if(this.endTime !== null){
                html +=  '<br /><strong>End Time: </strong>' + this.endDate + ' on ' +  this.endTime;
            }
            if(this.phone !== ''){
                html +=  '<br /><strong>Phone: </strong>' + this.phone;
            }
            if(this.email !== ''){
                html +=  '<br /><strong>Email: </strong>' + '<a href="mailto:' + this.email + '">' + this.email + '</a>';
            }
            /*if(this.url !== null){
                html +=  '<br /><strong>URL: <a href="'+ this.url +'" target="_blank">Find out more <img class="vmiddle" src="/calendar/images/arrow1_ne.gif" alt=""></a></strong>';
            }*/
            html +=  '</div></div>';

            $('#' + this.id, calendar.getContainer()).append(html);
            $('#calendarPopup').dialog({
                width: 600,
                bgiframe: true,
                autoOpen: false,
                modal: true,
                title: this.title
            })
            $('#calendarPopup').dialog('open');
        }
    },

    classMethods:{
        find: function(id){
            $.each(calendar.events, function(){
                if(this.id === id){
                    this.buildPopup();
                    return false;
                }
            })
        },

        destroy: function(){
            $('#calendarPopup').remove();
        }
    }
})