function recordStart() {
  MainManRecord('on');
  $('#recordBtn').removeClass('bg_gray');
  $('#recordBtn').addClass('bg_red');
}

function recordStop(callback) {
  // アーカイブ保存中は画面操作不可(協業終了,協業切り替え防止)
  screenLock();

  // アーカイブ保存処理
  MainManRecordWithCollaboration('stop', CMS_SERVER_URL + '/chatapi/file/uploadArchive', callback);
}

function MainManRecordWithCollaboration(action, url, callback) {
  mediaRecorder.stop();
  console.log('Recorded Blobs: ', recordedBlobs);

  setTimeout(function() {
    console.log("Recoding File upload..");
    const blob = new Blob(recordedBlobs, {type: 'video/webm'});
    console.log(blob)
    var uploadFileName = "record_" + g_webroom + "_" + g_shareCount + ".webm";
    g_shareCount++;
    var formData = new FormData();
    formData.append("fileData",blob,uploadFileName);
    formData.append('sid', globalUserInfo.sid);
    formData.append('roomId',  globalUserInfo.roomId);
    if (joinCollaborationType == COLLABORATION_TYPE.VIDEO) {
      formData.append('archiveType', 1);
    } else {
      formData.append('archiveType', 2);
    }
    console.log(uploadFileName)
    $.ajax({
        type :'post',
        url,
        data : formData,
        contentType: false,
        processData: false,
        success : function(res) {
          recordFinished();
          callback();
          console.log(res)
        }
        ,error : function(err){
          recordFinished();
          callback();
          console.log(err);
        }
    });
  }, 1000);
}

function screenLock(){
  // ロック用のdivを生成
  var element = document.createElement('div'); 
  element.id = "screenLock"; 

  // ロック用のスタイル
  element.style.height = '100%'; 
  element.style.left = '0px'; 
  element.style.position = 'fixed';
  element.style.top = '0px';
  element.style.width = '100%';
  element.style.zIndex = '9999';
  element.style.opacity = '0';

  var objBody = document.getElementsByTagName("body").item(0); 
  objBody.appendChild(element);
}

// div削除関数
function delete_dom_obj(id_name) {
  var dom_obj = document.getElementById(id_name);
  var dom_obj_parent = dom_obj.parentNode;
  dom_obj_parent.removeChild(dom_obj);
}

function recordFinished() {
  $('#recordBtn').addClass('bg_gray');
  $('#recordBtn').removeClass('bg_red');
  // ロック画面の削除
  delete_dom_obj('screenLock');
}

$(function () {
  // メニューオーバーレイ表示
  $(".menu_btn").click(function () {
    var w = $(this).width();

    $(this).toggleClass("hide");
    $("#overlay_menu.overlay")
      .toggleClass("slidein")
      .css({ transform: "translateX(" & -w & ")" });
    $("#collabo_main").toggleClass("noscroll");

  });

  // ユーザーリストオーバーレイ表示
  $(".user_btn").click(function () {
    var w = $(this).width();

    $(this).toggleClass("hide");
    $("#overlay_user_list.overlay")
      .toggleClass("slidein")
      .css({ transform: "translateX(" & -w & ")" });
    $("#collabo_main").toggleClass("noscroll");


    if ($("#overlay_user_list.overlay").hasClass("noscroll")) {
      $("#overlay_user_list.overlay").removeClass("noscroll");
    } else {
      $("#overlay_user_list.overlay").addClass("noscroll");
    }
  });

  // フッターメニュー　アコーディオン
  $(".footer_menu_btn").click(function () {
    var h_active = $("#collabo_footer").height();
    var h_hide = h_active - $("#collabo_footer_menu").height();
    
    // 非アクティブ時
    if ($(this).hasClass("hide")) {
      $(this).removeClass("hide");
      $("#collabo_footer_menu").css({ bottom: h_active });
      // アクティブ時
    } else {
      $(this).addClass("hide");
      $("#collabo_footer_menu").css({ bottom: h_hide });
    }
  });

  // モーダルonモーダル（前のモーダルを非表示に）
  // ホスト変更ボタン押下イベント
  $(".ch_host_btn").click(function () {
    var target = $(this).val();
    changeModal(target, "changeHostModal");
  });

  /* モーダルの切り替え */
  function changeModal(beforeModal, afterModal) {
    $(beforeModal).modal("hide");
    $(afterModal).modal("show");
  }

  // 閉じるイベント
  $(".close_btn").click(function () {
    $("#overlay_add_user_list").addClass("none");
  });

  // ユーザー追加イベント
  $(".inv_btn").click(function () {
    $("#overlay_add_user_list").addClass("none");
  });

  // ユーザー招待メンバー検索
  $(".add_user_btn").click(function () {
      CHAT_UI.showLoadingIndicator();
      CHAT.globalSelectedUserList = [];
      CHAT_UI.refreshMyGroupForAddUserInCollaboration();
      $('#addUserConfirmBtnInCollaboration').off().on('click', function() {
          $('#addUserInCollaboration').modal('hide');
          if (typeof(android) != "undefined") {
              android.saveSelectedUserList(CHAT.globalSelectedUserList.join(","));
          } else {
              webkit.messageHandlers.saveSelectedUserList.postMessage(CHAT.globalSelectedUserList.join(","));
          }
          CHAT_UI.confirmInviteUserListInCollaboration();
      });
  });

  $('#penBtn').click(function () {
    $('#coviewPenCtrBtn').click();
    if ($('#penBtn').hasClass('bg_red')) {
        $('#penBtn').removeClass('bg_red');
        $('#penBtn').addClass('bg_blue');
    } else {
        $('#penBtn').addClass('bg_red');
        $('#penBtn').removeClass('bg_blue');
    }
  })
  
  $('#photo_open_place_holder').click(function () {
      $("#open_file_upload").trigger("click");
  })

  $('#eraserBtn').click(function () {
    $('#coviewEraserCtrBtn').click();
  })

  $('#micBtn').click(function () {
    $('#coviewMicCtrBtn').click();
    if ($('#micBtn').hasClass('bg_red')) {
        micOn();
    } else {
        micOff();
    }
  })

  $('#captureBtn').click(function () {
    if ($('#recordBtn').hasClass('bg_red')) {
      screenLock();
      recordStop(function() {
        $('#screenLock').remove();
        coview_api.Capture(CMS_SERVER_URL + '/chatapi/file/uploadArchive');
      });
    } else {
      coview_api.Capture(CMS_SERVER_URL + '/chatapi/file/uploadArchive');
    }
  })

  $('#captureRequestBtn').click(function () {
    fw.sendToMsg('others', 'CAPTURE_REQUEST', {"name": CHAT.globalLoginParameter.loginId});
  })

  $('#recordBtn').click(function () {
    if ($('#recordBtn').hasClass('bg_gray')) {
      recordStart();
    } else {
      recordStop(null);
    }
  })
});

function penOff() {
  if ($('#penBtn').hasClass('bg_blue')) {
    $('#coviewPenCtrBtn').click();
    $('#penBtn').addClass('bg_red');
    $('#penBtn').removeClass('bg_blue');
  }
};

function micOn() {
  coview_api.MicMuteControl('off');
  $('#micBtn').addClass('bg_blue');
  $('#micBtn').removeClass('bg_red');
};

function micOff() {
  coview_api.MicMuteControl('on');
  $('#micBtn').removeClass('bg_blue');
  $('#micBtn').addClass('bg_red');
};
