// Only uncomment when wish to test things on local as this should no go in main.js build

;(function ($) {
  $.fn.cms3dcarousel = function (options) {
    var ThreeDSlider = function (parentObject, container, options, id) {
      this.parentObject = parentObject
      this.container = container
      this.options = options
      this.id = id
      this.curItem = -1
    }
    ThreeDSlider.prototype = {
      init: function () {
        var items = $('.cms-3dcarousel-item', this.container)
        if (this.options.visibleitems == 3) {
          items.css({ display: 'block', opacity: '0.2', visibility: 'hidden' })
        } else {
          items.css({ display: 'block', opacity: 1, visibility: 'hidden' })
        }
        if (this.curItem < 0) this.curItem = this.options.firstitem
        this.direction = 0
        this.totalItems = items.length
        this.initClickHandler()
        this.initSize()
        this.gotoItem(this.curItem)
      },
      resizeObject: function () {
        var screensize = this.parentObject.checkScreen()
        if (this.screenstatus != screensize) {
          this.screenstatus = screensize
          this.initSize()
          this.parentObject.resizeImages()
          this.gotoItem(this.curItem)
        }
      },
      initSize: function () {
        this.screenstatus = this.parentObject.checkScreen()
        // this.screenstatus = 'small'
        if (this.options.visibleitems == 5) {
          this.options.xdis = 300
          this.options.zdis = 300
          this.options.medium_xdis = 300
          this.options.medium_zdis = 300
          this.options.scaleratio = 0.8
        }
        if (this.options.visibleitems == 3 && this.options.width >= 320) {
          this.options.scaleratio = 0.9
        }
        if (this.options.visibleitems == 3 && this.options.width >= 400) {
          this.options.scaleratio = 0.7
        }
        if (this.screenstatus == 'small') {
          this.visibleitems = this.options.small_visibleitems
          this.perspective = this.options.small_perspective
          this.xdis = this.options.small_xdis
          this.zdis = this.options.small_zdis
          this.yrotate = this.options.small_yrotate
          this.transition = this.options.small_transition
          this.itemW = this.options.small_width || 200
          this.itemH = this.options.small_height || 350
          this.carouselmargin = this.options.small_carouselmargin
        } else if (this.screenstatus == 'medium') {
          this.visibleitems = this.options.medium_visibleitems
          this.perspective = this.options.medium_perspective
          this.xdis = this.options.medium_xdis
          this.zdis = this.options.medium_zdis
          this.yrotate = this.options.medium_yrotate
          this.transition = this.options.medium_transition
          this.itemW = this.options.medium_width
          this.itemH = this.options.medium_height
          this.carouselmargin = this.options.medium_carouselmargin
        } else {
          this.visibleitems = this.options.visibleitems
          this.perspective = this.options.perspective
          this.xdis = this.options.xdis
          this.zdis = this.options.zdis
          this.yrotate = this.options.yrotate
          this.transition = this.options.transition
          this.itemW = this.options.width
          this.itemH = this.options.height
          this.carouselmargin = this.options.carouselmargin
        }
        this.itemImgW = this.itemW - 2 * this.options.itemborder
        this.itemImgH = this.itemH - 2 * this.options.itemborder
        this.sideCount = Math.floor((this.visibleitems - 1) / 2)
        this.container.css({ 'box-sizing': 'border-box' })
        this.container.find('*').css({ 'box-sizing': 'border-box' })
        $('.cms-3dcarousel-list-container', this.container).css({
          display: 'block',
          position: 'relative',
          width: '100%',
          height: 'auto',
          overflow: 'hidden',
          margin: 0,
          padding: this.carouselmargin
        })
        if (this.screenstatus == 'small') {
          $('.cms-3dcarousel-list', this.container).css({
            width: '100%',
            height: this.options.scaleratio * this.itemH + 'px',
            margin: 'auto',
            padding: 0
          })
        } else if (this.screenstatus == 'medium') {
          var ulWidthMedium = $('.cms-3dcarousel-list').parent().width()
          $('.cms-3dcarousel-list', this.container).css({
            width: ulWidthMedium,
            height: this.itemH + 'px',
            margin: 'auto',
            padding: 0
          })
        } else {
          if (this.options.visibleitems == 5) {
            $('.cms-3dcarousel-list', this.container).css({
              width: 'calc(100% - 100px)',
              height: this.itemH + 'px',
              margin: 'auto',
              padding: 0,
              overflow: 'hidden'
            })
          } else {
            if (
              $(window).width() <
              this.options.width * this.options.visibleitems
            ) {
              $('.cms-3dcarousel-list', this.container).css({
                width: '100%',
                height: this.itemH + 'px',
                margin: 'auto',
                padding: 0
              })
            } else {
              $('.cms-3dcarousel-list', this.container).css({
                width:
                  this.options.width * this.options.visibleitems + 40 + 'px',
                height: this.itemH + 'px',
                margin: 'auto',
                padding: 0
              })
            }
          }
        }
        $('.cms-3dcarousel-list', this.container).css({
          'transform-style': this.parentObject.isFirefox
            ? 'flat'
            : 'preserve-3d',
          perspective: this.perspective + 'px'
        })
        $('.cms-3dcarousel-item', this.container).css({
          width: this.itemW + 'px',
          position: 'absolute',
          top: 0,
          left: '50%',
          'margin-left': '-' + this.itemW / 2 + 'px'
        })
        $('.cms-3dcarousel-content', this.container).css({
          'background-color': 'transparent',
          padding: this.options.itemborder + 'px'
        })
        $('.cms-3dcarousel-image', this.container).css({
          display: 'block',
          position: 'relative',
          width: this.itemImgW + 'px',
          height: this.itemImgH + 'px',
          overflow: 'hidden'
        })
        $('.cms-3dcarousel-img-container', this.container).css({
          display: 'block',
          position: 'relative',
          width: '100%',
          'max-width': '100%',
          height: '100%',
          'max-height': '100%'
        })
        $('.cms-3dcarousel-img', this.container).css({
          display: 'inline',
          'max-width': '100%',
          outline: '1px solid transparent'
        })
      },
      initClickHandler: function () {
        var instance = this
        $('.cms-3dcarousel-item', this.container).click(function () {
          if ($(this).index() == instance.curItem) return
          var disableWeblink =
            instance.options.onlyenableweblinkoncenter &&
            $(this).find('.cms-3dcarousel-item-weblink').length > 0 &&
            $(this).index() != instance.curItem
          instance.gotoItem($(this).index())
          if (disableWeblink) return false
        })
      },
      gotoPrev: function () {
        var itemId = this.curItem - 1
        if (itemId < 0)
          itemId =
            this.options.loop || this.options.loopslide
              ? this.totalItems - 1
              : 0
        this.direction = -1
        this.gotoItem(itemId)
      },
      gotoNext: function () {
        var itemId = this.curItem + 1
        if (itemId >= this.totalItems)
          itemId =
            this.options.loop || this.options.loopslide
              ? 0
              : this.totalItems - 1
        this.direction = 1
        this.gotoItem(itemId)
      },
      gotoItem: function (itemId) {
        this.prevItem = this.curItem
        this.curItem = itemId
        this.container.trigger('cms-3dcarousel.beforeswitch', [
          this.prevItem,
          this.curItem
        ])
        var items = $('.cms-3dcarousel-item', this.container)
        items.css({
          '-webkit-transition': 'none',
          '-moz-transition': 'none',
          '-o-transition': 'none',
          '-ms-transition': 'none',
          transition: 'none'
        })
        items.removeClass('cms-3dcarousel-item-current')
        items.eq(this.curItem).addClass('cms-3dcarousel-item-current')
        var pos = items.eq(this.curItem).data('pos')
        var dir = this.visibleitems == 1 ? this.direction : pos
        if (this.totalItems > this.visibleitems)
          if (dir < 0)
            for (var i = 0; i <= this.sideCount; i++) {
              var sideItem = this.curItem - i
              if (sideItem < 0) {
                if (!this.options.loop) break
                sideItem = this.totalItems + sideItem
              }
              if (this.screenstatus == 'small') {
                items.eq(sideItem).css({
                  transform:
                    'translateX(-' +
                    this.xdis * (i - dir) +
                    'px) translateZ(-' +
                    this.zdis * (i - dir) +
                    'px) rotateY(' +
                    this.yrotate +
                    'deg) scale(' +
                    this.options.scaleratio +
                    ')',
                  'transform-origin': 'top'
                })
              } else {
                items.eq(sideItem).css({
                  transform:
                    'translateX(-' +
                    this.xdis * (i - dir) +
                    'px) translateZ(-' +
                    this.zdis * (i - dir) +
                    'px) rotateY(' +
                    this.yrotate +
                    'deg)'
                })
              }
            }
          else if (dir > 0)
            for (var i = 0; i <= this.sideCount; i++) {
              var sideItem = this.curItem + i
              if (sideItem >= this.totalItems) {
                if (!this.options.loop) break
                sideItem = sideItem - this.totalItems
              }
              if (this.screenstatus == 'small') {
                items.eq(sideItem).css({
                  transform:
                    'translateX(' +
                    this.xdis * (i + dir) +
                    'px) translateZ(-' +
                    this.zdis * (i + dir) +
                    'px) rotateY(-' +
                    this.yrotate +
                    'deg) scale(' +
                    this.options.scaleratio +
                    ')',
                  'transform-origin': 'top'
                })
              } else {
                items.eq(sideItem).css({
                  transform:
                    'translateX(' +
                    this.xdis * (i + dir) +
                    'px) translateZ(-' +
                    this.zdis * (i + dir) +
                    'px) rotateY(-' +
                    this.yrotate +
                    'deg)'
                })
              }
            }

        var instance = this
        setTimeout(function () {
          instance.goAnimation(dir)
          instance.container.trigger('cms-3dcarousel.switch', [
            instance.prevItem,
            instance.curItem
          ])
        }, 1)
        if (instance.options.onlyenableweblinkoncenter) {
          $(
            '.cms-3dcarousel-item .cms-3dcarousel-item-weblink',
            instance.container
          ).css({ cursor: 'default' })
          $(
            '.cms-3dcarousel-item-current .cms-3dcarousel-item-weblink',
            instance.container
          ).css({ cursor: 'pointer' })
        }
      },
      goAnimation: function (pos) {
        var items = $('.cms-3dcarousel-item', this.container)
        var ulWidth = this.options.width
        items.css({
          '-webkit-transition': this.transition,
          '-moz-transition': this.transition,
          '-o-transition': this.transition,
          '-ms-transition': this.transition,
          transition: this.transition
        })
        items.removeClass('cms-3dcarousel-item-visible')
        if (this.screenstatus == 'small') {
          items.eq(this.curItem).css({
            opacity: 1,
            visibility: 'visible',
            'z-index': (this.sideCount + 1) * 2,
            transform:
              'translateX(0px) translateY(0px) translateZ(0px) rotateY(0deg) scale(' +
              this.options.scaleratio +
              ')',
            'transform-origin': 'top'
          })
        } else {
          items.eq(this.curItem).css({
            opacity: 1,
            visibility: 'visible',
            'z-index': (this.sideCount + 1) * 2,
            transform:
              'translateX(0px) translateY(0px) translateZ(0px) rotateY(0deg)'
          })
        }
        items
          .eq(this.curItem)
          .data('pos', 0)
          .addClass('cms-3dcarousel-item-visible')
        if (this.totalItems <= 1) return
        for (var i = 1; i <= this.sideCount; i++) {
          var sideItem = this.curItem - i
          if (sideItem < 0) {
            if (!this.options.loop) break
            sideItem = this.totalItems + sideItem
          }
          var cardComp = items
            .eq(sideItem)
            .find('.cms-3dcarousel-img-container')
            .children()[0].classList.contains('cardcomp')
          if (this.screenstatus == 'small') {
            items.eq(sideItem).css({
              opacity:
                this.options.visibleitems == 3 && !cardComp 
                  ? 0.2
                  : 1,
              visibility: 'visible',
              'z-index': (this.sideCount - i + 1) * 2 - 1,
              transform:
                'translateX(-' +
                this.xdis * i +
                'px) translateZ(-' +
                this.zdis * i +
                'px) translateY(0px) rotateY(' +
                this.yrotate +
                'deg) scale(' +
                this.options.scaleratio +
                ')',
              'transform-origin': 'top'
            })
          } else {
            items.eq(sideItem).css({
              opacity:
                this.options.visibleitems == 3 && !cardComp
                  ? 0.2
                  : 1,
              visibility: 'visible',
              'z-index': (this.sideCount - i + 1) * 2 - 1,
              transform:
                'translateX(-' +
                this.xdis * i +
                'px) translateZ(-' +
                this.zdis * i +
                'px) rotateY(' +
                this.yrotate +
                'deg)'
            })
          }
          items
            .eq(sideItem)
            .data('pos', -i)
            .addClass('cms-3dcarousel-item-visible')
          ulWidth =
            ulWidth + items.eq(sideItem)[0].getBoundingClientRect().width
        }
        for (var i = 1; i <= this.sideCount; i++) {
          var sideItem = this.curItem + i
          if (sideItem >= this.totalItems) {
            if (!this.options.loop) break
            sideItem = sideItem - this.totalItems
          }
          var cardComp = items
            .eq(sideItem)
            .find('.cms-3dcarousel-img-container')
            .children()[0].classList.contains("cardcomp")
          if (this.screenstatus == 'small') {
            items.eq(sideItem).css({
              opacity:
                this.options.visibleitems == 3 && !cardComp 
                  ? 0.2
                  : 1,
              visibility: 'visible',
              'z-index': (this.sideCount - i + 1) * 2,
              transform:
                'translateX(' +
                this.xdis * i +
                'px) translateZ(-' +
                this.zdis * i +
                'px) translateY(0px) rotateY(-' +
                this.yrotate +
                'deg) scale(' +
                this.options.scaleratio +
                ')',
              'transform-origin': 'top'
            })
          } else {
            items.eq(sideItem).css({
              opacity:
                this.options.visibleitems == 3 && !cardComp
                  ? 0.2
                  : 1,
              visibility: 'visible',
              'z-index': (this.sideCount - i + 1) * 2,
              transform:
                'translateX(' +
                this.xdis * i +
                'px) translateZ(-' +
                this.zdis * i +
                'px) rotateY(-' +
                this.yrotate +
                'deg)'
            })
          }
          items
            .eq(sideItem)
            .data('pos', i)
            .addClass('cms-3dcarousel-item-visible')
          ulWidth =
            ulWidth + items.eq(sideItem)[0].getBoundingClientRect().width
        }
        items
          .not('.cms-3dcarousel-item-visible')
          .css({ opacity: 0, visibility: 'hidden', 'z-index': 0 })
        if (this.totalItems <= this.visibleitems) return
        if (pos < 0)
          for (var i = 1; i <= Math.abs(pos); i++) {
            var sideItem = this.curItem + this.sideCount + i
            if (sideItem >= this.totalItems) {
              if (!this.options.loop) break
              sideItem = sideItem - this.totalItems
            }
            if (!items.eq(sideItem).hasClass('.cms-3dcarousel-item-visible'))
              items.eq(sideItem).css({
                'z-index': -i,
                transform:
                  'translateX(' +
                  this.xdis * (i + this.sideCount) +
                  'px) translateZ(-' +
                  this.zdis * (i + this.sideCount) +
                  'px) rotateY(-' +
                  this.yrotate +
                  'deg)'
              })
          }
        else
          for (var i = 1; i <= Math.abs(pos); i++) {
            var sideItem = this.curItem - this.sideCount - i
            if (sideItem < 0) {
              if (!this.options.loop) break
              sideItem = this.totalItems + sideItem
            }
            if (!items.eq(sideItem).hasClass('.cms-3dcarousel-item-visible'))
              items.eq(sideItem).css({
                'z-index': -i,
                transform:
                  'translateX(-' +
                  this.xdis * (i + this.sideCount) +
                  'px) translateZ(-' +
                  this.zdis * (i + this.sideCount) +
                  'px) rotateY(' +
                  this.yrotate +
                  'deg)'
              })
          }
      }
    }
    var WP3DCarousel = function (container, options, id) {
      this.container = container
      this.options = options
      this.id = id
      this.resizeTimeout = null
      this.screenstatus = 'normal'
      // this.preProcess(this)
      this.initData()
    }
    WP3DCarousel.prototype = {
      initData: function () {
        this.init()
      },
      checkScreen: function () {
        var screenstatus = 'normal'
        var screenWidth = $(window).width()
        if (screenWidth <= this.options.small_screenwidth)
          screenstatus = 'small'
        else if (screenWidth <= this.options.medium_screenwidth)
          screenstatus = 'medium'
        return screenstatus
      },
      init: function () {
        var instance = this
        this.initEnv()
        this.container.css({ width: '100%' })
        this.options.width = this.container.find('ul li img')[0].naturalWidth
        this.options.height = this.container.find('ul li img')[0].naturalHeight
        this.options.medium_width =
          this.container.find('ul li img')[0].naturalWidth
        this.options.medium_height =
          this.container.find('ul li img')[0].naturalHeight
        this.options.small_width =
          this.container.find('ul li img')[0].naturalWidth
        this.options.small_height =
          this.container.find('ul li img')[0].naturalHeight
        this.elemArray = $('.cms-3dcarousel-item', this.container)
        this.elemLength = this.elemArray.length
        if (this.options.random) {
          for (var i = this.elemLength - 1; i > 0; i--) {
            var index = Math.floor(Math.random() * i)
            this.elemArray.eq(index).insertBefore(this.elemArray.eq(i))
            this.elemArray.eq(i).insertBefore(this.elemArray.eq(index))
          }
          this.elemArray = $('.cms-3dcarousel-item', this.container)
        }
        switch (this.options.template) {
          case '3dcarousel':
            this.carouselObject = new ThreeDCarousel(
              this,
              this.container,
              this.options,
              this.id
            )
            break
          default:
            this.carouselObject = new ThreeDSlider(
              this,
              this.container,
              this.options,
              this.id
            )
            break
        }
        this.initOverlay()
        this.createText()
        this.screenstatus = this.checkScreen()
        this.createArrows()
        this.enableSwipe()
        this.createBullets()
        this.carouselObject.init()
        this.resizeImages()
        $(window).resize(function () {
          clearTimeout(instance.resizeTimeout)
          instance.resizeTimeout = setTimeout(function () {
            instance.resizeCarousel()
          }, 50)
        })
        this.container.css({ display: 'block' })
        $(window).trigger('cms-3dcarousel.inited')
        if (!this.options.autoslide && this.options.autoslidewhenscrollinview) {
          var top = this.container.offset().top
          var docBottom = $(window).height() + $(window).scrollTop()
          if (top < docBottom) {
            this.autosliding = true
            instance.slideTimeout.start()
          } else
            $(window).on('scroll.cms-3dcarousel', function () {
              if (instance.autosliding) {
                $(this).off('scroll.cms-3dcarousel')
                return
              }
              var top = instance.container.offset().top
              var docBottom = $(window).height() + $(window).scrollTop()
              if (top < docBottom) {
                instance.autosliding = true
                if (instance.options.autoslidewhenscrollinviewnodelay)
                  if (instance.options.autoslidedir == 'right')
                    instance.gotoNext()
                  else instance.gotoPrev()
                else instance.slideTimeout.start()
                $(this).off('scroll.cms-3dcarousel')
              }
            })
        }
        $('.cms-3dcarousel').on('load', function () {
          $('.cms-3dcarousel', this.container).css({
            display: 'block'
          })
        })
      },

      checkScreen: function () {
        var screenstatus = 'normal'
        var screenWidth = $(window).width()
        if (screenWidth <= this.options.small_screenwidth)
          screenstatus = 'small'
        else if (screenWidth <= this.options.medium_screenwidth)
          screenstatus = 'medium'
        return screenstatus
      },
      initEnv: function () {
        this.isOpera =
          navigator.userAgent.match(/Opera/i) != null ||
          navigator.userAgent.match(/OPR\//i) != null
        this.isFirefox = navigator.userAgent.match(/Firefox/i) != null
        this.isIE11 =
          navigator.userAgent.match(/Trident\/7/) != null &&
          navigator.userAgent.match(/rv:11/) != null
        this.isIE = navigator.userAgent.match(/MSIE/i) != null && !this.isOpera
        this.isIE10 =
          navigator.userAgent.match(/MSIE 10/i) != null && !this.isOpera
        this.isIE9 =
          navigator.userAgent.match(/MSIE 9/i) != null && !this.isOpera
        this.isIE8 =
          navigator.userAgent.match(/MSIE 8/i) != null && !this.isOpera
        this.isIE7 =
          navigator.userAgent.match(/MSIE 7/i) != null && !this.isOpera
        this.isIE6 =
          navigator.userAgent.match(/MSIE 6/i) != null && !this.isOpera
        this.isAndroid = navigator.userAgent.match(/Android/i) != null
        if (this.isAndroid) {
          var match = navigator.userAgent.match(/Android\s([0-9\.]*)/i)
          this.androidVersion =
            match && match.length >= 2 ? parseInt(match[1], 10) : -1
        }
      },
      initOverlay: function () {
        var instance = this
        var overlay = $('.cms-3dcarousel-img-container').children()[0].classList
          .contains("cardcomp")
        if (overlay) {
          this.options.addimgoverlay = true
        }
        if (this.options.addimgoverlay)
          $('.cms-3dcarousel-item', this.container).each(function () {
            $(this)
              .find('.cms-3dcarousel-img-container')
              .parent()
              .append('<div class="cms-3dcarousel-img-overlay"></div>')
          })
        $('.cms-3dcarousel-item', this.container).each(function () {
          if ($('.cms-3dcarousel-hoveroverlay', this).length > 0) {
            if (
              $('.cms-3dcarousel-content', this).length > 0 &&
              instance.options.imghovereffect == 'flipy'
            )
              $('.cms-3dcarousel-content', this).addClass(
                'cms-3dcarousel-' + instance.options.imghovereffect + '-out'
              )
            $('.cms-3dcarousel-hoveroverlay', this).addClass(
              'cms-3dcarousel-' + instance.options.imghovereffect + '-in'
            )
          }
        })
      },
      resizeCarousel: function () {
        this.carouselObject.resizeObject()
      },
      resizeImgObj: function ($img) {
        var imgW = $img.data('rawwidth')
        var imgH = $img.data('rawheight')
        if (
          imgW <= this.carouselObject.itemW &&
          imgH <= this.carouselObject.itemH
        ) {
          $img.css({
            'margin-left': this.carouselObject.itemW / 2 - imgW / 2 + 'px',
            'margin-top': this.carouselObject.itemH / 2 - imgH / 2 + 'px'
          })
          return
        }
        if (this.options.scalemode == 'fit')
          if (
            imgW / imgH >
            this.carouselObject.itemW / this.carouselObject.itemH
          ) {
            var margin =
              this.carouselObject.itemH / 2 -
              (this.carouselObject.itemW * imgH) / imgW / 2 +
              'px'
            $img.css({
              'max-width': '100%',
              'max-height': 'none',
              width: '100%',
              height: 'auto',
              'margin-left': 0,
              'margin-top': margin
            })
            $img.siblings('.cms-3dcarousel-img-overlay').css({
              width: '100%',
              left: 0,
              right: 0,
              height: 'auto',
              top: margin,
              bottom: margin
            })
          } else {
            var margin =
              this.carouselObject.itemW / 2 -
              (this.carouselObject.itemH * imgW) / imgH / 2 +
              'px'
            $img.css({
              'max-width': '100%',
              'max-height': '100%',
              width: 'auto',
              height: '100%',
              'margin-left': margin,
              'margin-top': 0
            })
            $img.siblings('.cms-3dcarousel-img-overlay').css({
              width: 'auto',
              left: margin,
              right: margin,
              height: '100%',
              top: 0,
              bottom: 0
            })
          }
        else if (
          imgW / imgH >
          this.carouselObject.itemW / this.carouselObject.itemH
        )
          $img.css({
            'max-width': 'none',
            'max-height': '100%',
            width: 'auto',
            height: '100%',
            'margin-left':
              this.carouselObject.itemW / 2 -
              (this.carouselObject.itemH * imgW) / imgH / 2 +
              'px',
            'margin-top': 0
          })
        else
          $img.css({
            'max-width': '100%',
            'max-height': 'none',
            width: '100%',
            height: 'auto',
            'margin-left': 0,
            'margin-top':
              this.carouselObject.itemH / 2 -
              (this.carouselObject.itemW * imgH) / imgW / 2 +
              'px'
          })
      },
      resizeImages: function () {
        var instance = this
        $('.cms-3dcarousel-img', this.container)
          .on('load', function () {
            var imgWidth = $(this).get(0).naturalWidth
              ? $(this).get(0).naturalWidth
              : this.width
            var imgHeight = $(this).get(0).naturalHeight
              ? $(this).get(0).naturalHeight
              : this.height
            if (!$(this).attr('data-rawwidth'))
              $(this).data('rawwidth', imgWidth)
            if (!$(this).attr('data-rawheight'))
              $(this).data('rawheight', imgHeight)
            instance.resizeImgObj($(this))
          })
          .each(function () {
            if (this.complete) $(this).trigger('load')
          })
      },
      gotoPrev: function () {
        this.carouselObject.gotoPrev()
      },
      gotoNext: function () {
        this.carouselObject.gotoNext()
      },
      updateText: function (index) {
        $('.cms-3dcarousel-title', this.container).empty()
        if (this.options.showtitle) {
          var title = ''
          if (
            this.elemArray.eq(index).find('.cms-3dcarousel-item-text-title')
              .length > 0
          )
            title = this.elemArray
              .eq(index)
              .find('.cms-3dcarousel-item-text-title')
              .clone()
          else if (this.elemArray.eq(index).data('title'))
            title = this.elemArray.eq(index).data('title')
          else if (this.elemArray.eq(index).attr('title'))
            title = this.elemArray.eq(index).attr('title')
          if (title) {
            decodeURIComponent(encodeURIComponent($('.cms-3dcarousel-title', this.container).html(title)));
          }
          if ($('.cms-3dcarousel-title').text().trim() == '') {
            $('.cms-3dcarousel-list-container', this.container).css({
              'padding-bottom': 0
            })
          } else {
            $('.cms-3dcarousel-list-container', this.container).css({
              padding: this.carouselmargin
            })
          }
        }
        this.container.trigger('cms-3dcarousel.textupdated', [this.curItem])
      },
      createText: function () {
        if (this.options.textstyle == 'none') return
        var carouselText = $(
          '<div class="cms-3dcarousel-text"></div>'
        ).appendTo(this.container)
        if (this.options.showtitle)
          carouselText.append('<div class="cms-3dcarousel-title"></div>')
        var instance = this
        this.container.on('cms-3dcarousel.switch', function (e, prev, cur) {
          if (cur >= 0 && cur < instance.elemLength) instance.updateText(cur)
        })
      },
      enableSwipe: function () {
        if (this.options.enabletouchswipe) {
          var instance = this
          var preventDefault =
            instance.isAndroid &&
            instance.androidVersion >= 0 &&
            instance.androidVersion <= 5
              ? true
              : false
          $(
            '.cms-3dcarousel-list-container',
            this.container
          ).threedCarouselTouchSwipe({
            preventWebBrowser: preventDefault,
            swipeLeft: function () {
              $(window).trigger('cms-3dcarousel.swipe', [
                instance.id,
                instance.carouselObject.curItem,
                'left'
              ])
              instance.gotoNext()
            },
            swipeRight: function () {
              $(window).trigger('cms-3dcarousel.swipe', [
                instance.id,
                instance.carouselObject.curItem,
                'right'
              ])
              instance.gotoPrev()
            }
          })
        }
      },
      createArrows: function () {
        var instance = this
        var buttonCode =
          '<div class="cms-3dcarousel-prev"></div><div class="cms-3dcarousel-next"></div>'
        if(this.options.visibleitems == 5) {
          this.options.arrowsinsidelist = false
        }
        if (this.options.arrowsinsidelist)
          $('.cms-3dcarousel-list', this.container).append(buttonCode)
        else this.container.append(buttonCode)
        var $prevArrow = $('.cms-3dcarousel-prev', this.container)
        var $nextArrow = $('.cms-3dcarousel-next', this.container)
        if (this.options.arrowpos == 'bottom') {
          $prevArrow.css({
            position: 'absolute',
            top: '100%',
            right: '50%',
            'margin-right': '4px'
          })
          $nextArrow.css({
            position: 'absolute',
            top: '100%',
            left: '50%',
            'margin-left': '4px'
          })
        } else {
          $prevArrow.css({
            position: 'absolute',
            top: '50%',
            'margin-top': '-' + this.options.arrowheight / 2 + 'px'
          })
          $nextArrow.css({
            position: 'absolute',
            top: '50%',
            'margin-top': '-' + this.options.arrowheight / 2 + 'px'
          })
        }
        $prevArrow.css({
          overflow: 'hidden',
          position: 'absolute',
          cursor: 'pointer',
          left: '0px',
          width: this.options.arrowwidth + 'px',
          height: this.options.arrowheight + 'px'
        })
        $nextArrow.css({
          overflow: 'hidden',
          position: 'absolute',
          cursor: 'pointer',
          right: '0px',
          width: this.options.arrowwidth + 'px',
          height: this.options.arrowheight + 'px'
        })
        if (this.screenstatus == 'small' || this.screenstatus == 'medium') {
          $prevArrow.css({ display: 'none' })
          $nextArrow.css({ display: 'none' })
        } else {
          $prevArrow.css({ display: 'block' })
          $nextArrow.css({ display: 'block' })
        }
        $prevArrow.click(function () {
          $(window).trigger('cms-3dcarousel.arrowclicked', [
            instance.id,
            instance.carouselObject.curItem,
            'left'
          ])
          instance.gotoPrev()
        })
        $nextArrow.click(function () {
          $(window).trigger('cms-3dcarousel.arrowclicked', [
            instance.id,
            instance.carouselObject.curItem,
            'right'
          ])
          instance.gotoNext()
        })
      },
      createBullet: function (index) {
        var instance = this
        var bullet = $(
          '<div class="cms-3dcarousel-bullet" data-bulletindex=' +
            index +
            '></div>'
        )
        if (this.options.navstyle == 'numbering') {
          bullet.html(String(index + 1))
          bullet.css({
            display: 'inline-block',
            width: this.options.navwidth,
            height: this.options.navheight,
            cursor: 'pointer',
            'line-height': this.options.navheight + 'px',
            'text-align': 'center',
            margin: 0,
            padding: 0,
            border: 0,
            'margin-left': index == 0 ? 0 : this.options.navspacing
          })
        } else
          bullet.css({
            display: 'inline-block',
            width: this.options.navwidth,
            height: this.options.navheight,
            cursor: 'pointer',
            'border-radius': '10px',
            'background-color': '#555555',
            margin: 0,
            padding: 0,
            border: 0,
            'margin-left': index == 0 ? 0 : this.options.navspacing
          })
        bullet.click(function () {
          instance.carouselObject.gotoItem($(this).data('bulletindex'))
        })
        return bullet
      },
      bulletNormal: function (bullet) {
        if (this.carouselObject.curItem == bullet.data('bulletindex')) return
        bullet.css({
          width: '8px',
          'border-radius': '48px',
          'background-color': '#555555'
        })
      },
      bulletHighlight: function (bullet) {
        bullet.css({
          width: '24px',
          'border-radius': '48px',
          'background-color': '#73C23A'
        })
      },
      createBullets: function () {
        if (this.options.navstyle == 'none') return
        var instance = this
        var nav = $('<div class="cms-3dcarousel-nav"></div>').appendTo(
          this.container
        )
        var bulletWrapper = $(
          '<div class="cms-3dcarousel-bullet-wrapper"></div>'
        ).appendTo(nav)
        var bulletList = $(
          '<div class="cms-3dcarousel-bullet-list"></div>'
        ).appendTo(bulletWrapper)
        bulletWrapper.css({
          display: 'block',
          position: 'relative',
          'text-align': 'center'
        })
        bulletList.css({
          display: 'inline-block',
          position: 'relative',
          margin: '0 auto'
        })
        for (var i = 0; i < this.elemLength; i++) {
          var bullet = this.createBullet(i)
          bulletList.append(bullet)
        }
        this.container.on('cms-3dcarousel.switch', function (e, prev, cur) {
          var bullets = $('.cms-3dcarousel-bullet', instance.container)
          if (prev != cur && prev >= 0) instance.bulletNormal(bullets.eq(prev))
          if (cur >= 0) instance.bulletHighlight(bullets.eq(cur))
        })
      }
    }
    options = options || {}
    for (var key in options)
      if (key.toLowerCase() !== key) {
        options[key.toLowerCase()] = options[key]
        delete options[key]
      }
    this.each(function () {
      if ($(this).data('donotinit') && (!options || !options['forceinit']))
        return
      if ($(this).data('inited')) return
      $(this).data('inited', 1)
      var defaultOptions = {
        scalemode: 'fill',
        itemborder: 0,
        imghovereffect: 'flipy',
        carouselmargin: '0 0 27px 0',
        medium_carouselmargin: '0 0 27px 0',
        small_carouselmargin: '0 0 11px 0',
        addimgoverlay: false,
        textstyle: 'always',
        showtitle: true,
        enabletouchswipe: true,
        arrowsinsidelist: true,
        arrowstyle: 'always',
        arrowpos: 'side',
        arrowwidth: 40,
        arrowheight: 40,
        arrowanimation: 'slide',
        navstyle: 'bullets',
        navwidth: 8,
        navheight: 8,
        navspacing: 10,
        autoslide: false,
        autoslidedir: 'right',
        autoslidewhenscrollinview: false,
        autoslidewhenscrollinviewnodelay: false,
        firstitem: 0,
        random: false,
        onlyenableweblinkoncenter: false,
        template: '3dslider',
        width: 0,
        height: 0,
        loop: true,
        loopslide: false,
        visibleitems: 3,
        perspective: 2e3,
        xdis: 200,
        zdis: 200,
        yrotate: 0,
        transition: 'all 0.5s ease-in-out',
        medium_screenwidth: 768,
        medium_width: 0,
        medium_height: 0,
        small_screenwidth: 414,
        small_width: 0,
        small_height: 0,
        medium_visibleitems: 3,
        medium_perspective: 1e3,
        medium_xdis: 200,
        medium_zdis: 200,
        medium_yrotate: 0,
        medium_transition: 'all 0.5s ease-in-out',
        small_visibleitems: 3,
        small_perspective: 1e3,
        small_xdis: 100,
        small_zdis: 100,
        small_yrotate: 0,
        small_transition: 'all 0.5s ease-in-out',
        scaleratio: 1
      }
      this.options = $.extend({}, defaultOptions, options)
      var instance = this
      $.each($(this).data(), function (key, value) {
        instance.options[key.toLowerCase()] = value
      })
      var init3DCarousel = function (inst) {
        var object = new WP3DCarousel(
          $(inst),
          inst.options,
          inst.options.carouselid
        )
        wp3DCarouselObjects.addObject(object)
        $(inst).data('object', object)
        $(inst).data('id', inst.options.carouselid)
      }
      init3DCarousel(this)
    })
  }
  $(document).ready(function () {
    $('.wonderplugin-3dcarousel-engine').css({ display: 'none' })
    if ($.fn.cms3dcarousel) $('.cms-3dcarousel').cms3dcarousel()
  })
})(jQuery)
;(function ($) {
  $.fn.threedCarouselTouchSwipe = function (options) {
    var defaults = {
      preventWebBrowser: false,
      swipeLeft: null,
      swipeRight: null,
      swipeTop: null,
      swipeBottom: null
    }
    if (options) $.extend(defaults, options)
    return this.each(function () {
      var startX = -1,
        startY = -1
      var curX = -1,
        curY = -1
      function touchStart (event) {
        var e = event.originalEvent
        if (e.targetTouches.length >= 1) {
          startX = e.targetTouches[0].pageX
          startY = e.targetTouches[0].pageY
        } else touchCancel(event)
      }
      function touchMove (event) {
        if (defaults.preventWebBrowser) event.preventDefault()
        var e = event.originalEvent
        if (e.targetTouches.length >= 1) {
          curX = e.targetTouches[0].pageX
          curY = e.targetTouches[0].pageY
        } else touchCancel(event)
      }
      function touchEnd (event) {
        if (curX > 0 || curY > 0) {
          triggerHandler()
          touchCancel(event)
        } else touchCancel(event)
      }
      function touchCancel (event) {
        startX = -1
        startY = -1
        curX = -1
        curY = -1
      }
      function triggerHandler () {
        if (Math.abs(curX - startX) > Math.abs(curY - startY))
          if (curX > startX) {
            if (defaults.swipeRight) defaults.swipeRight.call()
          } else {
            if (defaults.swipeLeft) defaults.swipeLeft.call()
          }
        else if (curY > startY) {
          if (defaults.swipeBottom) defaults.swipeBottom.call()
        } else if (defaults.swipeTop) defaults.swipeTop.call()
      }
      try {
        $(this).on('touchstart', touchStart)
        $(this).on('touchmove', touchMove)
        $(this).on('touchend', touchEnd)
        $(this).on('touchcancel', touchCancel)
      } catch (e) {}
    })
  }
})(jQuery)
if (typeof wp3DCarouselObjects === 'undefined')
  var wp3DCarouselObjects = new (function () {
    this.objects = []
    this.addObject = function (obj) {
      this.objects.push(obj)
    }
  })()