//모든 페이지에서 쓰이는 자바스크립트
if (WildRydes.getCurrentUserName() == undefined) {
  document.getElementById("signIn").style.display = "inline";
  document.getElementById("signIn2").style.display = "inline";
  //document.getElementById("orderLog").style.display = "none";
} else {
  document.getElementById("signOut").style.display = "inline";
  document.getElementById("signOut2").style.display = "inline";
}

function wrapWindowByMask() {
  //화면의 높이와 너비를 구한다.
  var maskHeight = $(document).height();
  var maskWidth = $(window).width();

  //마스크의 높이와 너비를 화면 것으로 만들어 전체 화면을 채운다.
  $('#mask').css({
    'width': maskWidth,
    'height': maskHeight
  });

  //애니메이션 효과
  $('#mask').fadeIn("slow");
}
$(function () {
  $("#signIn,#signIn2").click(function () {
    $('.modal').fadeIn("slow");
    $('.modal-content').css({
      'margin-left': function () { //Horizontal centering
        return -($(this).width() / 2);
      }
    });
    wrapWindowByMask();
  });
  $("#modalDismiss").click(function () {
    $('div.modal').fadeOut("slow");
    $('#mask').fadeOut("slow");
  });
  //검은 막을 눌렀을 때
  $('#mask').click(function () {
    $(this).fadeOut("slow");
    $('div.modal').fadeOut("slow");
  });
  $('#mask').one('touchstart', function () {
    $(this).unbind('click');
  });
});

function modalTabs(evt, tabName) {
  var i, x, tablinks;
  x = document.getElementsByClassName("tab-pane");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < x.length; i++) {
    tablinks[i].classList.remove("w3-light-grey");
    if (tabName == "signInTab") {
      tablinks[0].style.backgroundColor = "black";
      tablinks[0].style.color = "white";
      tablinks[1].style.backgroundColor = "white";
      tablinks[1].style.color = "black";
      document.getElementsByClassName('tab-content')[0].style.height = "144px";
    } else {
      tablinks[1].style.backgroundColor = "black";
      tablinks[1].style.color = "white";
      tablinks[0].style.backgroundColor = "white";
      tablinks[0].style.color = "black";
      document.getElementsByClassName('tab-content')[0].style.height = "236px";
    }
  }
  document.getElementById(tabName).style.display = "block";
  evt.currentTarget.classList.add("w3-light-grey");
}
if(document.getElementsByClassName("list-menu")[0] != undefined){
  document.getElementsByClassName("list-menu")[0].addEventListener("click", showMenu);
}
function showMenu() {
  if (document.getElementsByClassName('menu-list').length != 0)
    document.getElementsByClassName("menu-list")[0].className = "menu-list-on";
  else if (document.getElementsByClassName('menu-list-on').length != 0)
    document.getElementsByClassName("menu-list-on")[0].className = "menu-list-off";
  else
    document.getElementsByClassName("menu-list-off")[0].className = "menu-list-on";
}
if(document.getElementsByClassName("topColor-list-menu")[0] != undefined){
  document.getElementsByClassName("topColor-list-menu")[0].addEventListener("click", showTopColor);
}
function showTopColor() {
  if (document.getElementsByClassName('topColor-list').length != 0)
    document.getElementsByClassName("topColor-list")[0].className = "topColor-list-on";
  else if (document.getElementsByClassName('topColor-list-on').length != 0)
    document.getElementsByClassName("topColor-list-on")[0].className = "topColor-list-off";
  else
    document.getElementsByClassName("topColor-list-off")[0].className = "topColor-list-on";
}
if(document.getElementsByClassName("edgeColor-list-menu")[0] != undefined){
  document.getElementsByClassName("edgeColor-list-menu")[0].addEventListener("click", showEdgeColor);
}
function showEdgeColor() {
  if (document.getElementsByClassName('edgeColor-list').length != 0)
    document.getElementsByClassName("edgeColor-list")[0].className = "edgeColor-list-on";
  else if (document.getElementsByClassName('edgeColor-list-on').length != 0)
    document.getElementsByClassName("edgeColor-list-on")[0].className = "edgeColor-list-off";
  else
    document.getElementsByClassName("edgeColor-list-off")[0].className = "edgeColor-list-on";
}

var scroll_position = 0;
var headerHeight = document.getElementsByClassName('list-header')[0].offsetHeight;
if(document.getElementsByClassName('control-and-view-container').length){
  var containerHeight = document.getElementsByClassName('control-and-view-container')[0].offsetHeight;
  var threeHeight = document.getElementsByClassName('three_container')[0].offsetHeight;
  var priceHeight = document.getElementsByClassName('price-cart-section')[0].offsetHeight;
}

let threeContainer = document.getElementsByClassName('three_container')[0];

if(threeContainer != undefined){
  window.addEventListener('scroll', function (e) {

    scroll_position = window.scrollY;
    //모바일에서 작동
    if (window.innerWidth < 1024) {
      //스크롤이 헤더보다 작은 경우
      if (scroll_position < headerHeight) {
        threeContainer.style.position = "absolute";
      }
      //스크롤이 헤더보다는 크고 헤더+컨테이너보다는 작은 경우
      else if (scroll_position < (headerHeight + containerHeight - threeHeight - priceHeight) && scroll_position > headerHeight) {
        threeContainer.style.position = "fixed";
        threeContainer.style.top = "0px";
      }
      //스크롤이 헤더+컨테이너보다 큰 경우
      else if (scroll_position > headerHeight + containerHeight - threeHeight - priceHeight){
        threeContainer.style.position = "absolute";
        threeContainer.style.top = (containerHeight - threeHeight - priceHeight).toString() + "px";
      }
    }else{
      threeContainer.style.position = "relative";
      threeContainer.style.top = "0px";
    }
  });
  if (window.innerWidth >= 1024) {
    threeContainer.style.height = containerHeight + "px";
  }
}

// 윈도우가 리사이즈 될 경우 돌아가야할 함수들
window.onresize = function(event) {
  scroll_position = 0;
  headerHeight = document.getElementsByClassName('list-header')[0].offsetHeight;
  if(document.getElementsByClassName('control-and-view-container').length){
    containerHeight = document.getElementsByClassName('control-and-view-container')[0].offsetHeight;
    threeHeight = document.getElementsByClassName('three_container')[0].offsetHeight;
    priceHeight = document.getElementsByClassName('price-cart-section')[0].offsetHeight;
    if (window.innerWidth < 1024) {
      threeContainer.style.position = "absolute";
      threeContainer.style.height = "calc(50vh - 44px)";
    }else{
      threeContainer.style.position = "relative";
      threeContainer.style.height = containerHeight + "px";
    }
  }
  onWindowResize();
};
// 창 최적화가 필요함
onWindowResize();