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

Itransition.RightWayTrader.RightWayTraderData.ux.SymbolsGrid = Ext.extend(Ext.grid.GridPanel, {
    proxyUrl: undefined,
    symbolsLimit: 30,
    actionCallback: undefined,
    loadParams: undefined,
    rowDblClick: undefined,
    addABCFiltering: function() {
        var result = [];

        var allItem = new Ext.Toolbar.Button({
            text: 'All',
            pressed: true,
            toggleGroup: 'toggleGroup1',
            listeners: {
                'click': function(btn, e) {
                    this.loadParams.comparisonType = 'start';
                    this.loadParams.searchText = '';

                    this.update();
                },
                scope: this
            }
        });

        result.push(allItem);

        for (var i = 65; i < 91; i++) {
            var item = new Ext.Toolbar.Button({
                text: String.fromCharCode(i),
                enableToggle: true,
                toggleGroup: 'toggleGroup1',
                listeners: {
                    'click': function(btn, e) {
                        this.loadParams.comparisonType = 'start';
                        this.loadParams.searchIn = 'name';
                        this.loadParams.searchText = btn.text;

                        this.update();
                    },
                    scope: this
                }
            });

            result.push(item);
        }

        return result;
    },
    initComponent: function() {
        this.loadParams = {
            categoryId: null,
            searchText: null,
            comparisonType: null,
            searchIn: null,
            exchangeSearchIn: null,
            start: 0,
            limit: this.symbolsLimit,
            special: 'all',
            //options specific
            optionsSearchIn: null,
            minStrikePrice: 0,
            maxStrikePrice: 0,
            expirationYear: 0,
            expirationMonth: 0,
            inPut: false,
            inCall: false
        };

        this.action = new Ext.ux.grid.RowActions({
            header: 'Details',
            width: 50,
            //forceFit: true,
            align: 'right',
            actions: [{},{},{},{},{}]
        });

        this.action.on({
            action: function(grid, record, action, row, col) {
                if (action == 'chart-icon') {
                    grid.showCharts(record.data.Name, record.data.SymbolGuid, record.data.ChartYears);
                } else {
                    this.actionCallback(action, record.data);
                }
            },
            scope: this
        });

        Ext.apply(this, {
            store: new Ext.data.JsonStore({
                url: this.proxyUrl,
                id: 'symbolsReader',
                totalProperty: 'total',
                root: 'data',
                fields: [
                    {name: 'SymbolGuid'},
                    {name: 'Symbol'},
                    {name: 'Name'},
                    {name: 'LastUpdate'},
                    {name: 'Actions'},
                    {name: 'ChartYears'},
                    {name: 'Category'},
                    {name: 'DetailAction', defaultValue: 'icon-chart'},
                    {name: 'DetailQtip', defaultValue: 'View Details'}
                ],
                remoteSort: true,
                sortInfo: {field: 'Symbol', direction: 'ASC'}
            }),
            viewConfig: {
                forceFit: true
            },
            columns: [
                {id: 'symbol', header: 'Symbol', width: 40, sortable: true, dataIndex: 'Symbol'},
                {id: 'name', header: 'Name', width: 40, sortable: true, dataIndex: 'Name'},
                {id: 'category', header: 'Category', width: 40, sortable: true, dataIndex: 'Category'},
                {id: 'lastUpdate', header: 'Last Update', width: 20, sortable: true, dataIndex: 'LastUpdate'},
                this.action
            ],
            plugins: [this.action]
        });

        this.pageLimitStore = new Ext.data.SimpleStore({
            fields: ['value', 'name'],
            data: [
                [this.symbolsLimit, this.symbolsLimit + ' per page'],
                [100, '100 per page'],
                [1000, '1000 per page']
            ]
        });

        this.pageLimitComboBox = new Ext.form.ComboBox({
            store: this.pageLimitStore,
            displayField: 'name',
            valueField: 'value',
            mode: 'local',
            forceSelection: true,
            triggerAction: 'all',
            selectOnFocus: true,
            listeners: {
                'select': function(comboBox, record, index) {
                    this.symbolsLimit = comboBox.getValue();
                    this.loadParams.limit = this.symbolsLimit;
                    this.getBottomToolbar().pageSize = this.symbolsLimit;
                    this.update();
                },
                scope: this
            }
        });

        this.bbar = new Ext.PagingToolbar({
            store: this.store,
            displayInfo: true,
            pageSize: this.symbolsLimit,
            displayMsg: 'Symbols {0} - {1} of {2}',
            emptyMsg: "No symbols to display",
            items: [
                this.pageLimitComboBox
            ],
            listeners: {
                'beforechange': function(pt, e) {
                    this.loadParams.start = e.start;
                    this.loadParams.limit = e.limit;
                    this.update();

                    return false;
                },
                scope: this
            }
        });

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

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

        Itransition.RightWayTrader.RightWayTraderData.ux.SymbolsGrid.superclass.initComponent.apply(this, arguments);
    },
    showCharts: function(name, symbolGuid, chartYears) {
        var tabPanel = new Ext.TabPanel({
            activeTab: 0,
            region: 'center',
            border: false
        });

        var win = new Ext.Window({
            layout: 'border',
            width: 610,
            height: 500,
            modal: true,
            title: name,
            resizable: false,
            items: tabPanel,
            buttons: [{
                text: 'Close',
                handler: function() {
                    win.close();
                }
            }]
        });

        for (var index = 0; index < chartYears.length; index++) {
            tabPanel.add({
                title: chartYears[index].title,
                html: '<img src="Handlers/Charts.ashx?symbolGuid=' + symbolGuid + '&years=' + chartYears[index].year + '" alt="' + chartYears[index].title + '"/>',
                style: "text-align:center"
            });
        }

        win.show();
    },
    update: function() {
        this.store.load({
            params: {
                categoryId: this.loadParams.categoryId,
                searchText: this.loadParams.searchText,
                comparisonType: this.loadParams.comparisonType,
                searchIn: this.loadParams.searchIn,
                exchangeSearchIn: this.loadParams.exchangeSearchIn,
                start: this.loadParams.start,
                limit: this.loadParams.limit,
                special: this.loadParams.special,
                //options specific
                optionsSearchIn: this.loadParams.optionsSearchIn,
                minStrikePrice: this.loadParams.minStrikePrice,
                maxStrikePrice: this.loadParams.maxStrikePrice,
                expirationYear: this.loadParams.expirationYear,
                expirationMonth: this.loadParams.expirationMonth,
                inPut: this.loadParams.inPut,
                inCall: this.loadParams.inCall
            }
        });
    }
});

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

