var terms_space = terms_space || {};
terms_space.charts = terms_space.charts || {};
terms_space.charts.scoreChart = {
 
    labels:{
        series:{
            term:{
                tc: "海通",
                sc: "海通",
                en: "Haitong",
            },
            market:{
                tc: "市場",
                sc: "市场",
                en: "Market",
            }
        },
        title:{
            tc: "引伸波幅",
            sc: "引伸波幅",
            en: "Implied Volatility",
        }
        
    },
    colors:{
        series:{
            term: "#004b87", //deep blue
            market: "#f0000b", //red
        },
    },
    init: function(renderer, data){
        var self = this;
        var general = terms_space.general;
        console.log('check');
        if(renderer !== undefined)
            general.setProp(self, "renderer", renderer); 
        if(data !== undefined)
            general.setProp(self, "chartData", self.decode(data)); 
        
        var chartRenderer = self.renderer.find('[data-chart-type="scoring-chart"]');
       
        
        chartRenderer.highcharts('Chart', self.getChartOpt(self.chartData), function(chart){
            terms_space.general.setProp(self, 'chart', chart);
            
        });
        if(data !== undefined)
           addevents();
        function addevents(){
            $(window).resize(function(){
                self.init();
            });
        }
    },
    decode: function(_data){
        var self = this;
        var general = terms_space.general;
        general.setProp(self, "xlabelsArr", _data.categories); 
        return _data;
    },
    getChartOpt : function(_data){
            
        var self = this;
        var labels = self.labels;
        var general = terms_space.general; 
        
        return {
            chart:{
                height: 400,
                marginTop: 50,
                type: "line",
                styledMode: true,
                event:{
                   
                }
            },
            title:{
                text: labels.title[general.lang],
            },
            tooltip: {
			  
		    	shape: 'square',
				useHTML: true,
				 
		    	crosshairs: [{
		    		width: 1,
		    		color: "#C0C0C0",
		    	}],
		    	formatter: function() {
		    		var _html  = '<div class="tooltip"><b><span style="color:'+this.color+'"></span></b> ' + self.xlabelsArr[this.key] + '';
                    
                    _html += '<br/><b><span style="color:#000">'+labels.series.term[general.lang]+':</span> ' + self.chart.series[0].yData[this.x].toFixed(1);
		    		_html += '<br/><b><span style="color:#000">'+labels.series.market[general.lang]+':</span> ' + self.chart.series[1].yData[this.x].toFixed(1);
					
					return _html;
					
		    	}
		    },
            xAxis:[
                {
                    tickLength: 0,
                    minPadding: 0.1,
                    maxPadding: 0.1,

                    labels:{
                        enabled: false,
                    }
                }

            ],
            yAxis:[
                {
                    //min: 0,
                    //max: 5,
                    tickAmount: 6,
                    tickInterval: 1,
                    title:{
                        text: undefined,
                    },
                },
            ],
            series: [
                {
                  
                    name: labels.series.term[general.lang],
                    data: _data.term.iv,
                    lineWidth: 2,
                    color: self.colors.series.term,
                },
                {
                   
                    name: labels.series.market[general.lang],
                    data: _data.market.iv,
                    lineWidth: 2,
                    color: self.colors.series.market,
                }
            ],
            exporting: {
                enabled: false
            },
          
        };
    },
    
};