Navigate through tweets (boxes) + three js

[nielsv]

this is my situation:

 

I want to show twitter tweets like this: http://threejs.org/examples/css3d_periodictable.html

This is what I have now: http://nielsvroman.be/twitter/root/index.php
The boxes are tweets from the user: @BachelorGDM.

 

What I would like now is that there is always one selected and that you can navigate through them with the arrow keys on the keyboard.

This is my javascript code:

 

// THE TWEETS var data = loadTweets()// FUNCTION SHOW THE TWEETSfunction ShowTweets(){// VARS TABLE WITH TWEETS / PLACE IN COLUMN / PLACE IN ROWvar table = [];var column = 1;var row = 1;// LOOP THROUGH DATA AND CREATE TABLE WITH TWEET DETAILS + PLACE $.each(data, function(i) {    // DETAILS TWEET    var idstring = data[i].id_str;    var screenname = data[i].user.screen_name;    var imageurl =  data[i].user.profile_image_url;    // 9 TWEETS NEXT TO EACH OTHER    if(column % 9 == 0)    {        row++        column = 1;    }    var array = [imageurl, idstring, screenname, column, row ]    column++;    table.push(array);});// VARIABLES THREE JSvar camera, scene, renderer;var controls;var objects = [];var targets = { table: [], sphere: [], helix: [], grid: [] };init(); // CALL INIT FUNCTIONanimate(); // CALL ANIMATE FUNCTIONfunction init() {    // INITIALIZE CAMERA    camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 5000 );    camera.position.z = 1800;    // INITIALIZE SCENE    scene = new THREE.Scene();    // LOOP THROUGH TABLE ARRAY (ARRAY WITH ARRAYS IN IT)    for ( var i = 0; i < table.length; i ++ ) {        var item = table[i]; // ITEM IS ARRAY WITH [imageurl, idstring, screenname, column, row]        var element = document.createElement( 'div' );        element.className = 'element';        element.id = item[1]; // ITEM IDSTRING        element.style.backgroundColor = 'rgba(0,127,127,' + ( Math.random() * 0.5 + 0.25 ) + ')'; // BG COLOR + OPACITY FROM FRAME        var number = document.createElement( 'div' );        number.className = 'number';        number.textContent = i + 1; // NUMBER IN THE RIGHT TOP        element.appendChild( number );        var symbol = document.createElement( 'div' );        symbol.className = 'symbol';        var img = document.createElement('img');        img.src = item[0]; // IMAGE SOURCE IS LINK TO IMAGE        symbol.appendChild(img);        element.appendChild( symbol );        var details = document.createElement( 'div' );        details.className = 'details';        details.innerHTML = "" + '<br>' + item[2]; // SCREENNAME        element.appendChild( details );        var object = new THREE.CSS3DObject( element );        // POSITION OBJECTS AGAINST EACH OTHER        object.position.x = Math.random() * 4000 - 2000;        object.position.y = Math.random() * 4000 - 2000;        object.position.z = Math.random() * 4000 - 2000;        // ADD OBJECTS TO SCENE        scene.add(object);        // ADD OBJECT TO OBJECTS ARRAY        objects.push(object);    }    // TABLE VIEW    for ( var i = 0; i < objects.length; i ++ ) {        var item = table[i]; // ITEM IS ARRAY WITH [imageurl, idstring, screenname, column, row]        var object = new THREE.Object3D();        object.position.x = ( item[3] * 160 ) - 1540; // X-POSITION (COLUMN)        object.position.y = - ( item[4] * 200 ) + 1100; // Y-POSITION (ROW)        // targets = { table: [], sphere: [], helix: [], grid: [] };        targets.table.push(object); // PUSH OBJECT IN TABLE ARRAY (IN TARGETS ARRAY)    }    // SPHERE VIEW    var vector = new THREE.Vector3();    for ( var i = 0, l = objects.length; i < l; i ++ ) {        var phi = Math.acos( -1 + ( 2 * i ) / l );        var theta = Math.sqrt( l * Math.PI ) * phi;        var object = new THREE.Object3D();        object.position.x = 1000 * Math.cos( theta ) * Math.sin( phi );        object.position.y = 1000 * Math.sin( theta ) * Math.sin( phi );        object.position.z = 1000 * Math.cos( phi );        vector.copy( object.position ).multiplyScalar( 2 );        object.lookAt( vector );        // targets = { table: [], sphere: [], helix: [], grid: [] };        targets.sphere.push( object ); // PUSH OBJECT IN SPHERES ARRAY (IN TARGETS ARRAY)    }    // HELIX VIEW    var vector = new THREE.Vector3();    for ( var i = 0, l = objects.length; i < l; i ++ ) {        var phi = i * 0.175 + Math.PI;        var object = new THREE.Object3D();        object.position.x = 1100 * Math.sin( phi );        object.position.y = - ( i * 8 ) + 450;        object.position.z = 1100 * Math.cos( phi );        vector.copy( object.position );        vector.x *= 2;        vector.z *= 2;        object.lookAt( vector );        // targets = { table: [], sphere: [], helix: [], grid: [] };        targets.helix.push( object ); // PUSH OBJECT IN HELIX ARRAY (IN TARGETS ARRAY)    }    // GRID VIEW    for ( var i = 0; i < objects.length; i ++ ) {        var object = new THREE.Object3D();        object.position.x = ( ( i % 5 ) * 400 ) - 800;        object.position.y = ( - ( Math.floor( i / 5 ) % 5 ) * 400 ) + 800;        object.position.z = ( Math.floor( i / 25 ) ) * 1000 - 2000;        // targets = { table: [], sphere: [], helix: [], grid: [] };        targets.grid.push( object ); // PUSH OBJECT IN GRID ARRAY (IN TARGETS ARRAY)    }    renderer = new THREE.CSS3DRenderer();    renderer.setSize( window.innerWidth, window.innerHeight );    renderer.domElement.style.position = 'absolute';    // ADD RENDERER TO CONTAINER    document.getElementById( 'container' ).appendChild( renderer.domElement );    // TRACKBALLCONTROLS => WHEN YOU HOLD DOWN MOUSECLICK    controls = new THREE.TrackballControls( camera, renderer.domElement );    controls.rotateSpeed = 0.5;    //controls.minDistance = 500; // MAX ZOOM IN => MIN DISTANCE    controls.maxDistance = 2500; // MAX ZOOM OUT => MAX DISTANCE    controls.zoomSpeed = 1; // STANDARD IS 1.2    controls.keys = [ 37 /*LEFT*/, 38 /*UP*/, 39 /*RIGHT*/, 40 /*DOWN*/ ];    controls.addEventListener( 'change', render ); // RENDER ON CHANGE    var button = document.getElementById( 'table' );    button.addEventListener( 'click', function ( event ) {        transform( targets.table, 2000 );    }, false );    var button = document.getElementById( 'sphere' );    button.addEventListener( 'click', function ( event ) {        transform( targets.sphere, 2000 );    }, false );    var button = document.getElementById( 'helix' );    button.addEventListener( 'click', function ( event ) {        transform( targets.helix, 2000 );    }, false );    var button = document.getElementById( 'grid' );    button.addEventListener( 'click', function ( event ) {        transform( targets.grid, 2000 );    }, false );    transform( targets.table, 5000 );    //    window.addEventListener( 'resize', onWindowResize, false );    // WHEN PRESSED ON KEY    window.addEventListener( 'keydown', keydown, false );    function keydown( event ) {    };}function transform( targets, duration ) {    TWEEN.removeAll();    for ( var i = 0; i < objects.length; i ++ ) {        var object = objects[ i ];        var target = targets[ i ];        new TWEEN.Tween( object.position )            .to( { x: target.position.x, y: target.position.y, z: target.position.z }, Math.random() * duration + duration )            .easing( TWEEN.Easing.Exponential.InOut )            .start();        new TWEEN.Tween( object.rotation )            .to( { x: target.rotation.x, y: target.rotation.y, z: target.rotation.z }, Math.random() * duration + duration )            .easing( TWEEN.Easing.Exponential.InOut )            .start();    }    new TWEEN.Tween( this )        .to( {}, duration * 2 )        .onUpdate( render )        .start();}function onWindowResize() {    camera.aspect = window.innerWidth / window.innerHeight;    camera.updateProjectionMatrix();    renderer.setSize( window.innerWidth, window.innerHeight );}function animate() {    requestAnimationFrame( animate );    TWEEN.update();    controls.update();}// RENDER SCENE/CAMERAfunction render() {    renderer.render( scene, camera );}}

My tweets are initially in the variable data. I now have added this to my code:

 

controls.keys = [ 37 /*LEFT*/, 38 /*UP*/, 39 /*RIGHT*/, 40 /*DOWN*/ ];window.addEventListener( 'keydown', keydown, false );function keydown( event ) {};

But now how can I navigate through the tweets (boxes) with my arrows on the keyboard?
I want to change the css of the selected box and open an overlay of the associated tweet. (You can see this when you click on a box on the link)

 

I have no clue on how to start with this. Can somebody help me?