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(!isNaN(z))
                {
                    var currentDate = new Date((oD.getMonth() + 1) + '/' + (z + 1) + '/' + oD.getFullYear());
                    
                    if (currentDate >= todaydate) {
                        x = '<a href="#" class="requestDate" rel="' + month + '/' + z + '/' + year + '"><img src="/webresources/images/icons/add.png" alt="Request Appointment" /></a>' + x;                
                    }
                }                
                
                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();
            
            $('.requestDate').click(function() {                
                self.clearAdd();       
                $('#requestedDate').val($(this).attr('rel'));
                $('#addEvent').dialog({
                    width: 400,
                    bgiframe: true,
                    autoOpen: false,
                    title: 'Request Event On ' + $(this).attr('rel'),
                    beforeclose: function(){                     
                     calendar.clearAdd();  
                     calendar.clearPanels();
                     $('#requestForm').show();   
                     $('#closePopup').addClass('hidden');                 
                    }
                });
                $('#addEvent').dialog('open');                
            });
            
            var from = month + '/1/' + year;
            var to = month + '/' + self.getNumOfDays()[month-1] + '/' + year;
            self.getEvents(from, to);

        },
        
        sendRequest: function() {
            var request = new Object();
            var self = this;
            var msg = '';
            var valid = true;
            
            request.EventDate = $('#requestedDate').val() + ' ' + $('#reqestedTime').val() + ' ' + $('#requestedKind').val();
            request.EventType = $('#addEventTypes').val();
            
            if($('#Name').val() != '')
            {
                request.Name = $('#Name').val();
            } else {
                msg += '<li>Please Enter your Name</li>';
                valid = false;
            }
            
            if($('#Email').val() != '')
            {
                request.Email = $('#Email').val();
            } else {
                msg += '<li>Please Enter your Email</li>';
                valid = false;
            }
            
            if($('#Phone').val() != '')
            {
                request.PhoneNumber = $('#Phone').val();
            } else {
                msg += '<li>Please Enter your Phone Number</li>';
                valid = false;
            }
            
            if($('#Address').val() != '')
            {
                request.Address = $('#Address').val();
            } else {
                msg += '<li>Please Enter your Address</li>';
                valid = false;
            }
            
            request.BikeType = $('#BikeType').val();
            request.Note = $('#Note').val();
            
                       
            if(valid) {
                $.ajax({
                    type: "POST",
                    url: "/calendar/services/CalendarService.asmx/SaveRequest",
                    data: "{'request':" + JSON.stringify(request) + "}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function(result){
                        if(result) {
                            self.clearAdd();
                            self.clearPanels();  
                            msg += '<li>A request is submitted and will appear on the calender once it is approved.</li>';
                            self.showPanel('information',msg);
                            $('#requestForm').hide();
							$('#closePopup').removeClass('hidden');
                        }
                    },
                    error: function(xhr, status, error){
                        var err = eval("(" + xhr.responseText + ")");
                        alert(err.Message)
                    }
                });
            } else {
                self.showPanel('error', msg);
            }            
        },

        clearPanels: function() {
            $('.information li').remove();
            $('.error li').remove();
            $('.information').addClass('hidden');
            $('.error').addClass('hidden');
        },

        showPanel: function(type, message) {
            var self = this;
            
            self.clearPanels();
            $('.' + type).append(message);
            $('.' + type).removeClass('hidden');
            $('.' + type).get(0).scrollIntoView(true);
        },
        
        clearAdd: function() {
            $('#requestedDate').attr('value', '');
            $('#reqestedTime').val('12:00');
            $('#requestedKind').val('AM');
            $('#Name').attr('value', '');
            $('#Email').attr('value', '');
            $('#Phone').attr('value', '');
            $('#Address').attr('value', '');
            $('#BikeType').attr('value', '');
            $('#Note').attr('value', '');            
        },
        
        destroy: function(){
            var self = this;
            $('table', self.getContainer()).remove();
        },

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

        paging: function(){
            var self = this;
            $('#previous a').click(function(){
                self.previousMonth();
                return false;
            })
            $('#next a').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: "/calendar/services/CalendarService.asmx/GetDayEventsByRange",
                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)
                }
            });
        },

        getEventTypes: function(){
            var self = this;
            $.ajax({
                type: "POST",
                url: "/calendar/services/CalendarService.asmx/GetEventTypes",
                data: "{}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(result){
                    self.buildFilters(result);
                },
                error: function(xhr, status, error){
                    var err = eval("(" + xhr.responseText + ")");
                    alert(err.Message)
                }
            });
        },

        buildEvents: function(events){
            var self = this;
            $.each(events, function(){
                var eventType = this.EventType.replace(/ /g, '');
                var event = new CalEvent({
                    id:  eventType + '__' + this.Key,
                    title: this.Title,
                    description: this.Description,
                    startTime: this.StartTime,
                    endTime: this.EndTime,
                    duration: this.Duration,
                    date: this.EventDate,
                    url: this.URL,
                    location: this.Location,
                    type: this.EventType
                });
                self.events.push(event);
            });
            self.setupPopup();
            
            $('#calendarFilter select').trigger('change');
        },

        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 Calendar:</label><select class="field200">';
            html += '<option value="All">View All</option>';
           
            $.each(types, function(){
                var eventType = this.replace(/ /g, '');
                html += '<option value="'+ eventType +'">'+ this +'</option>';
            });
            
            html += '</select></div>';
            $('#calendarPager').before(html);
            
            self.filterEvents();
            
            if(location.pathname.indexOf('/calendar/index.aspx') < 0)
            {                
                if(location.pathname.indexOf('/calendar/service.aspx') == 0) {
                    $('#calendarFilter select').val('ServiceAppointments');
                } else {
                    $('#calendarFilter select').val('FitStudioAppointments')
                }                                
                
                $('#calendarFilter').hide();                
            }
        },

        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: ''
        },

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

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

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

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

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

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

    methods: {
        buildPopup: function(){
            CalEvent.destroy();
            var description = this.description;
            if(description != null){
                if(description.length > 150){
                    description = description.substring(0, 149) + ' ...';
                }
            }
            else{
                description = '';
            }
            

            var html = '<div id="calendarPopup">\n\
                        <div id="calendarDescription">'+ description + '<br /><hr />' +
            '<strong>Event Type</strong>: ' + this.type + '<br />';
            
            if(this.location !== null) {
                html += '<strong>Location</strong>: ' + this.location;
            }
            
            if(this.startTime !== null){
                html +=  '<br /><strong>Start Time: </strong>' + this.startTime;
            }
            if(this.endTime !== null){
                html +=  '<br /><strong>End Time: </strong>' + this.endTime;
            }
            if(this.url !== null && this.url !== ''){
                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: 400,
                bgiframe: true,
                autoOpen: false,
                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();
        }
    }
})