<script type="text/javascript"
 src="//cdnjs.cloudflare.com/ajax/libs/jsxgraph/0.99.4/jsxgraphcore.js"></script>

<div id="jxgbox" class="jxgbox" style="float:left"></div>
<div id="settings">
<div id="printset">
    <p style="color:#cc0000"><strong> Printing Input Costs </strong></p>
    <p>Setup Cost ($): <input type="text" id="Print_Setup_Cost" value="10" label="$" onblur=recalc()></p>
    <p>Material Cost ($ / unit): <input type="text" id="Print_Mat_Cost" value="5" label="$" onblur=recalc()></p>
    <p>Printing Time (sec / unit): <input type="text" id="Print_Time_Cost" value="3600" label="$" onblur=recalc()></p>
    <p>Operating Cost ($ / hr): <input type="text" id="Print_Op_Cost" value="50" label="$" onblur=recalc()></p>
    <p>Lead Time (weeks): <input type="text" id="Print_Time_Lead" value="0.2" label="$" onblur=recalc()></p>
    <p>Burn Rate ($ / week): <input type="text" id="Print_Burn" value="5000" label="$" onblur=recalc()></p>
</div>
<div id="moldset">
    <p style="color:#0000ff"><strong> Molding Input Costs </strong></p>
    <p>Mold Cost ($): <input type="text" id="Mold_Setup_Cost" value="50000" label="$" onblur=recalc()></p>
    <p>Material Cost ($ / unit): <input type="text" id="Mold_Mat_Cost" value="0.5" label="$" onblur=recalc()></p>
    <p>Molding Time (sec / unit): <input type="text" id="Mold_Time_Cost" value="60" label="$" onblur=recalc()></p>
    <p>Operating Cost ($ / hr): <input type="text" id="Mold_Op_Cost" value="50" label="$" onblur=recalc()></p>
    <p>Lead Time (weeks): <input type="text" id="Mold_Time_Lead" value="6" label="$" onblur=recalc()></p>
    <p>Burn Rate ($ / week): <input type="text" id="Mold_Burn" value="5000" label="$" onblur=recalc()></p>
</div>
</div>

#jxgbox{
  width: 650px;
  height: 250px;
}

input {
  width: 50px;
}

#recalc {
  width: 80px;
}

p{
   padding: 1px 1px 2px 2px;
   margin: 1px 1px 2px 2px;
}

#settings{
    margin: 0 auto;
    width: 80%;
    font-size: 0.8em;
    
}

#printset{
  float:left;
  width:300px;
}

#moldset{
  float:left;

}

#recalc{
  float:left;

}

@media screen and (max-width: 650px) {
  #jxgbox {
    width: 500px;
    height: 195px;

  }
  
  #settings{
    width: 100%;
  }
  
    #printset{
    float:left;
    width:15em;
  }
  
  input{
    width:3em;
  }
}

@media screen and (max-width: 500px) {
  #jxgbox {
    width: 90%;
    height: 150px;
  }
  
  .jxgbox:before {
    content: "Not formatted for mobile devices, sorry! Try clicking 'EDIT' above"
  }

  #settings{
    width:100%;
  }
  
  #printset{
    float:left;
    width:15em;
  }
  
  input{
    width:3em;
  }
  
}

//Copyright 2016 - Raymond Weitekamp
//MIT License- https://opensource.org/licenses/MIT

//set window bounds
var minX = -500;
var maxX = 5000;
var minY = -15;
var maxY = 100;

//set display options
JXG.Options.text.fontSize = 14;
JXG.Options.text.display = 'internal';

// create board with boundingbox(x, y, x, y)
brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [minX, maxY, maxX, minY], axis:true, showNavigation:true, showCopyright:false});

//create a time axis
var timeAx = brd.create('axis', [[0.95 * maxX, 0], [0.95 * maxX, 1]]);

//axis labels
yLabel = brd.create('text',[(minX/2),(maxY+minY)/2.5, '$ per Unit'], {fontSize:14, rotate:90});
y2Label = brd.create('text',[maxX * 0.93,(maxY+minY)/2.5, 'Weeks to make'], {fontSize:14, rotate:90});
xLabel = brd.create('text',[(maxX+minX)/2,(minY/1.5), 'Units'], {fontSize:14});

