/// <reference path="../../js/Ext-lib/ext-base-debug.js"/>
/// <reference path="../../js/Ext-lib/ext-all-debug.js"/>

Ext.ns('App');

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


App.Scheduler = {
    
    // Initialize application
    init : function() {
        
        var today = new Date();
        
        today.clearTime();
        
        this.grid = this.createGrid();
        this.grid.setView(today, today.add(Date.DAY, 14), 'day', Sch.ViewBehaviour.DayView, this.renderer);
        
        this.grid.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.grid.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 1', StartDate : today.add(Date.DAY, 2), EndDate : today.add(Date.DAY, 6)},
                {Id : 'e21', ResourceId: 'r3', Title : 'Assignment 2', StartDate : today.add(Date.DAY, 5), EndDate : today.add(Date.DAY, 9)},
                {Id : 'e22', ResourceId: 'r4', Title : 'Assignment 2', StartDate : today.add(Date.DAY, 5), EndDate : today.add(Date.DAY, 9)},
                {Id : 'e32', ResourceId: 'r5', Title : 'Assignment 3', StartDate : today.add(Date.DAY, 4), EndDate : today.add(Date.DAY, 8)},
                {Id : 'e33', ResourceId: 'r6', Title : 'Assignment 3', StartDate : today.add(Date.DAY, 4), EndDate : today.add(Date.DAY, 8)}
        ]);
    },
    
    renderer : function (item, r, row, col, ds, index) {
        return {
            text : item.get('Title')
        };
    },
    
    createTimelineStore : function() {
        var timelineStore = new Ext.data.JsonStore({
            autoDestroy: true,
            fields: [
                'Text', 
                {name:'Date', type: 'date'}
            ],
            data : [{
                    Text : 'Current time',
                    Date : new Date()
                }
            ]
        });
        
        var task = {
            run: function() {
                timelineStore.getAt(0).set('Date', new Date());
            },
            interval: 10000 // Update line store every 10 seconds
        };
        var runner = new Ext.util.TaskRunner();
        runner.start(task);
        
        return timelineStore;
    },
    
    createGrid : 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 timelineStore = this.createTimelineStore();
        
        var g = new Sch.SchedulerPanel({
            border : true,
            height:200,
            width: 800,
            renderTo : 'grid-linesandzones',
            trackMouseOver : false,
            stripeRows : true,
            resizeHandles : 'none',
            enableDragCreation : false,
            
            // Setup static columns
            columns : [
               {header : 'Name', sortable:true, width:100, dataIndex : 'Name'}
            ],
            
            viewConfig : {
                forceFit:true
            },
            
            plugins : [
                this.zonePlugin = new Sch.plugins.Zones({
                    store : new Ext.data.JsonStore({
                        fields : ['StartDate', 'EndDate', 'Cls']
                    })
                }),
                
                new Sch.plugins.Lines({
                    store : timelineStore
                })
            ],
            store : resourceStore,
            eventStore : eventStore,
            
            tbar : [
                {
                    text : 'Insert zone 1',
                    handler : function(btn) {
                        var s = this.zonePlugin.store,
                            start = this.grid.getStart(),
                            newZone = new s.recordType({
                                StartDate : start.add(Date.DAY, 1),
                                EndDate : start.add(Date.DAY, 3)
                            });
                        btn.disable();    
                        s.add(newZone);
                    },
                    scope : this
                },
                {
                    id : 'altstylebutton',
                    text : 'Insert zone 2 (alternate styling)',
                    handler : function(btn) {
                        var s = this.zonePlugin.store,
                            end = this.grid.getEnd(),
                            newZone = new s.recordType({
                                StartDate : end.add(Date.DAY, -2),
                                EndDate : end,
                                Cls : 'customZoneStyle'
                            });
                            
                         btn.disable();    
                        s.add(newZone);
                    },
                    scope : this
                }
            ]
        });
        
        return g;
    }
};