function draw_line(){
  var canvas, context, canvaso, contexto;
  var tool;
  var tool_default = 'capsule';//'line';
  var ampl = (SymexChartGlobals.max_[0] - SymexChartGlobals.min_[0]) / SymexChartSettings.settings[0];
  var dist = (SymexChartGlobals.chart_height + 1) / SymexChartSettings.settings[0]; //take in mind border 
  var selectionHandles = [];
  selectionHandles[0] = {}; 
  selectionHandles[1] = {};
  selectionHandles[2] = {};
  selectionHandles[3] = {};
  selectionHandles[4] = {};
  selectionHandles[5] = {};
  selectionHandles[6] = {};
  selectionHandles[7] = {};
  selectionHandles[8] = {};
  var mySelColor = '#CC0000';
  var mySelWidth = 2;
  var mySelBoxColor = 'darkred'; // New for selection boxes
  var mySelBoxSize = 10;
  var half = 5;
  var active_object_1 = -1;
  var active_object = -1;
  var point_move = -1;
  var line_zoom = 0;
   
  function init () {
    
    // Find the canvas element.
    canvaso = document.getElementById('paint_chart0');
    canvaso.height = SymexChartGlobals.chart_height;
    canvaso.width = SymexChartGlobals.chart_width;
    if (!canvaso) {
      alert('Error: I cannot find the canvas element!');
      return;
    }

    if (!canvaso.getContext) {
      alert('Error: no canvas.getContext!');
      return;
    }

    // Get the 2D canvas context.
    contexto = canvaso.getContext('2d');
    if (!contexto) {
      alert('Error: failed to getContext!');
      return;
    }

    // Add the temporary canvas.
    var container = canvaso.parentNode;
    canvas = document.createElement('canvas');
    if (!canvas) {
      alert('Error: I cannot create a new canvas element!');
      return;
    }

    canvas.id     = 'imageTemp0';
    WIDTH = canvas.width  = canvaso.width+25;
    HEIGHT = canvas.height = canvaso.height;
    container.appendChild(canvas);

    context = canvas.getContext('2d');
 
    // Get the tool select input.
    var tool_select = document.getElementById('tools3');
    if (!tool_select) {
      alert('Error: failed to get the dtool element!');
      return;
    }
    
   // setInterval(mainDraw, 20);
   // tool_select.addEventListener('change', ev_tool_change, false);
    document.getElementById('tools2').addEventListener("click",ev_tool_change, false);
    document.getElementById('tools3').addEventListener("click",ev_tool_change, false);
    document.getElementById('tools4').addEventListener("click",ev_tool_change, false);
    document.getElementById('tools5').addEventListener("click",ev_tool_change, false)
    document.getElementById('tools6').addEventListener("click",ev_tool_change, false)
    document.getElementById('tools7').addEventListener("click",ev_tool_change, false)
    // Activate the default tool.
    if (tools[tool_default]) {
      tool = new tools[tool_default]();
      tool_select.value = tool_default;
    } 
    
    // Attach the mousedown, mousemove and mouseup event listeners.
    canvas.addEventListener('mousedown', ev_canvas, false);
    canvas.addEventListener('mousemove', ev_canvas, false);
    canvas.addEventListener('mouseup',   ev_canvas, false);
}
  // The general-purpose event handler. This function just determines the mouse 
  // position relative to the canvas element.
  function ev_canvas (ev) {
     
    if (ev.layerX || ev.layerX == 0) { // Firefox
      ev._x = ev.layerX;
      ev._y = ev.layerY;
    } else if (ev.offsetX || ev.offsetX == 0) { // Opera
      ev._x = ev.offsetX;
      ev._y = ev.offsetY;
    }

    // Call the event handler of the tool.
    var func = tool[ev.type];
    if (func) {
      func(ev);
    }  
    
  }
function mainDraw(){
	context.clearRect(0, 0, canvas.width, canvas.height);
}
 
// The event handler for any changes made to the tool selector.
function ev_tool_change (ev) {
  
    if (tools[this.value]) {
      tool = new tools[this.value]();
    }
  }

  
  
function add_object(x1,y1,x2,y2,type_object){
    SymexChartGlobals.tab_object[SymexChartGlobals.cpt_object] = new Array();
    SymexChartGlobals.tab_object_z[SymexChartGlobals.cpt_object] = new Array();
    SymexChartGlobals.tab_object[SymexChartGlobals.cpt_object]["type"]= type_object;
    SymexChartGlobals.tab_object[SymexChartGlobals.cpt_object]["x1"] = x1;
    SymexChartGlobals.tab_object[SymexChartGlobals.cpt_object]["y1"] = y1;
    SymexChartGlobals.tab_object[SymexChartGlobals.cpt_object]["x2"] = x2;
    SymexChartGlobals.tab_object[SymexChartGlobals.cpt_object]["y2"] = y2;
    SymexChartGlobals.tab_object_z[SymexChartGlobals.cpt_object]["type"]= type_object;
    SymexChartGlobals.tab_object_z[SymexChartGlobals.cpt_object]["x1"] = Pixel_X(x1);
    SymexChartGlobals.tab_object_z[SymexChartGlobals.cpt_object]["y1"] = PixeltoEuro(y1).toFixed(4);
    SymexChartGlobals.tab_object_z[SymexChartGlobals.cpt_object]["x2"] = Pixel_X(x2);
    SymexChartGlobals.tab_object_z[SymexChartGlobals.cpt_object]["y2"] = PixeltoEuro(y2).toFixed(4); 
    SymexChartGlobals.cpt_object++; 
}


function select_object(id,selectionne){
	if(id < 0){
		return; 
	}
	var cpt = 2;
	selectionHandles[0].x = parseInt( SymexChartGlobals.stepX * (SymexChartGlobals.tab_object_z[id]["x1"] - SymexChartGlobals.begin))-half;
	selectionHandles[0].y = EurotoPixel(SymexChartGlobals.tab_object_z[id]["y1"])-half;
	selectionHandles[1].x = parseInt( SymexChartGlobals.stepX * (SymexChartGlobals.tab_object_z[id]["x2"] - SymexChartGlobals.begin))-half;
	selectionHandles[1].y = EurotoPixel(SymexChartGlobals.tab_object_z[id]["y2"])-half;
	context.clearRect(0, 0, canvas.width, canvas.height);
	context.beginPath();
	for (var i = 0; i < cpt; i ++) {        
		var cur = selectionHandles[i];        
		//context.globalCompositeOperation = "xor";
		if (selectionne==true){
			context.fillStyle = mySelBoxColor;
		} else {
			context.fillStyle = 'white';
		}
		context.fillRect(cur.x , cur.y , mySelBoxSize, mySelBoxSize);
		context.fillStyle = 'black';
	}
	if (SymexChartGlobals.tab_object[id]["type"] == "rect" && !selectionne) {
		var x0 = parseInt( SymexChartGlobals.stepX * (SymexChartGlobals.tab_object_z[id]["x1"] - SymexChartGlobals.begin));
		var x1 = parseInt( SymexChartGlobals.stepX * (SymexChartGlobals.tab_object_z[id]["x2"] - SymexChartGlobals.begin));
		var y0 = EurotoPixel(SymexChartGlobals.tab_object_z[id]["y1"]);
		var y1 = EurotoPixel(SymexChartGlobals.tab_object_z[id]["y2"]);
		DessinRectangle(SymexChartGlobals.tab_object[id]["x1"],SymexChartGlobals.tab_object[id]["y1"],SymexChartGlobals.tab_object[id]["x2"],SymexChartGlobals.tab_object[id]["y2"]);						
	}
	if (SymexChartGlobals.tab_object[id]["type"] == "fibo" && !selectionne) {
		var x0 = parseInt( SymexChartGlobals.stepX * (SymexChartGlobals.tab_object_z[id]["x1"] - SymexChartGlobals.begin));
		var x1 = parseInt( SymexChartGlobals.stepX * (SymexChartGlobals.tab_object_z[id]["x2"] - SymexChartGlobals.begin));
		var y0 = EurotoPixel(SymexChartGlobals.tab_object_z[id]["y1"]);
		var y1 = EurotoPixel(SymexChartGlobals.tab_object_z[id]["y2"]);
		DessinFibonacci(SymexChartGlobals.tab_object[id]["x1"],SymexChartGlobals.tab_object[id]["y1"],SymexChartGlobals.tab_object[id]["x2"],SymexChartGlobals.tab_object[id]["y2"]);				
	}
	if (SymexChartGlobals.tab_object[id]["type"] == "line" && !selectionne) {
		var x0 = parseInt( SymexChartGlobals.stepX * (SymexChartGlobals.tab_object_z[id]["x1"] - SymexChartGlobals.begin));
		var x1 = parseInt( SymexChartGlobals.stepX * (SymexChartGlobals.tab_object_z[id]["x2"] - SymexChartGlobals.begin));
		var y0 = EurotoPixel(SymexChartGlobals.tab_object_z[id]["y1"]);
		var y1 = EurotoPixel(SymexChartGlobals.tab_object_z[id]["y2"]);
		DessinLigne(x0,y0,x1,y1);		
	}	
	context.closePath();
	context.stroke();
}


function Checkselect_object(x_1,y_1){
	Newactive_object = -1;
	half = mySelBoxSize/2 ;
	for(var i=0;i<SymexChartGlobals.cpt_object;i++){ 
		var x0 = parseInt( SymexChartGlobals.stepX * (SymexChartGlobals.tab_object_z[i]["x1"] - SymexChartGlobals.begin));
		var x1 = parseInt( SymexChartGlobals.stepX * (SymexChartGlobals.tab_object_z[i]["x2"] - SymexChartGlobals.begin));
		var y0 = EurotoPixel(SymexChartGlobals.tab_object_z[i]["y1"]);
		var y1 = EurotoPixel(SymexChartGlobals.tab_object_z[i]["y2"]);
		var p_one = x0+half;
		var p_two = x0-half; 
		var p_three = y0+half; 
		var p_four = y0-half;  
		var p_five = x1+half; 
		var p_six = x1-half; 
		var p_seven = y1+half; 
		var p_eight = y1-half;			
		if((p_one >= x_1 && p_two <= x_1 && p_three >= y_1 && p_four <= y_1)){
			Newactive_object = i;
			point_move = 0;
			break;
		}
		if((p_five >= x_1 && p_six <= x_1 && p_seven >= y_1 && p_eight <= y_1)) {  
			Newactive_object = i;
			point_move = 1;
			break;
		}
		
		var goon = false;
		if (x0<=x1 && x_1>=x0 && x_1<=x1) {
			goon = true;
		} 
		if (x0>x1 && x_1>=x1 && x_1<=x0) {
			goon = true;			
		}
		if (goon){
			if (y0<=y1 && y_1>=y0 && y_1<=y1) {				
				Newactive_object = i;
				point_move = 2;
				break;				
			}
			if (y0>y1 && y_1>=y1 && y_1<=y0) {
				Newactive_object = i;
				point_move = 2;
				break;				
			}			
		}
		
   }   
   return Newactive_object; 
}
 
  // This function draws the #imageTemp canvas on top of #imageView, after which 
  // #imageTemp is cleared. This function is called each time when the user 
  // completes a drawing operation.
  function img_update () {
		contexto.drawImage(canvas, 0, 0);
		context.clearRect(0, 0, canvas.width, canvas.height);        
  }

function clear_canvas() {
    contexto.clearRect(0,0, canvas.width, canvas.height);
   	context.clearRect(0,0, canvas.width, canvas.height);
	SymexChartGlobals.cpt_object = 0;
}

function undo_object(){
	contexto.clearRect(0,0, canvas.width, canvas.height);
	context.clearRect(0,0, canvas.width, canvas.height); 
	if(active_object < 0){
		alert("Merci de selectionner un element");
	}else{
		var idToDelete = active_object;
		select_object(active_object, false);
		active_object = -1;
		active_object_1 = -1;
		SymexChartGlobals.tab_object.splice(idToDelete, 1);
		SymexChartGlobals.tab_object_z.splice(idToDelete, 1);
		SymexChartGlobals.cpt_object--;
	} 
}
      

function DessinLigne(x0,y0,x1,y1) {
	context.moveTo(x0, y0);
	context.lineTo(x1, y1); 
}	  

function DessinRectangle(x0,y0,x1,y1) {
	context.moveTo(x0,y0);
	context.lineTo(x1,y0);
	context.lineTo(x1,y1);
	context.lineTo(x0,y1);
	context.lineTo(x0,y0);
}


function DessinFibonacci(x0,y0,x1,y1) {
	var LigneFibonacci = 0;
	for (var key in data_fibo = [1, 0.786, 0.618, 0.5, 0.382, 0.246, 0]){
		LigneFibonacci = y0 + data_fibo[key]*(y1-y0); 
		context.moveTo(x0,LigneFibonacci);
		context.lineTo(x1,LigneFibonacci);
		if (x0 < x1) {
			context.fillText((data_fibo[key] * 100).toFixed(1) + "% : "  + " " + PixeltoEuro(LigneFibonacci).toFixed(2), x0, LigneFibonacci-3);
		} else {
			context.fillText((data_fibo[key] * 100).toFixed(1) + "% : "  + " " + PixeltoEuro(LigneFibonacci).toFixed(2), x1, LigneFibonacci-3);
		}
	}	
}
	  
  
//REMY DEPLACE LES OBJETS
var tools = {};
tools.drag = function () {
	var tool = this;
	this.started = false;
	var TypeObject = "line";
	var Moved = false;
	this.mousedown = function (ev) {		
		active_object = Checkselect_object(ev._x,ev._y);
		if (active_object >= 0) {
			if (active_object_1 != active_object) {
				select_object(active_object_1, false);
				select_object(active_object, true);
				}
			active_object_1 = active_object;
			tool.started = true;
			tool.x0 = parseInt( SymexChartGlobals.stepX * (SymexChartGlobals.tab_object_z[active_object]["x1"] - SymexChartGlobals.begin));
			tool.y0 = EurotoPixel(SymexChartGlobals.tab_object_z[active_object]["y1"]);
			tool.x1 = parseInt( SymexChartGlobals.stepX * (SymexChartGlobals.tab_object_z[active_object]["x2"] - SymexChartGlobals.begin));
			tool.y1 = EurotoPixel(SymexChartGlobals.tab_object_z[active_object]["y2"]);	
			TypeObject = SymexChartGlobals.tab_object[active_object]["type"];
		}			
	};
  
	this.mousemove = function (ev) {
		if (!tool.started) {
			return;
		} 		
		context.clearRect(0, 0, canvas.width, canvas.height);
		context.beginPath();
		context.fillStyle = mySelBoxColor;
		context.fillRect(tool.x0-half, tool.y0-half, mySelBoxSize, mySelBoxSize);
		context.fillRect(tool.x1-half, tool.y1-half, mySelBoxSize, mySelBoxSize);
		context.fillStyle = 'black';
        if (TypeObject=="line" && Moved) {
			DessinLigne(tool.x0, tool.y0, tool.x1, tool.y1);
		}
		if (TypeObject=="rect" && Moved) {
			DessinRectangle(tool.x0, tool.y0, tool.x1, tool.y1);
		}			
		if (TypeObject=="fibo" && Moved) {
			DessinFibonacci(tool.x0, tool.y0, tool.x1, tool.y1);
		}					
		context.stroke();
		context.closePath(); 
		switch (point_move) {
			case 0:
				if ((tool.x0 != ev._x) || (tool.y0 != ev._y)) {Moved = true;}
				tool.x0 = ev._x;
				tool.y0 = ev._y;	  				
			break;
			case 1:
				if ((tool.x1 != ev._x) || (tool.y1 != ev._y)) {Moved = true;}
				tool.x1 = ev._x;
				tool.y1 = ev._y;	  								
			break;	
			case 2:
				if ((tool.x1 != ev._x) || (tool.y1 != ev._y)) {Moved = true;}
				tool.x0 = ev._x;
				tool.y0 = ev._y;
				tool.x1 = ev._x + SymexChartGlobals.tab_object[active_object]["x2"] - SymexChartGlobals.tab_object[active_object]["x1"];
				tool.y1 = ev._y + SymexChartGlobals.tab_object[active_object]["y2"] - SymexChartGlobals.tab_object[active_object]["y1"];
			break;				
		}
	};

	this.mouseup = function (ev) {
		if (tool.started) {
			if (Moved) {
				undo_object();
				add_object(tool.x0,tool.y0,tool.x1,tool.y1,TypeObject);
				active_object = SymexChartGlobals.cpt_object-1;
				active_object_1 = -1;
			}
			tool.mousemove(ev);
			tool.started = false;
			img_update();  
			if (Moved) {
				draw_line_again(active_object);
			}
			return;			
		}       
	}
};
  

// ################# Dessin d'une ligne #################
tools.line = function () {
	var tool = this;
    this.started = false;
	this.mousedown = function (ev) {    
		tool.started = true;
		tool.x0 = ev._x;
		tool.y0 = ev._y;
		tool.x1 = ev._x;
		tool.y1 = ev._y;
    };

    this.mousemove = function (ev) {
		if (!tool.started) {
			return;
		}       
		tool.x1 = ev._x;
		tool.y1 = ev._y;
        context.clearRect(0, 0, canvas.width, canvas.height);
		context.beginPath();
		context.moveTo(tool.x0, tool.y0);
		context.lineTo(tool.x1, tool.y1);      
		context.stroke();
		context.closePath();
    };

    this.mouseup = function (ev) {
		add_object(tool.x0,tool.y0,tool.x1,tool.y1,"line")	
		if (tool.started) {
			tool.mousemove(ev);
			tool.started = false;
			img_update();        
		}
    };   
  };
  
  
// ################# Crayon // Pas utilisé #################
tools.pencil = function () {
    var tool = this;
    this.started = false;
    this.mousedown = function (ev) {
        context.beginPath();
        tool.x1 = ev._x;
        tool.y1 = ev._y;
        context.moveTo(ev._x, ev._y);
        tool.started = true;
    };
    this.mousemove = function (ev) {
      if (tool.started) {
        tool.x2 = ev._x;
        tool.y2 = ev._y;
        context.lineTo(ev._x, ev._y);
        context.stroke();
      }
    };
    this.mouseup = function (ev) {
      if (tool.started) {
        tool.mousemove(ev);
        tool.started = false;
        img_update();        
      }
    };
};

  
// ################# Dessin des lignes de Rectangle #################
tools.rect = function () {
    var tool = this;
    this.started = false;
    this.mousedown = function (ev) {
      tool.started = true;
      tool.x0 = ev._x;
      tool.y0 = ev._y;      
    };

    this.mousemove = function (ev) {
		if (!tool.started) {
			return;
		}      
		tool.x1 = ev._x;
		tool.y1 = ev._y;      
		context.clearRect(0, 0, canvas.width, canvas.height);
		context.beginPath();	
		DessinRectangle(tool.x0, tool.y0, tool.x1, tool.y1);
		context.stroke();
		context.closePath();
	  };

    this.mouseup = function (ev) {
      add_object(tool.x0,tool.y0,tool.x1,tool.y1,"rect");
      if (tool.started) {
        tool.mousemove(ev);
        tool.started = false;
        img_update();        
      }
    };
};
  
  
// ################# Dessin des lignes de parallèles ################# 
tools.parallel = function () {
    var tool = this;
    this.started = false;
	if (active_object < 0) {
		alert("Vous devez prealablement selectionner un element");	
		return; 			
	}
    this.mousedown = function (ev) {
		tool.started = true;
		tool.x0 = ev._x;
		tool.y0 = ev._y;
		tool.x1 = ev._x + SymexChartGlobals.tab_object[active_object]["x2"] - SymexChartGlobals.tab_object[active_object]["x1"];
		tool.y1 = ev._y + SymexChartGlobals.tab_object[active_object]["y2"] - SymexChartGlobals.tab_object[active_object]["y1"];
		context.clearRect(0, 0, canvas.width, canvas.height);
		context.beginPath();
		context.moveTo(tool.x0, tool.y0);
		context.lineTo(tool.x1, tool.y1);      
		context.stroke();
		context.closePath();
    };

    this.mousemove = function (ev) {
		if (!tool.started) {
			return;
		}
		context.clearRect(0, 0, canvas.width, canvas.height);
 		tool.x0 = ev._x;
		tool.y0 = ev._y;
		tool.x1 = ev._x + SymexChartGlobals.tab_object[active_object]["x2"] - SymexChartGlobals.tab_object[active_object]["x1"];
		tool.y1 = ev._y + SymexChartGlobals.tab_object[active_object]["y2"] - SymexChartGlobals.tab_object[active_object]["y1"];
		context.clearRect(0, 0, canvas.width, canvas.height);
		context.beginPath();
		context.moveTo(tool.x0, tool.y0);
		context.lineTo(tool.x1, tool.y1);      
		context.stroke();
		context.closePath();
	};

    this.mouseup = function (ev) {		
		add_object(tool.x0,tool.y0,tool.x1,tool.y1,"line");
		if (tool.started) {
			tool.mousemove(ev);
			tool.started = false;
			img_update();
		}
	};
};
  

 // ################# Dessin des lignes de Faisceau #################
 tools.faisceau = function () {
    var tool = this;
    this.started = false;
	if (active_object < 0) {
		alert("Vous devez prealablement selectionner un element");	
		return; 			
	}
    this.mousedown = function (ev) {        
		tool.started = true;
		tool.x0 = SymexChartGlobals.tab_object[active_object]["x1"];
		tool.y0 = SymexChartGlobals.tab_object[active_object]["y1"]; 
		tool.x1 = ev._x;
		tool.y1 = ev._y;
		context.clearRect(0, 0, canvas.width, canvas.height);
		context.beginPath();
		context.moveTo(tool.x0, tool.y0);
		context.lineTo(tool.x1, tool.y1);      
		context.stroke();
		context.closePath();
	};

    this.mousemove = function (ev) {
		if (!tool.started) {
			return;
		}       
		tool.x1 = ev._x;
		tool.y1 = ev._y;
		context.clearRect(0, 0, canvas.width, canvas.height);
		context.beginPath();
		context.moveTo(tool.x0, tool.y0);
		context.lineTo(tool.x1, tool.y1);      
		context.stroke();
		context.closePath();
    };

    this.mouseup = function (ev) {
		add_object(tool.x0,tool.y0,tool.x1,tool.y1,"line");
		if (tool.started) {
			tool.mousemove(ev);
			tool.started = false;
			img_update();
		}
    };
};
   
// ################# Dessin des lignes de Fibonacci #################
tools.fibonacci = function () {
	var tool = this;
	var LigneFibonacci = 0;
	this.started = false;
	this.mousedown = function (ev) {
		tool.started = true;
		tool.x0 = ev._x;
		tool.y0 = ev._y;
		tool.x1 = ev._x;
		tool.y1 = ev._y;
    };

    this.mousemove = function (ev) {
		if (!tool.started) {
			return;
		}
		tool.x1 = ev._x;
		tool.y1 = ev._y;     
		context.clearRect(0, 0, canvas.width, canvas.height);
		context.beginPath();   
		for (var key in data_fibo = [1, 0.786, 0.618, 0.5, 0.382, 0.246, 0]){
			LigneFibonacci = tool.y0 + data_fibo[key]*(tool.y1-tool.y0); 
			context.moveTo(tool.x0,LigneFibonacci);
			context.lineTo(tool.x1,LigneFibonacci);
			if (tool.x0 < tool.x1) {
				context.fillText((data_fibo[key] * 100).toFixed(1) + "% : "  + " " + PixeltoEuro(LigneFibonacci).toFixed(2), tool.x0, LigneFibonacci-3);
			} else {
				context.fillText((data_fibo[key] * 100).toFixed(1) + "% : "  + " " + PixeltoEuro(LigneFibonacci).toFixed(2), tool.x1, LigneFibonacci-3);
			}          
		}
		context.stroke();
		context.closePath();
    };

    this.mouseup = function (ev) {
		add_object(tool.x0,tool.y0,tool.x1,tool.y1,"fibo");
		if (tool.started) {
			tool.mousemove(ev);
			tool.started = false;
			img_update();
		}      
    };
 };  
  
  
	init();  
	$("#reset").click(function() {
		select_object(active_object, false);
		active_object = -1;
		active_object_1 = -1;
		clear_canvas();
	});
    $("#undo").click(function(ev) {
		undo_object();
		draw_line_again(-1);
    }); 
}
 
