//root = document.getElementById("WebGL");
//response is reading the data from my local setup server through HTTP POST request
//the above declarations are commented just for understanding

function createsphere(response, root, width, height) {

	var scene, sphere, radius;
	var webglviewport;
	var spritearray = new Array();
	var renderer = new THREE.WebGLRenderer( {antialias:true} );
	var camera = new THREE.PerspectiveCamera(60, window.innerWidth/window.innerHeight, 1, 1000);
	var controls = new THREE.OrbitControls(camera, renderer.domElement);

function convertlatlonToVec3(lat, lon)
{
   var cosLat = Math.cos(circle.getCenter().lat() * degrees);
   var sinLat = Math.sin(circle.getCenter().lat() * degrees);

   var xSphere = radiusEquator * cosLat;
   var ySphere = 0;
   var zSphere = radiusPoles * sinLat;
   var rSphere = Math.sqrt(xSphere*xSphere + ySphere*ySphere + zSphere*zSphere);

   var tmp = rSphere * Math.cos(lat * degrees);

   xSphere = tmp * Math.cos((lon - circle.getCenter().lng()) * degrees);
   ySphere = tmp * Math.sin((lon - circle.getCenter().lng()) * degrees);
   zSphere = rSphere * Math.sin(lat * degrees);

    var x = -ySphere/circle.getRadius();
    var y = (zSphere*cosLat - xSphere*sinLat)/circle.getRadius();
    var z = 0;

    return new THREE.Vector3(x, y, z);

}

function labelBox(cardinal, radius, root)
{

	this.position = convertlatlonToVec3(cardinal.lat, cardinal.lon).multiplyScalar(radius);

	//create html overlay box and clickable to url....
	this.box = document.createElement('div');
	a = document.createElement('div');
	a.innerHTML = cardinal.name;
	$(a).data("id", cardinal.ID);
	$(a).click(function(){

		triggermarker = markers[parseInt($(this).data("id")) -1 ];
		google.maps.event.trigger(triggermarker, 'click');
	});

	this.box.className = "spritelabel";
	this.box.appendChild(a);


	this.domElement = root;
	this.domElement.appendChild(this.box);

}

labelBox.prototype.update = function()
{

	var screenVector = new THREE.Vector3(0, 0, 0);
	screenVector.copy(this.position);
	screenVector.project(camera);

	var posx = Math.round((screenVector.x + 1)* this.domElement.offsetWidth/2 + webglviewport.left);
	var posy = Math.round((1 - screenVector.y)* this.domElement.offsetHeight/2);


	var boundingRect = this.box.getBoundingClientRect();

	//update the box overlays position
	this.box.style.left = (posx - boundingRect.width) + 'px';
	this.box.style.top = posy + 'px';

	this.occludeLabel(this.box, this.marker);
};

labelBox.prototype.occludeLabel = function(sprite, marker)
{
	var markerposition = marker.getWorldPosition();
	var eye = camera.position.clone().sub(markerposition);
	var dot = eye.clone().normalize().dot(markerposition.normalize());

	var occluded = (dot > 0) ? true : false;

	if(occluded) {
		sprite.style.visibility = "hidden";
	}
	else {
		sprite.style.visibility = "visible";
	}

};


function startwebgl(response, root) {

	var width = $(root).width();
	var height = $(root).height();

	webglviewport = $(root).position();  //gives the top-left of my viewport

	renderer.setSize(width, height);

	var mapdata = document.createElement('div');

	Locname = document.createElement('div');
	Locname.innerHTML = response.ImgLocation;

	b = document.createElement('div');
	b.innerHTML = response.Latitude;

	unit_Lat = document.createElement('div');
	unit_Lat.innerHTML = response.CardinalDir_Lat;

	c = document.createElement('div');
	c.innerHTML = response.Longitude;

	unit_Lng = document.createElement('div');
	unit_Lng.innerHTML = response.CardinalDir_Lng;

	mapdata.className = "Webglbox";
	mapdata.appendChild(Locname);
	mapdata.appendChild(b);
	mapdata.appendChild(unit_Lat);
	mapdata.appendChild(c);
	mapdata.appendChild(unit_Lng);


	//document.body.appendchild();
	root.appendChild(renderer.domElement);
	root.appendChild(mapdata);

	camera.position.z = 5;

	scene = new THREE.Scene();

	radius = 2.5;


	controls.minPolarAngle = response.Vertlimit_min; //Math.PI/3 ;
	controls.maxPolarAngle = response.Vertlimit_max; //2*Math.PI/3 ;


	var spheregeometry = new THREE.SphereGeometry(radius, 20, 20, 0, -6.283, 1, 1);
	var texture = THREE.ImageUtils.loadTexture(response.ImagePath);
	texture.minFilter = THREE.NearestFilter;
	var spherematerial = new THREE.MeshBasicMaterial({map: texture});
	sphere = new THREE.Mesh(spheregeometry, spherematerial);

	scene.add(sphere);
	scene.add(camera);

	$.ajax({
		type: "GET",
		url: "marker.php",
		dataType: "json",
		success: function(spriteResponse)
		    {

				for(var i=0; i<spriteResponse.length; i++)
				{

				var cardinal = {ID: parseInt(spriteResponse[i].ID), lat: parseFloat(spriteResponse[i].lat),
                                lon: parseFloat(spriteResponse[i].lng), name: spriteResponse[i].name};

				var sprite =  new labelBox(cardinal, radius, root);
				//sprite.update();
			    spritearray.push(sprite);
				}

				window.addEventListener('resize', onWindowResize(width, height), false);
				animate(spritearray);

				function onWindowResize(width, height)
				{

				camera.aspect = width/height;
				camera.updateProjectionMatrix();
				renderer.setSize(width, height);
				}


				function animate(spritearray) {

					for(var j=0; j<spritearray.length; j++){

						spritearray[j].update();
					}
					requestAnimationFrame(animate);
					controls.update();

					renderer.render(scene, camera);

				}

			}

	});

}


startwebgl(response, root);

}