var container, stats;

    var camera, controls, scene, renderer;

    var mesh, texture, geometry, material;

    var worldWidth = 128,
      worldDepth = 128,
      worldHalfWidth = worldWidth / 2,
      worldHalfDepth = worldDepth / 2;
    var sky;

    var clock = new THREE.Clock();

    init();
    animate();

    function init() {

      container = document.getElementById('container');

      camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 1, 2500);

      var cameraX = 0;
      var cameraY = 70;
      var cameraZ = 0;

      camera.position.x = cameraX;
      camera.position.y = cameraY;
      camera.position.z = cameraZ;

      scene = new THREE.Scene();
      scene.fog = new THREE.FogExp2(0x004076, 0.0006);

      // moon
      var sphereGeometry = new THREE.SphereGeometry(100, 4, 4);
      var sphereMaterial = new THREE.MeshPhongMaterial({
        color: 0xffffff,
        shininess: 10,
        emissive: 0xFFFFFF,
        emissiveIntensity: 3
      });
      var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
      sphere.position.set(0, 300, -2450); //-2500);

      scene.add(sphere);

      // lights
      var pointMoonColor = "#FCFFB4";
      pointMoon = new THREE.PointLight(pointMoonColor, 1500, 300);
      pointMoon.position.set(0, 300, -2500);
      scene.add(pointMoon);
      // scene.add(new THREE.PointLightHelper(pointMoon, 1));

      // ambient
      var ambiColor = "#0c0c0c";
      var ambientLight = new THREE.AmbientLight(ambiColor);
      scene.add(ambientLight);

      // lights
      var pointAColor = "#FFA600";
      pointA = new THREE.PointLight(pointAColor, 50, 1);
      pointA.position.set(0, 70, 0);
      scene.add(pointA);
      scene.add(new THREE.PointLightHelper(pointA, 1));

      // right light
      var dirLightL = new THREE.DirectionalLight(0xffffff, 1);
      dirLightL.position.set(20, 0, 0);
      scene.add(dirLightL);

      // from behing
      var dirLightBehind = new THREE.DirectionalLight(0x004076, 10);
      dirLightBehind.position.set(0, 0, -500);
      scene.add(dirLightL);

      var cubeGeometry = new THREE.BoxGeometry(50, 50, 50);
      var cubeMaterial = new THREE.MeshLambertMaterial({
        color: 0xff0000
      });
      var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
      cube.position.y = 250;
      scene.add(cube);

      geometry = new THREE.PlaneGeometry(10000, 10000, worldWidth * 2 - 1, worldDepth * 2 - 1);

      geometry.rotateX(Math.PI / 2);
      //geometry.rotation.x = Math.PI/2;

      for (var i = 0, l = geometry.vertices.length; i < l; i++) {

        geometry.vertices[i].y = 5 * Math.sin(i / 4);

      }

      material = new THREE.MeshPhongMaterial({
        color: 0x004076,
        shading: THREE.FlatShading,
        side: THREE.DoubleSide,
        shininess: 25,
        wireframe: false
      });

      mesh = new THREE.Mesh(geometry, material);
      scene.add(mesh);

      // SKY

      // moons light

      var spotColor = "#BF93FF";
      var spotLight = new THREE.SpotLight(spotColor);
      spotLight.angle = Math.PI;
      spotLight.position.set(0, 160, -2000);
      spotLight.distance = 5000;
      spotLight.intensity = 5;
      spotLight.castShadow = true;

      spotLight.shadowCameraVisible = true;

      spotLight.target = cube;
      scene.add(spotLight);

      renderer = new THREE.WebGLRenderer();
      renderer.setClearColor(0x004076);
      //renderer.setPixelRatio( window.devicePixelRatio );
      renderer.setSize(window.innerWidth, window.innerHeight);

      //container.innerHTML = "";

      container.appendChild(renderer.domElement);

      stats = new Stats();
      //container.appendChild( stats.dom );

      //

      window.addEventListener('resize', onWindowResize, false);

    }

    function onWindowResize() {

      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();

      renderer.setSize(window.innerWidth, window.innerHeight);

      //  controls.handleResize();

    }

    //

    function animate() {

      requestAnimationFrame(animate);

      render();
      stats.update();

    }

    function render() {

      var delta = clock.getDelta(),
        time = clock.getElapsedTime() * 10;

      for (var i = 0, l = geometry.vertices.length; i < l; i++) {
        geometry.vertices[ i ].y = 3 * Math.sin( i / 2 + ( time + i / 3 ) / 5 );
        
        //geometry.vertices[i].y = 3 * Math.sin(i / 2 + (time + i * 0.5 / 5) / 8);


      }

      // spin sea
      mesh.rotation.y += 0.0005;

      mesh.geometry.verticesNeedUpdate = true;

      // controls.update( delta );
      renderer.render(scene, camera);

    }