/*
 * JAVASCRIPT DE LA PRESENTACION DE LA GRAFICA
 */

  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 altMaxima = 0;
  var altMinima = 9999;
  
  var distanciaTotal = 0;
  
  var centenaMenor = 0;
  var offsetSuperior = 0;

  // Puntos de altura
  var myarray;
  
  // Array de imagenes
  var arrayImagenes = [];
  // Array de texto vertical
  var arrayTexto = [];
 
/*
 * Función que inicializa el canvas
 */  
function initCanvas(canvas) {
  if (window.G_vmlCanvasManager && window.attachEvent && !window.opera) {
    canvas = window.G_vmlCanvasManager.initElement(canvas);
  }
  return canvas;
}

/*
 * Función principal para dibujar la grafica
 * 	 El array de puntos contiene
 *	 - Puntos
 *			- Distancia al inicio
 *			- Altura en ese punto
 *			- LatLng del punto
 */
function draw(nombreCanvas,ptos,altMax,altMin) {
  myarray = ptos;
  arrayImagenes = [];
  arrayTexto = [];
  altMaxima = altMax;
  altMinima = altMin;
  distanciaTotal = myarray[myarray.length-1].distance;
  canvas = initCanvas(document.getElementById(nombreCanvas));
  ctx = canvas.getContext("2d");

  redibujar();
  
  $('#'+nombreCanvas).mousemove(function(e) {
	 	redibujar();	    
	    var pos = findPos(this);
	    var x = e.pageX - pos.x;
	    if (x > anchuraTextoY){
	    	// Dibujar la línea vertical
	    	ctx.beginPath();
	        ctx.moveTo(x, canvas.height);
	        ctx.lineTo(x, 0);
	        ctx.stroke();	     
	        
	        // Obtener el indice asociado
	        var indice = 0;
	        for ( var i = 0; i < myarray.length; i++) {
	        	if (distanciaRelativa(myarray[i].distance) > x){
	        		break;
	        	}
	        	indice = i;
			}
	        
	        // Dibujar un circulo para señalar el pto
	        ctx.beginPath();
	        ctx.fillStyle = '#222222'
	        ctx.arc(distanciaRelativa(myarray[indice].distance), alturaRelativa(myarray[indice].elevation), 3, 0, Math.PI*2, true); 
	        ctx.closePath();
	        ctx.fill();
	        
	        var textoDistancia = "Distancia: ";
	        var textoAltura = "Altura: ";
	        var textoPendiente = "Pendiente: ";
	        if (idioma == "en" || idioma == "en#"){
	        	textoDistancia = "Distance: ";
		        textoAltura = "Elevation: ";
		        textoPendiente = "Grade: ";
	        }
	        
	        // Texto en la esquina superior izquierda
	        textoHorizontal (textoDistancia + (Math.round(myarray[indice].distance*100)/100) + " km",
	        		anchuraTextoY,
	        		15);
	        textoHorizontal (textoAltura + Math.round(myarray[indice].elevation) + " m",
	        		anchuraTextoY,
	        		30);
	        var pendiente = 0;
	        // Se cogen 4 puntos para el cálculo de la pendiente
	        if (indice == 0){
	        	pendiente = calculoPendiente(myarray[indice],myarray[indice+4]);
	        }else if (indice == 1){
	        	pendiente = calculoPendiente(myarray[indice - 1],myarray[indice+3]);
	        }else if (indice == myarray.length-2){
	        	pendiente = calculoPendiente(myarray[indice - 3],myarray[indice+1]);
	        }else if (indice == myarray.length-1){
	        	pendiente = calculoPendiente(myarray[indice - 4],myarray[indice]);	        
	        }else{
	        	pendiente = calculoPendiente(myarray[indice - 2],myarray[indice+2]);
	        }
	        
	        textoHorizontal (textoPendiente + pendiente + "%",
	        		anchuraTextoY,
	        		45);
	    }	  	    
	});

  $('#'+nombreCanvas).mouseout(function(e) {
	  redibujar();
	}); 
  
}

function redibujar(){
  	ctx.clearRect(0, 0, canvas.width, canvas.height);
  	dibujaEjeX();
  	dibujaEjeY();
  	dibujaPerfil(ctx);
  	// pendientes();
  	marcaDeAgua();
  	for ( var i = 0; i < arrayImagenes.length; i++) {
  		muestraImagen(arrayImagenes[i]);
	}
  	for ( var i = 0; i < arrayTexto.length; i++) {
  		textoVertical(arrayTexto[i]);
	}
}

