Ext.ns('App');

Ext.onReady(function() {
    Ext.BLANK_IMAGE_URL = 'http://extjs.cachefly.net/ext-3.1.0/resources/images/default/s.gif';
    Ext.QuickTips.init();
    
    if (typeof console === 'undefined') {
        console = {
            log : Ext.log,
            error : Ext.log
        };
    }
    App.Scheduler.init();
});


App.Scheduler = {
    
    // Initialize application
    init : function() {
        
        var start = new Date();
        
        this.grid = this.createGrid();
        this.grid.on('eventcontextmenu', this.onEventContextMenu, this);
        
        // Load resource data
        this.grid.store.loadData([
                {Id : 'r1', Name : 'Mike Anderson', Category : 'Consultants', Type:'Full time'},
                {Id : 'r2', Name : 'Kevin Larson', Category : 'Consultants', Type:'Full time'},
                {Id : 'r3', Name : 'Brett Hornbach', Category : 'Consultants', Type:'Full time'},
                {Id : 'r4', Name : 'Patrick Davis', Category : 'Consultants', Type:'Full time'},
                {Id : 'r5', Name : 'Jack Larson', Category : 'Consultants', Type:'Full time'},
                {Id : 'r6', Name : 'Dennis King', Category : 'Consultants', Type:'Full time'}
        ]);
        
        var today = new Date();
        today.clearTime();
        
        this.grid.eventStore.loadData([
                {Id : 'e10', ResourceId: 'r1', Title : 'Deal negotiation', StartDate : today.add(Date.DAY, 2), EndDate : today.add(Date.DAY, 6)},
                {Id : 'e11', ResourceId: 'r1', Title : 'First contact', StartDate : today.add(Date.DAY, 2), EndDate : today.add(Date.DAY, 2)},
                {Id : 'e31', ResourceId: 'r1', Title : 'Close deal', StartDate : today.add(Date.DAY, 6), EndDate : today.add(Date.DAY, 6)},
                {Id : 'e22', ResourceId: 'r2', Title : 'Attend software conference', StartDate : today.add(Date.DAY, 1), EndDate : today.add(Date.DAY, 6)},
                {Id : 'e32', ResourceId: 'r2', Title : 'Presentation', StartDate : today.add(Date.DAY, 3), EndDate : today.add(Date.DAY, 3)},
                {Id : 'e33', ResourceId: 'r2', Title : 'Go home', StartDate : today.add(Date.DAY, 6), EndDate : today.add(Date.DAY, 6)},
                {Id : 'e43', ResourceId: 'r3', Title : 'Visit customer', StartDate : today.add(Date.DAY, 2), EndDate : today.add(Date.DAY, 4)},
                {Id : 'e53', ResourceId: 'r3', Title : 'Prepare demo', StartDate : today.add(Date.DAY, 1), EndDate : today.add(Date.DAY, 1)},
                {Id : 'e54', ResourceId: 'r3', Title : 'Follow up', StartDate : today.add(Date.DAY, 5), EndDate : today.add(Date.DAY, 5)},
                {Id : 'e210', ResourceId: 'r4', Title : 'Exhibition', StartDate : today.add(Date.DAY, 2), EndDate : today.add(Date.DAY, 6)},
                {Id : 'e211', ResourceId: 'r4', Title : 'Prepare demo material', StartDate : today, EndDate : today},
                {Id : 'e231', ResourceId: 'r4', Title : 'Follow up with leads', StartDate : today.add(Date.DAY, 6), EndDate : today.add(Date.DAY, 6)},
                {Id : 'e222', ResourceId: 'r5', Title : 'Meet customer X', StartDate : today.add(Date.DAY, 1), EndDate : today.add(Date.DAY, 2)},
                {Id : 'e232', ResourceId: 'r5', Title : 'Schedule call', StartDate : today, EndDate : today},
                {Id : 'e233', ResourceId: 'r5', Title : 'Return to office', StartDate : today.add(Date.DAY, 2), EndDate : today.add(Date.DAY, 2)},
                {Id : 'e243', ResourceId: 'r6', Title : 'Prepare case studies', StartDate : today.add(Date.DAY, 2), EndDate : today.add(Date.DAY, 4)},
                {Id : 'e253', ResourceId: 'r6', Title : 'Gather material', StartDate : today.add(Date.DAY, 1), EndDate : today.add(Date.DAY, 1)},
                {Id : 'e254', ResourceId: 'r6', Title : 'Deliver to boss', StartDate : today.add(Date.DAY, 4), EndDate : today.add(Date.DAY, 4)}
        ]);
    },
    
    // Default renderer, supplies data to be applied to the event template
    renderer : function (event, r, row, col, ds) {
        // Add data to be applied to the event template
        return {
            text : event.get('Title'),
            cls : (event.get('EndDate') - event.get('StartDate')) === 0 ? 'sch-event-milestone-bottom' : 'normalEvent'
        };
    },
    
    createGrid : function() {
        
        // Store holding all the resources
        var resourceStore = new Ext.data.JsonStore({
            sortInfo:{field: 'Id', direction: "ASC"},
            idProperty : 'Id',
            fields : [
                'Id', 
                'Category',
                'Type',
                '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'},
                {name: 'Type'}
            ]
        });
        
        var start = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()),
            end = start.add(Date.DAY, 7);
        
        var g = new Sch.SchedulerPanel({
            resizeHandles : 'none',
            enableDragCreation : false,
            
            height : 350,
            width : 830,
            renderTo : 'grid-multiplerows',
            stripeRows : true,
            enabledHdMenu : false,
            
            // Setup your static columns
            colModel : new Ext.grid.ColumnModel({
                columns : [
                   {header : 'Staff', sortable:true, width:120, dataIndex : 'Name', locked: true}
                ]
            }),
            
            store : resourceStore,
            eventStore : eventStore,
            border : true,
            
            viewConfig : { forceFit : true },
            
             // Setup view configuration
            viewModel : {
                // Timespan <= 7 days show day columns
                start : start, 
                end : end, 
                columnType : 'day',
                viewBehaviour : Sch.ViewBehaviour.DayView,
                renderer : this.renderer
            },
            
            trackMouseOver : false
        });
        
        return g;
    }
};