/**
 * @class Floco.ext.DetailsSelectionModel
 * @extends Ext.grid.RowSelectionModel
 * A custom selection model that renders a column of checkboxes that can be toggled to select or deselect rows.
 * @constructor
 * @param {Object} config The configuration options
 */
Floco.ext.RowViewDetails = function(config){
	Ext.apply(this, config);
    Floco.ext.RowViewDetails.superclass.constructor.call(this);

    if(this.tpl){
        if(typeof this.tpl == 'string'){
            this.tpl = new Ext.Template(this.tpl);
        }
        this.tpl.compile();
    }

	this.bodyContent = {};
};


Ext.extend(Floco.ext.RowViewDetails, Ext.util.Observable, {
    header: '<div class="x-grid3-hd-details">Details</div>',
    width: 45,
    sortable: false,

	window: new Ext.Window({
		autoCreate:true,
		resizable:true,
		constrain:true,
		constrainHeader:true,
		minimizable:false,
		maximizable:false,
		stateful:false,
		modal:true,
		shim:true,
		width:515,
		height:430,
		plain:true,
		footer:false,
		closable:true,
		closeAction:'hide',
		cls: 'x-window-details'
	}),

    // private
    fixed:true,
    dataIndex: '',
    id: 'details',
	enableCaching: true,
	
	init : function(grid){
        this.grid = grid;
		var view = grid.getView();
		
        grid.on('render', function(){
            view.mainBody.on('mousedown', this.onMouseDown, this);
        }, this);
		
		this.window.addButton({
			text: 'Close',
			handler: function(){
				this.window.hide();
			},
			scope: this
		});
    },

	// private
	getBodyContent : function(record, index){
        if(!this.enableCaching){
            return this.tpl.apply(record.data);
        }
        var content = this.bodyContent[record.id];
        if(!content){
            content = this.tpl.apply(record.data);
            this.bodyContent[record.id] = content;
        }
        return content;
    },

    // private
    initEvents : function(){
        Floco.ext.RowViewDetails.superclass.initEvents.call(this);
        this.grid.on('render', function(){
            var view = this.grid.getView();
            view.mainBody.on('mousedown', this.onMouseDown, this);
        }, this);
    },

    // private
    onMouseDown : function(e, t){
        if(t.className == 'x-grid3-row-details' || t.className == 'x-grid3-row-details-a'){
            e.stopEvent();
            var row = e.getTarget('.x-grid3-row');
			var index = row.rowIndex;
			var record = this.grid.store.getAt(row.rowIndex);
			
			this.window.setTitle('Details for: '+record.data.title);
			this.window.show();
			this.window.body.update(this.getBodyContent(record, index));
        }
    },

    // private
    renderer : function(v, p, record){
        return '<div class="x-grid3-row-details"><a class="x-grid3-row-details-a" href="#">View</a></div>';
    },

	// private
	closeWindow : function(){
		this.window.close();
	}
});