var container, stats;
 
var camera, scene, renderer;
 
var cube, plane;
 
var targetRotation = 0;
var targetRotationOnMouseDown = 0;
 
var mouseX = 0;
var mouseXOnMouseDown = 0;

var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
 
var sectionHeight = window.innerHeight;

init();
setInterval(loop, 1000/25);
 
function init() {
  container = document.getElementById('geodome');
  width = 940;
  height = 450;

  camera = new THREE.Camera( 70, width / height, 1, 10000 );
  camera.position.y = 151;
  camera.position.z = 18;
  camera.target.position.y = 150;
 
  scene = new THREE.Scene();
 
  geometry = new dome( 400, 200, 200 );
 
  var material1 = new THREE.MeshNormalMaterial({color: 0xffffff, opacity:0.9});
  var material2 = new THREE.MeshBasicMaterial({color: 0x000000, opacity:0.5, wireframe:true, wireframe_linewidth:1});
  dome = new THREE.Mesh( geometry, [material1, material2]);
 
  dome.overdraw = false;
  dome.doubleSided = false;
 
  dome.position.y = 147.5;
  scene.addObject( dome );
 
  renderer = new THREE.CanvasRenderer();
  renderer.setSize(  width , height);
 
  container.appendChild( renderer.domElement );
 
  //stats = new Stats();
  //stats.domElement.style.position = 'absolute';
  //stats.domElement.style.bottom = '0px';
  //container.appendChild( stats.domElement );
 
  document.addEventListener( 'mousedown', onDocumentMouseDown, false );
  document.addEventListener( 'touchstart', onDocumentTouchStart, false );
  document.addEventListener( 'touchmove', onDocumentTouchMove, false );
 
}
 
function onDocumentMouseDown( event ) {

event.preventDefault();

document.addEventListener( 'mousemove', onDocumentMouseMove, false );
document.addEventListener( 'mouseup', onDocumentMouseUp, false );
document.addEventListener( 'mouseout', onDocumentMouseOut, false );

mouseXOnMouseDown = event.clientX - windowHalfX;
targetRotationOnMouseDown = targetRotation;
}

function onDocumentMouseMove( event ) {

mouseX = event.clientX - windowHalfX;

targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;
}

function onDocumentMouseUp( event ) {

document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
}

function onDocumentMouseOut( event ) {

document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
}

function onDocumentTouchStart( event ) {

if ( event.touches.length == 1 ) {

  event.preventDefault();

  mouseXOnMouseDown = event.touches[ 0 ].pageX - windowHalfX;
  targetRotationOnMouseDown = targetRotation;

}
}

function onDocumentTouchMove( event ) {

if ( event.touches.length == 1 ) {

event.preventDefault();

mouseX = event.touches[ 0 ].pageX - windowHalfX;
targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.05;
}
}

function loop() {

//plane.rotation.z = cube.rotation.y += ( targetRotation - cube.rotation.y ) * 0.05;
targetRotation -= 0.001;
dome.rotation.y += ( targetRotation - dome.rotation.y ) * 0.05;

renderer.render(scene, camera);
//stats.update();
}