var css = document.createElement("style");
css.type = "text/css";
css.innerHTML = ".highcharts-data-labels { pointer-events:none;}";
css.innerHTML += ".highcharts-data-labels span{ text-decoration:none!important; }";
document.getElementsByTagName("head")[0].appendChild(css);

//Highcharts.setOptions({lang:{drillUpText:"Back to top "}});

var sectorTreeMap = {
	chart : null,
	hisMode : false,
	init : function(type,sid,sdate, callback){
		var self = this;	
		self.hisMode = (isNaN(sid*1) || sid=="" || sdate=="")?false:true;
		//console.log(isNaN(sid*1),sid);
		$.getJSON('/'+lang+'/data/chart/sectorTreeMap?type='+type+'&sdate='+sdate+'&sid='+sid, function(_data) {
			var data = self.decode(_data);
			$('#sectorTreeMapContainer').highcharts(self.getJSON(data),function(chart){
				self.chart = chart;
				if (callback!==undefined){
					callback(chart,data);
				}	
				if (!(isNaN(sid*1) || sid=="")){
					//sectorTreeMap.chart.series[0].data[0].firePointEvent('click');
					self.showSector(sid);
				}else{
					$(".upper_btn").hide();
				}


				//******************
				$('#sectorTreeMapContainer').find(".highcharts-container").attr("aria-hidden","true");

				if($('#sectorTreeMapContainer').find(".link_table_a").length == 0){
					var _text = [];
					if (lang == "tc"){
						_text[0] = "查看圖表數據";
						_text[1] = "於表單查看相關資產數據";
					}else if (lang == "sc"){
						_text[0] = "查看图表数据";
						_text[1] = "於表单查看相关资产数据";					
					}else{
						_text[0] = "View detailed data";
						_text[1] = "View underlying detail from table";	
					}
					$('#sectorTreeMapContainer').append('<a href="/'+lang+'/data/text-data/sectorTreeMap?type='+type+'&sdate='+sdate+'&sid='+sid+'" class="link_table_a" >'+_text[1]+'</a>');
				}
				//******************

			});
		});
	},

	decode : function(data){
		var _data = [];
		var _underlying = [];
		var dnColors=['#f7a3a6','#f3888d','#ea5660','#e63d48','#e12331','#dc0515'];
		var upColors=['#9dd87e','#7aba58','#69ac46','#579c32','#458d1f','#3b7522'];
		

		var minValue = data[0].weight;
		var total = 0;
		var offset = 0.2;

		for (var i = 0; i < data.length; i++){
			total += data[i].weight;
		}	
		for (var i = 0; i < data.length; i++){
			if (data[i].weight>0){
				data[i].value = data[i].weight/total;
				data[i].value += (0.2/data.length);
			}
		}	
		
		for (var i = 0; i < data.length; i++){
			var colorIndex = Math.ceil(Math.min(Math.abs(data[i].pchng),6))-1;
			var color = "#dfdfdf";
			var servicesData = [];
			
			if (data[i].pchng > 0){
				color = upColors[colorIndex];
			}else if (data[i].pchng < 0){
				color = dnColors[colorIndex];
			}

			_data.push({
				id: "sector_"+ data[i].usector,
				drilldown: "drilldown_"+ data[i].usector,
				name: data[i].name+ ((data[i].pchng>0)?" +":" ")+(data[i].pchng*1).toFixed(2)+"%",
				value: data[i].value,
				color: color,
				detail: data[i].detail[0]
			});
			total = 0;
			for(var j=0; j<data[i].detail.length;j++){
				total += data[i].detail[j].weight;
			}
			for(var j=0; j<data[i].detail.length;j++){
				data[i].detail[j].value = data[i].detail[j].weight/total;
				data[i].detail[j].value += (0.02*data.length);
			}			
			
			for(var j=0; j<data[i].detail.length;j++){
				data[i].detail[0].upchng = data[i].detail[0].upchng*1;
				data[i].detail[0].focus.pchng = data[i].detail[0].focus.pchng*1;
				
				colorIndex = Math.ceil(Math.min(Math.abs(data[i].detail[j].upchng),6))-1;
				if (data[i].detail[j].upchng > 0){
					color = upColors[colorIndex];
				}else if (data[i].detail[j].upchng < 0){
					color = dnColors[colorIndex];
				}
				servicesData.push({
					id: data[i].detail[j].ucode,
					name: data[i].detail[j].name+ ((data[i].detail[j].upchng>0)?" +":" ")+data[i].detail[j].upchng+"%",
					value: data[i].detail[j].value,
					color: color,
					detail: data[i].detail[j],
				});
			}
			_underlying.push({
				id: "drilldown_"+ data[i].usector,
				type: 'treemap',
				layoutAlgorithm: 'squarified',
				data: servicesData,
				states: {
					hover:{
						borderColor: '#ffffff',
					}
				},
			});	
			
		}
		return {sectorData:_data,underlyingSerie:_underlying};
	},
	drillUp : function(){
		if (this.chart.drillUpButton){
			$(this.chart.drillUpButton.element).trigger("click");
		}
		if (typeof updateSectorNiceScroll === "function"){
			updateSectorNiceScroll();
		}
	},
	showSector : function(sid){
		for (var i = 0; i<this.chart.series[0].data.length;i++){
			if (this.chart.series[0].data[i].id == "sector_"+sid){
				this.chart.series[0].data[i].firePointEvent("click");
				return;
			}
		}
		$(".upper_btn").hide();
	},
	getJSON : function(data){
		var self = this;
		return {
			chart: {
				marginLeft : 0,
				marginRight : 0,
				marginBottom : 0,
				events: {
					drilldown: function (e) {
						//this.setTitle({ text: '&nbsp' , useHTML: true, margin:20});
						setTimeout(function(){
							/*$("#sectorTreeMapContainer .highcharts-button text").attr("x","580");
							$("#sectorTreeMapContainer .highcharts-button text").attr("y","30");
							$("#sectorTreeMapContainer .highcharts-button text").css("font-size","14px");
							$("#sectorTreeMapContainer .highcharts-button text").attr("text-anchor","middle");*/
							if (self.chart.drillUpButton){
								self.chart.drillUpButton.hide();
							}
							$(".upper_btn").show();
						},50);
					},
					drillup: function () {
						if (self.hisMode && typeof showSectorTable == "function"){
							showSectorTable();
						}
						$(".upper_btn").hide();
						//this.setTitle({ text: null });
					}
				},
			},
			title: {
				text: null
			},
			tooltip:{
				enabled:false
			},
			plotOptions: {
				treemap: {
					borderColor : "#ffffff",
					events: {
						click : function(event){
							if (self.hisMode){
								if (event.point.detail.focus){
									location.href = genURL(event.point.detail.focus.code);
								}else{
									location.href = genURL(event.point.detail.ucode);
								}
							}else if (event.point.id.startsWith("sector_")){
								if (typeof updateTableFromChart == "function"){
									updateTableFromChart(event.point.id.replace("sector_",""));
								}
							}else{
								if (event.point.detail.focus){
									location.href = genURL(event.point.detail.focus.code);
								}else{
									location.href = genURL(event.point.detail.ucode);
								}
							}
						}
					},
					dataLabels: {
						useHTML: true,
						align:"center",
						verticalAlign: "middle",
						padding:0,
						formatter: function (a) {
							if (this.point.id.startsWith("sector_")){
								var detail = this.point.detail;
								if(detail!=undefined){
									if (detail.focus!=undefined && detail.focus){
										var _focus = detail.focus;
										var _type =  _focus.wtype.replace("CBBC/","").replace("EU/","");
										var html = "<div class='treeMapTooltip' style='padding:5px'><div class='line1' style='font-size:14px'>"+this.key+"</div>";
										html += "<div class='line2' style='font-weight:normal'>"+detail.name+" ("+detail.ucode+") " + ((detail.upchng>0)?"+":"")+detail.upchng.toFixed(2)+"%</div>";
										html += "<div class='line3' style='font-weight:normal'>"+_focus.code+" ("+self.labels[lang][_type]+") " + ((self.hisMode)?"":(((_focus.pchng>0)?"+":"")+(_focus.pchng*1).toFixed(2)+"%"))+"</div>";
										html += "</div>";
										return html;
									}else{
										var html = "<div class='treeMapTooltip' style='padding:5px'><div class='line1' style='font-size:14px'>"+this.key+"</div>";
										html += "<div class='line2' style='font-weight:normal'>"+detail.name+" ("+detail.ucode+") " + ((detail.upchng>0)?"+":"")+detail.upchng.toFixed(2)+"%</div>";
										html += "</div>";
										return html;
									}
								}else{
									var html = "<div class='treeMapTooltip' style='padding:5px'><div class='line1' style='font-size:14px'>"+this.key+"</div>";
									html += "</div>";
									return html;
								}
								
							}else{
								var detail = this.point.detail;
								if (detail!=undefined && detail.focus!=undefined && detail.focus){
									var _focus = detail.focus;
									var _type =  _focus.wtype.replace("CBBC/","").replace("EU/","");
									var html = "<div class='treeMapTooltip' style='padding:5px'><div class='line1' style='font-size:14px'>"+this.key+"</div>";
									if (_focus.isListing == "1"){
										html += "<div class='line3' style='font-weight:normal'>"+_focus.code+" ("+self.labels[lang][_type]+") </div>";
									}else{
										html += "<div class='line3' style='font-weight:normal'>"+_focus.code+" ("+self.labels[lang][_type]+") " + ((self.hisMode)?"":(((_focus.pchng>0)?"+":"")+(_focus.pchng*1).toFixed(2)+"%"))+"</div>";
									}
									html += "</div>";
									return html;
								}else{
									var html = "<div class='treeMapTooltip' style='padding:5px'><div class='line1' style='font-size:14px'>"+this.key+"</div>";
									//html += "<div class='line3' style='font-weight:normal'>"+_focus.code+" ("+self.labels[lang][_type]+") " + ((self.hisMode)?"":(((_focus.pchng>0)?"+":"")+(_focus.pchng*1).toFixed(2)+"%"))+"</div>";
									html += "</div>";
									return html;
								}
								
							}
						}
					}
				}
			},
			drilldown: {
				series:data.underlyingSerie,

				drillUpButton: {
					/*position: {
						align: 'center',
        				verticalAlign: 'top',
    					y: -50,
	                    x: 0
	                },
					theme: {
						fill: '#d7d8d6',
						'stroke-width': 2,
						stroke: '#fff',
						r: 0,
						width: 1150,
    					height: 40,

						states: {
							hover: {
								stroke: '#fff',
								fill: '#f5f5f5'
							},
							select: {
								stroke: '#fff',
								fill: '#f5f5f5'
							}
						}
					}*/
				}
			},
			series: [{
				type: 'treemap',
				allowPointSelect: true,
				alternateStartingDirection: true,
				layoutAlgorithm: 'squarified',
				data: data.sectorData,
				states: {
					hover:{
						borderColor: '#ffffff'
					}
				}
			}],
			exporting: {
				enabled: false
			}
		}
	},
	labels : {
		tc :{
			'CALL' : "認購",
			'PUT' : "認沽",
			'BULL' : "牛證",
			'BEAR' : "熊證",
		},
		sc :{
			'CALL' : "认购",
			'PUT' : "认沽",
			'BULL' : "牛证",
			'BEAR' : "熊证",
		},
		en :{
			'CALL' : "Call",
			'PUT' : "Put",
			'BULL' : "Bull",
			'BEAR' : "Bear",
		},
	},
}