SmartFaucet_script

script.js

$(document).ready(function() {

  //html
  var body = '\
   <div id="panel-menu">\
    <input type="button" id="menu-button" value="욕조">\
    <h1><span id="title">스마트 수도꼭지 프로젝트</span></h1>\
   </div>\
   <div id="panel-page">\
    <div id="bath-section">\
      <span id="depth">욕조 깊이</span>\
      <input type="button" id="degree" value="22cm" >\
    </div>\
    <div id="control-section">\
      <h2>물높이</h2>\
      <div id="panel-height">\
        <form>\
         <input type="button" id="height" name="btn" class="height" value="height4" onclick="changeColor(this);">\
         <input type="button" id="height" name="btn" class="height" value="height3" onclick="changeColor(this);">\
         <input type="button" id="height" name="btn" class="height" value="height2" onclick="changeColor(this);">\
         <input type="button" id="height" name="btn" class="height-bottom" value="height1" onclick="changeColor(this);">\
        </form>\
      </div>\
      <div id="panel-bar">\
        <input type="button" id="bar1" name="btn" >\
        <input type="button" id="bar2" name="btn" value="0%">\
      </div>\
      <div id="panel-caption">\
       <span id="caption1">원하는 만큼 클릭해주세요!</span>\
       <span id="caption2">현재 높이</span>\
      </div>\
    </div>\
    <div id="control-section">\
      <h2>온도</h2>\
      <div id="panel-temp">\
        <span id="caption3">4단계로 물 온도를 조절할 수 있어요!</span>\
        <img id="color" src="http://cfile27.uf.tistory.com/image/262F9B3754136FFF178F3E">\
        <form>\
          <input type="button" id="cold" name="btn2" value="cold2" onclick="toggleColor(this);">\
          <input type="button" id="cold" name="btn2" value="cold1" onclick="toggleColor(this);">\
          <input type="button" id="hot" name="btn2" value="hot1" onclick="toggleColor(this);">\
          <input type="button" id="hot" name="btn2" value="hot2" onclick="toggleColor(this);">\
        </form>\
      </div>\
    </div>\
    <div id="button-section">\
      <input type="button" id="start" class="start" value="물받기 시작" onclick="start(this);">\
    </div>\
   </div>\
   '

  $('body').append(body);
  
  
  //processing
  /*
  //  깊이  (값) 
  //  높이  4 / 3 / 2 / 1
  //  온도  cold2 / cold1 / hot1 / hot2	
	//  시작  물받기 시작 / 물받는 중
  //  바    
  */
  
  $(document).on('click', ':button', function(e){
    var query = $(this).attr('value');
  
    var request = new XMLHttpRequest();
    request.onreadystatechange = function() {}
    
    request.open("GET", query, true);
    request.send(null);
/*
    $ajax({
      type:"GET",
      url:"?"+query
    }).done(function(data){
    });  
*/
  });
  
  
});

//functions
var flag = 0;

function changeColor(button) {
  var buttons = button.form.btn;
  var index;
  
  button.style.opacity="0.3";
  button.style.backgroundColor="blue";
  
  for(var i=0, len=buttons.length; i<len; i++) {
    if(button.style.backgroundColor==="blue") index=i;
    buttons[i].style.backgroundColor="#ededed";
    buttons[i].style.opacity="0.5";
  }
  for(i=3; i>index-1; i--) {
    buttons[i].style.backgroundColor="blue";
    buttons[i].style.opacity="0.3";
  }
}	
function toggleColor(button) {
  var buttons = button.form.btn2;
  
  for(var i=0, len=buttons.length; i<len; i++) {
    if(button.style.backgroundColor==="blue") index=i;
    buttons[i].style.backgroundColor="#ededed";
  }
  
  if(button.id==="cold") {
    button.style.backgroundColor="blue";
    button.style.opacity="0.5";
  }
  else {
    button.style.backgroundColor="red";
    button.style.opacity="0.5";
  }
}	
function start(button) {
  
  
  if(flag===1){
  button.style.backgroundColor="white";
  button.style.opacity="1";
  button.style.color="black";
  button.value="start";
  flag = 0;
  }
  
  else{
  button.style.backgroundColor="blue";
  button.style.opacity="0.5";
  button.style.color="white";
  button.value="stop";
  flag = 1;
  }
  
}