$(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").toggleClass("none");
    $(".add_user_btn").toggleClass("none");
  });

  // ユーザーリストオーバーレイ表示
  $(".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");

    // 他のボタンを非表示
//    $(".add_user_btn").toggleClass("none");
    $(".menu_btn").toggleClass("none");

    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');
    }
  })

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

  $('#micBtn').click(function () {
    $('#coviewMicCtrBtn').click();
    if ($('#micBtn').hasClass('bg_red')) {
        $('#micBtn').removeClass('bg_red');
        $('#micBtn').addClass('bg_blue');
    } else {
        $('#micBtn').removeClass('bg_blue');
        $('#micBtn').addClass('bg_red');
    }
  })

  $('#captureBtn').click(function () {
    $('#coviewCaptureCtrBtn').click();
    })

    $('#recordBtn').click(function () {
        $('#coviewRecCtrBtn').click();
        if ($('#recordBtn').hasClass('bg_gray')) {
            $('#recordBtn').removeClass('bg_gray');
            $('#recordBtn').addClass('bg_red');
        } else {
            $('#recordBtn').addClass('bg_gray');
            $('#recordBtn').removeClass('bg_red');
        }
      })
});
