<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 = "../../utilsV3.js">
</script>
<script type="text/javascript" src = "../../SVGGrapher/SVGGraphV1_2Beta.js"></script>
<script type="text/javascript">
//<![CDATA[
graphDocNameGiven = true;
var theDocObj=document;
var grapher1 = new grapher("grapher1",300, 300);
with(grapher1) {
        curvesColors = ["teal","teal","teal","teal","teal","teal","teal"];
	curveWt = 0.5;
	//adaptive = true;
	isPopup=false;
	popupURL="graphWindow.html"
	pointsPerCurve = 1000;
	showCoords = 1;
	showScalex=false;
	showScaley=false;
        nudgeRightyValues=.00;
        yValuesShown = [0,1,2];
	coordsColor ="black";
	gridColor = "silver";
	pointsColor = "indianred";
	backgroundColor = "white";
	surroundColor = "transparent";
	borderColor="teal";
	yGrid = "on";
	xGrid = "on";
	yAxis = "on";
	yGridStep = 1;
	xGridStep = 1;
	xLabelsBelow = false;
	yLabelsLeft = false;
	edgeBuffer = 2;
	leftMargin=10;
	rightMargin=10;
	topMargin=10;
	bottomMargin=10;
	ifrMargin=20;
	window = [-3,3,-3,3];
	draggableBars = 0;
	plottedCurves = parent.demoCurves;
	tracing = 1;
	traceColor = "firebrick";
	xLabelFontSize=10;
	yLabelFontSize=10;
	}
xHeight = 4;
dotRadius=4;
squareRadius=4;
var deltaYShift=(SAFJS)? 2:0;
var T=[]; // timeouts

//alert(grapher1.totHt)



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

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);
//plotPoints(grapher1,'x',false,'');


// putDot(grapher1, parent.oDotPos[0], parent.oDotPos[1], "teal",true);
putDot(grapher1, parent.cDotPos[0], parent.cDotPos[1], "teal",false);
// putDot(grapher1, parent.oDot2Pos[0], parent.oDot2Pos[1], "teal",true);
putDot(grapher1, parent.cDot2Pos[0], parent.cDot2Pos[1], "teal",false);



animate(parent.demoCurves[0],1.5,1,false);
}

function run(){
	animate(parent.demoCurves[0],1.5,1,true);
}
function stop(){
	animate(parent.demoCurves[0],1.5,1,false);
}


var numFrames=100;
var dF=40 // milliseconds per frame

var movingSquareIndex=-1,xIndex=-1,yIndex=-1,xlineIndex=-1,segXInd=-1,segYInd=-1,startSquareIndex=-1;
var xIndexS=-1,segYIndS=-1;



function resetGraph(){
    clearTimeouts();
    parent.document.getElementById("limy").style.visibility="hidden";
    if (startSquareIndex>-1) {
	var theSSquare=document.getElementsByTagName("rect")[startSquareIndex-1];
	theSSquare.setAttributeNS(null,"visibility","hidden");
	}
    if (movingSquareIndex>-1) {
	    var theMSquare=document.getElementsByTagName("rect")[movingSquareIndex-1];
	    theMSquare.setAttributeNS(null,"visibility","hidden");
	    }
    if (yIndex>-1){
	    var theSeg1=document.getElementsByTagName("line")[yIndex-1];
	    theSeg1.setAttributeNS(null,"visibility","hidden");
	    var theSeg2=document.getElementsByTagName("line")[yIndex-2];
	    theSeg2.setAttributeNS(null,"visibility","hidden");
	    }
    if (xIndex>-1){
	    var theSeg3=document.getElementsByTagName("line")[xIndex-1];
	    theSeg3.setAttributeNS(null,"visibility","hidden");
	    var theSeg4=document.getElementsByTagName("line")[xIndex-2];
	    theSeg4.setAttributeNS(null,"visibility","hidden");
	    }
    if (segXInd>-1){
	var theSeg5=document.getElementsByTagName("line")[segXInd-1];
        theSeg5.setAttributeNS(null,"visibility","hidden");
	}
    if (segYInd>-1){
	var theSeg6=document.getElementsByTagName("line")[segYInd-1];
        theSeg6.setAttributeNS(null,"visibility","hidden");
	}
    if (xIndexS!=-1) {
	var theSeg7=document.getElementsByTagName("line")[xIndexS-1];
        theSeg7.setAttributeNS(null,"visibility","hidden");
        var theSeg8=document.getElementsByTagName("line")[xIndexS-2];
        theSeg8.setAttributeNS(null,"visibility","hidden");
        }
    if (segYIndS!=-1) {
	var theSeg9=document.getElementsByTagName("line")[segYIndS-1];
        theSeg9.setAttributeNS(null,"visibility","hidden");
        }
}


