/*
 * Ext Scheduler v1.5 beta
 * Copyright(c) 2009-2010 Mats Bryntse Consulting
 * mats@ext-scheduler.com
 * http://www.ext-scheduler.com/license.html
 *
 */

Ext.ns('Sch.plugins');

/**
 * @class Sch.plugins.Zones
 * @extends Ext.util.Observable
 * Plugin for showing "global" zones in the scheduler grid, these can by styled easily using just CSS. To populate this plugin you need
 * to pass it a store having the following fields : 'StartDate', 'EndDate' and optionally a 'Cls' property. The Cls property is applied to the HTML element representing the zone.
 * @constructor
 * @param {Object} config The object containing the configuration of this model.
 */
Sch.plugins.Zones = function(config) {
    Ext.apply(this, config);
};
 
Ext.extend(Sch.plugins.Zones, Ext.util.Observable, {
    // private
    idPrefix : 'sch-zone-',
    
    disabled : false,
    
    setDisabled : function(disabled) {
        if (disabled) {
            this.containerEl.select('.sch-zone').remove();
        }
        
        this.disabled = disabled;
    },
    
    init:function(grid) {
        this.grid = grid;
        
        if (!this.store) {
            throw 'Without a store, there\'s not much use for this plugin';
        }
        grid.on('render', this.onRender, this);
    },
    
    onRender : function (grid) {
        this.containerEl = grid.getView().scroller;
        this.gridBodyEl = grid.getView().mainBody;
        
        this.store.on({
            "load" : this.createZones,
            "datachanged" : this.createZones, 
            "add" : this.createZones, 
            "remove" : this.createZones, 
            "update" : this.createZones, 
            "clear" : this.createZones, 
            scope : this
        });
            
        grid.on('viewchange', this.createZones, this);
        
        var v = grid.getView();
        
        v.on('refresh', this.createZones, this);
        v.on('rowremoved', this.refreshZones, this);
        v.on('rowsinserted', this.refreshZones, this);

        // HACK
        if ('togglegroup' in v.events) {
            v.on('togglegroup', this.refreshZones, this);
        }
        
        // HACK
        if ('togglerow' in v.events) {
            v.on('togglerow', this.refreshZones, this);
        }
        grid.mon(grid.getColumnModel(), 'hiddenchange', this.createZones, this);
    },
    
    createZones : function() {
        // Don't render anything if the grid has no rows.
        if (this.disabled || this.grid.store.getCount() <= 0) return;
        
        // Defer to make sure rendering is not delayed by this plugin
        this.createZonesInternal.defer(10, this);
    },
    
    createZonesInternal : function() {
        
        var h = this.gridBodyEl.getHeight(),
            start = this.grid.getStart(), 
            end = this.grid.getEnd();
            
        this.containerEl.select('.sch-zone').remove();
            
        this.store.each(function(r){
            if (Date.intersectSpans(r.get('StartDate'), r.get('EndDate'), start, end)) {
                this.insertZone(r, h);
            }
        }, this);
    },
    
    insertZone : function(r, height) {
        var gridStart = this.grid.getStart(),
            gridEnd = this.grid.getEnd(),
            itemStart = r.get('StartDate'),
            itemEnd = r.get('EndDate'),
            lOff = this.grid.getXFromDate(Date.max(itemStart, gridStart)),
            width = this.grid.getXFromDate(Date.min(itemEnd, gridEnd)) - lOff,
            cls = r.get('Cls');
        
        Ext.DomHelper.insertFirst(this.containerEl, {
            cls : 'sch-zone ' + (cls || ''),
            style : {
                left : lOff,
                width : width,
                height: height + 'px'
            }
        });
    },
    
    // Refresh the height of every zone in the DOM
    refreshZones : function() {
        var h = this.gridBodyEl.getHeight();
        
        this.containerEl.select('.sch-zone').setHeight(h);
    }
});