/////////////////////////////////////////////////////////////////////////////////
// Simple message based blind with static content.     
Ext.ux.ExampleMessageBlind = function(el, win, config) {
    Ext.apply(this, config ? config : {} , {
        text: Ext.ux.ExampleMessageBlind.MSG
    });     
    
    Ext.ux.ExampleMessageBlind.superclass.constructor.call(this, el, win, config);
};

Ext.extend(Ext.ux.ExampleMessageBlind, Ext.ux.WindowBlind, {});
Ext.ux.ExampleMessageBlind.MSG = 'Vestibulum semper. Nullam non odio. Aliquam quam. Mauris eu lectus non nunc auctor ullamcorper. Sed tincidunt molestieenim. Phasellus lobortis justo sit amet quam. Duis nulla erat, varius a, cursus in, tempor sollicitudin, mauris. Aliquam mi velit, consectetuer mattis, consequat tristique, pulvinar ac, nisl. Aliquam mattis vehicula elit. Proin quis leo sed tellus scelerisque molestie. Quisque luctus. Integer mattis. Donec id augue sed leo aliquam egestas. Quisque in sem. Donec dictum enim in dolor. Praesent non erat. Nulla ultrices vestibulum quam.';

/////////////////////////////////////////////////////////////////////////////////
// Styled message based blind with.     
Ext.ux.ExampleStyledMessageBlind = function(el, win, config) {
    Ext.apply(config, config || {}, {
        cls: 'ux-win-blind-alert'
    });
    Ext.ux.ExampleStyledMessageBlind.superclass.constructor.call(this, el, win, config);
};

Ext.extend(Ext.ux.ExampleStyledMessageBlind, Ext.ux.ExampleMessageBlind,{});


/////////////////////////////////////////////////////////////////////////////////
// Simple form based blind with a static form.     
Ext.ux.ExampleFormBlind = function(el, win, config) {
    Ext.apply(config || {}, {
        formConfig: {
            labelWidth: 75, 
            frame: true,
            monitorResize: true,
            title: 'Blind with a Form',
            bodyStyle: 'padding: 5px 5px 0',
            defaults: {width: 230},
            defaultType: 'textfield',
            items: [{
                fieldLabel: 'First Name',
                name: 'first',
                allowBlank:false
            },{
                fieldLabel: 'Last Name',
                name: 'last'
            },{
                fieldLabel: 'Company',
                name: 'company'
            }, {
                fieldLabel: 'Email',
                name: 'email',
                vtype:'email'
            }, new Ext.form.TimeField({
                fieldLabel: 'Time',
                name: 'time',
                minValue: '8:00am',
                maxValue: '6:00pm'
            })]
        }
    });
    
    Ext.ux.ExampleFormBlind.superclass.constructor.call(this, el, win, config);
};

Ext.extend(Ext.ux.ExampleFormBlind, Ext.ux.FormBlind, {});

/////////////////////////////////////////////////////////////////////////////////
// Simple grid based blind with static data.     
var gridData = [
    ['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
    ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
    ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
    ['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
    ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
    ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
    ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
    ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
    ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
    ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
    ['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
    ['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
    ['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
    ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
    ['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
    ['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
    ['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
    ['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
    ['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
    ['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
    ['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
    ['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
    ['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
    ['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
    ['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
    ['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
    ['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
    ['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
    ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']
];

// example of custom renderer function
function change(val){
    if(val > 0){
        return '<span style="color:green;">' + val + '</span>';
    }else if(val < 0){
        return '<span style="color:red;">' + val + '</span>';
    }
    return val;
}

// example of custom renderer function
function pctChange(val){
    if(val > 0){
        return '<span style="color:green;">' + val + '%</span>';
    }else if(val < 0){
        return '<span style="color:red;">' + val + '%</span>';
    }
    return val;
}

// create the data store
var gridStore = new Ext.data.SimpleStore({
    fields: [
       {name: 'company'},
       {name: 'price', type: 'float'},
       {name: 'change', type: 'float'},
       {name: 'pctChange', type: 'float'},
       {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
    ]
});
gridStore.loadData(gridData);

Ext.ux.ExampleGridBlind = function(el, win, config) {
    Ext.apply(config || {}, {
        gridConfig: {
            store: gridStore,
            columns: [
                {id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company'},
                {header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
                {header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change'},
                {header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
                {header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
            ],
            stripeRows: true,
            autoExpandColumn: 'company',
            title:'Blind with a Grid'
        }
    });
    
    Ext.ux.ExampleGridBlind.superclass.constructor.call(this, el, win, config);
};

Ext.extend(Ext.ux.ExampleGridBlind, Ext.ux.GridBlind, {});