<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <script data-require="angular.js@1.2.16" data-semver="1.2.16" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
    <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script data-require="bootstrap@3.1.1" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,600italic,600,300|Open+Sans+Condensed:300,700|Ubuntu+Mono:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <!-- Fixed navbar -->
    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <p class="navbar-brand">Calculator</p>
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Ohm's Law</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>

    <div class="container theme-showcase" role="main" ng-app ng-controller="OhmController">
      <form name="ohm" class="form-horizontal" role="form">
        <div class="form-group" ng-class="{'has-error': ohm.voltage.$invalid && ohm.voltage.$dirty}">
          <label for="voltage" class="col-sm-2 control-label">Voltage</label>
          <div class="input-group">
            <span class="input-group-addon">
              <input type="checkbox" ng-model="voltage.enable" ng-disabled="enough(voltage.enable)">
            </span>
            <input name="voltage" type="text" class="form-control text-right" ng-pattern="numeric" ng-model="voltage.value" ng-disabled="!voltage.enable" ng-change="calculate()">
            <div class="input-group-btn">
              <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">{{voltage.prefix}}V <span class="caret"></span></button>
              <ul class="dropdown-menu pull-right">
                <li ng-repeat="unit in units"><a href="#" ng-click="setUnit(voltage, unit)">{{unit.symbol}}V</a></li>
              </ul>
            </div>
          </div>
        </div>
        <div class="form-group" ng-class="{'has-error': ohm.current.$invalid && ohm.current.$dirty}">
          <label for="current" class="col-sm-2 control-label">Current</label>
          <div class="input-group">
            <span class="input-group-addon">
              <input type="checkbox" ng-model="current.enable" ng-disabled="enough(current.enable)">
            </span>
            <input name="current" type="text" class="form-control text-right" ng-pattern="numeric" ng-model="current.value" ng-disabled="!current.enable" ng-change="calculate()">
            <div class="input-group-btn">
              <button type="button" name="current" class="btn btn-default dropdown-toggle" data-toggle="dropdown">{{current.prefix}}A <span class="caret"></span></button>
              <ul class="dropdown-menu pull-right">
                <li ng-repeat="unit in units"><a href="#" ng-click="setUnit(current, unit)">{{unit.symbol}}A</a></li>
              </ul>
            </div>
          </div>
        </div>
        <div class="form-group" ng-class="{'has-error': ohm.resistance.$invalid && ohm.resistance.$dirty}">
          <label for="resistance" class="col-sm-2 control-label">Resistance</label>
          <div class="input-group">
            <span class="input-group-addon">
              <input type="checkbox" ng-model="resistance.enable" ng-disabled="enough(resistance.enable)">
            </span>
            <input name="resistance" type="text" class="form-control text-right" ng-pattern="positiveNumeric" ng-model="resistance.value" ng-disabled="!resistance.enable" ng-change="calculate()">
            <div class="input-group-btn">
              <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">{{resistance.prefix}}&Omega; <span class="caret"></span></button>
              <ul class="dropdown-menu pull-right">
                <li ng-repeat="unit in units"><a href="#" ng-click="setUnit(resistance, unit)">{{unit.symbol}}&Omega;</a></li>
              </ul>
            </div>
          </div>
        </div>
        <div class="form-group" ng-class="{'has-error': ohm.power.$invalid && ohm.power.$dirty}">
          <label for="power" class="col-sm-2 control-label">Power</label>
          <div class="input-group">
            <span class="input-group-addon">
              <input type="checkbox" ng-model="power.enable" ng-disabled="enough(power.enable)">
            </span>
            <input name="power" type="text" class="form-control text-right" ng-pattern="positiveNumeric" ng-model="power.value" ng-disabled="!power.enable" ng-change="calculate()">
            <div class="input-group-btn">
              <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="text">{{power.prefix}}W</span> <span class="caret"></span></button>
              <ul class="dropdown-menu pull-right">
                <li ng-repeat="unit in units"><a href="#" ng-click="setUnit(power, unit)">{{unit.symbol}}W</a></li>
              </ul>
            </div>
          </div>
        </div>
      </form>
      <input type="button" ng-click="reset()" value="Reset" class="btn btn-lg"/> 
    </div> <!-- /container -->

    <div id="footer">
      <hr/>
      <div class="container">
        <p class="text-muted">&copy; Roberto Lo Giacco</p>
      </div>
    </div>
  </body>

