$("*").each(function (index, element) {
  // 此元素被點選後執行
  $(this).click(function (e) {
    // 取得被點選元素的屬性：data-gt-target
    var target = $(this).attr("data-gt-target");
    var duration = $(this).attr("data-gt-duration");
    var offset = $(this).attr("data-gt-offset");

    // JS 語法：判斷式
    // if (條件) {程式區塊}
    // 當條件成立，會執行程式區塊

    // 如果 目標有資料 才會執行 { } 內的程式
    // 避免出現 undefine (未定義 - 不存在的資料)
    if (target) {
      //console.log("目標：" + target);
      //console.log("時間：" + duration);
      //console.log("位移：" + offset);

      // 上方位置 = 目標區塊.位移().上方位置
      var top = $(target).offset().top;
      //console.log("要前往元素的上方位置：" + top);

      // 網頁元素.停止().動畫({ 上方捲動：指定元素 - 位移}，持續時間)
      // parseInt() 將文字轉為數字

      $("html").stop().animate({
        scrollTop: top - offset
      }, parseInt(duration));
    }
  });
});

// 避免動畫與使用者滾輪衝突
// html 在滾動滾輪時 停止 html 所有效果
$("html").on("mousewheel", function () {
  $("html").stop();
});

// gotop下滑效果
$(".arrow").hide();
$(window).scroll(function () {
  var y = window.scrollY;

  if (y > 500) {
    $(".arrow").show();
  } else {
    $(".arrow").hide();
  }

});
console.log(28);
//  $('.nav-item2').click(function(){
// $(this).toggleClass('after-nav')
//  })


// function funcTest2() {
//   $.ajax({
//     method: "GET",
//     url: "designer4.json",
//     dataType: "json",
//   })

//     .done(function (msg) {
//       var desBanner = '';
//       var MobBanner = '';
//       var bodyBannerDes = '';
//       console.log(msg);
//       var res = msg.length;
//       console.log(res);
//       const limit = res;
//       var arrIndex = Math.floor(Math.random() * msg.length);
//       console.log(arrIndex);
//       console.log(msg[arrIndex].Designerimg);

//       desBanner += ' \
//               <div class="banner-des row vertical align-items-end px-0 mx-0">\
//                 <div class="banner-0 col-0 order-1 col-lg-5 order-1 pe-0">\
//                 <img class="img-fluid" src="./img/banner/bannertitle.png" alt="">\
//                 </div>\
//                 <div class="banner-1 col-5 order-3 col-lg-5 order-2 text-white text-end py-3">\
//                   <a style="text-decoration: none;color:#fff;" href="./about/index.html?id='+ msg[arrIndex].id + '"><div class="banner1-1" style="font-weight: 900;">' + msg[arrIndex].WorkName + '</div>\
//                     <p><span class="fs-5">'+ msg[arrIndex].DesignerName + '</span>設計師</p>\
//                   </a>\
//                   <button type="button" class="btn border border-white"><a target="_blank" href="tel: '+ msg[arrIndex].TollFreeCall + '"><img class="" src="img/002-phone-call.svg" alt=""></a>\</button>\
//               <button type="button" class="btn border border-white" data-bs-toggle="modal" data-bs-target="#exampleModal"><img class="" src="img/001-blogging.svg" alt=""></button>\
//                 </div>\
//                 <div class="banner-2 col-7 order-2 col-lg-2 order-3 px-0 mx-0">\
//                 <a class="desbutton" data-info="'+ msg[arrIndex].id + '" href="./about/index.html?id='+ msg[arrIndex].id + '"><img class="img-fluid" src="' + msg[arrIndex].Designerimg + '" alt=""></a>\
//                 </div>\
//             </div>';

//       MobBanner += ' \
//               <div class="banner-m row vertical align-items-end px-0 mx-0">\
//               <div class="bannerm-0 col-12 my-5 px-0">\
//               <img class="img-fluid" src="./img/banner/banner-mobile.png" alt="">\
//               </div>\
//               <div class="bannerm-2 col-7 order-2 col-lg-2 order-3 px-0 mx-0">\
//               <a href="./about/index.html?id='+ msg[arrIndex].id + '"><img class="img-fluid" src="' + msg[arrIndex].Designerimg + '" alt=""></a>\
//               </div>\
//               <div class="bannerm-1 col-5 order-3 col-lg-5 order-2 text-white text-start pb-3">\
//               <a style="text-decoration: none;color:#fff;" href="./about/index.html?id='+ msg[arrIndex].id + '">\
//               <div class="banner1-1 pt-3 pb-4" style="font-weight: 900;">'+ msg[arrIndex].WorkName + '</div>\
//               <p class=""><span class="fs-5">'+ msg[arrIndex].DesignerName + '</span>設計師</p>\
//               </a>\
//               <button type="button" class="btn border border-white"><a target="_blank" href="tel: '+ msg[arrIndex].TollFreeCall + '"><img class="" src="img/002-phone-call.svg" alt=""></a>\</button>\
//               <button type="button" class="btn border border-white" data-bs-toggle="modal" data-bs-target="#exampleModal"><img class="" src="img/001-blogging.svg" alt=""></button>\
//               </div>\
//             </div > ';

