﻿/*
 * 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.Lines
 * @extends Ext.util.Observable
 * Plugin for showing "global" vertical lines in the scheduler grid. It uses a store to populate itself, records in this store should have a 'Date' field and a 'Text' Field.
 * @constructor
 * @param {Object} config The object containing the configuration of this model.
 */
Sch.plugins.Lines = function(config) {
    Ext.apply(this, config);
};
 
Ext.extend(Sch.plugins.Lines, Ext.util.Observable, {    
    
    /**
     * @cfg {String} dateFormat The dateformat to use for formatting the date that is displayed when hovering over the line
     */
    dateFormat : 'y-m-d G:i',
    
    // private
    idPrefix : 'sch-line-',
    
    init:function(grid) {
        this.grid = grid;
       
        if (!this.store) {
            throw 'You must configure a store to supply data to 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.createLines,
            "datachanged" : this.createLines,
            "add" : this.createLines,
            "remove" : this.createLines,
            "update" : this.createLines,
            "clear" : this.createLines,
            scope : this
        });
        
        var v = grid.getView();
        
        grid.on('viewchange', this.createLines, this);
        v.on('refresh', this.createLines, this);
        v.on('rowremoved', this.refreshLines, this);
        v.on('rowsinserted', this.refreshLines, this);
        
        // HACK
        if ('togglegroup' in v.events) {
            v.on('togglegroup', this.refreshLines, this);
        }
        
        // HACK
        if ('togglerow' in v.events) {
            v.on('togglerow', this.refreshLines, this);
        }
        grid.mon(grid.getColumnModel(), 'hiddenchange', this.createLines, this);
        
        this.createLines();
    },
    
    onResize : function() {
        if (this.containerEl.select('.sch-verticalLine').getCount() > 0) {
          this.createLines();
        }
    },
    
    createLines : function() {
      this.createLinesInternal.defer(200, this);
    },
    
    createLinesInternal : function() {
        var h = this.gridBodyEl.getHeight();
            
        this.containerEl.select('.sch-verticalLine').remove();
            
        this.store.each(function(r){
            if (r.get('Date').between(this.grid.getStart(), this.grid.getEnd())) {
                this.buildMarker(r, h);
            }
        }, this);
    },
    
    buildMarker : function(r, height) {
        var gridStart = this.grid.getStart(),
            itemStart = r.get('Date'),
            lOff = this.grid.getXFromDate(itemStart);
            
        Ext.DomHelper.append(this.containerEl, {
            id : this.idPrefix + r.id,
            cls : 'sch-verticalLine ' + (r.get('Cls') || ''),
            title : String.format('{1} - {0}', (r.get('Text') || ''), r.get('Date').format(this.dateFormat)),
            style : {
                height : height + 'px', 
                left : lOff + 'px'
            }
        });
    },
    
    refreshLines : function() {
        var h = this.gridBodyEl.getHeight();
        
        this.containerEl.select('.sch-verticalLine').setHeight(h);
    }
}); 
