Team:SDU-Denmark/testmodel

<html>
<head>
<style>
.calculator-arrows {
	width: 1000px;
	height: 1000px;
	position: relative;
}

.cal-output {
	position: absolute;
	font-family: sans-serif;
	font-size: small;
}

#calculator_input-slider {
	display: inline-block;
	width: 120px;
}

#input-box {
	font-family: sans-serif;
	font-size: small;
	position: absolute;
	top: 120px;
	left: 320px;
}
#input-box span {
	vertical-align: top;
}
</style>
<!-- Include jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<!-- Include Simple Slider JavaScript and CSS -->
<script src="http://lrm.dk/igem/beregner/simpleslider/simple-slider.min.js"></script>
<link href="http://lrm.dk/igem/beregner/simpleslider/simple-slider-volume.css" rel="stylesheet" type="text/css" />

<!-- Activate Simple Slider on your input -->


<script src="http://lrm.dk/igem/beregner/data.js"></script>
<script type="text/javascript" >
$(function() {
	$('#calculator_input').change(function() {	
		
			$('#input-box').find('span').html($(this).val() + ' %');
			$('#cal-vdxr').find('span').html(calculatorData[parseInt($(this).val())+1][1] + ' %');
			$('#cal-vispd').find('span').html(calculatorData[parseInt($(this).val())+1][2]+ ' %');
			$('#cal-vispe').find('span').html(calculatorData[parseInt($(this).val())+1][3]+ ' %');
			$('#cal-vispf').find('span').html(calculatorData[parseInt($(this).val())+1][4]+ ' %');
			$('#cal-vispg').find('span').html(calculatorData[parseInt($(this).val())+1][5]+ ' %');
			$('#cal-visphL').find('span').html(calculatorData[parseInt($(this).val())+1][6]+ ' %');	
			$('#cal-visphR').find('span').html(calculatorData[parseInt($(this).val())+1][7]+ ' %');	
			$('#cal-cvit').find('span').html(calculatorData[parseInt($(this).val())+1][8]+ ' %');


	});
	
	$('#calculator_input').change();
	
});
</script>
</head>
<body>
<div class="calculator-arrows">
	<img src="igem.png" alt="igem">
	<form id="input-box">
	<input size="10" type="text" id="calculator_input" data-slider-theme="volume" data-slider="true" data-slider-range="0,100" data-slider-step="1" data-slider-s nap="true">
	<span></span>	
	</form>
	<div style="top:310px; left:330px;" class="cal-output" id="cal-vdxr">V = <span></span></div>
	<div style="top:485px; left:330px;" class="cal-output" id="cal-vispd">V = <span></span></div>
	<div style="top:700px; left:330px;" class="cal-output" id="cal-vispe">V = <span></span></div>
	<div style="top:910px; left:330px;" class="cal-output" id="cal-vispf">V = <span></span></div>
	<div style="top:1095px; left:330px;" class="cal-output" id="cal-vispg">V = <span></span></div>
	<div style="top:1248px; left:20px;" class="cal-output" id="cal-visphL">V = <span></span></div>
	<div style="top:1248px; left:430px;" class="cal-output" id="cal-visphR">V = <span></span></div>
	<div style="top:215px; left:485px;" class="cal-output" id="cal-cvit">C = <span></span></div>
</div> 

</body>
</html>