<html xmlns="http://www.w3.org/1999/xhtml">
<head>



<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_6b.js"></script>
<script type="text/javascript">
//<![CDATA[



function getQuery(inSt) {
	var qSt;
	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; will be the current page if not supplied
	var A = (typeof fromString != "undefined") ? getQuery(fromString) : getQuery();
	//alert(A[0] + "," + A[1])
	for (var i=0;i<A.length;i++)
		if (A[i][0] == varName)  return A[i][1];
	return(""); 
	} //getQueryVariable
	


graphDocNameGiven = true;
var theDocObj=document;
var grapher1 = new grapher("grapher1",300, 300);
//grapher1.id="grapher1";

with(grapher1) {
    
	// tracing info
    
	tracing=true;
	traceStep=1;
	decPlacesX=0; // for displaying coords
	decPlacesY=0;

	// end of tracing info
				
    curvesColors = ["royalblue","green"];
	clipMargins=[5,5,5,5]; // to allow for arrow-heads and xs on the edge
	curveWt = 1;
	gridWt = .5;
	axisWt=1;
	clickAccX=.5;
	clickAccY=500;
	decPlacesY=1;
	decPlacesY=0;
	isPopup=false;
	popupURL="graphWindow.html"
	coordsColor ="black";
	gridColor = "silver";
	pointsColor = "royalblue";
	pointsWt = 1;
	backgroundColor = "white";
	surroundColor = "transparent";
	borderColor="teal";
	yGrid = "on";
	xGrid = "on";
	xGridStep = 1;
	yGridStep =1;
	nudgeXValsY=-2;
	nudgeXValsX=0;
	nudgeYValsX=-1;
	nudgeYValsY=1;
	
	xAxis = "off";
	yAxis = "off";
	xAxisColor="silver";
	yAxisColor="silver";
	//xAxisPosn=window[2];
	//yAxisPosn=window[0];
	showScalex=false;
	showScaley=false;
    yValuesShown=[-1];
	//xValuesRange=[-3,3];
	//yValuesRange=[-4,2];
	
	//xAxisLabel='x';
	//yAxisLabel='y';
	//xAxisLabelPosn='right';
	//yAxisLabelPosn='top';
	//xAxisLabelStyle= yAxisLabelStyle="font-style:italic;font-size:18px"

	edgeBuffer = 2;
	leftMargin=2;
	rightMargin=2;
	topMargin=2;
	bottomMargin=2;
	ifrMargin=5;
	window = [-4,4,-4,4];
	arrowLength=15;

	draggableBars = 0;
	//plottedPointsX=[,0,1];
	//lottedPointsY=[,-1,1];
	
	
	//plottedCurves=[["1.5x-0.5",-6,6,"arrow","arrow",[[1,5,"red",0.3,1,"green",0.2]]]];
	// format:  [string, xMin, xMax,"dot/circle/arrow","dot/circle/arrow", [ shading from arrays ]  ]
// each shading array is [leftlimit, rightlimit, color, transparency, shade-to-value, border color, border trnaparency ]
// Fix 06: shade-to-value can be a number or string that evaluates to a number,
//    or [curve-number], which implements shade-to-curve
// eg [parent.intLimitsQ15[2],parent.intLimitsQ15[1],col2,.7,0,"",".7"]
	//alert(plottedCurves[0])
	tracing = 1;
	traceColor = "firebrick";
	stopOnCutoff=true;

	}
xHeight = 4;
dotRadius=4;
var deltaYShift=(SAFJS)? 2:0;
var infLine=false;

if(getQueryVar("m")=="i"){
        infLine=true
        //segment(theGraph, x1,y1,x2,y2, theCurveName,startDec,endDec)
        }
    else { 
        var lineEq=getQueryVar("m").replace(/m/,"-").replace(/h/,"1/2")+"x"
        grapher1.plottedCurves=[[lineEq,-4,4,"arrow","arrow"]]; // no shading
        }






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

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


plotAllCurves(grapher1);
if(infLine)putSegment(grapher1, 0,-4, 0,4,"blue",1,"vertLinId","arrow","vertarrow");
  //putSegment(theGraph,x1,y1,x2,y2,color,tF,id,leftDec,rightDec,dash);

//**** FOR NExT GRAPH:




//**** FOR NExT GRAPH
// function putHtml(G,  inString, x1,y1, offsetX, offsetY, areScreenCoords,inGraphDoc)
//putHtml(grapher1,  '<span style="color:green">&#916;<i>x</i> = 1</span>', 0.8,-2.2, 0,0, false,true); // Delta x = 1
//putHtml(grapher1,  '1', .5,-7, 0,0, false,true);  // Delta y = 2

var theLang="en";
try{
	theLang=parent.getQueryVar("lang");
	} 
catch(e){}

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

//putSegment(theGraph,x1,y1,x2,y2,color,tF,id,leftDec,rightDec,dash)
//putSegment(grapher1, 5,1, 5,7,"darkgreen",1,"vert_arrow","","arrow");
//putSegment(grapher1, 1,1,5,1,"darkgreen",1,"horiz_arrow","","arrow");

//putText(grapher1, '&#x394;', "font-size:16px;fill:darkgreen", 0, 2.75,-0.1, 0, 0);
//putText(grapher1, 'x', "font-size:16px;fill:darkgreen;font-style:italic", 0, 3.15,-0.1, 0, 0);







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





// 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" >
<svg xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink" 
  width="250" 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="downarrowHead_grapher1" viewBox="0 0 10 10" refX="-1" refY="5" 
    markerUnits="strokeWidth" orient="auto"
    markerWidth="15" markerHeight="8">
    <polyline id="myArr_grapher1" points="10,0, 0,5 10,10 7,6 10,5 7,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>



<clipPath id="rectClip_grapher1">
    <rect id="cliprect_grapher1" width="200" height="200" 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="200" height="200" x="0" y="0" fill="lightblue"  style="cursor:crosshair"/>
	<rect id="grid_grapher1" width="150" height="150" 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="arcs_grapher1">
</g>
<g id="lines_grapher1">
</g>
<g id="polygons_grapher1">
</g>


</svg>
<div id="grapher1MathContainer"></div>
</div>

<center style="margin-left:-50px">
       <button id="lefttrace" onmousedown="delayTrace(grapher1,0)" onmouseup="clearTimeoutsandIntervals()">&#8592;</button>
       <button id="lefttrace" onmousedown="delayTrace(grapher1,1)" onmouseup="clearTimeoutsandIntervals()">&#8594;</button>
       <span id="magicbutton"></span>
       <br />
       <span id="traceCoordsgrapher1" style="font-family:Arial;color:indianred;font-size:12px">(0,  &#160; 0)</span>
       
	   <button id="runbutton" onclick="animateGraph()">Run</button>
   </center>

<script>
    //<![CDATA[
	document.getElementById("runbutton").innerHTML=addText("Run","Correr");
	if(parent.showComp) document.getElementById("magicbutton").innerHTML='<button id="checkbutton" onclick="showSVG(grapher1)">SVG Source</button>';
    //]]>
</script>


<center>
<div style="position:relative;margin-left:auto;margin-right:auto">
    <button id="checkbutton" onclick="showSVG(grapher1)">SVG Source</button>
    <button id="clearbutton" onclick="location.reload()">Clear</button>&#160;
    


<div id="feedback" style="width:300px; margin-left:auto;margin-right:auto ;font-size:12px;font-family:Arial;color:indianred"></div>
</div>
</center>






</body>
</html>
