module.exports.main = function () {
  var mouse = { x: 0, y: 0 };
      var query = {}; //require('query-string').parse(window.location.search.substring(1));
      var graph = getGraphFromQueryString(query);
    //graph.removeNode(1);
    graph.addLink(2, 'space');
  
    graph.addNode(150, {
      size: Math.random() * 25 + 1,
      color: "red"
    });

    // and links:
    graph.addLink(2, 150, { color: "red" });
  
  
  var createThree = require('ngraph.three');
  var graphics = createThree(graph, {interactive: true});

  var THREE = graphics.THREE;  
  
      console.debug(graph);
      console.log(JSON.stringify(graph));   //query is {} ??????

  // tell graphics we want custom UI
  graphics.createNodeUI(function () {
    var size = Math.random() * 10 + 1;
    
	var mapUrl = "./images/sz.jpg";
	var map = THREE.ImageUtils.loadTexture(mapUrl);

        /*
        var nodeMaterial = new THREE.MeshPhongMaterial({ 
        map: map, //color: getNiceColor(), 
        ambient: 0x996633, // should generally match color
        specular: 0x050505,
        shininess: 100
       });  
       var nodeGeometry = new THREE.SphereGeometry(size);
       */	
	ObjGroup = new THREE.Object3D();
	
    var nodeMaterial = new THREE.MeshBasicMaterial({ map: map });
	var nodeGeometry = new THREE.BoxGeometry(size, size, size);

	var szCube = new THREE.Mesh(nodeGeometry, nodeMaterial);
      //return new THREE.Mesh(nodeGeometry, nodeMaterial);
	ObjGroup.add(szCube);
	
    var sprite = makeTextSprite( " sz ",  
 		{ fontsize: 24, borderColor: {r:255, g:0, b:0, a:1.0}, backgroundColor: {r:255, g:100, b:100, a:0.8} } ); 

	  //sprite.position.set( 0,0,0 );
	  //sprite.position.normalize();
	  //sprite.position.divideScalar(50);

	ObjGroup.add(sprite);
      //	return sprite;
	return ObjGroup;
 
 }).createLinkUI(function() {
    var linkGeometry = new THREE.Geometry();
    // we don't care about position here. linkRenderer will update it
    linkGeometry.vertices.push(new THREE.Vector3(0, 0, 0));
    linkGeometry.vertices.push(new THREE.Vector3(0, 0, 0));

    var linkMaterial = new THREE.LineBasicMaterial({ color: getNiceColor() });
    return new THREE.Line(linkGeometry, linkMaterial);
  });

  var scene = graphics.scene;

    //add an additional Sphere for fun 
    var sphereMaterial = new THREE.MeshPhongMaterial({ 
    color: getNiceColor(), 
    ambient: 0x996633, // should generally match color
    specular: 0x050505,
    shininess: 100
   });  
   var sphereGeometry = new THREE.SphereGeometry(10);
   sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
	sphere.position.set(50,0,0); 
 	sphere.name = "Sphere"; 
 	scene.add(sphere); 
 
    //add an additional Box for fun 
    var cubeGeometry = new THREE.BoxGeometry( 20, 20, 20 ); 
	var cubeMaterial = new THREE.MeshNormalMaterial(); 
 	cube = new THREE.Mesh( cubeGeometry, cubeMaterial ); 
 	cube.position.set(0,50.1,0); 
 	cube.name = "Cube"; 
 	scene.add(cube); 
 	 
    //add an additional sprite for fun 
 	var spritey = makeTextSprite( " Hello, ",  
 		{ fontsize: 24, borderColor: {r:0, g:255, b:0, a:1.0}, backgroundColor: {r:100, g:255, b:100, a:0.8} } ); 
 	spritey.position.set(-85,105,55); 
 	scene.add( spritey ); 
  
  
  var directionalLight = new THREE.DirectionalLight(0xffffff, 2);
  directionalLight.position.set( 1, 1, 1 );
  scene.add(directionalLight);
  
    //var light = new THREE.PointLight(0xffffff, 10, 0);
    //light.position.set(0,0,0);
    //scene.add(light);
  
  
  // mouse
  document.addEventListener( 'mousemove', onDocumentMouseMove, false );  
  
  graphics.run(); // begin animation loop:
  graphics.camera.position.z = getNumber(query.z, 400);

  // make sprites helper function
  function makeTextSprite( message, parameters ) 
  { 
 	if ( parameters === undefined ) parameters = {}; 
 	 
 	var fontface = parameters.hasOwnProperty("fontface") ?  
 		parameters["fontface"] : "Arial"; 
 	 
 	var fontsize = parameters.hasOwnProperty("fontsize") ?  
 		parameters["fontsize"] : 18; 
 	 
 	var borderThickness = parameters.hasOwnProperty("borderThickness") ?  
 		parameters["borderThickness"] : 4; 
 	 
 	var borderColor = parameters.hasOwnProperty("borderColor") ? 
 		parameters["borderColor"] : { r:0, g:0, b:0, a:1.0 }; 
 	 
 	var backgroundColor = parameters.hasOwnProperty("backgroundColor") ? 
 		parameters["backgroundColor"] : { r:255, g:255, b:255, a:1.0 }; 
 		 
 	var canvas = document.createElement('canvas'); 
 	var context = canvas.getContext('2d'); 
 	context.font = "Bold " + fontsize + "px " + fontface; 
      
 	// get size data (height depends only on font size) 
 	var metrics = context.measureText( message ); 
 	var textWidth = metrics.width; 
 	 
 	// background color 
 	context.fillStyle   = "rgba(" + backgroundColor.r + "," + backgroundColor.g + "," 
 								  + backgroundColor.b + "," + backgroundColor.a + ")"; 
 	// border color 
 	context.strokeStyle = "rgba(" + borderColor.r + "," + borderColor.g + "," 
 								  + borderColor.b + "," + borderColor.a + ")"; 
  
 	context.lineWidth = borderThickness; 
 	roundRect(context, borderThickness/2, borderThickness/2, textWidth + borderThickness, fontsize * 1.4 + borderThickness, 6); 
 	// 1.4 is extra height factor for text below baseline: g,j,p,q. 
 	 
 	// text color 
 	context.fillStyle = "rgba(0, 0, 0, 1.0)"; 
  
 	context.fillText( message, borderThickness, fontsize + borderThickness); 
 	 
 	// canvas contents will be used for a texture 
 	var texture = new THREE.Texture(canvas)  
 	texture.needsUpdate = true;
	
  
 	var spriteMaterial = new THREE.SpriteMaterial(  
 		{ map: texture }); //, useScreenCoordinates: false } ); 
 	var sprite = new THREE.Sprite( spriteMaterial ); 
 	sprite.scale.set(80,40,1.0); 
 	return sprite;	 
 }  

  //mouse
  function onDocumentMouseMove( event )  
  { 
 	// the following line would stop any other event handler from firing 
 	// (such as the mouse's TrackballControls) 
 	// event.preventDefault(); 
 	 
 	// update the mouse variable 
 	mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1; 
 	mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1; 
  } 
  
};




