//created by XORXOR, 2016

var contianer, renderer, camera, scene;
var char;
var chars = [];
var objects = [];


function init() {

    container = document.createElement('div');
    document.body.appendChild(container);

    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera( 70, window.innerWidth/window.innerHeight, 1, 10000 );
    camera.position.set( 0, 0, 500 );
    
    renderer = new THREE.CSS3DRenderer();

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

    container.appendChild( renderer.domElement );
    scene.add(camera);

    window.addEventListener( 'mousedown', clickedOnScreen );
    window.addEventListener( 'resize', onWindowResize, false );
}

function get3dPoint(event){
    var vector = new THREE.Vector3(
        (event.clientX / window.innerWidth) * 2 - 1,
        - (event.clientY / window.innerHeight) * 2 + 1,
        0.5);

    vector.unproject(camera);
    var dir = vector.sub(camera.position).normalize();
    var distance = - camera.position.z / dir.z;
    var pos = camera.position.clone().add( dir.multiplyScalar(distance) );    
    return pos;
}
            
function animate() {
    
    for (var i = chars.length - 1; i >= 0; i--) { 
        chars[i].style.opacity -= .004;      
        op = chars[i].style.opacity;
        objects[i].position.z -= 1;

        if (op < 0) {
            scene.remove(objects[i]);
            chars.splice(i,1);
            objects.splice(i,1);
        }
    }
    
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}


function clickedOnScreen(e) {
    e.preventDefault();  

    var help = document.getElementById('help');
    help.style.display = "none";

    var point = get3dPoint(e);    

    char = document.createElement( 'div' );
    char.className = 'char';
    char.style.opacity = 1;
    letter = String.fromCharCode(97 + Math.floor(Math.random() * 26))

    char.textContent = letter.toUpperCase();    
    object = new THREE.CSS3DObject(char);

    chars.push(char);
    objects.push(object);

    scene.add(object);

    object.position.set(point.x,point.y,0)   
}

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize( window.innerWidth, window.innerHeight );
}

init();
animate();