oaup9/o2web/source/x_component_Calendar/DayView.js

MWF.require("MWF.widget.Calendar", null, false);
var MWFCalendarDayView = MWF.xApplication.Calendar.DayView = new Class({
    Extends: MWF.widget.Common,
    Implements: [Options, Events],

    options: {
        "style": "default",
        "date" : ""
    },
    initialize: function(node, app, options){
        this.setOptions(options);

        this.path = "../x_component_Calendar/$DayView/";
        this.cssPath = "../x_component_Calendar/$DayView/"+this.options.style+"/css.wcss";
        this._loadCss();
        this.app = app;
        this.container = $(node);
        this.weekBegin = this.app.calendarConfig.weekBegin || "0";
        this.load();
    },
    load: function(){
        this.node = new Element("div.node", {"styles": this.css.node}).inject(this.container);
        this.node.setStyle("position","relative");
        //this.loadSideBar();
        this.resetNodeSize();
        //this.app.addEvent("resize", this.resetNodeSize.bind(this));
        this.loadCalendar();
    },

    resetNodeSize: function(){
        //if( this.app.inContainer )return;
        var size = this.container.getSize();
        var y = size.y-50;

        this.node.setStyle("height", ""+y+"px");
        //this.node.setStyle("margin-top", "60px");

        if( this.calendar ){
            this.calendar.resetBodySize()
        }
    },

    loadCalendar: function(){
        var date = "";
        if( this.options.date ){
            date = Date.parse( this.options.date )
        }else{
            date = new Date();
        }
        this.calendar = new MWFCalendarDayView.Calendar(this, date  );

    },
    hide: function(){
        var fx = new Fx.Morph(this.node, {
            "duration": "300",
            "transition": Fx.Transitions.Expo.easeOut
        });
        fx.start({
            "opacity": 0
        }).chain(function(){
            this.node.setStyle("display", "none");
        }.bind(this));

    },
    show: function(){
        this.node.setStyles(this.css.node);
        var fx = new Fx.Morph(this.node, {
            "duration": "800",
            "transition": Fx.Transitions.Expo.easeOut
        });
        //this.app.fireAppEvent("resize");
        fx.start({
            "opacity": 1
            //"left": MWFCalendar.LeftNaviWidth+"px"
        }).chain(function(){
            //this.node.setStyles({
            //    "position": "static",
            //    "width": "auto"
            //});
            if( this.calendar.dataTable_wholeDay ){
                this.calendar.dataTable_wholeDay.setStyle("display","");
            }
        }.bind(this));
    },
    reload: function(){
        if (this.calendar) this.calendar.reLoadCalendar();
    },
    recordStatus : function(){
        return {
            date : (this.calendar && this.calendar.date) ? this.calendar.date.format( "db" ) : ""
        };
    },
    destroy: function(){
        if (this.calendar){
            this.calendar.destroy();
        }
        this.node.destroy();
        //MWF.release( this );
    }
});


MWFCalendarDayView.DayWidth;
MWFCalendarDayView.HourHeight = 48;
MWFCalendarDayView.DayHeight = MWFCalendarDayView.HourHeight*24;
MWFCalendarDayView.DayMsec = 3600 * 24 * 1000;