//       bodyBannerDes += ' \
//             <img class="banner-img img-fluid" id="img_id"  src="'+ msg[arrIndex].workimg[0].img + '" alt="">\
//            ';



//       $('.banner-des').html(desBanner);
//       $('.banner-m').html(MobBanner);
//       $('#bannerdes-img').html(bodyBannerDes);
//       // var test = msg[0].newstext1;

//       // $('#jsontest').append(test);
//     });


// }
// window.onload = funcTest2();

// window.setInterval("funcTest2()", 1000 * 8);


// $(document).ready(function () {

//   $.ajax({
//     method: "GET",
//     url: "designer4.json",
//     dataType: "json",
//   })

//     .done(function (msg) {

//       var DesignerContent = '';
//       console.log(msg)
//       for (var i = 0; i < msg.length; i++) {
//         // new_des1.push(msg[msg.length].id);

//         DesignerContent += ' \
//               <div id="'+ msg[i].id + '" class="secimg col-4  col-lg-2 mx-0 px-0 border-0"><a  href="./about/index.html?id=' + msg[i].id + '"><img class="img-fluid"\
//                 src="'+ msg[i].Designerimg + '"\
//                 alt="">\
//                 <div class="sec02-p-m p-1 mt-1 text-center">\
//                 <p class="my-0">'+ msg[i].WorkName + '</p>\
//                 <p>'+ msg[i].DesignerName + '</p>\
//                 </div>\
//                 </a>\
//               </div>';

//       }
//       $('.sec01-designer').html(DesignerContent);
//       // var test = msg[0].newstext1;

//       // $('#jsontest').append(test);
//     });



// });



function funcTest5() { 
  $.ajax({
    method: "GET",
    url: "designer4.json",
    dataType: "json",
    async:false,
  })
    .done(function (msg) {
      console.log(msg);
      function shuffleArray(inputArray) {
        inputArray.sort(() => Math.random() - 0.5);
      }
      shuffleArray(msg);
      console.log(msg.length);
      // temp初始化
      for (var i = 0; i < msg.length; i++) {
        temp[i]=msg[i].id
      }
      templength=temp.length;
    });
    

}

var templength =0;
var des1 = [];
var des2 = [];
var temp = [];
var numb1=[];
funcTest5(); 
funcTest4();
    

