//jQuery time
var current_fs, next_fs, previous_fs; //fieldsets
var left, opacity, scale; //fieldset properties which we will animate
var animating; //flag to prevent quick multi-click glitasdaches

$(".gen_avatar").click(function(){
  imsrc = $('.img_src').val();
  srcObj = {'imgurl':imsrc}
  srcObjstr = JSON.stringify(srcObj);
  alert('生成中，請稍候 按下確認開始生成')
  $.ajax({
    url: 'http://www.choozmo.com:8888/swapFace',
    //url: 'http://www.choozmo.com:8888/qqreq',
    dataType : 'json', // 預期從server接收的資料型態
    contentType : 'application/json; charset=utf-8', // 要送到server的資料型態
    type: 'post',
    data: srcObjstr,
    success: function(suc_data) {
      alert(suc_data.msg)
      },
    //data:JSON.stringify({n1:"12",n2:"22"}),
    error: function (error) {
      alert(error)
    }
  });
});

$(".next").click(function(){
  avatar = $('.avatar').val();
  name_title = $('.title_new').val();
  txtARR=[];
  imgARR=[];
  var step;
	for (step = 1; step <= 10; step++) {
	  if($(".txtsrc"+step).val()!=""){
		  txtARR.push($(".txtsrc"+step).val())
	  }
	}
	var step2;
	for (step2 = 1; step2 <= 10; step2++) {
	  if($(".imgsrc"+step2).val()!=""){
		  imgARR.push($(".imgsrc"+step2).val())
	  }
	}	
	dataOBJ = {"name":name_title,"text_content":txtARR,"image_urls":imgARR,"avatar":avatar}
	objstr = JSON.stringify(dataOBJ);
	console.log(dataOBJ)

  $.ajax({
	url: 'http://www.choozmo.com:8888/make_anchor_video_v2',
	//url: 'http://www.choozmo.com:8888/qqreq',
	dataType : 'json', // 預期從server接收的資料型態
  contentType : 'application/json; charset=utf-8', // 要送到server的資料型態
	type: 'post',
	data: objstr,
	success: function(suc_data) {
    alert(suc_data.msg)
	  },
	//data:JSON.stringify({n1:"12",n2:"22"}),
	error: function (error) {
	  alert(error)
	}
});

});



var loaded_data = ''
function openNav() {
	document.getElementById("mySidenav").style.width = "250px";
  
    $.get("http://www.choozmo.com:8888/history_input", function(data, status){
        console.log(data)
        loaded_data = data
        for (var obj of data) {
            var sideBAR = document.getElementById('mySidenav')
            var message = document.createElement('a')
            var content = document.createTextNode(obj.name)
            message.id = obj.id
            message.setAttribute('href', "#")
            message.setAttribute('onclick', "load_data()")
            message.appendChild(content)
            sideBAR.appendChild(message)
        }
            
        });
}
    
    function closeNav() {
      document.getElementById("mySidenav").style.width = "0";
    }
    function load_data(){
      var title = document.getElementById("title")
      tid = event.srcElement.id
      console.log(tid);
      $(".title_new").val(loaded_data.find(item => item.id == tid).name)
      var step;
      for (step = 1; step <= 10; step++) {
        $(".txtsrc"+step).val(loaded_data.find(item => item.id == tid).text_content[step-1]) 
      }
      var step2;
      for (step2 = 1; step2 <= 10; step2++) {
        $(".imgsrc"+step2).val(loaded_data.find(item => item.id == tid).image_urls[step2-1]) 
      }
      
    }

	var ws = new WebSocket('ws://www.choozmo.com:8888/progress');
          ws.onmessage = function(event) {
              console.log(event.data);
              var elem = document.getElementById("myBar");
              elem.style.width = event.data + "%";
              elem.innerHTML = event.data  + "%";
          };
          function sendMessage(event) {
              var input = document.getElementById("messageText")
              ws.send(input.value)
              input.value = ''
              event.preventDefault()
          }