MWFCalendarDayView.Calendar = new Class({
    Implements: [Events],
    initialize: function(view, date){
        this.view = view;
        this.css = this.view.css;
        this.container = this.view.node;
        this.app = this.view.app;
        this.lp = this.app.lp;
        this.date = date || new Date();
        this.today = new Date();
        this.load();
    },
    load: function(){

        this.startTime = new Date( this.date.get("year"), this.date.get("month"), this.date.get("date"), 0, 0, 0 );
        this.startTimeStr = this.startTime.format( "db" );

        this.endTime = new Date( this.date.get("year"), this.date.get("month"), this.date.get("date"), 23, 59, 59 );
        this.endTimeStr = this.endTime.format( "db" );

        this.titleNode = new Element("div", {"styles": this.css.calendarTitleNode}).inject(this.container);


        this.titleTable = new Element("table", {
            "styles": this.css.titleTable,
            "border": "0",
            "cellPadding": "0",
            "cellSpacing": "0"
        }).inject(this.container);

        this.scrollNode = new Element("div.scrollNode", {
            "styles": this.css.scrollNode  //this.app.inContainer ? this.css.scrollNode_inContainer : this.css.scrollNode
        }).inject(this.container);
        this.contentWarpNode = new Element("div.contentWarpNode", {
            "styles": this.css.contentWarpNode
        }).inject(this.scrollNode);

        this.contentContainerNode = new Element("div.contentContainerNode",{
            "styles" : this.css.contentContainerNode
        }).inject(this.contentWarpNode);
        this.bodyNode = new Element("div.bodyNode", {
            "styles": this.css.contentNode
        }).inject(this.contentContainerNode);

        //this.bodyNode = new Element("div", {"styles": this.css.calendarBodyNode}).inject(this.container);

        this.setTitleNode();
        this.loadTitleTable();
        this.loadBodyTable();

        //this.resetBodySize();

        this.loadDataTable_wholeDay();
        this.loadDataTable();

        this.loadCalendar();

    },
    setTitleNode: function(){
        this.prevDayNode =  new Element("div.o2icon-triangle_left", {"styles": this.css.calendarPrevDayNode}).inject(this.titleNode);

        var text = this.date.format(this.lp.dateFormatDay) + "，" + this.lp.weeks.arr[ this.date.getDay() ];


        this.titleTextNode = new Element("div", {"styles": this.css.calendarTitleTextNode, "text": text}).inject(this.titleNode);

        this.nextDayNode =  new Element("div.o2icon-triangle_right", {"styles": this.css.calendarNextDayNode}).inject(this.titleNode);

        this.prevDayNode.addEvents({
            "mouseover": function(){
                this.prevDayNode.setStyles(this.css.calendarPrevDayNode_over);
                this.prevDayNode.addClass("mainColor_color");
            }.bind(this),
            "mouseout": function(){
                this.prevDayNode.setStyles(this.css.calendarPrevDayNode);
                this.prevDayNode.removeClass("mainColor_color");
            }.bind(this),
            "mousedown": function(){this.prevDayNode.setStyles(this.css.calendarPrevDayNode_down);}.bind(this),
            "mouseup": function(){this.prevDayNode.setStyles(this.css.calendarPrevDayNode_over);}.bind(this),
            "click": function(){this.changeDayPrev();}.bind(this)
        });
        this.nextDayNode.addEvents({
            "mouseover": function(){
                this.nextDayNode.setStyles(this.css.calendarNextDayNode_over);
                this.nextDayNode.addClass("mainColor_color");
            }.bind(this),
            "mouseout": function(){
                this.nextDayNode.setStyles(this.css.calendarNextDayNode);
                this.nextDayNode.removeClass("mainColor_color");
            }.bind(this),
            "mousedown": function(){this.nextDayNode.setStyles(this.css.calendarNextDayNode_down);}.bind(this),
            "mouseup": function(){this.nextDayNode.setStyles(this.css.calendarNextDayNode_over);}.bind(this),
            "click": function(){this.changeDayNext();}.bind(this)
        });
        this.titleTextNode.addEvents({
            "mouseover": function(){
                this.titleTextNode.setStyles(this.css.calendarTitleTextNode_over);
                this.titleTextNode.addClass("mainColor_color");
            }.bind(this),
            "mouseout": function(){
                this.titleTextNode.setStyles(this.css.calendarTitleTextNode);
                this.titleTextNode.removeClass("mainColor_color");
            }.bind(this),
            "mousedown": function(){this.titleTextNode.setStyles(this.css.calendarTitleTextNode_down);}.bind(this),
            "mouseup": function(){this.titleTextNode.setStyles(this.css.calendarTitleTextNode_over);}.bind(this)
            //"click": function(){this.changeDaySelect();}.bind(this)
        });
        this.createDaySelector();
    },
    changeDayPrev: function(){
        this.date.decrement("day", 1);
        var text = this.date.format(this.lp.dateFormatDay) + "，" + this.lp.weeks.arr[ this.date.getDay() ];
        this.titleTextNode.set("text", text);
        this.reLoadCalendar();
    },
    changeDayNext: function(){
        this.date.increment("day", 1);
        var text = this.date.format(this.lp.dateFormatDay) + "，" + this.lp.weeks.arr[ this.date.getDay() ];
        this.titleTextNode.set("text", text);
        this.reLoadCalendar();
    },
    changeDaySelect: function(){
        if (!this.monthSelector) this.createDaySelector();
        //this.monthSelector.show();
    },
    createDaySelector: function(){
        MWF.require("MWF.widget.Calendar", function(){
            this.calendar = new MWF.widget.Calendar(this.titleTextNode, {
                "style":"meeting_blue",
                "target": this.node,
                "baseDate" : this.date,
                "todayClass": "mainColor_bg",
                "onQueryComplate": function(e, dv, date){
                    var selectedDate = new Date.parse(dv);
                    this.changeDayTo(selectedDate);
                }.bind(this)
            });
        }.bind(this));
    },
    changeDayTo: function(d){
        this.date = d;

        var text = this.date.format(this.lp.dateFormatDay) + "，" + this.lp.weeks.arr[ this.date.getDay() ];

        this.titleTextNode.set("text", text);

        this.reLoadCalendar();
    },
    isToday : function( d ){
        var today = new Date();
        if( today.get("year") != d.get("year") )return false;
        if( today.get("month") != d.get("month") )return false;
        if( today.get("date") != d.get("date") )return false;
        return true;
    },
    isSameday : function( d1, d2 ){
        if( d1.get("year") != d2.get("year") )return false;
        if( d1.get("month") != d2.get("month") )return false;
        if( d1.get("date") != d2.get("date") )return false;
        return true;
    },
    loadTitleTable: function(){
        if( !this.wholeDayTd ){
            var tr = new Element( "tr").inject( this.titleTable );
            var td = new Element( "td.calendarTableCell", {
                "tdType" : "hour",
                styles : this.css.calendarTableCell_hour
            } ).inject( tr );
            td.setStyle("min-height","80px");
            var node = new Element("div",{
                text : this.lp.allDay
            }).inject( td );
            this.wholeDayTd =  new Element( "td" , {
                "tdType" : "calendar",
                "styles" : this.css.calendarTableCell
            }).inject( tr );

            this.wholeDayTd.addEvent("click", function(ev){
                this.setCurrentTd( this.wholeDayTd );
            }.bind(this));

            this.wholeDayTd.addEvent("dblclick", function(ev){
                this.cancelCurrentTd();
                var dateStr = this.date.format("%Y-%m-%d");
                var form = new MWF.xApplication.Calendar.EventForm(this,{}, {
                    startTime : Date.parse( ev.target.retrieve("dateStr")) ,
                    endTime : Date.parse( ev.target.retrieve("dateStr")),
                    isWholeday : true
                }, {app:this.app});
                form.view = this;
                form.create();
            }.bind(this));
        }
    },


    loadBodyTable: function(){
        this.calendarTable = new Element("table", {
            "styles": this.css.calendarTable,
            "height": "100%",
            "border": "0",
            "cellPadding": "0",
            "cellSpacing": "0"
        }).inject(this.bodyNode);

        this.hourTdMap = {};
        for( var i=0; i<24; i++ ){
            var tr = new Element( "tr").inject( this.calendarTable );
            var td = new Element( "td.calendarTableCell", {
                "tdType" : "hour",
                styles : this.css.calendarTableCell_hour,
                valign : "top"
            } ).inject( tr );
            var node = new Element("div",{
                text : i + ":00"
            }).inject( td );
            td.store("hour",i );

            td = this.hourTdMap[i] = new Element( "td" , {
                "tdType" : "calendar",
                "styles" : this.css.calendarTableCell
            }).inject( tr );
            td.store("hour",i );

            td.addEvent("click", function(ev){
                this.setCurrentTd( ev.target );
            }.bind(this));

            td.addEvent("dblclick", function(ev){
                this.cancelCurrentTd();
                var hour = ev.target.retrieve("hour");
                var dateStr = this.date.format( "%Y-%m-%d" );
                var form = new MWF.xApplication.Calendar.EventForm(this,{}, {
                    startTime : Date.parse( dateStr + " " +hour+":00") ,
                    endTime : Date.parse( dateStr + " " + (hour+1)+":00" )
                }, {app:this.app});
                form.view = this;
                form.create();
            }.bind(this));

            new Drag(td, {
                "onStart": function(dragged, e){
                    this.cancelCurrentTd();
                    this.cellDragStart(dragged, e);
                }.bind(this),
                "onDrag": function(dragged, e){
                    this.cellDrag(dragged, e);
                }.bind(this),
                "onComplete": function(dragged, e){
                    this.completeDrag(dragged, e);
                }.bind(this)
            });
        }

    },
    setCurrentTd : function(td){
        td.setStyle("background-color","#fffdf2");
        if( this.currentSelectedTd ){
            var flag = this.isToday( this.date );
            this.currentSelectedTd.setStyle("background-color",flag?"#F8FBFF":"#fff");
        }
        this.currentSelectedTd = td;
    },
    cancelCurrentTd : function(){
        if( this.currentSelectedTd ){
            var flag = this.isToday( this.date );
            this.currentSelectedTd.setStyle("background-color",flag?"#F8FBFF":"#fff");
        }
        this.currentSelectedTd = null;
    },

    reLoadCalendar: function(){
        this.startTime = new Date( this.date.get("year"), this.date.get("month"), this.date.get("date"), 0, 0, 0 );
        this.startTimeStr = this.startTime.format( "db" );

        this.endTime = new Date( this.date.get("year"), this.date.get("month"), this.date.get("date"), 23, 59, 59 );
        this.endTimeStr = this.endTime.format( "db" );

        if( this.day ){
            this.day.destroy();
        }
        this.day = null;

        if( this.wholeDay ){
            this.wholeDay.destroy();
        }
        this.wholeDay = null;

        //this.calendarTable.getElements("td[tdType='calendar']").each( function(td){
        //    td.empty();
        //}.bind(this));

        this.loadTitleTable();

        this.loadCalendar();
    },
    loadCalendar : function(){
        this.app.currentDate = this.date.clone();

        this.dateIndexMap = null;
        this.titleTable.getElement("td:nth-child(1)").setStyle("height", "auto") ;
        this.loadData( function( json ){
            this.loadwholeDay(this.wholeDayData);
            this.loadDataDay( this.inOneDayEvents );
            this.resetBodySize();
            this.setTodayTds();
            this.cancelCurrentTd();
        }.bind(this));

    },
    setTodayTds : function(){
        if( this.isToday( this.date ) ){
            this.wholeDayTd.setStyle("background-color","#f8fbff");
            Object.each( this.hourTdMap, function( td ){
                td.setStyle("background-color","#f8fbff");
            });
            var now = new Date();
            var nowTd =  this.nowTd = this.hourTdMap[ now.get("hours") ];
            var mintues = now.get("minutes");
            mintues = mintues < 2 ? 2 : mintues;

            var nowTdPosition = nowTd.getPosition(this.bodyNode);
            this.nowTimeNode = new Element("div",{
                styles : {
                    "position" : "absolute",
                    "left" : nowTdPosition.x,
                    "top" : nowTdPosition.y + ( (mintues - 2) / 60 ) * MWFCalendarDayView.HourHeight,
                    "height" : "2px",
                    "width" : MWFCalendarDayView.DayWidth,
                    "background-color" : "#ff3333"
                }
            }).inject(this.bodyNode);
            this.isSetToday = true;
        }else if( this.isSetToday ){
            this.wholeDayTd.setStyle("background-color","#fff");
            Object.each( this.hourTdMap, function( td ){
                td.setStyle("background-color","#fff");
            });
            if(this.nowTimeNode)this.nowTimeNode.destroy();
            if(this.nowTd)this.nowTd = null;
            this.isSetToday = false;
        }
    },
    loadData : function( callback ){
        this.app.actions.listEventWithFilter( {
            calendarIds : this.app.getSelectedCalendarId(),
            startTime : this.startTimeStr,
            endTime : this.endTimeStr //,
            //createPerson : this.app.userName
        }, function(json){
            this.wholeDayData = ( json.data  && json.data.wholeDayEvents ) ? json.data.wholeDayEvents : [];
            this.inOneDayEvents = [];
            (( json.data && json.data.inOneDayEvents) ? json.data.inOneDayEvents : []).each( function( d ){
                if(d.inOneDayEvents.length > 0 ){
                    this.inOneDayEvents.push( d );
                }
            }.bind(this));
            //json.data.each( function(d){
            //    var flag = false;
            //    if( d.isAllDayEvent ){
            //        flag = true;
            //    }else if( d.startTime.split(" ")[0] != d.endTime.split(" ")[0] ){
            //        flag = true;
            //    }
            //    if( flag ){
            //        this.wholeDayData.push( d )
            //    }else{
            //        this.dayData.push(d)
            //    }
            //}.bind(this));
            if(callback)callback();
        }.bind(this));
    },
    loadDataTable_wholeDay: function( json ){

        this.dataTable_wholeDay = new Element("table.dataTable", {
            "styles": this.css.calendarTable,
            "height" : "0",
            "border": "0",
            "cellPadding": "0",
            "cellSpacing": "0"
        }).inject(this.container);
        this.dataTable_wholeDay.setStyles({
            "display" : "none",
            "position":"absolute",
            "top" : "51px",
            "left" : "0px",
            "margin": "0px auto 0px 12px"
        });
        var tr = new Element("tr").inject(this.dataTable_wholeDay);

        new Element( "td" , {
            "styles" : {"height":"0px" ,"position":"relative"}
        }).inject( tr );

        this.dataTd_wholeDay = new Element( "td" , {
            "valign" : "top",
            "styles" : {"height":"0px","position":"relative"}
        }).inject( tr );
    },
    loadwholeDay : function( json ){
        this.wholeDay = new MWFCalendarDayView.Calendar.wholeDay( this, json, this.date);
    },

    loadDataTable: function( json ){
        this.bodyNode.setStyle("position","relative");

        this.dataTable = new Element("table.dataTable", {
            "styles": this.css.calendarTable,
            "height": "0",
            "border": "0",
            "cellPadding": "0",
            "cellSpacing": "0"
        }).inject(this.bodyNode);
        this.dataTable.setStyles({
            "position":"absolute",
            "top" : "0px",
            "left" : "0px"
        });
        var tr = new Element("tr").inject(this.dataTable);

        new Element( "td" , {
            "styles" : {"height":"0px","position":"relative"}
        }).inject( tr );

        this.dataTd = new Element( "td" , {
            "styles" : {"height":"0px","position":"relative"}
        }).inject( tr );
    },
    loadDataDay : function(data){
        if( data.length > 0 ){
            this.loadDay( data[0].inOneDayEvents );
        }
        //var dataArray = [];
        //json.each( function( d ){
        //    var date2 = Date.parse(d.startTime );
        //    if( this.isSameday( this.date, date2 ) ){
        //        dataArray.push( d );
        //    }
        //}.bind(this));
        //if( dataArray.length ){
        //    this.loadDay( dataArray );
        //}
    },
    loadDay: function(  dataArray ){
        this.day = new MWFCalendarDayView.Calendar.Day( this.dataTd, this.date, this, dataArray);
    },

    resetBodySize: function(){
        //if( this.app.inContainer )return;
        var size = this.container.getSize();
        var titleSize = this.titleNode.getSize();
        var titleTableSize = this.titleTable.getSize();
        var y = size.y-titleSize.y-titleTableSize.y;
        //this.bodyNode.setStyle("height", ""+y+"px");

        if (this.contentWarpNode){
            this.contentWarpNode.setStyles({
                "width": (size.x - 40) +"px"
            });
        }

        this.scrollNode.setStyle("height", ""+y+"px");

        var hourTdX = 60;
        var tdX = MWFCalendarDayView.DayWidth = size.x - 40 - hourTdX;
        if(this.calendarTable){
            this.calendarTable.setStyles({
                "width": (size.x - 40) +"px"
            });
            var tr =this.calendarTable.getElement("tr:nth-child(1)");
            tr.getElements("td").each( function( td, i ){
                td.setStyle("width", (i==0 ? hourTdX : tdX )+"px");
            })
        }
        if(this.titleTable){
            this.titleTable.setStyles({
                "width": (size.x - 40) +"px"
            });
            var tr =this.titleTable.getElement("tr:nth-child(1)");
            tr.getElements("td").each( function( td, i ){
                td.setStyle("width", (i==0 ? hourTdX : tdX )+"px");
            })
        }
        if( this.dataTable ){
            this.dataTable.setStyles({
                "width": (size.x - 40) +"px"
            });
            var tr =this.dataTable.getElement("tr:nth-child(1)");
            tr.getElements("td").each( function( td, i ){
                td.setStyle("width", (i==0 ? hourTdX : tdX )+"px");
            })
        }
        if( this.day ){
            this.day.resize();
        }

        if( this.dataTable_wholeDay ){
            this.dataTable_wholeDay.setStyles({
                "width": (size.x - 40) +"px"
            });
            var tr =this.dataTable_wholeDay.getElement("tr:nth-child(1)");
            tr.getElements("td").each( function( td, i ){
                td.setStyle("width", (i==0 ? hourTdX : tdX )+"px");
            })
        }
        if(this.wholeDay){
            this.wholeDay.resize();
        }

        if(this.nowTimeNode){
            this.nowTimeNode.setStyle("width",tdX);
            if(this.nowTd)this.nowTimeNode.setStyle("left", this.nowTd.getPosition(this.bodyNode).x );
        }

        //for( var key in this.dayMap_wholeDay ){
        //    this.dayMap_wholeDay[key].resize();
        //}

    },
    reload : function(){
        this.view.reload();
    },
    destroy: function(){
        if( this.day ){
            this.day.destroy();
        }
        if( this.wholeDay ){
            this.wholeDay.destroy();
        }


        this.container.empty();
    },

    getIndexByPage: function( page ){
        var pos = this.calendarTable.getPosition();

        this.pageOffsetHeight = page.y - pos.y;
        var row = ( page.y - pos.y ) / MWFCalendarDayView.HourHeight;
        if( row < 0 || row > 24 )return null;
        return Math.floor(row);
    },
    getIndexListByRange : function( index1, index2 ){
        var minIndex = Math.min( index1, index2 );
        var maxIndex = Math.max( index1, index2 );
        var result = [];
        for( var i = minIndex; i<=maxIndex; i++ ){
            result.push( i );
        }
        return result;
    },
    cellDragStart: function(td, e){
        td.store("index", this.getIndexByPage(e.page ) );
        this.scrollNodeHeight = this.scrollNode.getSize().y;
    },
    cellDrag: function(td, e){
        var orgIndex = td.retrieve( "index" );
        var curIndex = this.getIndexByPage( e.page );
        if( !curIndex )return;
        var indexs = this.getIndexListByRange( orgIndex, curIndex );
        var flag = this.isToday( this.date );
        if( this.selectedIndexRange ){
            var oldIndex = this.selectedIndexRange;
            this.selectedIndexRange.each( function( index ){
                if( !indexs.contains(index) ){
                    this.hourTdMap[index].setStyle("background-color", flag ?  "#F8FBFF" : "#fff");
                }
            }.bind(this));
            indexs.each( function( index ){
                if( !this.selectedIndexRange.contains(index) ){
                    this.hourTdMap[index].setStyle("background-color", "#fffdf2")
                }
            }.bind(this))
        }else{
            for( var i=0; i<indexs.length; i++ ){
                this.hourTdMap[indexs[i]].setStyle("background-color", "#fffdf2")
            }
        }
        this.selectedIndexRange = indexs;

        var scrollNodeTop = this.scrollNode.getScroll().y;
        if(( this.pageOffsetHeight + MWFCalendarDayView.HourHeight * 1.5) > ( this.scrollNodeHeight + scrollNodeTop )){
            window.setTimeout( function(){
                this.scrollNode.scrollTo(0, scrollNodeTop + MWFCalendarDayView.HourHeight )
            }.bind(this), 200)
        }else if( this.pageOffsetHeight - MWFCalendarDayView.HourHeight * 1.5 < scrollNodeTop ){
            window.setTimeout( function(){
                this.scrollNode.scrollTo(0, scrollNodeTop - MWFCalendarDayView.HourHeight )
            }.bind(this), 200)
        }
    },
    completeDrag: function(td, e){
        var flag = this.isToday( this.date );
        if( this.selectedIndexRange && this.selectedIndexRange.length ){
            this.selectedIndexRange.each( function( index ){
                this.hourTdMap[index ].setStyle("background-color", flag ?  "#F8FBFF" : "#fff");
            }.bind(this));
            var beginIndex = this.selectedIndexRange[0];
            var endIndex = this.selectedIndexRange.getLast();
            var beginTime = this.date.format("%Y-%m-%d") + " " + beginIndex+":00";
            var endTime = this.date.format("%Y-%m-%d") + " " + endIndex+":59";
            var form = new MWF.xApplication.Calendar.EventForm(this,{}, {
                startTime : beginTime ,
                endTime : endTime
            }, {app:this.app});
            form.view = this;
            form.create();

            this.selectedIndexRange = null;
        }
    }

});

