var start_r = 100 //camera start pos
var max_r = 300  // Max render distance

var texts = ['Answer 1', 'Answer 2', 'Answer 3', 'Answer 4']; // Texts for each answer
var colors = ['#ffaaaa', '#aaffaa', '#aaaaff', '#ffffaa']; // Different background colors for each answer
	
	AB.world.newRun = function()
	{
		// Code for Three.js initial drawing of objects.
		// Should include one of:
	 	// ABWorld.init2d ( arguments ); 	
	 	// ABWorld.init3d ( arguments ); 
	 	initScene();
	 	cameraControls();
	};
	function initScene(){
	    
	    var color = "white";
	 	ABWorld.init2d ( start_r, max_r, color );
	 	var light = new THREE.AmbientLight("white", 0.8);
        ABWorld.scene.add(light);
        
        var size = 150; // Overall size of the grid
        var divisions = 2; // For a 2x2 grid
        var customGrid = createCustomGrid(size, divisions, texts, colors);
        ABWorld.scene.add(customGrid);
        
    
	}
	
	function createTextTexture(text, color, bgColor) {
        var canvas = document.createElement('canvas');
        var context = canvas.getContext('2d');
        canvas.width = 256;
        canvas.height = 256;
        context.fillStyle = bgColor;
        context.fillRect(0, 0, canvas.width, canvas.height);
        context.font = '40px Arial';
        context.fillStyle = color;
        context.textAlign = 'center';
        context.textBaseline = 'middle';
        context.fillText(text, canvas.width / 2, canvas.height / 2);
        var texture = new THREE.Texture(canvas);
        texture.needsUpdate = true;
        return texture;
    }
    
    function createCustomGrid(size, divisions, texts, colors) {
    var group = new THREE.Group();
    var squareSize = size / divisions;

    for (var i = 0; i < divisions; i++) {
        for (var j = 0; j < divisions; j++) {
            var text = texts[i * divisions + j];
            var color = colors[i * divisions + j];

            var material = new THREE.MeshBasicMaterial({ map: createTextTexture(text, 'black', color) });
            var geometry = new THREE.PlaneGeometry(squareSize, squareSize);
            var mesh = new THREE.Mesh(geometry, material);

            mesh.position.set((i - divisions / 2) * squareSize + squareSize / 2, (j - divisions / 2) * squareSize + squareSize / 2, 0);
            group.add(mesh);
        }
    }

    return group;
}
	
	
	//disable camera controls
	function cameraControls()
    {
    		ABHandler.mouseDrag			= mouseDrag;
    	//ABHandler.mouseZoom         = mouseZoom;
    		
    }
    
    function mouseDrag(x, y){       // Disable drag
        return;
    }
    
    function mouseZoom(x){          // Disable zoom
        return;
    }


	AB.world.nextStep = function()		 
	{
		// Code for Three.js re-drawing of objects.  		
	};


	AB.world.endRun = function()
	{
	};