var canvas;
  var ctx;
  var tamanioTexto = 13;
  var alturaTextoX = 12;
  var alturaCuadradoX = 10;
  var anchuraCuadradoX = 60;
  var alturaX = alturaTextoX + alturaCuadradoX;
  var anchuraTextoY = 30;
  var alturaTextoY = 40;
  
  var altMax = 0;
  var altMin = 9999;
  var distanciaTotal = 0;
  
  var centenaMenor = 0;
  var offsetSuperior = 0;

  // Puntos de altura
  var myarray;

 
  
function initCanvas(canvas) {
  if (window.G_vmlCanvasManager && window.attachEvent && !window.opera) {
    canvas = window.G_vmlCanvasManager.initElement(canvas);
  }
  return canvas;
}

function draw(nombreCanvas,ptos) {
  myarray = ptos;
  canvas = initCanvas(document.getElementById(nombreCanvas));
  ctx = canvas.getContext("2d");

  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  // Definición de línea y de relleno gradiente
  ctx.lineWidth = 1;
  ctx.strokeStyle = '#000000';

  inicializa();

  dibujaEjeX();
  dibujaEjeY();

  var lingrad = ctx.createLinearGradient(0,0,0,canvas.height);  
  lingrad.addColorStop(0, '#00ABEB');  
  lingrad.addColorStop(1, '#fff'); 
  ctx.fillStyle = lingrad;
  
  dibujaPerfil(ctx);

}

function dibujaEjeX(){
	
  // Rectángulos hasta cubrir todo el eje X
  var par = true;
  var pasoCuadro = 10;
  ctx.fillStyle = '#000000';
  ctx.strokeStyle = '#000000';
  ctx.textBaseline = "bottom";
  ctx.textAlign = "right";
  ctx.fillStyle    = '#000000';
  ctx.font = tamanioTexto + "px Optimer";
  
  if (distanciaTotal / 1 < 10){
  	anchuraCuadradoX =  distanciaRelativa(1)-anchuraTextoY;
  	pasoCuadro= 1;
  }else if (distanciaTotal / 5 < 10){
  	anchuraCuadradoX =  distanciaRelativa(5)-anchuraTextoY;
  	pasoCuadro= 5;
  }else if (distanciaTotal / 10 < 10){
  	anchuraCuadradoX =  distanciaRelativa(10)-anchuraTextoY;
  	pasoCuadro= 10;
  }else if(distanciaTotal / 20 < 10){
  	anchuraCuadradoX =  distanciaRelativa(20)-anchuraTextoY;
  	pasoCuadro= 20;
  }else{
  	anchuraCuadradoX =  distanciaRelativa(50)-anchuraTextoY;
  	pasoCuadro = 50;
  }
  var j = 0;
  for (var i=anchuraTextoY; i<canvas.width;j++){
  	if (par){
  		ctx.fillRect(i,canvas.height-alturaX,anchuraCuadradoX,alturaCuadradoX);
  		par = false;
	}else{
		ctx.strokeRect(i,canvas.height-alturaX,anchuraCuadradoX,alturaCuadradoX);
		par = true;
	}
	if (i < canvas.width - anchuraTextoY){
		ctx.fillText(j*pasoCuadro, i, canvas.height-1);
	}
	i += anchuraCuadradoX;
  }
  ctx.fillText(distanciaTotal, canvas.width-1, canvas.height-1);
}

function dibujaEjeY(){
	
  var pasoLinea = 100;	
  // Texto
  ctx.fillStyle    = '#000000';
  ctx.font = tamanioTexto + "px Optimer";
  ctx.textBaseline = "top";
  ctx.textAlign = "left";


  // Se obtiene la centena menor de la altura menor
  centenaMenor = altMin - (altMin % 100);

  // Se obtiene la centena mayor de la altura mayor
  centenaMayor = altMax - (altMax % 100) + 100; 
  
  
  // Los incrementos en las líneas dependen de número de centenas subidas
  if ((centenaMayor -  centenaMenor)/ 20 < 9){
  	pasoLinea= 20;
  }else if ((centenaMayor -  centenaMenor)/ 100 < 9){
  	pasoLinea= 100;
  }else if ((centenaMayor -  centenaMenor)/ 200 < 9){
  	pasoLinea= 200;
  }else{
  	pasoLinea= 500;
  }
  
  centenaMayor+=pasoLinea;
  
  alturaTextoY =  alturaProporcional(centenaMenor+pasoLinea); 
  
  var j=0;  
  for (var i=0; i<canvas.height;j++){
  	ctx.fillText(centenaMenor + j*pasoLinea, 0, canvas.height - (i+alturaX));
  	ctx.beginPath();
        ctx.moveTo(0, canvas.height - (i+alturaX));
        ctx.lineTo(canvas.width, canvas.height - (i+alturaX));
        ctx.stroke();
	i += alturaTextoY;
  }
}

function dibujaPerfil(){
  
  // Camino
  ctx.beginPath();
  ctx.moveTo(anchuraTextoY, canvas.height-alturaX);
  for(var i=0; i<myarray.length ; i++){
  	ctx.lineTo(distanciaRelativa(myarray[i][0]), alturaRelativa(myarray[i][1]));
  } 
  ctx.lineTo(canvas.width, canvas.height-alturaX);
  ctx.fill();
  ctx.stroke(); 
}