MWFCalendarDayView.Calendar.wholeDay = new Class({
    Implements: [Events],
    initialize: function( calendar, data, date){
        this.calendar = calendar;
        this.view = this.calendar.view;
        this.css = this.calendar.css;
        this.app = this.calendar.app;
        this.date = date.clone();
        this.data = data;
        this.load();
    },
    load: function(){
        //this.startTime = new Date( this.date.get("year"), this.date.get("month"), this.date.get("date"), 0, 0, 0 );
        //this.endTime = new Date( this.date.get("year"), this.date.get("month"), this.date.get("date"), 23, 59, 59 );

        this.startTime = this.calendar.startTime;
        this.endTime = this.calendar.endTime;

        this.rangeList = [];
        this.rangeObject = {};
        this.data.each( function(d , i){
            var range = this.getTimeRange( d.startTime, d.endTime );
            if( !range )return null;
            d.range = range;
            d.range.id = d.id;
            d.range.data = d;
            this.rangeList.push( range );
            this.rangeObject[d.id] = range;
        }.bind(this));

        this.sortRange();

        this.calendar.titleTable.getElement("td:nth-child(1)").setStyle("height", 24*this.rangeList.length + 3) ;

        this.documentList = [];
        this.rangeList.each( function(r , i){
            var d = r.data;
            if( !d )return null;
            this.documentList.push( new MWFCalendarDayView.Calendar.wholeDayDocument( this, d, r ) );
        }.bind(this))

    },
    sortRange : function(){
        this.rangeList.sort( function( range1, range2 ){
            return range2.diff - range1.diff;
        }.bind(this));
    },
    getTimeRange : function( startTime, endTime ){
        var start = Date.parse(startTime );
        var end = Date.parse(endTime );

        if( end < this.startTime )return null;
        if( this.endTime < start )return null;

        if( start < this.startTime )start = this.startTime.clone();
        if( this.endTime < end )end = this.endTime.clone();

        var end = new Date( end.get("year"), end.get("month"), end.get("date"), 23, 59, 59 );

        start = Date.parse(startTime );
        end = Date.parse(endTime );
        return {
            start : start,
            end : end,
            diff : end - start
        }
    },
    resize: function(){
        if(!this.documentList)return;
        this.documentList.each( function(d){
            d.resize();
        }.bind(this))
    },
    destroy : function(){
        if(!this.documentList)return;
        while( this.documentList.length ){
            this.documentList.pop().destroy()
        }
        this.calendar.dataTd_wholeDay.empty();
    }
});

