<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8"/>
		<meta name="author" content="제로스나이퍼"/>
		<meta name="keywords" content="구상"/>
		<title>장대비 비교</title>
		<style type="text/css">
			body {
				font-family: sans-serif;
				background-color: #080403;
				color: #F1C999;
				line-height: 25px;
			}
			div {
				float:left;
				padding: 10px;
			}
			table, th, td {
				border: 1px solid #F1C999;
				border-collapse: collapse;
			}
			th, td {
				padding: 5px;
			}
			tr:nth-child(even) {
				background-color: #440C0C;
			}
			tr:nth-child(odd) {
				background-color: #2E0A0A;
			}
			.currentBP {
				font-weight: bold;
				color: #00AA00;
			}
			select {
				background-color: #080403;
				color: #F1C999;
				border: 1px solid #F1C999;
			}
			option:checked {
				background-image: linear-gradient(#440C0C, #440C0C);
			}
			h3 {
				font-weight: bold;
				padding: 7px;
			}
		</style>
		<script defer="true" type="text/javascript">
			function Comma(CHG){ 
				return CHG.replace(/(\d)(?=(?:\d{3})+(?!\d))/g,'$1,'); 
			} 

			function updateOutput() {


				var calculated = document.getElementById("calculated");
				var calculated1 = document.getElementById("calculated1");

				var Min = parseFloat(document.getElementById("Min").value);

				var Min1 = parseFloat(document.getElementById("Min1").value);
				var Rain1 = parseFloat(document.getElementById("Rain1").value);
			
				var Min2 = parseFloat(document.getElementById("Min2").value);
				var Rain2 = parseFloat(document.getElementById("Rain2").value);
				
				var EqMin;


				S = parseFloat(document.getElementById("S").value);

				var Belt1;
				var Belt2;

				Belt1 = (1 + (Min+Min1)/100) * (Rain1/100 + S);
				Belt2 = (1 + (Min+Min2)/100) * (Rain2/100 + S);
				
			        EqMin = (Min2*Rain2 - Min1*Rain1)/(Rain1-Rain2) + (Min2 - Min1)*S*100/(Rain1-Rain2) - 100;
	
			        EqMin = Math.round(EqMin*100)/100;

				var ComP = 0;
				var BComP;

				if(Belt1 != 0 && Belt2 != 0){
					if(Belt1 > Belt2)
						ComP = (Belt1 - Belt2)/Belt2*100;
					else if(Belt2 > Belt1)	
						ComP = (Belt2 - Belt1)/Belt1*100;
					else
						ComP = 0;
				}
				
				BComP = ComP;
				ComP = Math.round(ComP*100)/100;

				if(BComP < 100){
					if(BComP != 0){
						if(Belt1*100 > Belt2*100)
							calculated.innerHTML = "벨트1 > 벨트2<br>&nbsp차이 : " + ComP.toFixed(2) + "%";
						else if(Belt2*100 > Belt1*100)
				   			calculated.innerHTML = "벨트2 > 벨트1<br>&nbsp차이 : " + ComP.toFixed(2) + "%";
	
						if(!isNaN(EqMin)){
							if(EqMin > 0){
								if(Min2 > Min1)
									calculated1.innerHTML = "착용전 민첩이 " + Comma(EqMin.toFixed(0)) + "보다 크면&nbsp<br>&nbsp무조건 벨트1 > 벨트2";
								else if(Min1 > Min2)
									calculated1.innerHTML = "착용전 민첩이 " + Comma(EqMin.toFixed(0)) + "보다 크면&nbsp<br>&nbsp무조건 벨트2 > 벨트1";
								else 
									calculated1.innerHTML = "<b>&nbsp</b><br><b></b>";
							}
							else{

									calculated1.innerHTML = "<b>&nbsp</b><br><b></b>";
							}
						}
						else
								calculated1.innerHTML = "<b>&nbsp</b><br><b></b>";
					}
					else{
						calculated.innerHTML = "벨트1 = 벨트2<br>&nbsp차이 : 00.00%";
						calculated1.innerHTML = "<b>&nbsp</b><br><b></b>";		
					}
				}
				
			}	

    			function isNumberKey(evt) {

			        var charCode = (evt.which) ? evt.which : event.keyCode;
	
			        if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57))
			            return false;
		       }

		</script>
	</head>

	<body onload="updateOutput()">
		<form>
			<div width=100%>
				<table>

					<tr>
						<th>스&nbsp&nbsp킬</th>
						<td>	
							&nbsp <select id="S" onchange="updateOutput()">
								<option value="0">장대비만비교</option>
								<option value="28">복비-그늘(2800%)</option>
								<option value="35">복비-암운(3500%)</option>
								<option value="38">복비-공습(3800%)</option>
								<option value="46">복비-쑥대밭(4600%)</option>
								<option value="87">복비-집착(8700%)</option>
								
							</select>
						</td>		
					</tr>
					<tr>
						<th>민&nbsp&nbsp첩</th>
						<td>
							&nbsp<b>민첩<input type="text" style="text-align: right;" id="Min" value="0" maxlength=5 size=2 onkeyup="updateOutput()" onkeypress="return isNumberKey(event)" autofoucus></input>&nbsp&nbsp(벨트 착용전 민첩)</b>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
						</td>
					</tr>
					<tr>
						<th>벨트1</th>
						<td>
							&nbsp<b>민첩<input type="text" style="text-align: right;" id="Min1" value="0" maxlength=3 size=1 onkeyup="updateOutput()" onkeypress="return isNumberKey(event)"></input>
							장대비<input type="text" style="text-align: right;" id="Rain1" value="0" maxlength=4 size=1 onkeyup="updateOutput()" onkeypress="return isNumberKey(event)"></input>%</b>
						</td>
					</tr>
					<tr>
						<th>벨트2</th>
						<td>
							&nbsp<b>민첩<input type="text" style="text-align: right;" id="Min2" value="0" maxlength=3 size=1 onkeyup="updateOutput()" onkeypress="return isNumberKey(event)"></input>
							장대비<input type="text" style="text-align: right;" id="Rain2" value="0" maxlength=4 size=1 onkeyup="updateOutput()" onkeypress="return isNumberKey(event)"></input>%</b>	
						</td>
					</tr>
					<tr>
						<th>결&nbsp&nbsp과</th>
						<td>
							&nbsp<b id="calculated"/>
						</td>
					</tr>
					<tr height = 65>
						<th>정&nbsp&nbsp보</th>
						<td>
							&nbsp<b id="calculated1"/>
							&nbsp<b id="calculated2"/>
						</td>
					</tr>
					<tr height = 65>
						<th>주&nbsp&nbsp의</th>
						<td>
							&nbsp<b>차이가 크지 않다면<br>&nbsp강인함도 고려해야 함</b>
						</td>
					</tr>



				</table>
				</div>

					


		</form>
	</body>
</html>