Ext.ns('App');

Ext.onReady(function() {
    Ext.BLANK_IMAGE_URL = 'http://extjs.cachefly.net/ext-3.1.1/resources/images/default/s.gif';
    
    App.SchedulerDemo.init();
});


App.SchedulerDemo = {
    
    // Initialize application
    init : function() {
        
       
        this.scheduler = this.createScheduler();
        
        var vp = new Ext.Viewport({
            layout : 'border',
            items : [
                {
                    region : 'north',
                    title : 'North Panel',
                    padding : 10,
                    height: 200,
                    html : '<p>This example shows you the Sch.plugins.SummaryColumn plugin which can show either the amount of time or the percentage allocated within the visible view. </p>' +
                           '<p>Note that the js for the example code is not minified so it is readable. See <a href="columnsummary.js">columnsummary.js</a>.</p>'
                },
                {
                    region : 'west',
                    padding : 10,
                    title : 'West Panel',
                    width: 200,
                    html : 'Some content...'
                },
                {   
                    xtype : 'tabpanel',
                    region : 'center',
                    activeTab : 0,
                    items : [
                        this.scheduler,
                        {
                            title : 'Tab 2 - Some other component'
                        }
                    ]
                }
            ]
        });
        
        this.populateScheduler();
    },
    
    populateScheduler : function() {
        var today = new Date();
        today.clearTime();
        
        this.scheduler.setView(today, today.add(Date.DAY, 10), 'day', Sch.ViewBehaviour.DayView, this.renderer);
        
        this.scheduler.store.loadData([
                {Id : 'r1', Name : 'Mike'},
                {Id : 'r2', Name : 'Linda'},
                {Id : 'r3', Name : 'Don'},
                {Id : 'r4', Name : 'Karen'},
                {Id : 'r5', Name : 'Doug'},
                {Id : 'r6', Name : 'Peter'}
        ]);
        
        this.scheduler.eventStore.loadData([
                {Id : 'e10', ResourceId: 'r1', Title : 'Assignment 1', StartDate : today.add(Date.DAY, 2), EndDate : today.add(Date.DAY, 6)},
                {Id : 'e11', ResourceId: 'r2', Title : 'Assignment 2', StartDate : today.add(Date.DAY, 3), EndDate : today.add(Date.DAY, 8)},
                {Id : 'e21', ResourceId: 'r3', Title : 'Assignment 3', StartDate : today.add(Date.DAY, 5), EndDate : today.add(Date.DAY, 9)},
                {Id : 'e22', ResourceId: 'r4', Title : 'Assignment 4', StartDate : today.add(Date.DAY, 5), EndDate : today.add(Date.DAY, 7)},
                {Id : 'e32', ResourceId: 'r5', Title : 'Assignment 5', StartDate : today.add(Date.DAY, 4), EndDate : today.add(Date.DAY, 6)},
                {Id : 'e33', ResourceId: 'r6', Title : 'Assignment 6', StartDate : today.add(Date.DAY, 4), EndDate : today.add(Date.DAY, 7)}
        ]);
    },
    
    renderer : function (item, r, row, col, ds, index) {
        return {
            text : item.get('Title')
        };
    },
    
    createScheduler : function() {
        
        // Store holding all the categories
        var resourceStore = new Ext.data.JsonStore({
            sortInfo:{field: 'Name', direction: "ASC"},
            idProperty : 'Id',
            fields : [
                {name: 'Id'},
                {name: 'Name'}
            ]
        });
        
        // Store holding all the events
        var eventStore = new Ext.data.JsonStore({
            sortInfo:{field: 'ResourceId', direction: "ASC"},
            idProperty : 'Id',
            fields : [
                {name: 'Id', type:'string'},
                {name: 'ResourceId'},
                {name: 'StartDate', type : 'date'},
                {name: 'EndDate', type : 'date'},
                
                {name: 'Title'}
            ]
        });
        
        var summaryCol = new Sch.plugins.SummaryColumn({ header : '% allocated', showPercent : true });
        
        var g = new Sch.SchedulerPanel({
            title : 'Tab 1 - Scheduler',
            trackMouseOver : false,
            stripeRows : true,
            
            // Setup static columns
            columns : [
               {header : 'Name', sortable:true, width:100, dataIndex : 'Name'},
               summaryCol
            ],
            
            viewConfig : {
                forceFit:true
            },
            
            plugins : [
                summaryCol
            ],
            store : resourceStore,
            eventStore : eventStore,
            
            listeners : {
                dragcreateend : {
                    fn : function(p, data, e) {
                        var b = new this.scheduler.eventStore.recordType({
                            Title: '', 
                            ResourceId : data.record.get('Id'),
                            StartDate : data.startDate,
                            EndDate : data.endDate
                        });
                        
                        this.scheduler.eventStore.add(b);
                    },
                    scope : this
                }
            }
        });
        
        return g;
    }
};