MWFCalendarDayView.Calendar.wholeDayDocument = new Class({
    initialize: function(day, data, range ){
        this.day = day;
        this.calendar = day.calendar;
        this.view = this.calendar.view;
        this.css = this.calendar.css;
        this.app = this.calendar.app;
        this.date = day.date.clone();
        this.data = data;
        this.range = range;
        this.load();
    },
    load: function(){
        this.container = this.calendar.dataTd_wholeDay;
        var items = this.items = [];
        this.data.dateStart = Date.parse( this.data.startTime );
        this.data.dateEnd = Date.parse( this.data.endTime );


        this.yIndex = this.getUsefulTdYIndex();

        this.createNode();
        //this.range.days.each( function( d, i ){
        //    items.push( new MWFCalendarDayView.Calendar.wholeDayItem( this, d, i ) )
        //}.bind(this))
    },
    getUsefulTdYIndex : function(){
        if( typeOf( this.day.yIndex )=="null" ){
            this.day.yIndex = 0
        }else{
            this.day.yIndex ++
        }
        return this.day.yIndex;
    },
    createNode : function(){
        var lightColor = this.lightColor = MWFCalendar.ColorOptions.getLightColor( this.data.color );

        var node = this.node = new Element("div",{
            styles : {
                position : "absolute",
                "overflow" : "hidden",
                "height" : "20px",
                "line-height" : "20px",
                "border-top" : "1px solid " + lightColor,
                "border-bottom" : "1px solid " + lightColor,
                "background-color": lightColor
            },
            events : {
                click : function(){
                    var form = new MWF.xApplication.Calendar.EventForm(this, this.data, {
                        isFull : true
                    }, {app:this.app});
                    form.view = this.view;
                    this.calendar.app.isEventEditable(this.data) ? form.edit() : form.open();
                }.bind(this),
                "mouseover" : function () {
                    this.node.setStyle("border-color", this.data.color );
                }.bind(this),
                "mouseout" : function () {
                    this.node.setStyle("border-color", this.lightColor );
                }.bind(this)
            }
        }).inject( this.container );

        node.setStyles(this.getCoordinate());

        if( !this.beginDateOutRange ){
            node.setStyles({
                "border-left" : "1px solid " + lightColor,
                "border-top-left-radius" : "10px",
                "border-bottom-left-radius" : "10px"
            })
        }
        if( !this.endDateOutRange ){
            node.setStyles({
                "border-right" : "1px solid " + lightColor,
                "border-top-right-radius" : "10px",
                "border-bottom-right-radius" : "10px"
            })
        }

        //if( this.isFirst ){
        var timeNode = new Element("div",{
            styles : {
                "font-size" : "10px",
                "padding-left" : "2px",
                "float" : "left"
            },
            text : this.data.dateStart.format("%m-%d %H:%M") + this.app.lp.to + this.data.dateEnd.format("%m-%d %H:%M")
        }).inject( node );

        var titleNode = new Element("div",{
            styles : {
                "padding-left" : "5px",
                "font-size" : "12px",
                "float" : "left"
            },
            text : this.data.title
        }).inject( node );
        //}


        this.tooltip = new MWF.xApplication.Calendar.EventTooltip(this.app.content, this.node, this.app, this.data, {
            axis : "y", "delay" : 350
        });
        this.tooltip.view = this.view;
    },
    getCoordinate : function(){
        var data = this.data;
        var range = this.range;
        var top = this.yIndex * 24;

        var dateStart = this.day.startTime;
        var dateEnd = this.day.endTime;

        if( this.data.dateStart < dateStart ){
            this.beginDateOutRange = true;
        }else{
            this.beginDateOutRange = false;
            dateStart = this.data.dateStart;
        }

        if( this.data.dateEnd > dateEnd ){
            this.endDateOutRange = true;
        }else{
            this.endDateOutRange = false;
            dateEnd = this.data.dateEnd;
        }
        var diff = dateEnd - dateStart;

        var width = (  diff / MWFCalendarDayView.DayMsec  ) * MWFCalendarDayView.DayWidth - 2;
        var left = ( ( dateStart - this.day.startTime ) / MWFCalendarDayView.DayMsec ) * MWFCalendarDayView.DayWidth + 3;
        //var marginRight = ( ( this.weekDateEnd - dateEnd ) / MWFCalendarDayView.DayMsec) * MWFCalendarDayView.DayWidth;
        return {
            top : top + 2,
            left : left,
            width : width // + ( !this.isLast ? 2 : -2 ) //,
            //"margin-left" : marginLeft,
            //"margin-right" : marginRight
        }
    },
    resize : function(){
        this.node.setStyles(this.getCoordinate());
    },
    reload: function(){
        if( this.tooltip )this.tooltip.destroy();
        this.view.reload();
    },
    destroy : function(){
        if( this.tooltip )this.tooltip.destroy();
        this.node.destroy();
    }
});