function draw_line_again(noline){ 
	var canvas, context, canvaso, contexto;
	var tool;
	var tool_default = 'capsule';//'line';
	var coefStepY = (SymexChartGlobals.max_[0] - SymexChartGlobals.min_[0]) / SymexChartGlobals.chart_height;
	var ampl = (SymexChartGlobals.max_[0] - SymexChartGlobals.min_[0])/ SymexChartSettings.settings[0];
	var dist = (SymexChartGlobals.chart_height + 1) / SymexChartSettings.settings[0]; //take in mind border 
  
	function img_update () {
		contexto.drawImage(canvas, 0, 0);
		context.clearRect(0, 0, canvas.width, canvas.height);
	}
  
	function init () {
		// Find the canvas element.
		canvaso = document.getElementById('paint_chart0');
		if (!canvaso) {
			alert('Error: I cannot find the canvas element!');
		return;
    }

    if (!canvaso.getContext) {
		alert('Error: no canvas.getContext!');
		return;
    }

    // Get the 2D canvas context.
    contexto = canvaso.getContext('2d');
    if (!contexto) {
		alert('Error: failed to getContext!');
		return;
    }
 
    canvas = document.getElementById("imageTemp0");
    context = canvas.getContext('2d');

    var tool_select = document.getElementById('dtool');
    if (!tool_select) {
      alert('Error: failed to get the dtool element!');
      return;
    }
    context.clearRect(0, 0, canvas.width, canvas.height);
	if(SymexChartGlobals.cpt_object > 0){         
		for(c_ = 0;c_ < SymexChartGlobals.cpt_object;c_++){
			if(SymexChartGlobals.tab_object[c_]["type"] == "line" && c_ != noline){   
				context.beginPath();
				context.moveTo(parseInt( SymexChartGlobals.stepX * (SymexChartGlobals.tab_object_z[c_]["x1"] - SymexChartGlobals.begin)),EurotoPixel(SymexChartGlobals.tab_object_z[c_]["y1"]));
				context.lineTo(parseInt( SymexChartGlobals.stepX * (SymexChartGlobals.tab_object_z[c_]["x2"] - SymexChartGlobals.begin)),EurotoPixel(SymexChartGlobals.tab_object_z[c_]["y2"]));
				context.stroke(); 
				context.closePath();
			}
			if(SymexChartGlobals.tab_object[c_]["type"] == "rect" && c_ != noline){
				context.beginPath();
				context.moveTo(parseInt( SymexChartGlobals.stepX * (SymexChartGlobals.tab_object_z[c_]["x1"] - SymexChartGlobals.begin)),EurotoPixel(SymexChartGlobals.tab_object_z[c_]["y1"]));
				context.lineTo(parseInt( SymexChartGlobals.stepX * (SymexChartGlobals.tab_object_z[c_]["x2"] - SymexChartGlobals.begin)),EurotoPixel(SymexChartGlobals.tab_object_z[c_]["y1"]));
				context.lineTo(parseInt( SymexChartGlobals.stepX * (SymexChartGlobals.tab_object_z[c_]["x2"] - SymexChartGlobals.begin)),EurotoPixel(SymexChartGlobals.tab_object_z[c_]["y2"]));
				context.lineTo(parseInt( SymexChartGlobals.stepX * (SymexChartGlobals.tab_object_z[c_]["x1"] - SymexChartGlobals.begin)),EurotoPixel(SymexChartGlobals.tab_object_z[c_]["y2"]));
				context.lineTo(parseInt( SymexChartGlobals.stepX * (SymexChartGlobals.tab_object_z[c_]["x1"] - SymexChartGlobals.begin)),EurotoPixel(SymexChartGlobals.tab_object_z[c_]["y1"]));
				context.stroke();
				context.closePath();     
			}
			if(SymexChartGlobals.tab_object[c_]["type"] == "fibo" && c_ != noline){
				context.beginPath();
				var LigneFibonacci = 0;
				var x0 = parseInt( SymexChartGlobals.stepX * (SymexChartGlobals.tab_object_z[c_]["x1"] - SymexChartGlobals.begin));
				var x1 = parseInt( SymexChartGlobals.stepX * (SymexChartGlobals.tab_object_z[c_]["x2"] - SymexChartGlobals.begin));
				var y0 = EurotoPixel(SymexChartGlobals.tab_object_z[c_]["y1"]);
				var y1 = EurotoPixel(SymexChartGlobals.tab_object_z[c_]["y2"]);
				for (var key in data_fibo = [1, 0.786, 0.618, 0.5, 0.382, 0.246, 0]){
					LigneFibonacci = y0 + data_fibo[key]*(y1-y0); 
					context.moveTo(x0,LigneFibonacci);
					context.lineTo(x1,LigneFibonacci);
					if (x0 < x1) {
						context.fillText((data_fibo[key] * 100).toFixed(1) + "% : "  + " " + PixeltoEuro(LigneFibonacci).toFixed(2), x0, LigneFibonacci-3);
					} else {
						context.fillText((data_fibo[key] * 100).toFixed(1) + "% : "  + " " + PixeltoEuro(LigneFibonacci).toFixed(2), x1, LigneFibonacci-3);
					}
				}	
				context.stroke();
				context.closePath();
			}
			
		} 
    }     
	img_update();
} 
 
     
  init();  
      
}


