export const imgInitFu = () => {
  var showcase = $('#showcase'),
    title = $('#item-title')

  const fullWidth = window.innerHeight

  showcase.Cloud9Carousel({
    yOrigin: fullWidth / 10 - 10,
    yRadius: fullWidth / 10 - 20,
    mirror: {
      gap: 12,
      height: 0.2
    },
    buttonLeft: $('#nav > .left'),
    buttonRight: $('#nav > .right'),
    autoPlay: 0,
    bringToFront: true,
    onRendered: rendered,
    onLoaded: function () {
      showcase.css('visibility', 'visible')
      showcase.css('display', 'none')
      showcase.fadeIn(1500)
    }
  })

  function rendered(carousel: any) {
    // console.log(carousel.nearestItem())
    title.text(carousel.nearestItem()?.element?.alt)

    // Fade in based on proximity of the item
    var c = Math.cos((carousel.floatIndex() % 1) * 2 * Math.PI)
    title.css('opacity', 0.5 + 0.5 * c)
  }

  //
  // Simulate physical button click effect
  //
  $('#nav > button').click(function (e: any) {
    var b = $(e.target).addClass('down')
    setTimeout(function () {
      b.removeClass('down')
    }, 80)
  })

  // $(document).keydown(function (e: any) {
  //   //
  //   // More codes: http://www.javascripter.net/faq/keycodes.htm
  //   //
  //   switch (e.keyCode) {
  //     /* left arrow */
  //     case 37:
  //       $('#nav > .left').click()
  //       break

  //     /* right arrow */
  //     case 39:
  //       $('#nav > .right').click()
  //   }
  // })
}