MWFCalendarDayView.Calendar.Day = new Class({
    Implements: [Events],
    initialize: function(container, date, calendar,  data){
        this.container = container;
        this.calendar = calendar;
        this.view = this.calendar.view;
        this.css = this.calendar.css;
        this.app = this.calendar.app;
        this.date = date.clone();
        this.data = data;
        this.calendars = [];
        this.load();
    },
    load: function(){

        this.day = this.date.getDate();
        this.month = this.date.getMonth();
        this.year = this.date.getFullYear();

        //this.startTime = new Date( this.year, this.month, this.day, 0, 0, 0 );
        //this.endTime = new Date( this.year, this.month, this.day, 23, 59, 59 );

        this.startTime = this.calendar.startTime;
        this.endTime = this.calendar.endTime;

        this.rangeList = [];
        this.rangeObject = {};
        this.data.each( function(d , i){
            var range = this.getTimeRange( d.startTime, d.endTime );
            if( !range )return null;
            d.range = range;
            d.range.data = d;
            d.range.id = d.id;
            this.rangeList.push( range );
            this.rangeObject[d.id] = range;
        }.bind(this));

        this.sortRange();


        var length = this.data.length;
        this.documentList = [];
        this.rangeList.each( function(r , i){
            r.index = this.rangeList.indexOf( r );
            var d = r.data;
            //var coordinate = this.getCoordinate( d, range );
            this.documentList.push( new MWFCalendarDayView.Calendar.Document(this.container, this, d, r ) );
        }.bind(this))
    },
    sortRange : function(){
        this.rangeList.sort( function(range1, range2){
            return range1.startTime - range2.startTime;
        });
    },
    getTimeRange: function( bDate1,  eDate1 ){
        var bDate = typeOf(bDate1) == "string" ? Date.parse(bDate1) : bDate1;
        var eDate = typeOf(eDate1) == "string" ? Date.parse(eDate1) : eDate1;
        if( eDate <= this.startTime ){ //比当天天12点更晚
            return null;
        }
        if( this.endTime <= bDate ){
            return null;
        }
        var range = {
            start: ( bDate <= this.startTime  ) ? [0, 0, 0] : [bDate.get("hr"), bDate.get("min"), bDate.get("sec")],
            end: ( this.endTime <= eDate ) ? [23, 59, 59] : [eDate.get("hr"), eDate.get("min"), eDate.get("sec")]
        };
        range.startTime = new Date( this.year, this.month, this.day, range.start[0], range.start[1], range.start[2] );
        range.endTime = new Date( this.year, this.month, this.day, range.end[0], range.end[1], range.end[2] );
        range.diff = range.endTime - range.startTime;
        return range;
    },
    resize : function(){
        if(!this.documentList)return;
        this.documentList.each( function( doc ){
            doc.resize();
        }.bind(this))
    },
    reload: function(){
        this.view.reload();
    },
    destroy : function(){
        while( this.documentList.length > 0 ){
            this.documentList.pop().destroy();
        }
        this.container.empty();
    }
});