//get initial values for printing
print_setup = parseFloat(document.getElementById("Print_Setup_Cost").value);
print_mat = parseFloat(document.getElementById("Print_Mat_Cost").value);
print_time = parseFloat(document.getElementById("Print_Time_Cost").value);
print_opCost = parseFloat(document.getElementById("Print_Op_Cost").value);
print_lead = parseFloat(document.getElementById("Print_Time_Lead").value);
print_burn = parseFloat(document.getElementById("Print_Burn").value);

//get initial values for molding
mold_setup = parseFloat(document.getElementById("Mold_Setup_Cost").value);
mold_mat = parseFloat(document.getElementById("Mold_Mat_Cost").value);
mold_time = parseFloat(document.getElementById("Mold_Time_Cost").value);
mold_opCost = parseFloat(document.getElementById("Mold_Op_Cost").value);
mold_lead = parseFloat(document.getElementById("Mold_Time_Lead").value);
mold_burn = parseFloat(document.getElementById("Mold_Burn").value);

//print cost function
print = brd.create('functiongraph',[function(x){
    // (fixed cost + material cost + time cost + lead time burn + make time burn) / parts
    return (parseFloat(print_setup) + (x * parseFloat(print_mat)) + (x * parseFloat(print_time) * parseFloat(print_opCost) / 3600) + (parseFloat(print_lead) * parseFloat(print_burn)) + (x * parseFloat(print_time) * (parseFloat(print_burn)/604800))) / x;
},1,function(){return maxX;}],{strokeColor:'#ff0000', highlight:false, strokeWidth:3});

//print time function
print_time = brd.create('functiongraph',[function(x){
    return (parseFloat(print_lead)) + (x * parseFloat(print_time) / 604800);
},1,function(){return maxX;}],{strokeColor:'#ff0000', highlight:false, strokeWidth:1});

//mold cost function
mold = brd.create('functiongraph',[function(x){
    // (fixed cost + material cost + time cost + lead time burn + make time burn) / parts
    return (parseFloat(mold_setup) + (x * parseFloat(mold_mat)) + (x * parseFloat(mold_time) * parseFloat(mold_opCost) / 3600) + (parseFloat(mold_lead) * parseFloat(mold_burn)) + (x * parseFloat(mold_time) * (parseFloat(mold_burn)/604800))) / x;
},1,function(){return maxX;}],{highlight:false, strokeWidth:3});

//mold time function
mold_time = brd.create('functiongraph',[function(x){
    return (parseFloat(mold_lead)) + (x * parseFloat(mold_time) / 604800);
},1,function(){return maxX;}],{highlight:false, strokeWidth:1});

//cost intersection
intersect = brd.create('intersection', [print, mold, 0]);
intersect.setLabel('Cost Intersection');

//time intersection
intersect2 = brd.create('intersection', [print_time, mold_time, 0]);
intersect2.setLabel('Time Intersection');

//function for when the graph updates
brd.on('update',function(){

    //get the bounds and update our variables
    var box = brd.getBoundingBox();
    minX = box[0];
    maxY = box[1];
    maxX = box[2];
    minY = box[3]; 
});

function recalc(){
    //console.log("recalculating")

    //update print inputs
    print_setup = parseFloat(document.getElementById("Print_Setup_Cost").value);
    print_mat = parseFloat(document.getElementById("Print_Mat_Cost").value);
    print_time = parseFloat(document.getElementById("Print_Time_Cost").value);
    print_opCost = parseFloat(document.getElementById("Print_Op_Cost").value);
    print_lead = parseFloat(document.getElementById("Print_Time_Lead").value);
    print_burn = parseFloat(document.getElementById("Print_Burn").value);

    //update mold inputs
    mold_setup = parseFloat(document.getElementById("Mold_Setup_Cost").value);
    mold_mat = parseFloat(document.getElementById("Mold_Mat_Cost").value);
    mold_time = parseFloat(document.getElementById("Mold_Time_Cost").value);
    mold_opCost = parseFloat(document.getElementById("Mold_Op_Cost").value);
    mold_lead = parseFloat(document.getElementById("Mold_Time_Lead").value);
    mold_burn = parseFloat(document.getElementById("Mold_Burn").value);

    //update the graph
    brd.fullUpdate();
}