</html>
function OhmController($scope) {
    
    $scope.numeric = /^\-?\d*(?:\.\d+)?$/;
    $scope.positiveNumeric = /^\d*(?:\.\d+)?$/;

    $scope.calculate = function() {
      $scope.errorMessage = null;
      if ($scope.current.enable && $scope.voltage.enable) {
        // R = V / I
        $scope.resistance.value = $scope.voltage.value / $scope.current.value * Math.pow(10, $scope.voltage.power - $scope.current.power - $scope.resistance.power);
        // P = I * V
       $scope.power.value = $scope.current.value * $scope.voltage.value * Math.pow(10, $scope.current.power + $scope.voltage.power - $scope.power.power);
      } else if ($scope.current.enable && $scope.resistance.enable) {
        // V = I * R
        $scope.voltage.value = $scope.current.value * $scope.resistance.value * Math.pow(10, $scope.current.power + $scope.resistance.power - $scope.voltage.power);
        // P = I^2 * R
        $scope.power.value = Math.pow($scope.current.value, 2) * $scope.resistance.value * Math.pow(10, ($scope.current.power * 2) + $scope.resistance.power - $scope.power.power);
      } else if ($scope.power.enable && $scope.voltage.enable) {
        // I = P / V
        $scope.current.value = $scope.power.value / $scope.voltage.value * Math.pow(10, $scope.power.power - $scope.voltage.power - $scope.current.power);
        // R = V / I
        $scope.resistance.value = $scope.voltage.value / $scope.current.value * Math.pow(10, $scope.voltage.power - $scope.current.power - $scope.resistance.power);
      } else if ($scope.power.enable && $scope.resistance.enable) {
        // V = I * R
        $scope.voltage.value = $scope.current.value * $scope.resistance.value * Math.pow(10, $scope.current.power + $scope.resistance.power - $scope.voltage.power);
        // I = (P / R)^1/2
        $scope.current.value = Math.sqrt($scope.power.value / $scope.resistance.value) * Math.pow(10, $scope.power.power - $scope.resistance.power - ($scope.current.power * 2));
      } else if ($scope.voltage.enable && $scope.resistance.enable) {
        // I = V / R
        $scope.current.value = $scope.voltage.value / $scope.resistance.value * Math.pow(10, $scope.voltage.power - $scope.resistance.power - $scope.current.power);
        // P = V^2 / R
        $scope.power.value = Math.pow($scope.voltage.value, 2) / $scope.resistance.value * Math.pow(10, ($scope.voltage.power * 2) - $scope.resistance.power - $scope.power.power);
      } else if ($scope.current.enable && $scope.power.enable) {
        // V = P / I
        $scope.voltage.value = $scope.power.value / $scope.current.value * Math.pow(10, $scope.power.power - $scope.current.power - $scope.voltage.power);
        // R =  P / I^2
        $scope.resistance.value = $scope.power.value / Math.pow($scope.current.value, 2) * Math.pow(10, $scope.power.power - ($scope.current.power * 2) - $scope.resistance.power);
      } else {
        $scope.errorMessage = "Cannot calculate!"
      }
    };

    $scope.setUnit = function(factor, unit) {
      factor.power = unit.power;
      factor.prefix = unit.symbol;
      $scope.calculate();
    };

    $scope.enough = function(enable) {
        return !enable && ($scope.voltage.enable ? 1 : 0) + ($scope.current.enable ? 1 : 0) + ($scope.resistance.enable ? 1 : 0) + ($scope.power.enable ? 1 : 0) >= 2;
    }

    $scope.reset = function() {
        $scope.voltage      = { power: 0, prefix: "", value: "" };
        $scope.current      = { power: 0, prefix: "", value: "" };
        $scope.resistance   = { power: 0, prefix: "", value: "" };
        $scope.power        = { power: 0, prefix: "", value: "" };
        $scope.errorMessage = null;
    };

    $scope.reset();

    $scope.units = [
      /*{ name: "yotta", symbol: 'Y', power:  24 },
      { name: "zetta", symbol: 'Z', power:  21 },
      { name: "exa",   symbol: 'E', power:  18 },
      { name: "peta",  symbol: 'P', power:  15 },
      { name: "tera",  symbol: 'T', power:  12 },
      { name: "giga",  symbol: 'G', power:   9 },*/
      { name: "mega",  symbol: 'M', power:   6 },
      { name: "kilo",  symbol: 'k', power:   3 },
      { name: "",      symbol: ' ', power:   0 },
      { name: "milli", symbol: 'm', power:  -3 },
      { name: "micro", symbol: 'ยต', power:  -6 },
      { name: "nano",  symbol: 'n', power:  -9 },
      { name: "pico",  symbol: 'P', power: -12 },
      /*{ name: "femto", symbol: 'f', power: -15 },
      { name: "atto",  symbol: 'a', power: -18 },
      { name: "zepto", symbol: 'z', power: -21 },
      { name: "yocto", symbol: 'y', power: -24 }*/
    ]
}
body {
  font-family: 'Open Sans', serif;

  padding-top: 70px;
  padding-bottom: 30px;
}

.navbar {
  font-family: 'Open Sans', sans-serif;
}

.navbar-brand {
  font-family: 'Open Sans Condensed', sans-serif;
}

.navbar-nav {
  font-weight: 700;
}

.jumbotron {
  margin-top: -50px;
  font-family: 'Open Sans Condensed', sans-serif;
}

.theme-dropdown .dropdown-menu {
  position: static;
  display: block;
  margin-bottom: 20px;
}

.theme-showcase > p > .btn {
  margin: 5px 0;
}