function animate(theCurve,startX,endX,moving){
var xVals=[],yVals=[];
var fn=theCurve[0];
xVals[0]=startX;yVals[0]=evalFuncQuick(fn,xVals[0]);
var dX=(endX-startX)/numFrames;
for (var i=1;i<=numFrames;i++) {
    xVals[i]=startX+i*dX;
    yVals[i]=evalFuncQuick(fn,xVals[i]);
    //alert(xVals[i] + ',' + yVals[i])
    var toLeft=(x[0]>0);
}
var theI="";
if (!moving) {
    if (startSquareIndex>-1) {
	
        var theSSquare=document.getElementsByTagName("rect")[startSquareIndex-1];
        theSSquare.setAttributeNS(null,"visibility","visible");
    }
    else startSquareIndex=putSquare(grapher1, xVals[0], yVals[0], "red",false,1);
    
    if(movingSquareIndex>-1) {
    var theMSquare=document.getElementsByTagName("rect")[movingSquareIndex-1];
    theMSquare.setAttributeNS(null,"visibility","hidden");
   }
   
   
    if (xIndex==-1) xIndex=putX(grapher1, xVals[0], 0, "blue",4);
    else putXAt(grapher1, xVals[0], 0, xIndex-1);
    var p3=document.getElementsByTagName("line")[xIndex-1];
    p3.setAttributeNS(null,"visibility","visible");
    p32=document.getElementsByTagName("line")[xIndex-2];
    p32.setAttributeNS(null,"visibility","visible");
    
    
    if (yIndex==-1) yIndex=putX(grapher1, 0, yVals[0], "indianred",4);
    else putXAt(grapher1, 0, yVals[0], yIndex-1);
    var p4=document.getElementsByTagName("line")[yIndex-1];
    p4.setAttributeNS(null,"visibility","hidden");
    p42=document.getElementsByTagName("line")[yIndex-2];
    p42.setAttributeNS(null,"visibility","hidden");
    if (segXInd==-1) segXInd=putSegment(grapher1,0,yVals[0],xVals[0],yVals[0],"indianred");
    else putSegmentAt(grapher1,0,yVals[0],xVals[0],yVals[0],segXInd-1);
    var p5=document.getElementsByTagName("line")[segXInd-1];
    p5.setAttributeNS(null,"visibility","hidden");
    if (segYInd==-1) segYInd=putSegment(grapher1,xVals[0],0,xVals[0],yVals[0],"blue");
    else putSegmentAt(grapher1,xVals[0],0,xVals[0],yVals[0],segYInd-1);

    var p6=document.getElementsByTagName("line")[segYInd-1];
    p6.setAttributeNS(null,"visibility","visible");
    


}
else {
// moving
    var theSquare, theSeg;
    if (startSquareIndex>-1) {
        theSquare=document.getElementsByTagName("rect")[startSquareIndex-1];
        theSquare.setAttributeNS(null,"visibility","hidden");
    }
    if(movingSquareIndex==-1) movingSquareIndex=putSquare(grapher1, xVals[0], yVals[0], "red",false,1);
    else putSquareAt(grapher1, xVals[0], yVals[0], movingSquareIndex-1);
    theSquare=document.getElementsByTagName("rect")[movingSquareIndex-1];
    theSquare.setAttributeNS(null,"visibility","visible");
   
    if (xIndex==-1)xIndex=putX(grapher1, xVals[0], 0, "blue",4);
    else putXAt(grapher1, xVals[0], 0, xIndex-1);
    var p3=document.getElementsByTagName("line")[xIndex-1];
    p3.setAttributeNS(null,"visibility","visible");
    p3=document.getElementsByTagName("line")[xIndex-2];
    p3.setAttributeNS(null,"visibility","visible");     
    if (yIndex==-1) yIndex=putX(grapher1, 0, yVals[0], "indianred",4);
    else putXAt(grapher1, 0, yVals[0], yIndex-1);
    var p4=document.getElementsByTagName("line")[yIndex-1];
    p4.setAttributeNS(null,"visibility","visible");
    p4=document.getElementsByTagName("line")[yIndex-2];
    p4.setAttributeNS(null,"visibility","visible");
    if (segXInd==-1) segXInd=putSegment(grapher1,0,yVals[0],xVals[0],yVals[0],"indianred");
    else putSegmentAt(grapher1,0,yVals[0],xVals[0],yVals[0],segXInd-1);
    var p5=document.getElementsByTagName("line")[segXInd-1];
    p5.setAttributeNS(null,"visibility","visible");
    if (segYInd==-1) segYInd=putSegment(grapher1,xVals[0],0,xVals[0],yVals[0],"blue");
    else putSegmentAt(grapher1,xVals[0],0,xVals[0],yVals[0],segYInd-1);

    var p6=document.getElementsByTagName("line")[segYInd-1];
    p6.setAttributeNS(null,"visibility","visible");


   

   
      
        for (var i=1;i<=numFrames;i++) {
            var theI='putSquareAt(grapher1, ' + xVals[i] + ',' +  yVals[i] + ',' +  (movingSquareIndex-1).toString() + ');';
            theI+='putXAt(grapher1, 0, ' + yVals[i] + ', (yIndex-1).toString());';
            theI+='putXAt(grapher1, ' + xVals[i] + ',0, (xIndex-1).toString());';
            theI+='putSegmentAt(grapher1, 0, ' + yVals[i] + ',' + xVals[i] + ',' +  yVals[i] + ', (segXInd-1).toString());';
            theI+='putSegmentAt(grapher1, ' + xVals[i] + ',0,' + xVals[i] + ',' +  yVals[i] + ', (segYInd-1).toString());';
	    if (i==numFrames) theI+='parent.document.getElementById("limy").style.visibility="visible";'
            T[i]=window.setTimeout(theI,i*dF);
        }
     // now flash on and off
    var I2="";
    var colors = ["darkred","red","orangered","orange","yellow","orange","orangered","red","darkred"], k=0;
    for (var i=numFrames+1;i<=numFrames+50;i++) {
        I2='changeXColor(grapher1,yIndex-1,"' + colors[k] + '");'
        T[i]=window.setTimeout(I2,i*dF);
        k+=1;if(k==8)k=0;
    }

} // if moving


//var graphDoc = getDoc(grapher1);
//alert(graphDoc.innerHTML)
}