function active_paint(){	
 if(document.getElementById("dtool").value == "capsule"){
    // cellule de précision
    document.getElementById("paint_chart0").style.zIndex="100";
    document.getElementById("imageTemp0").style.zIndex="100";
    document.getElementById("priceGraph").style.background="transparent";
    document.getElementById("priceGraph").style.zIndex="100";
    jQuery("#precCell").hide();
    jQuery("#precCellPointer" ).show(); 
    jQuery('#precCellMACD').show();
    jQuery('#precCellPointerMACD').show();
    jQuery('#precCellMACD2').show();
    jQuery('#precCellPointerMACD2').show(); 
    jQuery("#precCellW").show();
    jQuery("#precCellPointerW").show();
    SymexChartGlobals.paint_graph_active = 0; 
  }else if(document.getElementById("dtool").value == "drag"){
    // sélection élément
    jQuery('#precCell').hide();
    jQuery('#precCellPointer').hide();
    jQuery('#precCellRsi').hide();
    jQuery('#precCellPointerRsi').hide();
    jQuery('#precCellMACD').hide();
    jQuery('#precCellPointerMACD').hide();
    jQuery('#precCellMACD2').hide();
    jQuery('#precCellPointerMACD2').hide(); 
    jQuery("#precCellW").hide();
    jQuery("#precCellPointerW").hide();
    document.getElementById("paint_chart0").style.zIndex="999";
    document.getElementById("imageTemp0").style.zIndex="1000";
    SymexChartGlobals.paint_graph_active = 1;
  }else{
    // autre bouton
    jQuery('#precCell').hide();
    jQuery('#precCellPointer').hide();
    jQuery('#precCellRsi').hide();
    jQuery('#precCellPointerRsi').hide();
    jQuery('#precCellMACD').hide();
    jQuery('#precCellPointerMACD').hide();
    jQuery('#precCellMACD2').hide();
    jQuery('#precCellPointerMACD2').hide();
    jQuery("#precCellW").hide();
    jQuery("#precCellPointerW").hide();
    document.getElementById("paint_chart0").style.zIndex="999";
    document.getElementById("imageTemp0").style.zIndex="1000";
    document.getElementById("paint_chart0").style.display="block";
    document.getElementById("imageTemp0").style.display="block";
    SymexChartGlobals.paint_graph_active = 1; 
  }
}