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);
let fromHome2 = '';
let chartTitle = `<span class="accessibility_hidden_text">Sector chart by ${$('[name="sector_analysis_option"]:checked').next().text()}</span>`;
//if sectorHome is defined and true
if (typeof sectorHome !== 'undefined' && sectorHome) {
	chartTitle = `<span class="accessibility_hidden_text">Sector Chart</span>`;
	fromHome2 = '&from=home';
}
//Highcharts.setOptions({lang:{drillUpText:"Back to top &#xf07b;"}});


var dnColors=['#A8384F','#C03954','#C03954','#F14E73','#F14E73','#E76E84'];
var upColors=['#3E701A','#4C7C27','#4C7C27','#5D9438','#5D9438','#739F56'];

var textColors = {
	'#A8384F' : '#ffffff',
	'#C03954' : '#ffffff',
	'#F14E73' : '#000000',
	'#E76E84' : '#000000',
	'#3E701A' : '#ffffff',
	'#4C7C27' : '#ffffff',
	'#5D9438' : '#000000',
	'#739F56' : '#000000',
}

dnColors = dnColors.reverse();
upColors = upColors.reverse();

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+fromHome2, function(_data) {
			console.log(_data[0].stime)
			var data = self.decode(_data);
			
			$('#block_sector_stime').html(_data[0].stime)
			$('#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>');
					let url = '/'+lang+'/data/text-data/sectorTreeMap?type='+type+'&sdate='+sdate+'&sid='+sid;

					let chartName = {
						tc: "板塊圖表",
						sc: "板块图表",
						en: "Sector Chart"
					}

					genChartLink(url, $('.sector_chart_area_tip'), null, chartName[lang]);
				} 
				let noDataWord = {
					tc: "無相關數據",
					sc: "无相关数据",
					en: "No Related Data"
				}
				setTimeout(function(){
					$('#sectorTreeMapContainer').prepend(`<div aria-hidden="true" style="    position: absolute;top: 20px;left: 0;background: #f9f9f9;width: 100%;height: calc(100% - 20px);display: flex;justify-content: center;align-items: center; z-index: 0">${noDataWord[lang]}</div> `);
				}, 3000);
				//******************

			});
		});
	},

	decode : function(data){
		var _data = [];
		var _underlying = [];


		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 = "#D7D8D6";
			var _textColor = "#ffffff";
			var servicesData = [];
			
			if (data[i].pchng > 0){
				color = upColors[colorIndex];
			}else if (data[i].pchng < 0){
				color = dnColors[colorIndex];
			}

			

			//new code here
			let selectedDetail = { ...data[i].detail[0] };
			if(!selectedDetail.focus){
				let selectFocus = null;
				for (let j = 0; j < data[i].detail.length; j++){
					if (data[i].detail[j].focus){
						selectFocus = data[i].detail[j];
						selectFocus.focus.name = data[i].detail[j].name;
						break;
					}
				}
				if (selectFocus){
					selectedDetail.focus = selectFocus.focus;
				}
			}else{
				selectedDetail.focus.name = data[i].detail[0].name;
			}


			_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,
				dataLabels: {
					style: {
						color: _textColor,
					}
				},
				//detail: data[i].detail[0]
				detail: selectedDetail
			});

/* 			console.log(selectedDetail);
			console.log(data[i].detail[0]);
			console.log('break');
 */
			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(){
		return;
		console.log(this.chart.drillUpButton);

		if (this.chart.drillUpButton){
			console.log('hi')
			$(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: {
				//enabled: false,
				text: chartTitle,
				useHTML: true,
				//text: null,
			},
			tooltip:{
				enabled:false
			},
			accessibility: {
				enabled: false
			},
			plotOptions: {
				treemap: {

					drillUpButton: {
						position: {
							align: 'center',
							verticalAlign: 'top',
							y: -50,
							x: 0
						},
					},

					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;
								//console.log(detail);
								let _textColor = "#ffffff";
								_textColor = textColors[this.color];

								if(detail!=undefined ){
									if(this.key.indexOf("0.00%")>-1){
										return "";
									}
									
									if (detail.focus!=undefined && detail.focus){
										var _focus = detail.focus;
										var space = lang=='en'?'&nbsp;':'';
										var _type =  _focus.wtype.replace("CBBC/","").replace("EU/","");
										var html = "<div class='treeMapTooltip' style='padding:5px'><div class='line1' style='font-size:14px; color: "+_textColor+"'>"+this.key+"</div>";
										//console.log((detail.upchng*1).toFixed(2))
										html += "<div class='line2' style='font-weight:normal;color: "+_textColor+"'>"+detail.name+" ("+detail.ucode+") " + ((detail.upchng>0)?"+":"")+(detail.upchng*1).toFixed(2)+"%</div>";
										html += "<div class='line3' style='font-weight:normal;color: "+_textColor+"'>"+" "+detail.focus.name+space+self.labels[lang][_type+'_short']+" ("+_focus.code+") " + ((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;color: "+_textColor+"'>"+this.key+"</div>";
										html += "<div class='line2' style='font-weight:normal;color: "+_textColor+"'>"+detail.name+" ("+detail.ucode+") " + ((detail.upchng>0)?"+":"")+(detail.upchng*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>";
									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,


			},
			
			series: [{
				type: 'treemap',
				allowPointSelect: true,
				alternateStartingDirection: true,
				layoutAlgorithm: 'squarified',
				data: data.sectorData,
				states: {
					hover:{
						borderColor: '#ffffff'
					}
				},
				drillUpButton: {
					position: {
						align: 'center',
						verticalAlign: 'bottom',
						className: 'hideDrillUp',
						y: 0,
						x: 0
					}
				}
			},
			
		
		],
			exporting: {
				enabled: false
			}
		}
	},
	labels : {
		tc :{
			'CALL' : "認購",
			'PUT' : "認沽",
			'BULL' : "牛證",
			'BEAR' : "熊證",
			'CALL_short' : "購",
			'PUT_short' : "沽",
			'BULL_short' : "牛",
			'BEAR_short' : "熊",
		},
		sc :{
			'CALL' : "认购",
			'PUT' : "认沽",
			'BULL' : "牛证",
			'BEAR' : "熊证",
			'CALL_short' : "购",
			'PUT_short' : "沽",
			'BULL_short' : "牛",
			'BEAR_short' : "熊",
		},
		en :{
			'CALL' : "Call",
			'PUT' : "Put",
			'BULL' : "Bull",
			'BEAR' : "Bear",
			'CALL_short' : "Call",
			'PUT_short' : "Put",
			'BULL_short' : "Bull",
			'BEAR_short' : "Bear",
		},
	},
}