canvasGraph=function(elm){
	var canvas= document.getElementById(elm);
    this.ctx = canvas.getContext('2d');
	this.ctx.clearRect(0,0,600,600);
	this.containerWidth=600;
	this.containerHeight=600;  
	this.padding=10;
	this.xMid=this.containerWidth/2;
	this.yMid=this.containerHeight/2;
	
	
	/*EDITABLE: VALUES 2, VARIABLE NAME MIDPOINTS
	
	THE NEXT TWO LINES, XMID AND YMID, IS BASICALLY THE OFFSET OR THE POINT
	FROM WHERE THE MAPS STARTS GENERATING. SOMETIMES YOU WILL FIND THAT YOUR MAP
	IS NOT FITTING ON THE SCREEN YOU CAN CHANGE THESE VALUES
	EG: FOR BELGIUM TRACK, I FOUND THAT THE MAP ON THE LEFT WAS GOING OUT OF BOUND
	BUT I HAD SPACE ON THE RIGHT SIDE, SO I CHANGE THE XMID TO 0 AND YMID TO 0.
	THESE ARE BASICALLY A GRAPH CO-ORINDATES AS
	
		   |
		   |
		   |
	- - -(0,0)  - - - 	
		   |
		   |
		   |
		   
	SO IF YOU PUT UR OFFSET AS startX as 0, and startY as 0, YOU WILL HAVE A CASE
	LIKE THE ONE SHOWN ABOVE
		
	*/
	this.startX=this.xMid-60; 
	this.startY=this.yMid+60;
	//-------------------------------------------------------------------------------
	
	this.gray1="#c1c1c1";
	this.gray2="#f1f1f1	";
	this.gray3="#787878";
	this.stepX=this.xMid/10;
	

	/*EDITABLE: VALUE 1, VARIABLE NAME RANGE
	
	YOU CAN CHANGE THE VALUES OF THESE VARIABLES IN THE NEXT 6 LINES
	BY DEFAULT THEY WORK WELL WITH THE VALUE 600, BUT TO BE ON THE SAFE
	SIDE I HAVE SET IT TO 700. PLEASE NOTE IF YOU SET IT AS 700, THEN ALL THE
	VALUES SHOULD BE 700. 
	FOR MAPS LIKE BELGIUM, THE VALUE IS ACTUALLY 2800. YOU CAN PLAY AROUND WITH 
	THESE VALUES TO GENERATE THE OPTIMUM MAP
	
	*/
	this.xMin=-700;
	this.xMax=700;
	this.yMin=-700;
	this.yMax=700;
	this.zMin=-700;
	this.zMax=700;
	//----------------------------------------------------------------------------
	
	this.factor=(this.stepX / 1.5);
	this.perspectiveFactor = .2;
	this.drawAxis();
	this.drawInfo();
}


canvasGraph.prototype.drawAxis=function(){

	this.ctx.fillStyle = this.gray1;
	this.ctx.strokeStyle= this.gray1;
	this.ctx.beginPath();
	this.ctx.moveTo((this.startX),(this.startY));
	this.ctx.stroke();
	this.ctx.closePath();
	this.yHeight = this.startY - (2 * this.stepX);
	sx=this.startX;
	markH=this.containerHeight/100;
	sy=this.startY;
	this.ctx.strokeStyle=this.ctx.fillStyle = this.gray3;
    xx=sx
    yy=sy;
	var perspectiveCompensation = 0;
    this.marginX=this.padding + this.startY - (10*this.stepX) - (this.padding);	
	for(i=0;i<10;i++){
		sx=sx+this.stepX;
		sy=sy-(this.stepX);
		xx=xx-this.factor;
		yy=yy+this.factor;
		perspectiveCompensation = i * this.factor * this.perspectiveFactor + (this.perspectiveFactor * this.factor - i);
		this.ctx.strokeStyle=this.ctx.fillStyle = "rgba(200,200,200,0.5)";	 
	}
}

canvasGraph.prototype.drawBar=function(x,y,z){
  
	x_min=this.xMin;
	x_max=this.xMax;

	y_min=this.yMin;
	y_max=this.yMax;
	
	z_min=this.zMin;
	z_max=this.zMax;
	
	graph_step_x=(x_max-x_min)/15;
	graph_step_y=(y_max-y_min)/15;
	graph_step_z=(z_max-z_min)/15;
	
	var pcyz = ((y/y_max*10) * this.factor * this.perspectiveFactor - (y/y_max*(10/this.perspectiveFactor)) * this.perspectiveFactor) * (z/z_max*1) ;
	var pcx = ((x/x_max*10) * this.factor * this.perspectiveFactor  - (x/x_max*(10/this.perspectiveFactor)) * this.perspectiveFactor) * (z/z_max *1) 
	y_height_scaled=(y * this.stepX/graph_step_y) + pcyz;
	x_width_scaled=(x * this.stepX/graph_step_x) + pcx;
	z_len_scaled=(z * this.factor/graph_step_z);
	x_scaled=this.startX + x_width_scaled ;
	y_scaled=this.startY - y_height_scaled;
	x_3d=x_scaled-z_len_scaled;
	y_3d=y_scaled+z_len_scaled;
	this.ctx.fillStyle=this.ctx.strokeStyle = "rgba(255,255,255,1)";
	this.ctx.beginPath();
	this.ctx.arc(x_3d, y_3d, 2.5, 0, Math.PI*2, true); 
	this.ctx.closePath();
	this.ctx.fill();
}
canvasGraph.prototype.drawGraph=function(gData){
	for(i=0;i<gData.length;i++){
		this.drawBar(gData[i].x,gData[i].y,gData[i].z);//gData[i].pos); 
	}
}

canvasGraph.prototype.drawInfo=function(){

	this.infoElm=document.getElementById('gInfo');
	
	this.infoElm.innerHTML='<div id="y-label"></div>';
	this.infoElm.innerHTML+='<div id="x-label"></div>';
	this.infoElm.innerHTML+='<div id="z-label"></div>';
	
	this.infoElm.innerHTML+='<div id="t-001" class="gText"></div>';
	
	this.infoElm.innerHTML+='<div id="t-002" class="gText"></div>';
	this.infoElm.innerHTML+='<div id="t-003" class="gText"></div>';
	this.infoElm.innerHTML+='<div id="t-004" class="gText"></div>';
	
	this.infoElm=document.getElementById('t-001').style.top='350px';
	this.infoElm=document.getElementById('t-001').style.left='220px';
	
	this.infoElm=document.getElementById('t-002').style.top='54px';
	this.infoElm=document.getElementById('t-002').style.left='210px';
	
	this.infoElm=document.getElementById('t-003').style.top='365px';
	this.infoElm=document.getElementById('t-003').style.left='530px';
	
	this.infoElm=document.getElementById('t-004').style.top='580px';
	this.infoElm=document.getElementById('t-004').style.left='20px';
	


}


function checkRange(param,min,max){
	if(param>=min && param <= max ){
	
	return true;
	
    }else{
		alert('Invalid value: '+param );
    }	
}

function sortNumByZ(a, b) {
    var x = a.z;
    var y = b.z;
    return ((x < y) ? -1 : ((x > y) ? 1 : 0));
}