Itransition.RightWayTrader.RightWayTraderData.ux.SymbolsPanel = Ext.extend(Ext.Panel, {
    symbolsGrid: undefined,
    proxyUrl: undefined,
    symbolsLimit: 30,
    actionCallback: undefined,
    loadParams: undefined,
    rowDblClick: undefined,
    initComponent: function() {
        this.symbolsGrid = new Itransition.RightWayTrader.RightWayTraderData.ux.SymbolsGrid({
            id: 'mainSearchTabPanel',
            actionCallback: this.actionCallback,
            proxyUrl: this.proxyUrl,
            region: 'center',
            border: false,
            symbolsLimit: this.symbolsLimit,
            rowDblClick: this.rowDblClick,
            enableColLock: false,
            autoScroll: true,
            loadMask: true,
            margins: '0 5 5 5',
            rowHeight: .99,
            height: '100%'
        });

        var legendPanel = new Ext.Panel({
            region: 'south',
            border: false,
            height: 35,
            html: '<div style="padding-left:7px;">' +
                '<div style="float:left;width:150px;"><img src="Includes/Images/icons/chart.png" align="absmiddle" alt="Chart" />&nbsp;Chart<br/>' +
                '<img src="Includes/Images/icons/fundamental.png" align="absmiddle" alt="Fundamental Data">&nbsp;Fundamental&nbsp;Data</div>' +
                '<div style="float:left;width:130px;"><img src="Includes/Images/icons/intraday.png" align="absmiddle" alt="Intraday Data">&nbsp;Intraday&nbsp;Data<br/>' +
                '<img src="Includes/Images/icons/end-of-day.png" align="absmiddle" alt="End of Day Data" />&nbsp;End&nbsp;of&nbsp;Day&nbsp;Data</div>' +
                '<div style="float:left;width:95px;"><img src="Includes/Images/icons/rates.png" align="absmiddle" alt="Rates">&nbsp;Rates<br/>' +
                '<img src="Includes/Images/icons/indexes.png" align="absmiddle" alt="Indexes">&nbsp;Indexes</div>' +
                '<div style="float:left;width:120px;"><img src="Includes/Images/icons/commodities.png" align="absmiddle" alt="Commodities">&nbsp;Commodities<br/>' +
                '<img src="Includes/Images/icons/continuous.png" align="absmiddle" alt="Continuous">&nbsp;Continuous</div>' +
                '<div style="float:left;width:105px;"><img src="Includes/Images/icons/options.png" align="absmiddle" alt="Options">&nbsp;Options<br/>' +
                '<img src="Includes/Images/icons/options-data.png" align="absmiddle" alt="Options Data">&nbsp;Options&nbsp;Data</div>' +
                '<div style="float:left;width:165px;"><img src="Includes/Images/icons/options-intraday-data.png" align="absmiddle" alt="Options Intraday Data">&nbsp;Options&nbsp;Intraday&nbsp;Data<br/>' +
                '</div></div>'
        });

        this.items = [this.symbolsGrid, legendPanel];
        this.layout = 'ux.row';

        Itransition.RightWayTrader.RightWayTraderData.ux.SymbolsPanel.superclass.initComponent.apply(this, arguments);
    },
    onRender: function() {
        Itransition.RightWayTrader.RightWayTraderData.ux.SymbolsPanel.superclass.onRender.apply(this, arguments);
    },
    update: function() {
        this.symbolsGrid.loadParams = this.loadParams;
        this.symbolsGrid.update();
    }
});

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