function dibujaEjeX(){
	
  // Rectángulos hasta cubrir todo el eje X
  var par = true;
  var pasoCuadro = 10;
  ctx.lineWidth = 1;
  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 = altMinima - (altMinima % 100);

  // Se obtiene la centena mayor de la altura mayor
  centenaMayor = altMaxima - (altMaxima % 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(){
 
  var lingrad = ctx.createLinearGradient(0,0,0,canvas.height);  
  lingrad.addColorStop(0, '#00ABEB');  
  lingrad.addColorStop(1, '#fff'); 
  ctx.fillStyle = lingrad;
	  
  // Camino
  ctx.beginPath();
  ctx.moveTo(anchuraTextoY, canvas.height-alturaX);
  for(var i=0; i<myarray.length ; i++){
  	ctx.lineTo(distanciaRelativa(myarray[i].distance), alturaRelativa(myarray[i].elevation));
  } 
  ctx.lineTo(canvas.width, canvas.height-alturaX);
  ctx.fill();
  ctx.stroke(); 
}

/*
 * Relación entre la posición sobre el eje X y la distancia pasada como parámetro
 */
function distanciaRelativa(dist){
	var rel = 0;
	rel = anchuraTextoY + Math.round(dist * (canvas.width - anchuraTextoY) / distanciaTotal);
	return rel;
}

/*
 * Relación entre la posición sobre el eje Y y la altura pasada como parámetro
 */
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 vtexto (texto,dist,alt){
	this.texto = texto;
	this.distancia = dist;
	this.altura = alt;
}

/*
 * Añade texto vertical
 */
function addTextoVertical (texto,dist,alt){
  var myTexto = new vtexto(texto,dist,alt);
  arrayTexto.push(myTexto);
  textoVertical(myTexto);
}

/*
 * Escribe texto en vertical a una distancia y alturas dadas
 */
function textoVertical (vtexto){
  ctx.save();
  ctx.translate(distanciaRelativa(vtexto.distancia), alturaRelativa(vtexto.altura));        
  ctx.rotate(-Math.PI/2);
  ctx.fillStyle = '#000000';
  ctx.textBaseline = "middle";
  ctx.fillText(vtexto.texto, 0, 0);
  ctx.restore();
}

/*
 * Escribe texto en horizontal a una distancia y alturas dadas
 */
function textoHorizontal (texto,offsetX,offsetY){
  ctx.save();
  ctx.translate(offsetX, offsetY);        
  ctx.fillStyle = '#000000';
  ctx.textBaseline = "middle";
  ctx.fillText(texto, 0, 0);
  ctx.restore();
}

// Objeto Imagen
function imagen_canvas(imagen,tamanioX, tamanioY,dist,alt){ 
   	this.imagen = imagen; 
   	this.width = tamanioX; 
   	this.height = tamanioY; 
   	this.distancia = dist; 
   	this.altura = alt; 
}

/*
 * Añade una imagen al array de imagenes y la muestra
 */
function addImagen (imagen,tamanioX, tamanioY,dist,alt){
	var img = new imagen_canvas(imagen,tamanioX, tamanioY,dist,alt);
	arrayImagenes.push(img);
	muestraImagen (img);
}

/*
 * Muestra una imagen a una distancia y alturas dadas
 */
function muestraImagen (imagenCanvas){
  var img = new Image();
  img.onload = function(){
	  ctx.drawImage(img,distanciaRelativa(imagenCanvas.distancia) - imagenCanvas.width/2,alturaRelativa(imagenCanvas.altura) - imagenCanvas.height,imagenCanvas.width,imagenCanvas.height);
  };
  img.src = imagenCanvas.imagen;
}

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

function findPos(obj) {
    var curleft = 0, curtop = 0;
    if (obj.offsetParent) {
        do {
            curleft += obj.offsetLeft;
            curtop += obj.offsetTop;
        } while (obj = obj.offsetParent);
        return { x: curleft, y: curtop };
    }
    return undefined;
}

function calculoPendiente(puntoA,puntoB){
	var pendiente = 0;
	var vertical = puntoB.elevation - puntoA.elevation;
	var distancia = (puntoB.distance - puntoA.distance)*1000;
	if (distancia > 0){
		var horizontal = Math.sqrt(distancia*distancia - vertical*vertical);
		if (horizontal > 0){
			// Distancia vertical * 100 / distancia horizontal
			pendiente = vertical * 100 / horizontal;	
			pendiente = Math.round(pendiente);
		}		
	}	
	return pendiente;
}