    /*
     * This is the view used internally by the panel that displays overflow events in the
     * month view. Anytime a day cell cannot display all of its events, it automatically displays
     * a link at the bottom to view all events for that day. When clicked, a panel pops up that
     * uses this view to display the events for that day.
     */
    Ext.ensible.cal.MonthDayDetailView = Ext.extend(Ext.BoxComponent, {
        initComponent : function(){
            Ext.ensible.cal.CalendarView.superclass.initComponent.call(this);

            this.addEvents({
                eventsrendered: true
    		});

            if(!this.el){
                this.el = document.createElement('div');
            }
        },

        afterRender : function(){
            this.tpl = this.getTemplate();

            Ext.ensible.cal.MonthDayDetailView.superclass.afterRender.call(this);

            this.el.on({
                'click': this.view.onClick,
    			'mouseover': this.view.onMouseOver,
    			'mouseout': this.view.onMouseOut,
                scope: this.view
            });
        },

        getTemplate : function(){
            if(!this.tpl){
    	        this.tpl = new Ext.XTemplate(
                    '',
    	                '',
    						'',
    							'',
    		                        '{markup}',
    							'',
    	                    '',
    	                '',
                    ''
    	        );
            }
            this.tpl.compile();
            return this.tpl;
        },

    	update : function(dt){
    		this.date = dt;
    		this.refresh();
    	},

        refresh : function(){
    		if(!this.rendered){
    			return;
    		}
            var eventTpl = this.view.getEventTemplate(),

    			templateData = [];

    			evts = this.store.queryBy(function(rec){
    				var thisDt = this.date.clearTime(true).getTime(),
                        M = Ext.ensible.cal.EventMappings,
    					recStart = rec.data[M.StartDate.name].clearTime(true).getTime(),
    	            	startsOnDate = (thisDt == recStart),
    					spansDate = false,
                        calId = rec.data[M.CalendarId.name],
                        calRec = this.calendarStore ? this.calendarStore.getById(calId) : null;

                    if(calRec && calRec.data[Ext.ensible.cal.CalendarMappings.IsHidden.name] === true){
                        // if the event is on a hidden calendar then no need to test the date boundaries
                        return false;
                    }

    				if(!startsOnDate){
    					var recEnd = rec.data[Ext.ensible.cal.EventMappings.EndDate.name].clearTime(true).getTime();
    	            	spansDate = recStart < thisDt && recEnd >= thisDt;
    				}
    	            return startsOnDate || spansDate;
    	        }, this);

            Ext.ensible.cal.CalendarView.prototype.sortEventRecordsForDay.call(this, evts);

    		evts.each(function(evt){
                var item = evt.data,
                    M = Ext.ensible.cal.EventMappings;

    			item._renderAsAllDay = item[M.IsAllDay.name] || Ext.ensible.Date.diffDays(item[M.StartDate.name], item[M.EndDate.name]) > 0;
                item.spanLeft = Ext.ensible.Date.diffDays(item[M.StartDate.name], this.date) > 0;
                item.spanRight = Ext.ensible.Date.diffDays(this.date, item[M.EndDate.name]) > 0;
                item.spanCls = (item.spanLeft ? (item.spanRight ? 'ext-cal-ev-spanboth' :
                    'ext-cal-ev-spanleft') : (item.spanRight ? 'ext-cal-ev-spanright' : ''));

    			templateData.push({markup: eventTpl.apply(this.getTemplateEventData(item))});
    		}, this);

    		this.tpl.overwrite(this.el, templateData);
    		this.fireEvent('eventsrendered', this, this.date, evts.getCount());
        },

    	getTemplateEventData : function(evt){
    		var data = this.view.getTemplateEventData(evt);
    		data._elId = 'dtl-'+data._elId;
    		return data;
    	}
    });

    Ext.reg('extensible.monthdaydetailview', Ext.ensible.cal.MonthDayDetailView);