function getGraphFromQueryString(query) {
  var graphGenerators = require('ngraph.generators');
  //var createGraph = graphGenerators[query.graph] || graphGenerators.circularLadder;
  //var createGraph = graphGenerators[query.graph] || graphGenerators.grid;
  var createGraph = graphGenerators[query.graph] || graphGenerators.grid3;
  //var createGraph = graphGenerators[query.graph] || graphGenerators.balancedBinTree;
  //var createGraph = graphGenerators.complete;  //graphGenerators[query.graph] || graphGenerators.complete;
  //var createGraph = graphGenerators.noLinks;
  return createGraph(getNumber(query.n), getNumber(query.m), getNumber(query.k));
}

function getNumber(string, defaultValue) {
  var number = parseFloat(string);
  return (typeof number === 'number') && !isNaN(number) ? number : (defaultValue || 4);
}

var niceColors = [
 0x1f77b4, 0xaec7e8,
 0xff7f0e, 0xffbb78,
 0x2ca02c, 0x98df8a,
 0xd62728, 0xff9896,
 0x9467bd, 0xc5b0d5,
 0x8c564b, 0xc49c94,
 0xe377c2, 0xf7b6d2,
 0x7f7f7f, 0xc7c7c7,
 0xbcbd22, 0xdbdb8d,
 0x17becf, 0x9edae5
];

function getNiceColor() {
  return niceColors[(Math.random() * niceColors.length)|0];
}


  
 // function for drawing rounded rectangles 
 function roundRect(ctx, x, y, w, h, r)  
 { 
     ctx.beginPath(); 
     ctx.moveTo(x+r, y); 
     ctx.lineTo(x+w-r, y); 
     ctx.quadraticCurveTo(x+w, y, x+w, y+r); 
     ctx.lineTo(x+w, y+h-r); 
     ctx.quadraticCurveTo(x+w, y+h, x+w-r, y+h); 
     ctx.lineTo(x+r, y+h); 
     ctx.quadraticCurveTo(x, y+h, x, y+h-r); 
     ctx.lineTo(x, y+r); 
     ctx.quadraticCurveTo(x, y, x+r, y); 
     ctx.closePath(); 
     ctx.fill(); 
 	 ctx.stroke();    
}