Ext.namespace("Itransition.ChartCrafters.MarketWindow.ux");

Itransition.ChartCrafters.MarketWindow.ux.TabPanelItem = Ext.extend(Ext.Panel, {
    bodyStyle: 'background: url("includes/images/loading2.gif") no-repeat center center; text-align: center; vertical-align: baseline;',
    closable: false,
    altChartText: '-yr change chart',
    tabWidth: 120,
    baseCls: 'x-tab-panel',
    title: undefined,
    templateGuid: undefined,
    symbolGuid: undefined,
    mwGuid: undefined,
    period: undefined,
    logScaled: undefined,
    fontScaled: undefined,
    imageWidth: undefined,
    imageHeight: undefined,

    initComponent: function() {
        Itransition.ChartCrafters.MarketWindow.ux.TabPanelItem.superclass.initComponent.apply(this, arguments);
    },

    getDataFromAnchor: function(anchor, name) {
        name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
        var regexS = "[\\?&#]" + name + "=([^&#]*)";
        var regex = new RegExp(regexS);
        var results = regex.exec(anchor);
        if (results == null)
            return "";
        else
            return results[1];
    },

    optimizeSpace: function(text) {
        return text.replace(/%20/, " ");
    },

    activateTabHandler: function(panel) {
        var symbol = this.optimizeSpace(this.getDataFromAnchor(location.hash, 'symbol'));
        var newAnchor = '#symbol=' + symbol + '&tab=' + panel.title;
        this.centerImage(this.getSize().height);
        document.location.replace(newAnchor);
    },

    centerImage: function(heigth) {
        if (heigth > this.imageHeight) {
            var margin = ((heigth  - 19) - this.imageHeight) / 2;
            Ext.get(this.templateGuid + 'yrImg').dom.style.marginTop = margin + 'px';
        }
    },

    onRender: function() {
        Itransition.ChartCrafters.MarketWindow.ux.TabPanelItem.superclass.onRender.apply(this, arguments);

        this.html = '<img id="' + this.templateGuid + 'yrImg" src="Handlers/Charts.ashx?symbolGuid=' + this.symbolGuid + 
            '&mwGuid=' + this.mwGuid + '&width=' +  this.imageWidth + '&height=' +  this.imageHeight + 
            '&logScaled=' + this.logScaled + '&fontScaled=' + this.fontScaled + '&templateGuid=' + this.templateGuid + '&period=' + this.period + 
            '"alt="' + this.title +'" />';

        this.on('activate', this.activateTabHandler, this);
    }
});

Ext.reg('tabpanelitem', Itransition.ChartCrafters.MarketWindow.ux.TabPanelItem);