html {
  background: url('https://i.stack.imgur.com/jGlzr.png') no-repeat 0 0 scroll;
  background-color: #ffffff;
  background-size: 100% 100%;
  height: 100%;
  width: 100%;
}

.calculator:before {
  background-color: salmon;
  width: 480px;
  height: 420px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -140px;
  /* (width + padding)/2 */
  
  margin-top: -210px;
  /* (height + padding)/2 */
  border-radius: 20px;
  z-index: -2;
}

.calculator {
background: #666666; url('http://api.thumbr.it/whitenoise-361x370.png?background=2d2a2eff&noise=8b7894&density=17&opacity=24');
  width: 260px;
  height: 450px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -130px;
  /* (width + padding)/2 */
  
  margin-top: -225px;
  /* (height + padding)/2 */
  border-radius: 20px;
  box-shadow: 0 8px 0 10px rgba(255,255,255,1);
}

.display {
  position: relative;
  width: 220px;
  height: 90px;
  margin-top: 100px;
}

.display:after {
  padding: 18px;
  background-color: #000000;
  font-family: 'Orbitron', sans-serif;
  font-size: 18px;
  color: #07BF6F;
  content: attr(data-before);
  text-align: right;
  text-shadow: 0 0 20px rgba(255,255,255,1) ;
  position: absolute;
  border-radius: 5px;
  box-shadow: 2px -3px 8px -2px rgba(173,168,173,1);
  top: 0; bottom: 0; left: 10%; right: -10%;
  z-index: 2;
  transform: perspective(50em) rotateX(20deg);
  line-height: 80px;
}

.display:before {
  padding: 10px 0 0 20px;
  background-color: silver;
  font-size: 12px;
  line-height: 12px;
  color: black;
  content: "PERSONAL M1";
  position: absolute;
  border-radius: 0;
  top: 0; bottom: 70%; left: 11%; right: -9%;
  z-index: 3;
  transform: perspective(50em) rotateX(20deg);
}

.row {
  overflow: hidden;
  margin: 0 10px 0px 18px;
}

.numbutton:focus {
  outline: none;
}

.numbutton {
  float: left;
  border: 1px solid;
  border-radius: 10px;
  margin: 10px;
  width: 35px;
  height: 29px;
  box-shadow: 1px 1px 5px -1px rgba(0, 0, 0, 1),
    inset 1px 1px 12px 1px white;
  background-color: #CBCCC7;
  font-family: 'Michroma', sans-serif;
  font-size: 18px;
  line-height: 18px;
}

.toprow{
  border: 0 solid;
  background-color: #000000;
  border-radius: 4px;
  color: #CBCCC7;
  font-family: 'Michroma', sans-serif;
  font-size: 12px;
  line-height: 18px; 
  width: 38px;
  margin: 12px 2px;
}

.ac {
  border: 0 solid;
  background-color: #DC3717;
}

var Calculator = (function() {
  var MAX_CHARS = 12;
  var data = {
    a: undefined,
    b: undefined
  }
  var op;
  var digitChain = "";
  var memory = "";

  //accumulates digits on display
  var insertDigit = function(digit, callback){
    if (digitChain.length <= MAX_CHARS) {
      digitChain += digit;
      callback(digitChain);
    } else {
      console.log("exceeds display length, ignoring");
    }
  }

  // inserts number in right slot (a or b)
  var insertNumber = function(){
    if (data.a && typeof op !== 'undefined'){
      data.b = digitChain;
    } else if (digitChain !== "") {
      data.a = digitChain;
    }
  };
  
  var enoughData = function(){
    return (typeof data.a !== 'undefined' 
            && typeof data.b !== 'undefined' 
            && typeof op !== 'undefined');
  };
  
  var insertOp = function(currentOp, callback){
    insertNumber();
    digitChain = "";
    if (typeof op === 'undefined'){
      op = currentOp;
    } else if (enoughData()) {
      compute(currentOp, callback);   
    }
  };
  
  var compute = function(nextOp, callback){
    var chain = data.a + op + data.b;
    var res = eval(chain);
    if (typeof nextOp === 'undefined'){
      memory = res;
    }
    op = nextOp;
    data.a = res;
    data.b = undefined;
    callback(res);
  };
  
  var equals = function(callback){
    // done inserting digits
    insertNumber();
    digitChain = "";
    if (enoughData()) {
      compute(undefined,callback);
    } 
  };
  
  var allClear = function(callback){
    data = {
      a: undefined,
      b: undefined
    };
    op = undefined;  
    digitChain = "";  
    callback("0");
  };
  
  var memoryRecall = function(callback){
    digitChain = memory;
    insertNumber();
  };
  
  var percentage = function(callback){
    if (data.a) {
      digitChain = (digitChain * data.a)/100; 
    } else {
      digitChain = digitChain/100;
    }
    callback(digitChain);
  };
  
  var square = function(callback){
    digitChain = Math.pow(digitChain, 0.5);
    callback(digitChain);    
  };
  
  return {
    insertDigit: insertDigit,
    insertOp: insertOp,
    equals: equals,
    allClear: allClear,
    memoryRecall: memoryRecall,
    percentage: percentage,
    square: square
  };
})();

var showMe = function(c) {
  console.log(c);
};

$(function() {
    $(".display").attr('data-before','0');
});

var display = function(value) {
  $(".display").attr('data-before',value);
}

$( ".numbutton" ).click(function() {
  if ($(this).is('.operation')){
    switch ($(this).text()) {
      case "+":
        Calculator.insertOp("+", display);
        break;
      case '-':
        Calculator.insertOp("-", display);
        break;
      case 'x':
        Calculator.insertOp("*", display);
        break;
      case "=":
        Calculator.equals(display);
        break;
    }
    console.log("operation key pressed");
  }
  else {
 Calculator.insertDigit($(this).text(), display);
  }
});

$(".toprow").click(function(){
  switch ($(this).text()) {
    case "AC":
      Calculator.allClear(display);
      break;
    case "C":
      Calculator.clear(display);
      break;
    case "MR":
      Calculator.memoryRecall(display);
      break;
  }
});