var camera, scene, renderer,
    geometry, geometry1, material, 
    material_solid, material_wire, material_wire2, 
    mesh, mesh1, mesh2, mesh3,
    cameraposition, radius, theta, 
    mouseposition, mousedelta;

function init() {
    "use strict";

    radius = 1000;
    theta = {x: 0, y: 0};
    //cameraposition = { x: 800, y: 0, z:800 }; 
    camera = new THREE.Camera(75, window.innerWidth / window.innerHeight, 1, 10000);


    camera.position.x = radius * Math.sin(theta.x * Math.PI / 360);
    camera.position.y = radius * Math.sin(theta.y * Math.PI / 360);
    camera.position.z = 800; //radius * Math.cos( theta * Math.PI / 360 );     

    scene = new THREE.Scene();

    geometry = new THREE.Cube(200, 600, 50);
    geometry1 = new THREE.Cube(200, 800, 50);
    material_solid = new THREE.MeshBasicMaterial({ color: 0xffffff, opacity: 0.3 });
    material_wire = new THREE.MeshBasicMaterial({ color: 0x071C28, wireframe: true });
    material_wire2 = new THREE.MeshBasicMaterial({ color: 0xffffff, opacity: 0.2, wireframe: true });
    //Scene Background - #071C28
    //material = [material_solid,material_wire];
    material = [material_solid, material_wire2];

    mesh = new THREE.Mesh(geometry, material);
    mesh.position.x = mesh.position.x - 390;
    mesh1 = new THREE.Mesh(geometry1, material);
    mesh1.position.x = mesh1.position.x - 130;
    mesh1.position.y = mesh1.position.y + 100;
    mesh2 = new THREE.Mesh(geometry, material);
    mesh2.position.x = mesh2.position.x + 130;
    mesh3 = new THREE.Mesh(geometry1, material);
    mesh3.position.x = mesh3.position.x + 390;
    mesh3.position.y = mesh3.position.y - 100;

    scene.addObject(mesh);
    scene.addObject(mesh1);
    scene.addObject(mesh2);
    scene.addObject(mesh3);

    renderer = new THREE.CanvasRenderer();
    renderer.setSize(window.innerWidth - 200, window.innerHeight);

    $('#background').append(renderer.domElement);

}

function animate() {
    "use strict"; 
    // Include examples/js/RequestAnimationFrame.js for cross-browser compatibility.
    requestAnimationFrame(animate);
    render();
}

mousedelta = 500; 
function render() {
    "use strict"; 
    var angledelta;

    /* Using Circular Translation  */
    angledelta = 90; 
    theta.x = angledelta * (0.5 - mouseposition.x / $(window).width());  
    theta.y = angledelta * (0.5 - mouseposition.y / $(window).height()); 
    camera.position.x = radius * Math.sin(theta.x * Math.PI / 360);
    camera.position.y = radius * Math.sin(theta.y * Math.PI / 360);
    //camera.position.z = radius * Math.cos( theta * Math.PI / 360 );     
    /* */
    renderer.render(scene, camera);

    /*
    mesh.rotation.x += 0.01;
    mesh.rotation.y += 0.02;

    mesh1.rotation.x += 0.01;
    mesh1.rotation.y += 0.02;

    mesh2.rotation.x += 0.01;
    mesh2.rotation.y += 0.02;

    mesh3.rotation.x += 0.01;
    mesh3.rotation.y += 0.02;
    */

    /* Linear Translation 
    camera.position.x = cameraposition.x + mousedelta * (.5 - mouseposition.x / window.innerWidth);
    camera.position.y = cameraposition.y + mousedelta * (.5 - mouseposition.y / window.innerHeight);
    */


}

// scene.objects[0].materials[0].color.setHex(0x00ff00)