import THREE from 'THREE';
import d3 from 'd3';

export var canvas = d3.select("body").append("canvas")
canvas.node().id = "canvas";
  //.attr("width", window.innerWidth)
  //.attr("height", window.innerHeight);
window.addClass = function(elem, className) {
  if (elem.className === undefined) {
	elem.className = className;
  } else if (elem.className !== className) {
	var classes = elem.className.split(/ +/);
	if (classes.indexOf(className) == -1) {
	  classes.push(className);
	  elem.className = classes.join(' ').replace(/^\s+/, '').replace(/\s+$/, '');
	}
  }
}

window.removeClass = function(elem, className) {
	if (className) {
		if (elem.className === undefined) {
		  // elem.className = className;
		}else if (elem.className === className) {
			elem.removeAttribute('class');
		}else{
			var classes = elem.className.split(/ +/);
			var index = classes.indexOf(className);
			if(index != -1){
				classes.splice(index, 1);
				elem.className = classes.join(' ');
			}
		}
	}else{
		elem.className = undefined;
	}
}



window.state = ["earth"];
var outer = document.createElement("div");
outer.className = "introOverlay"
var intro = document.createElement("div");
outer.appendChild(intro);
intro.id = "introduce";
intro.style.display = "none";
intro.innerHTML = '<h2>点击地球选择区域</h2><div class="below"></div><div id="introMenu"><a index="countryIntro"><span class="number">NO.1</span>国家背景<span class="EngPostfix">National Background</span></a><a index="artifact"><span class="number">NO.2</span>器物介绍<span class="EngPostfix">Instrument Introduction</span></a><a index="culture"><span class="number">NO.3</span>文化传承<span class="EngPostfix">Cultural Heritage</span></a></div>';
canvas.node().parentElement.appendChild(outer);
canvas.node().getContext("webgl");
canvas.node().style.position = "absolute";
export var renderer = new THREE.WebGLRenderer({canvas: canvas.node(), antialias: true, alpha:true});
//renderer.setClearColor( 0xeeeeee );//ie默认黑色背景，所以要加一个颜色
renderer.setClearAlpha( 0 );

document.body.appendChild(renderer.domElement);

export var camera = new THREE.PerspectiveCamera(70, 1, 1, 5000);
camera.position.z = 1000;
//camera.updateProjectionMatrix();
onWindowResize();

export var scene = new THREE.Scene();


export var controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.enableDamping = true;
controls.dampingFactor = 1;
controls.enablePan = false;
controls.rotateSpeed =  0.6; 
//controls.enableZoom = false; 
controls.zoomSpeed = 0.3;

export var light = new THREE.HemisphereLight('#ffffff', '#333', 1.5);
light.position.set(0, 100, 0);
light.castShadow = true;
scene.add(light);

/* var light2 = new THREE.PointLight('#ffffff',  1.5);
light2.position.set(250, 0, 10);
camera.add(light2);
scene.add(light2); */
window.addEventListener('resize', onWindowResize, false);

function onWindowResize() {
	var onlyTitle = (d3.select('#introMenu').node().style.display==="none");
	if(state[state.length-1] === "earth"){
		var e = Math.min(window.innerWidth/2,window.innerHeight*0.95);
		var offset = Math.max(0, window.innerHeight - e)/2;
		canvas.node().style.top = offset + "px";
		renderer.setSize(e, e);
	}  
	var infoH = intro.clientHeight;
	var earthH = canvas.node().clientHeight || window.innerWidth*0.3;//(onlyTitle?0.2:0.3)
	if(infoH){
		  var f1 = parseFloat(intro.style["font-size"]);
		  if(f1!=f1) f1 = 1; //NAN
		  var ratio = earthH/infoH/1.3;
		  var size = Math.min(Math.max(1, f1 * ratio ), 1.5);
		  intro.style["font-size"] = size + "em";
		  (size<1.1)?(addClass(intro,"weight")):(removeClass(intro,"weight"));
		  
		   
		 
	}
	  
}