function clearTimeouts() {
var L=T.length;
for (var i=1;i<L;i++) clearTimeout(T[i]);
T.length=0;
}
function changeSquareColor(theGraph,theSquareIndex,color) {
var theSquare=document.getElementsByTagName("rect")[theSquareIndex];
theSquare.setAttributeNS(null,"stroke",color);
theSquare.setAttributeNS(null,"fill",color);
}

function changeXColor(theGraph,theXIndex,color) {
var theSeg=document.getElementsByTagName("line")[theXIndex];
theSeg.setAttributeNS(null,"stroke",color);
var theSeg2=document.getElementsByTagName("line")[theXIndex-1];
theSeg2.setAttributeNS(null,"stroke",color);
}

function putSquareAt(theGraph,x1,y1,theSquareIndex) {
    var theSquare=document.getElementsByTagName("rect")[theSquareIndex];
    var K=screenCoords(theGraph,x1,y1)
    K[0]-=squareRadius;K[1]-=squareRadius;
    theSquare.setAttributeNS(null,"x",K[0]);
    theSquare.setAttributeNS(null,"y",K[1]);
}


function putXAt(theGraph,x1,y1,theXIndex) {
    var K=screenCoords(theGraph,x1,y1);
    var theX, I=theXIndex-1;
    for (var r=-1;r<2;r+=2) {
        theX=document.getElementsByTagName("line")[I];
        theX.setAttributeNS(null,"x1",K[0]-xHeight);
        theX.setAttributeNS(null,"x2",K[0]+xHeight);
        theX.setAttributeNS(null,"y1",K[1]+r*xHeight);
        theX.setAttributeNS(null,"y2",K[1]-r*xHeight);
        I++
    }
}



function putSegmentAt(theGraph,x1,y1,x2,y2,theIndex) {
    var K=screenCoords(theGraph,x1,y1),L=screenCoords(theGraph,x2,y2);
    var theX=document.getElementsByTagName("line")[theIndex];
    theX.setAttributeNS(null,"x1",K[0]);
    theX.setAttributeNS(null,"x2",L[0]);
    theX.setAttributeNS(null,"y1",K[1]);
    theX.setAttributeNS(null,"y2",L[1]);
}

//]]>
</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="300" height="300" id="myGraph">
<defs id="graphdefs">
<marker id="arrowHead" viewBox="0 0 10 10" refX="10" refY="5" 
    markerUnits="strokeWidth" orient="auto"
    markerWidth="40" markerHeight="20">
    <polyline id="myArr" points="0,0 10,5 0,10 3,6 0,5 3,4" />
</marker>
<clipPath id="rectClip">

    <rect id="cliprect" width="250" height="250" x="25" y="25" fill="white" />
    <!-- The above is adjusted by the js in SVGGraph --> 
</clipPath>
</defs>

<g id="firstGroup">
	<rect id="gSurround" width="300" height="300" x="0" y="0" fill="blue" />
	<rect id="grid" width="250" height="250" x="25" y="25" fill="white" />
</g>
<g id="gridGroup">
</g>
<g id="curves">
</g>
<g id="dots">
</g>
<g id="squares">
</g>
<g id="xs">
</g>
<g id="lines">
</g>
</svg>
</div>


<!-- now the buttons -->
<div style="height: 40px; width:300px;margin-top:-20px;margin-left:auto;margin-right:auto">
    <center>
    <button id="startpos" onclick="resetGraph();stop()" />
    <button id="runbutton" onclick="run()" />
    <script type="text/javascript">
    //<![CDATA[
    document.getElementById("runbutton").innerHTML=addText("Run","Correr");

    document.getElementById("startpos").innerHTML=addTextXML("Start position","Posici&oacute;n inicial");
    //document.getElementById("reset").innerHTML=addText("Reset","Reiniciar");
    //]]>
    </script>
    </center>
</div>




</body>
</html>
