/*****************************************
	*
	*	Função responsál por inicia os eixos,
	*	funções ...
	*
	/*****************************************/

	function init(zoom, translatePos,axes) {

		var canvas = document.getElementById('canvas');
		var context = canvas.getContext('2d');

		context.restore();
		context.clearRect(0,0, canvas.width, canvas.height);
		context.save();
		context.translate(translatePos.x , translatePos.y);

		showAxes(context); //Plota os eixos

		context.scale(zoom,zoom);

		context.translate(-370 , -51);

		desenha(canvas,context,axes);
		pontos(context);

	}

	/*************************************
	*
	*	Assintotas para ser plotadas
	*
	**************************************/

	function Assintota(x) { return 2}

	/*************************************
	*
	*	Funções para ser plotadas
	*
	**************************************/

	function fun1(x) {return ((2)*2*x*x)/ (1 + 2*x*x)}
	//((2)*2*x*x)/ (1 + 2*x*x)


	function desenha(canvas,context,axes) {

		if (null==canvas || !canvas.getContext) return;

		funGraph(context,axes,fun1,"rgb(0,106,224)",2);

		context.setLineDash([10,10]);
		funGraph(context,axes,Assintota,"rgb(0,106,224)",2);


	}

	/*************************************
	*
	*	Função que plota o gráfico
	*
	*	Obs.:
	*		As variáveis iMax e iMin são o 'tamanho' da função
	*
	**************************************/

	function funGraph(context,axes,func,color,thick) {


		var xx, yy, dx=4, x0=axes.x0, y0=axes.y0, scale=axes.scale;
		var iMax = Math.round((context.canvas.width-x0)/dx)*100;
		var iMin = axes.doNegativeX ? (Math.round(-x0/dx))*100 : 0;

		context.beginPath();
		context.lineWidth = thick;
		context.strokeStyle = color;

		for (var i=iMin;i<=iMax;i++) {
			xx = dx*i; yy = scale*func(xx/scale);
			if (i==iMin) context.moveTo(x0+xx,y0-yy);
			else         context.lineTo(x0+xx,y0-yy);
		}
		context.stroke();
		}


	/*************************************
	*
	* 	Função que desenha os exios 'X' e 'Y'
	*
	**************************************/

	function showAxes(context) {

		context.beginPath();
		context.lineWidth = 2;
		context.strokeStyle = "rgb(14,12,12)";
		context.moveTo(-7400,0); context.lineTo(7400,0);
		context.moveTo(0,-7400);    context.lineTo(0,7400);
		context.font="9px Arial";

		/** Eixo Y */

		var pass = -5000;
		var i = -100;
		for (i ; i <= 100; i++) {

			context.moveTo(-5,pass);
			context.lineTo(5,pass);
			if ( i != 0) context.fillText(-i,15 ,pass);
			pass += 50;

		}

		/** Eixo X */

		var pass = -5000;
		var i = -100;
		for (i ; i <= 100; i++) {

			context.moveTo(pass,-5);
			context.lineTo(pass,5);
			if ( i != 0) context.fillText(i,pass ,25);
			pass +=50;

		}

		context.stroke();

	}

	window.onload = function () {

		var canvas = document.getElementById('canvas');
		var context = canvas.getContext('2d');

		var axes={

			'x0': .5 + .5*canvas.width,
			'y0': .1 + .1*canvas.height,
			'scale' : 50,
			'doNegativeX' : true

			};

		var translatePos = {

			x: canvas.width/2,
			y: canvas.height/2

		};

		var zoom = 1;
		var startDragOffset = {};
		var mouseDown = false;


		/***********************************************************
		*	Funções que observam eventos dos botões '+' e '-'
		***********************************************************/

		document.getElementById('plus').addEventListener('click', function() {

			axes.scale += 25;
			alert(axes.scale);
			if (axes.scale <= 0) {
				axes.scale = 1;
			}

			init(zoom, translatePos,axes);

		}, false);

		document.getElementById('minus').addEventListener('click', function() {

			axes.scale -= 25;

			if (axes.scale <= 0) {
				axes.scale = 1;
			}

			init(zoom, translatePos,axes);

		}, false);


		/*******************************
		*	Reseta a posição da tela
		********************************/

		document.getElementById('reset').addEventListener('click', function() {

			zoom = 1;
			translatePos = {

			x: canvas.width / 2,
			y: canvas.height / 2

			};

			init(zoom, translatePos,axes);

		}, false);



		/*********************************************
		* Funções reposáveis pelo os eventos da tela
		**********************************************/

		canvas.addEventListener('mousedown', function(evt) {

			mouseDown = true;
			startDragOffset.x = evt.clientX - translatePos.x;
			startDragOffset.y = evt.clientY - translatePos.y;

		});

		canvas.addEventListener('mouseup', function(evt) {

			mouseDown = false;

		});

		canvas.addEventListener('mouseover', function(evt) {

			mouseDown = false;

		});

		canvas.addEventListener('mouseout', function(evt) {

			mouseDown = false;

		});


		canvas.addEventListener('mousemove', function(evt) {

			$('#canvas').css({'cursor': 'url(imgGrafico/grab.cur), auto'});

			move(context,axes,evt);

			if(mouseDown) {

				translatePos.x = evt.clientX - startDragOffset.x; //Sabe
				translatePos.y = evt.clientY - startDragOffset.y;

				if (translatePos.x > 5010) translatePos.x = 5010;
				if (translatePos.x < -4280) translatePos.x = -4280;
				if (translatePos.y > 5012) translatePos.y = 5012;
				if (translatePos.y < -4500) translatePos.y = -4500;

				init(zoom, translatePos,axes);

			}

		});

		init(zoom, translatePos,axes);


	};