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.layer = 0;
var introOverlay = document.createElement("div");
introOverlay.className = "introOverlay"
var intro = document.createElement("div");
introOverlay.appendChild(intro);
intro.id = "introduce";
intro.style.display = "none";
intro.innerHTML = '<div class="outer"><div id="introBanner"></div><div id="introBody"><h2 class="introTitle"> </h2><p class="introText"> </p><div id="artifact"></div><div class="bottomCover"></div></div></div><div id="back">返回</div>';
/* var back = document.createElement("div");
back.id = "back";
intro.appendChild(back); */
 
//intro.innerHTML = '<div id="introBanner"></div><div id="introBody"><h2 class="introTitle">中国的蒙古族</h2><p class="introText">2093u如此美味如我入额我iqq为</p><div id="artifact"></div></div>';
//intro.innerHTML = '<div id="introBanner" class="layer2"></div><div id="introBody"><h2 class="introTitle">蒙古族</h2><p class="introText">345254622345</p></div>';

canvas.node().parentElement.appendChild(introOverlay);
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;

var light = new THREE.HemisphereLight('#ffffff', '#888', 0.4);
light.position.set(0, 100, 0);
scene.add(light);

export var light3 = new THREE.DirectionalLight(0xffffff, 1);
light3.position.set( 1, 1, 0 );
scene.add(light3);
 
/* 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() {
	 
	 
	 if(layer<2){
		 
		var ratio = 320/365;//横高比
		var h = window.innerHeight;
		var w = h * ratio;
		camera.aspect = w/h;
		
		camera.view = {
			fullWidth: w,
			fullHeight: h,
			offsetX: 180,
			offsetY: -50,
			width: w,
			height: h
		};
		
		
		camera.updateProjectionMatrix();
		renderer.setSize(w, h);
		introOverlay.style.left = w + "px";
	}else{
		introOverlay.style.left = "";
	}  
	
	/*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"));
		  
		   
		 
	} */
	  
}