function inicializa(){
  // Camino
  altMax = 0;
  altMin = 9999;
  distanciaTotal = myarray[myarray.length-1][0];
  for(var i=0; i<myarray.length ; i++){
  	if (myarray[i][1]>altMax){
  		altMax = myarray[i][1];
  	}
  	if(myarray[i][1]<altMin){
  		altMin = myarray[i][1];
	}
  } 
}

function distanciaRelativa(dist){
	var rel = 0;
	rel = anchuraTextoY + Math.round(dist * (canvas.width - anchuraTextoY) / distanciaTotal);
	return rel;
}

function alturaRelativa(altura){
	var rel = 0;	
	rel = canvas.height - alturaX - alturaProporcional(altura);
	return rel;	
}

function alturaProporcional(altura){
	var rel = 0;	
	rel = Math.round((canvas.height - alturaX)*(altura-centenaMenor)/ (centenaMayor-centenaMenor));
	return rel;	
}

function textoVertical (texto,dist,alt){
  ctx.save();
  ctx.translate(distanciaRelativa(dist), alturaRelativa(alt));        
  ctx.rotate(-Math.PI/2);
  ctx.fillStyle = '#000000';
  ctx.textBaseline = "middle";
  ctx.fillText(texto, 0, 0);
  ctx.restore();
}

function calculoPendiente (distancia,altura){
	var pde = 0;
	pde = Math.round( altura / (10 * distancia));
	return pde;
}

function marcaDeAgua(){
    var img = new Image();  
    img.onload = function(){   
          ctx.drawImage(img,35,340,150,14);   
    }  
    img.src = './recursos/perfilderuta.png'; 	
}

function drawPendiente(nombreCanvas,ptos) {
  var canvasPendiente = initCanvas(document.getElementById(nombreCanvas));
  var ctxPendiente = canvasPendiente.getContext("2d");

  ctxPendiente.clearRect(0, 0, canvasPendiente.width, canvasPendiente.height);
  // Línea central
  ctxPendiente.beginPath();
  ctxPendiente.moveTo(0, canvasPendiente.height/2);
  ctxPendiente.lineTo(canvasPendiente.width, canvasPendiente.height/2);
  ctxPendiente.stroke();
  
  // Se recorren los puntos calculando la pendiente puntual
  ctxPendiente.strokeStyle = '#000000';
  
  var pendienteAnterior=0;
  var distanciaPaso = 0;
  var alturaPaso = ptos[0][1];
  var distanciaUltAltura = 0;
  var pdteMediaAnterior = 0;
  for(var i=1;i<ptos.length ; i++){
  	var pendiente = calculoPendiente(ptos[i][0] - ptos[i-1][0],ptos[i][1] - ptos[i-1][1]);

	// Si es un paso por 0 puede ser una cumbre
	if (pendiente <= 0 && pendienteAnterior > 0 && ((ptos[i-1][0] - distanciaUltAltura) > ptos[ptos.length-1][0]/40)){
		textoVertical("- "+ptos[i-1][1]+"m",ptos[i-1][0],ptos[i-1][1]);
		distanciaUltAltura = ptos[i-1][0];
	}
	
	if ((pendiente <= 0 && pendienteAnterior > 0)||(pendiente > 0 && pendienteAnterior <= 0) || i==ptos.length-1){	
		if(i==ptos.length-1){
			i++;
		}
		if ((ptos[i-1][0]-distanciaPaso) > ptos[ptos.length-1][0]/40){
			var pdteMedia = calculoPendiente(ptos[i-1][0]-distanciaPaso,ptos[i-1][1]-alturaPaso);
			
			ctxPendiente.beginPath();
			ctxPendiente.moveTo(distanciaRelativa(distanciaPaso), canvasPendiente.height/2 - 2*pdteMediaAnterior);
			ctxPendiente.lineTo(distanciaRelativa(distanciaPaso),canvasPendiente.height/2 - 2*pdteMedia);  
			ctxPendiente.lineTo(distanciaRelativa(ptos[i-1][0]),canvasPendiente.height/2 -  2*pdteMedia);		
			ctxPendiente.stroke();
			
			
			ctxPendiente.save();
		  	ctxPendiente.translate(distanciaRelativa(distanciaPaso),canvasPendiente.height/2 -  2*pdteMedia);        
		  	ctxPendiente.fillStyle = '#000000';
		  	ctxPendiente.font = "10px Optimer";
		  	if (pdteMedia>=0){
		  		ctxPendiente.textBaseline = "bottom";
			}else{
				ctxPendiente.textBaseline = "top";
			}
		  	ctxPendiente.fillText(pdteMedia+"%", 0, 0);
		  	ctxPendiente.restore();
		  	
	 		distanciaPaso = ptos[i-1][0];
	  		alturaPaso = ptos[i-1][1];
	  		pdteMediaAnterior = pdteMedia;	
  		}  		  	
	}
	pendienteAnterior = pendiente;	
  }
}