function funcTest4() {
   for (var j = 0; j < templength; j++) {
     des1[j]=temp[j]
  }
  console.log(des1)
  for (var j = 0; j < des1.length-1; j++) {
    des2[j]=des1[j]
  }
  numb1[0]=des1[des1.length-1];
  for(var j=0; j<des1.length-1;j++){
   numb1[j+1]=des2[j];
  }

  for (var j = 0; j < numb1.length; j++) {
    temp[j]=numb1[j];
  }
  console.log(temp);

  
  var desBanner = '';
  var MobBanner = '';
  var bodyBannerDes = '';
  var DesignerContent = '';
  for (var i = 0; i < temp.length; i++) {
      var deslist=0; 
      var deslist2=0;
      deslist=get_data(temp[i]); 
      deslist2=get_data(temp[0]);
      DesignerContent += ' \
            <div id="'+ deslist.id + '" class="secimg col-4  col-lg-2 mx-0 px-0 border-0"><a  href="./about/index.html?id=' + deslist.id + '"><img class="img-fluid"\
              src="'+ deslist.Designerimg + '"\
              alt="">\
              <div class="sec02-p-m p-1 mt-1 text-center">\
              <p class="my-0">'+deslist.WorkName + '</p>\
              <p>'+ deslist.DesignerName + '</p>\
              </div>\
              </a>\
            </div>';

            
            
            
            
          }
          desBanner += ' \
          <div class="banner-des row vertical align-items-end px-0 mx-0">\
            <div class="banner-0 col-0 order-1 col-lg-5 order-1 pe-0">\
            <img class="img-fluid" src="./img/banner/bannertitle.png" alt="">\
            </div>\
            <div class="banner-1 col-5 order-3 col-lg-5 order-2 text-white text-end py-3">\
              <a style="text-decoration: none;color:#fff;" href="./about/index.html?id='+ deslist2.id + '"><div class="banner1-1" style="font-weight: 900;">' +deslist2.WorkName + '</div>\
                <p><span class="fs-5">'+ deslist2.DesignerName + '</span>設計師</p>\
              </a>\
              <button type="button" class="btn border border-white"><a target="_blank" href="tel: '+ deslist2.TollFreeCall + '"><img class="" src="img/002-phone-call.svg" alt=""></a>\</button>\
          <button type="button" class="btn border border-white" data-bs-toggle="modal" data-bs-target="#exampleModal"><img class="" src="img/001-blogging.svg" alt=""></button>\
            </div>\
            <div class="banner-2 col-7 order-2 col-lg-2 order-3 px-0 mx-0">\
            <a class="desbutton" data-info="'+ deslist2.id + '" href="./about/index.html?id='+ deslist2.id + '"><img class="img-fluid" src="' + deslist2.Designerimg + '" alt=""></a>\
            </div>\
        </div>';

         MobBanner += ' \
          <div class="banner-m row vertical align-items-end px-0 mx-0">\
          <div class="bannerm-0 col-12 my-5 px-0">\
          <img class="img-fluid" src="./img/banner/banner-mobile.png" alt="">\
          </div>\
          <div class="bannerm-2 col-7 order-2 col-lg-2 order-3 px-0 mx-0">\
          <a href="./about/index.html?id='+ deslist2.id + '"><img class="img-fluid" src="' + deslist2.Designerimg + '" alt=""></a>\
          </div>\
          <div class="bannerm-1 col-5 order-3 col-lg-5 order-2 text-white text-start pb-3">\
          <a style="text-decoration: none;color:#fff;" href="./about/index.html?id='+ deslist2.id + '">\
          <div class="banner1-1 pt-3 pb-4" style="font-weight: 900;">'+ deslist2.WorkName + '</div>\
          <p class=""><span class="fs-5">'+ deslist2.DesignerName + '</span>設計師</p>\
          </a>\
          <button type="button" class="btn border border-white"><a target="_blank" href="tel: '+ deslist2.TollFreeCall + '"><img class="" src="img/002-phone-call.svg" alt=""></a>\</button>\
          <button type="button" class="btn border border-white" data-bs-toggle="modal" data-bs-target="#exampleModal"><img class="" src="img/001-blogging.svg" alt=""></button>\
          </div>\
        </div > ';

       bodyBannerDes += ' \
        <img class="banner-img img-fluid" id="img_id"  src="'+ deslist2.workimg[0].img + '" alt="">\
       ';
    
    $('.banner-des').html(desBanner);
    $('.banner-m').html(MobBanner);
    $('#bannerdes-img').html(bodyBannerDes);      
    $('.sec01-designer').html(DesignerContent);
    console.log(deslist2);

  
}



function get_data(id) {
  var A=[];
  $.ajax({
      method: "GET",
      url: "../designer4.json",
      dataType: "json",
      async:false,
  })
      .done(function (msg) {
          for (var i = 0; i < msg.length; i++) {
            
              if (msg[i].id == id) {
                A =msg[i]
              }
          }
      });
     
      return A
}



setInterval("funcTest4()", 1000*10);





// if (msg[i].id == id) {
//   console.log()
// }
// setInterval("funcTest5()", 5000);

// 點選該設計師，導至其對應id的參數網址

// $('#278').click(function () {
//   console.log(1);
//   window.location.href = `./about/index.html?id=278`;
// });
// $('#507').click(function () {
//   console.log(2);
//   window.location.href = `./about/index.html?id=507`;
// });


// $('#423').click(function () {
//   console.log(3);
//   window.location.href = `./about/index.html?id=423`;
// });

// $('#594').click(function () {
//   console.log(4);
//   window.location.href = `./about/index.html?id=594`;
// });

// $('#364').click(function () {
//   console.log(5);
//   window.location.href = `./about/index.html?id=364`;
// });
// $('#500').click(function () {
//   console.log(6);
//   window.location.href = `./about/index.html?id=500`;
// });

// $('#651').click(function () {
//   console.log(7);
//   window.location.href = `./about/index.html?id=651`;
// });

// $('#347').click(function () {
//   console.log(8);
//   window.location.href = `./about/index.html?id=347`;
// });

// $('#363').click(function () {
//   console.log(9);
//   window.location.href = `./about/index.html?id=363`;
// });

// $('#555').click(function () {
//   console.log(10);
//   window.location.href = `./about/index.html?id=555`;
// });

// $('#79').click(function () {
//   console.log(11);
//   window.location.href = `./about/index.html?id=79`;
// });
// $('#158').click(function () {
//   console.log(12);
//   window.location.href = `./about/index.html?id=158`;
// });

