<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 = "../../../../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=false;
				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 = 1;
		//yLabelsLeft=true;
		//xLabelsBelow=true;
		window = [-4,4,-4,4];
		stopOnCutoff=true;
		backgroundColor = "white";
		surroundColor = "transparent";
		gridColor = "silver";
		
		plottedCurves=parent.Q17Curves.slice();
		curvesColors=["green","green","green"];
		
		
		linesColor="#999999"; // line segments
		pointsColor="black"
		//showCoords = 0;
		showScalex=true;
		showScaley=true;
		//xValuesShown = [-3,-2,-1,0,1,2,3];
		//yValuesShown = [1,4,9];
		nudgeXValsY=-4
		xAxisLabelStyle="font-size:14px;font-style:italic";
		yAxisLabelStyle="font-size:14px;font-style:italic";
		clipMargins=[5,5,5,5];
		//plottedPointsX=[,-3,-2,-1,0,1,2,3];
		//plottedPointsY=[,9,4,1,0,1,4,9];
		xLabelFontSize=12;
		yLabelFontSize=12;
		yAxisLabel="";
		xAxisLabel="x";
		arrowLength=30;
		curveWt=1
		pointsWt=1.5; // thickness of plotted points typeically twice as thick as curves
		axisWt=0.5 // axis thickness
		gridWt=.5
		
	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)

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



//




//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("piece1Button").innerHTML=addText("First piece","Primer trozo");
document.getElementById("piece2Button").innerHTML=addText("Second piece","Segundo trozo");
document.getElementById("piece3Button").innerHTML=addText("Third piece","Tercer trozo");
document.getElementById("wholegraphButton").innerHTML=addText("Whole graph","Gr&#225;fica entera");

if(grapher1.plottedCurves.length==3) document.getElementById("thirdbuttondiv").style.display="inline block";
else document.getElementById("thirdbuttondiv").style.display="none";



}


function showPiece(n){
	document.getElementById("dots_grapher1").innerHTML="";
	grapher1.plottedCurves.length=0;
	grapher1.plottedCurves=parent.Q17AltCurves[n-1].slice();
	grapher1.curvesColors=["silver","crimson"]
  plotAllCurves(grapher1);
  parent.document.getElementById("eqnholder").innerHTML=parent.parent.typeSet("y = " + parent.Q17AltCurves[n-1][0][0])
}


function showWhole(){
	document.getElementById("dots_grapher1").innerHTML="";
	setUpGraph(grapher1);
	grapher1.plottedCurves.length=0;
	
	grapher1.curvesColors=["green","green","green"]
	grapher1.plottedCurves=parent.Q17Curves.slice();
  plotAllCurves(grapher1);
  parent.document.getElementById("eqnholder").innerHTML=parent.parent.typeSet("y = f(x)")
}




// 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>
	<button id="piece1Button" class="myButtons" onmouseover="this.style='myButtonsHov'" onmouseout="this.class='myButtons'" onclick="showPiece(1)">First piece</button> &#160; 
    <button id="piece2Button" class="myButtons" onmouseover="this.style='myButtonsHov'" onmouseout="this.class='myButtons'" onclick="showPiece(2)">Second piece</button>
	<div style="display:inline-block" id="thirdbuttondiv">
		 &#160; <button id="piece3Button" class="myButtons" onmouseover="this.style='myButtonsHov'" onmouseout="this.class='myButtons'" onclick="showPiece(3)">Third piece</button></div>
    <p></p>
		<button id="wholegraphButton" class="myButtons" onmouseover="this.style='myButtonsHov'" onmouseout="this.class='myButtons'" onclick="showWhole()">Whole graph</button>
</center>








</body>
</html>
