<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.myButtons{font-size:80%;font-family:Geneva,Helvetica;background:#e8e888;background:linear-gradient(#cccccc,#e8e888)}
.myButtonsHov{background:#e8e84B}
</style>



<title></title>
<script type="text/javascript">
    var theLanguage = parent.theLanguage;
    var pathPrefix = "../.."; // path to base directory
    function addText(x,y){return(theLanguage=="en")?x:y}
    

</script>
<script type="text/javascript" src = "../../globalScripts.js">
</script>
<script type="text/javascript" src = "../../utilsV5.js">
</script>
<script type="text/javascript" src = "../../SVGGrapher/SVGGraphV1_4.js"></script>
<script type="text/javascript">
//<![CDATA[
graphDocNameGiven = true;
var theDocObj=document;
var grapher1 = new grapher("grapher1",250, 250);


function getQuery(inSt) {
	if (typeof inSt != "undefined") {var st=inSt.indexOf("?");qSt=inSt.substring(st+1);}
	else qSt = window.location.search.substring(1);
	if (qSt=="") return([]);
	var qVars = qSt.split("&"), outArr=[];
	for (var i=0;i<qVars.length;i++) outArr[i] = qVars[i].split("=");
	return outArr;
}

function getQueryVar(varName,fromString) {
	// fromString is optional; wil be the current page if not suplied
	if (typeof fromString != "undefined")  var A=getQuery(fromString);
	else var A=getQuery();
	for (var i=0;i<A.length;i++) {if (A[i][0] == varName)  return A[i][1]}
	return(""); 
} //getQueryVariable
	
	
	

with(grapher1) {
				// tracing info
				tracing=(getQueryVar("drawcurve")=="true");
				numTraceSteps=(getQueryVar("drawcurve")=="true")?32:8; // based on with of the graph as 8 units;
				decPlacesX=0; // for displaying coords
				decPlacesY=0;
				traceStep=.25; // this gets reset in traceGraph...
				// end of tracing info
				

		xGridStep = 1;
		yGridStep = 5;
		//yLabelsLeft=true;
		//xLabelsBelow=true;
		window = [-4,4,0,50];
		stopOnCutoff=true;
		backgroundColor = "white";
		surroundColor = "transparent";
		gridColor = "silver";
		
		if(getQueryVar("drawcurve")=="false"){
			curvesColors.length=0;
			for(var i=0;i<10;i++)curvesColors.push("transparent")
			}

		linesColor="#999999"; // line segments
		pointsColor="black"
		//showCoords = 0;
		showScalex=true;
		showScaley=true;
		xValuesShown = [-3,-2,-1,0,1,2,3];
		yValuesShown = [5,10,20,40];
		nudgeXValsY=-4;
		nudgeYValsX=-2;
		xAxisLabelStyle="font-size:14px;font-style:italic";
		yAxisLabelStyle="font-size:14px;font-style:italic";
		clipMargins=[0,0,0,5];
		plottedPointsX=[,-3,-2,-1,0,1,2,3];
		plottedPointsY=[,5/8,5/4,5/2,5,10,20,40];
		xLabelFontSize=12;
		yLabelFontSize=12;
		yAxisLabel="y";
		xAxisLabel="x";
		arrowLength=30;
		curveWt=1
		pointsWt=1.5; // thickness of plotted points typeically twice as thick as curves
		axisWt=0.5 // axis thickness 
		
	clickAccX=.25;
	clickAccY=.25;
	decPlacesX=(getQueryVar("drawcurve")=="true")?2:0;
	decPlacesY=(getQueryVar("drawcurve")=="true")?2:0;

	isPopup=false;
	popupURL="graphWindow.html"
	pointsPerCurve = 1000;

    

	}
xHeight = 3;
dotRadius=3;
var deltaYShift=(SAFJS)? 2:0;




function initialActions() {
setUpGraph(grapher1);
var graphDoc = getDoc (grapher1);
var graphElt= graphDoc.getElementById("myGraph");

graphElt.setAttributeNS(null,"viewBox"," 0 0 " + grapher1.totWdth + " " + grapher1.totHt);


//plotPoints(grapher1,"x",true,"",0, -4); // plotPoints(theGraph, type, showLabels, labelType, dX,dY)
plotPoints(grapher1,"x");
//alert("PLOTTED POINTS")
// **** ad hoc code -- for tracing in this grapher version, need actual curves andnot line segments;

// *** connect the dots code to use for tracing when there is no curve (invisible lines connect them)
if (getQueryVar("drawcurve")=="false"){
	for(var i=1;i<grapher1.plottedPointsX.length-1;i++){
	var mSeg=(grapher1.plottedPointsY[i+1]-grapher1.plottedPointsY[i])/(grapher1.plottedPointsX[i+1]-grapher1.plottedPointsX[i]);
		var theCurveEq=grapher1.plottedPointsY[i].toString() + "+ " + mSeg + "*(x-" + grapher1.plottedPointsX[i] + ")";
		//alert([theCurveEq, grapher1.plottedPointsX[i],grapher1.plottedPointsX[i+1]])
		grapher1.plottedCurves.push([theCurveEq, grapher1.plottedPointsX[i],grapher1.plottedPointsX[i+1]])
		}
	}
else{
	grapher1.plottedCurves=[ ["5*2^x",-4,4,"arrow","arrow"] ];
}

grapher1.arrowLength=15; //reset for smaller arrow on curve
	
plotAllCurves(grapher1);

//

// now put a trace point somewhere (code from dealWithMouseDownTrace)
 var p=putX(grapher1, 1,10, grapher1.traceColor,2.5,"tracepoint_grapher1");
			grapher1.traceX=1;
			grapher1.traceY=1;
			grapher1.traceIndex=p;
			traceGraph(grapher1,1,true); // puts in guide lines, resets coords shown etc and keeps track of bookeeping
			traceGraph(grapher1,0,true)


//function putText(theGraph, inStr, theStyle, theFontSize,  x1,y1, offsetX, offsetY, areScreenCoords, overrideBorders,bgColor,centering,isForAxes,isTex,heightFactor)

//putText(grapher1, "a", "font-style:italic;font-size:18px", 12,  4,0,   -5, -12, false, true,"",true,false,false,2)


//
//putDot(theGraph, x1,y1, color,isOpen, radius,fillColor) 
// plotPoints(grapher1, "x", false, '')
//showSVG(grapher1)

document.getElementById("coordsword").innerHTML=addText("Coordinates","Cooredenadas")

}





// NOTE
// onmousedown="if (event.preventDefault) event.preventDefault()"
// the above prevents the SVG image from being dragged around in Firefox and some other browsers
//]]>
</script>
</head>
<body onload="initialActions()">
<div id = "scratch" style="font-size:5px"></div><span id = "ruler"></span>
<div id="grapher1Div" style="margin-top:0px;margin-bottom:0px" onmousemove="showCoords(event,this,grapher1,false);" onmousedown=" dealWithMouseDownTrace(event,this,grapher1,true)">
<svg xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink" 
  width="300" height="250" id="myGraph">
<defs id="graphdefs_grapher1">
<marker id="arrowHead_grapher1" viewBox="0 0 10 10" refX="10" refY="5" 
    markerUnits="strokeWidth" orient="auto"
    markerWidth="40" markerHeight="20">
    <polyline id="myArr_grapher1" points="0,0 10,5 0,10 3,6 0,5 3,4" />
</marker>



<marker id="guideArrow_grapher1" viewBox="-6 -6 12 12" refX="4" refY="0" 
    markerUnits="strokeWidth" orient="auto"
    markerWidth="20" markerHeight="10">
    <polyline id="myArrGA_grapher1" refX = "2" refY="0" points="-2,0 -5,5 5,0 -5,-5" />
</marker>

<marker id="guideArrowVert_grapher1_grapher1" viewBox="-6 -6 12 12" refX="10" refY="0" 
    markerUnits="strokeWidth" orient="auto"
    markerWidth="20" markerHeight="10">
    <polyline id="myArrGA_grapher1" refX = "2" refY="0" points="-2,0 -5,5 5,0 -5,-5" />
</marker>




<!-- -2,0 -5,5 5,0 -5,-5  -->
	
<clipPath id="rectClip_grapher1">
    <rect id="cliprect_grapher1" width="350" height="250" x="25" y="25" fill="white" />
    <!-- The above is adjusted by the js in SVGGraph --> 
</clipPath>
</defs>

<g id="firstGroup_grapher1">
	<rect id="gSurround_grapher1" width="400" height="250" x="0" y="0" fill="lightblue"  style="cursor:crosshair"/>
	<rect id="grid_grapher1" width="350" height="225" x="25" y="25" fill="white"  style="cursor:crosshair"/>
</g>
<g id="dots_grapher1">
</g>
<g id="gridGroup_grapher1">
</g>
<g id="curves_grapher1">
</g>

<g id="squares_grapher1">
</g>
<g id="xs_grapher1">
</g>
<g id="tracepoint_grapher1">
</g>
<g id="lines_grapher1">
</g>
<g id="guideLines_grapher1">
</g>
<g id="barlabels_grapher1">
</g>
<g id="arcs_grapher1">
</g>
</svg>
</div>

<center>
	<div style="font-family:Arial;color:indianred;font-size:12px; margin-top:0px; margin-bottom:5px">
		<span id="coordsword"></span>: <span id="traceCoordsgrapher1">(0,  &#160; 0)</span>
	</div>
	
	
       <button id="lefttrace" class="myButtons" onmouseover="this.style='myButtonsHov'" onmouseout="clearTimeoutsandIntervals();this.class='myButtons'" onmousedown="delayTrace(grapher1,0, true)" onmouseup="clearTimeoutsandIntervals()">&#8592;</button>
       <button id="righttrace"  class="myButtons"  onmousedown="delayTrace(grapher1,1, true)" onmouseout="clearTimeoutsandIntervals();" onmouseup="clearTimeoutsandIntervals()">&#8594;</button>
       <span id="magicbutton"></span>

       
       
   </center>


<script></script>








</body>
</html>