// $('#301').click(function () {
//   console.log(13);
//   window.location.href = `./about/index.html?id=301`;
// });

// $('#402').click(function () {
//   console.log(14);
//   window.location.href = `./about/index.html?id=402`;
// });

// $('#131').click(function () {
//   console.log(15);
//   window.location.href = `./about/index.html?id=131`;
// });

// $('#28').click(function () {
//   console.log(16);
//   window.location.href = `./about/index.html?id=28`;
// });

// $('#65').click(function () {
//   console.log(17);
//   window.location.href = `./about/index.html?id=65`;
// });
// $('#672').click(function () {
//   console.log(9);
//   window.location.href = `./about/index.html?id=672`;
// });
// $('#438').click(function () {
//   console.log(9);
//   window.location.href = `./about/index.html?id=438`;
// });
// $('#291').click(function () {
//   console.log(9);
//   window.location.href = `./about/index.html?id=291`;
// });
// $('#465').click(function () {
//   console.log(9);
//   window.location.href = `./about/index.html?id=465`;
// });
// $('#436').click(function () {
//   console.log(9);
//   window.location.href = `./about/index.html?id=436`;
// });
// $('#279').click(function () {
//   console.log(9);
//   window.location.href = `./about/index.html?id=279`;
// });
// $('#418').click(function () {
//   console.log(9);
//   window.location.href = `./about/index.html?id=418`;
// });
// $('#385').click(function () {
//   console.log(9);
//   window.location.href = `./about/index.html?id=385`;
// });
// $('#688').click(function () {
//   console.log(9);
//   window.location.href = `./about/index.html?id=688`;
// });
// $('#474').click(function () {
//   console.log(9);
//   window.location.href = `./about/index.html?id=474`;
// });
// $('#505').click(function () {
//   console.log(9);
//   window.location.href = `./about/index.html?id=505`;
// });
// $('#712').click(function () {
//   console.log(9);
//   window.location.href = `./about/index.html?id=712`;
// });
// $('#680').click(function () {
//   console.log(9);
//   window.location.href = `./about/index.html?id=680`;
// });
// $('#705').click(function () {
//   console.log(9);
//   window.location.href = `./about/index.html?id=705`;
// });
// $('#23').click(function () {
//   console.log(9);
//   window.location.href = `./about/index.html?id=23`;
// });

// $('#33').click(function () {
//   console.log(9);
//   window.location.href = `./about/index.html?id=33`;
// });

// $('#491').click(function () {
//   console.log(9);
//   window.location.href = `./about/index.html?id=491`;
// });



// function funcTest() {
//   $("div.sec01-designer div").sort(function () {
//     return Math.random() * 10 > 5 ? 1 : -1;
//   }).each(function () {
//     var $t = $(this),
//       color = $t.attr("");
//     $t.css({ backgroundColor: color }).appendTo($t.parent());
//   });

// }
// window.setInterval("funcTest()", 1000 * 10);
// window.onload = funcTest();
$.fn.serializeObject = function () {
  var o = {};
  var a = this.serializeArray();
  o["id"] = 0;
  o["time_stamp"] = "";
  $.each(a, function () {
    if (o[this.name]) {
      if (!o[this.name].push) {
        o[this.name] = [o[this.name]];
      }
      o[this.name].push(this.value || '');
    } else {
      o[this.name] = this.value || '';
    }
  });

  return o;
};

$(".contact-form1").submit(function (e) {
  /*	var formRef = $('#form1').serializeArray();
    var jsonString = JSON.stringify(formRef);*/
  var jsonInfo = $('.contact-form1').serializeObject();
  var jsonString = JSON.stringify(jsonInfo);
  console.log(jsonString);
  $.ajax({
    type: 'POST',
    url: 'https://go.hhh.com.tw:8002/deco_request_detail',
    data: jsonString,
    dataType: 'json',
   
    success: function (data) {
      console.log('送出成功: ' + data);
      if (data == 0) {
        alert("送出成功");
      } else if (data == 1) {
        alert("此email已填過表單");
      } else if (data == 2) {
        alert("此phone已填過表單");
      } else if (data == 3) {
        alert("此email、phone已填過表單");
      }
      location.href ="./index_complete_line.html"; 
    },

    beforeSend: function () {
      console.log('beforeSend');
    },
    complete: function () {
      console.log('complete');

    },

    error: function (jqXHR, textStatus, errorThrown) {
      console.log(JSON.stringify(jqXHR));
      console.log("AJAX errr: " + textStatus + ' : ' + errorThrown);
      console.log('送出失敗: ' + jqXHR.responseText);
      alert("送出失敗");
    }
  });

  return false;
});