Ext.namespace('Itransition.RightWayTrader.RightWayTraderData.ux');

Itransition.RightWayTrader.RightWayTraderData.ux.OptionsGrid = Ext.extend(Ext.grid.GridPanel, {
    proxyUrl: undefined,
    parentSymbol: undefined,
    expirationDate: undefined,
    isPut: false,
    loadParams: undefined,
    expirationDate: undefined,
    rowDblClick: undefined,
    initComponent: function() {
        this.loadParams = {
            parentSymbol: this.parentSymbol,
            isPut: this.isPut,
            start: 0,
            expirationDate: undefined
        };

        Ext.apply(this, {
            store: new Ext.data.JsonStore({
                url: this.proxyUrl,
                id: 'gridStore',
                totalProperty: 'total',
                root: 'data',
                fields: [
                    {name: 'symbolGuid'},
                    {name: 'symbol'},
                    {name: 'name'},
                    {name: 'strikePrice'},
                    {name: 'lastPrice'},
                    {name: 'bidPrice'},
                    {name: 'ascPrice'},
                    {name: 'volume'},
                    {name: 'openInterest'}
                ],
                sortInfo: {
                    field: 'symbol',
                    direction: 'ASC'
                },
                remoteSort: true
            }),
            viewConfig: {
                forceFit: true
            },
            columns: [
                {id: 'name', header: 'Name', width: 40, sortable: true, dataIndex: 'name'},
                {id: 'symbol', header: 'Symbol', width: 40, sortable: true, dataIndex: 'symbol'},
                {id: 'strikePrice', header: 'Strike', width: 20, sortable: true, dataIndex: 'strikePrice', renderer: Ext.util.Format.usMoney},
                {id: 'lastPrice', header: 'Last', width: 40, sortable: true, dataIndex: 'lastPrice', renderer: Ext.util.Format.usMoney},
                {id: 'ascPrice', header: 'Asc', width: 40, sortable: true, dataIndex: 'ascPrice', renderer: Ext.util.Format.usMoney},
                {id: 'bidPrice', header: 'Bid', width: 40, sortable: true, dataIndex: 'bidPrice', renderer: Ext.util.Format.usMoney},
                {id: 'volume', header: 'Volume', width: 40, sortable: true, dataIndex: 'volume'},
                {id: 'openInterest', header: 'Open Interest', width: 40, sortable: true, dataIndex: 'openInterest'}
            ]
        });

        this.on('rowdblclick', this.rowDblClick, this);

        Itransition.RightWayTrader.RightWayTraderData.ux.OptionsGrid.superclass.initComponent.apply(this, arguments);
    },
    update: function() {
        this.loadParams.expirationDate = this.expirationDate;
        this.store.load({
            params: {
                method: 'GetSymbolOptions',
                expirationDate: this.loadParams.expirationDate,
                parentSymbol: this.loadParams.parentSymbol,
                isPut: this.loadParams.isPut,
                start: this.loadParams.start,
                limit: this.loadParams.limit
            }
        });
    }
});

Ext.reg('OptionsGrid', Itransition.RightWayTrader.RightWayTraderData.ux.OptionsGrid);

Itransition.RightWayTrader.RightWayTraderData.ux.OptionsPanel = Ext.extend(Ext.Panel, {
    proxyUrl: undefined,
    parentSymbol: undefined,
    isPut: false,
    rowDblClick: undefined,
    putGrid: undefined,
    callGrid: undefined,
    addExpirationFiltering: function() {
        var result = [];
        var datesStore = new Ext.data.JsonStore({
            url: this.proxyUrl,
            id: 'datesStoreId',
            totalProperty: 'total',
            root: 'data',
            method: 'POST',
            fields: [
                {name: 'dateName'},
                {name: 'dateValue'}
            ]
        });

        datesStore.load({
            params: {
                method: 'GetOptionExpirationDate',
                parentSymbol: this.parentSymbol
            },
            callback: function(records, options, success) {
                if (success) {
                    var tbar = options.scope.getTopToolbar();

                    datesStore.each(function(item) {
                        var item = new Ext.Toolbar.Button({
                            text: item.data.dateName,
                            id: item.data.dateValue,
                            enableToggle: true,
                            toggleGroup: 'toggleGroup1',
                            listeners: {
                                'click': function(btn, e) {
                                    options.scope.updateGrids(btn.id);
                                },
                                scope: this
                            }
                        });

                        tbar.addItem(item);
                    });

                    if (tbar.items.items.length) {
                        tbar.items.items[0].fireEvent('click', tbar.items.items[0]);
                        tbar.items.items[0].toggle(true);
                    }
                }
            },
            scope: this
        });
    },
    initComponent: function() {
        this.putGrid = new Itransition.RightWayTrader.RightWayTraderData.ux.OptionsGrid({
            xtype: 'OptionsGrid',
            title: 'Put Options',
            id: 'putOptionsGrid',
            parentSymbol: this.parentSymbol,
            proxyUrl: this.proxyUrl,
            isPut: true,
            rowHeight: .5,
            region: 'center',
            rowDblClick: this.rowDblClick,
            enableColLock: false,
            autoScroll: true,
            border: false,
            loadMask: true
        });

        this.callGrid = new Itransition.RightWayTrader.RightWayTraderData.ux.OptionsGrid({
            xtype: 'OptionsGrid',
            title: 'Call Options',
            id: 'callOptionsGrid',
            parentSymbol: this.parentSymbol,
            proxyUrl: this.proxyUrl,
            isPut: false,
            rowHeight: .5,
            region: 'north',
            rowDblClick: this.rowDblClick,
            enableColLock: false,
            autoScroll: true,
            border: false,
            loadMask: true
        });

        this.items = [this.putGrid, this.callGrid];

        this.tbar = new Ext.Toolbar({});

        this.layout = 'ux.row';

        Itransition.RightWayTrader.RightWayTraderData.ux.OptionsPanel.superclass.initComponent.apply(this, arguments);
    },
    onRender: function() {
        Itransition.RightWayTrader.RightWayTraderData.ux.OptionsPanel.superclass.onRender.apply(this, arguments);

        this.addExpirationFiltering();
    },
    updateGrids: function(expDate) {
		this.updateGrid(this.putGrid, expDate, 200);
		this.updateGrid(this.callGrid, expDate, 700);
    },
    updateGrid: function(grid, expDate, delaytime) {
		grid.expirationDate = expDate;

		var task = new Ext.util.DelayedTask(grid.update, grid);
		task.delay(delaytime);
    }
});

Ext.reg('OptionsPanel', Itransition.RightWayTrader.RightWayTraderData.ux.OptionsPanel);