MWFCalendarDayView.Calendar.Document = new Class({
    initialize: function(container, day, data, range ){
        this.container = container;
        this.day = day;
        this.calendar = day.calendar;
        this.view = this.calendar.view;
        this.css = this.calendar.css;
        this.app = this.calendar.app;
        this.date = day.date.clone();
        this.data = data;
        this.range = range;
        this.load();
    },
    load: function(){

        var lightColor = this.lightColor = MWFCalendar.ColorOptions.getLightColor( this.data.color );

        var node = this.node = new Element("div",{
            styles : {
                position : "absolute",
                border : "1px solid "+lightColor,
                "background-color" : lightColor,
                "overflow" : "hidden",
                "border-radius" : "5px",
                "max-width" : "150px"
            },
            events : {
                click : function(){
                    var form = new MWF.xApplication.Calendar.EventForm(this, this.data, {
                        isFull : true
                    }, {app:this.app});
                    form.view = this.view;
                    this.calendar.app.isEventEditable(this.data) ? form.edit() : form.open();
                }.bind(this),
                "mouseover" : function () {
                    this.node.setStyle("border-color", this.data.color );
                }.bind(this),
                "mouseout" : function () {
                    this.node.setStyle("border-color", this.lightColor );
                }.bind(this)
            }
        }).inject( this.container );
        node.setStyles(this.getCoordinate());

        var timeNode = new Element("div",{
            styles : {
                "font-size" : "10px",
                "padding-top" : "2px",
                "padding-left" : "2px"
            },
            text : this.range.startTime.format("%H:%M") + "-" + this.range.endTime.format("%H:%M")
        }).inject( node );

        var titleNode = new Element("div",{
            styles : {
                "padding-top" : "7px",
                "padding-left" : "5px",
                "font-size" : "12px"
            },
            text : this.data.title
        }).inject( node );

        this.tooltip = new MWF.xApplication.Calendar.EventTooltip(this.app.content, this.node, this.app, this.data, {
            axis : "x", "delay" : 350
        });
        this.tooltip.view = this.view;
    },
    resize : function(){
        this.node.setStyles(this.getCoordinate());
    },
    getCoordinate : function(){
        var data = this.data;
        var range = this.range;
        var width_div = 4;
        var top_div = 0;
        if(Browser.name === "ie" ){
            width_div = 4;
            top_div = -2
        }
        var height = Math.floor( ( ( range.endTime - range.startTime ) / MWFCalendarDayView.DayMsec ) * MWFCalendarDayView.DayHeight)-width_div;

        if(height < 16) height = 16;

        var top = Math.floor( ( ( range.startTime - this.day.startTime ) / MWFCalendarDayView.DayMsec ) * MWFCalendarDayView.DayHeight)-top_div;
        //var width = Math.floor(  MWFCalendarDayView.DayWidth / length )-2;
        //var left = ( width + 2)* index + 1;

        //var width = Math.floor(  MWFCalendarDayView.DayWidth / range.path.length  )-5;
        //var left = ( width + 5)* range.path.indexOf( data.id ) + 3;

        var width = Math.floor(  MWFCalendarDayView.DayWidth / this.day.rangeList.length  )-5;
        if( width > 150 ){
            width = 150;
        }
        var left = ( width + 5)* this.range.index + 3;
        return {
            top : top,
            left : left,
            width : width,
            height : height
        }
    },
    reload: function(){
        if( this.tooltip )this.tooltip.destroy();
        this.view.reload();
    },
    destroy: function(){
        if( this.tooltip )this.tooltip.destroy();
        this.node.destroy()
    }
});