var _ua = (function(u){
  return {
    Tablet:(u.indexOf("windows") != -1 && u.indexOf("touch") != -1 && u.indexOf("tablet pc") == -1) 
      || u.indexOf("ipad") != -1
      || (u.indexOf("android") != -1 && u.indexOf("mobile") == -1)
      || (u.indexOf("firefox") != -1 && u.indexOf("tablet") != -1)
      || u.indexOf("kindle") != -1
      || u.indexOf("silk") != -1
      || u.indexOf("playbook") != -1,
    Mobile:(u.indexOf("windows") != -1 && u.indexOf("phone") != -1)
      || u.indexOf("iphone") != -1
      || u.indexOf("ipod") != -1
      || (u.indexOf("android") != -1 && u.indexOf("mobile") != -1)
      || (u.indexOf("firefox") != -1 && u.indexOf("mobile") != -1)
      || u.indexOf("blackberry") != -1
  }
})(window.navigator.userAgent.toLowerCase());

jQuery(document).ready(function(e) {    
  (function($) {				
    $.fn.rwdImageMaps = function() {
      let $img = this;
      let rwdImageMap = function() {
        $img.each(function() {
          if (typeof($(this).attr('usemap')) == 'undefined')
            return;

          let that = this,
            $that = $(that);

          $('<img />').on('load', function() {
            //  natural*** に変更し、  attr() ではなく prop() に変更する
            let attrW = 'naturalWidth',
              attrH = 'naturalHeight',
              w = $that.prop(attrW),  
              h = $that.prop(attrH);

            if (!w || !h) {
              let temp = new Image();
              temp.src = $that.attr('src');
              if (!w)
                w = temp.width;
              if (!h)
                h = temp.height;
            }

            var wPercent = $that.width()/100,
              hPercent = $that.height()/100,
              map = $that.attr('usemap').replace('#', ''),
              c = 'coords';

            $('map[name="' + map + '"]').find('area').each(function() {
              var $this = $(this);
              if (!$this.data(c))
                $this.data(c, $this.attr(c));

              let coords = $this.data(c).split(','),
                coordsPercent = new Array(coords.length);

              for (var i = 0; i < coordsPercent.length; ++i) {
                if (i % 2 === 0)
                  coordsPercent[i] = parseInt(((coords[i]/w)*100)*wPercent);
                else
                  coordsPercent[i] = parseInt(((coords[i]/h)*100)*hPercent);
              }
              $this.attr(c, coordsPercent.toString());
            });
          }).attr('src', $that.attr('src'));
        });
      };
      $(window).resize(rwdImageMap).trigger('resize');

      return this;
    };
  })(jQuery);
  $('img[usemap]').rwdImageMaps();
});

jQuery(function($) {

  ///////////////////////////////////////////////
  // ドラッグスクロール
  ///////////////////////////////////////////////
  $.fn.dragScroll = function(){
    let target = this;
    $(this).mousedown(function (event){
      $(this)
        .data('down', true)
        .data('x', event.clientX)
        .data('y', event.clientY)
        .data('scrollLeft', this.scrollLeft)
        .data('scrollTop', this.scrollTop);
      return false;
    }).css({
      'overflow': 'hidden', // 現在スクロールバー非表示。表示の場合'scroll'を設定して下さい
      'cursor': 'auto'
    });
    // ウィンドウから外れてもイベント実行
    $(document).mousemove(function (event){
      if ($(target).data('down') == true){
        // スクロール
        target.scrollLeft($(target).data('scrollLeft') + $(target).data('x') - event.clientX);
        target.scrollTop($(target).data('scrollTop') + $(target).data('y') - event.clientY);
        return false; // 文字列選択を抑止
      }
    }).mouseup(function (event){
      $(target).data('down', false);
    });
    return this;
  }

  ///////////////////////////////////////////////
  // マップ切り替え処理
  ///////////////////////////////////////////////
  $('.nav-tabs a').click( function(){
    setTimeout(function(){
      $(window).resize();
    },1500);
  });

  ///////////////////////////////////////////////
  // マップ拡大処理
  ///////////////////////////////////////////////
  // 拡大
  $('.btn-zoom-plus').click( function(){
    if( !$(this).hasClass('btn-zoom-active') ){
      // 連続クリック対策
      $(this).addClass('btn-zoom-active');
      $('.btn-zoom-minus').removeClass('btn-zoom-active');

      var target_map = $('.nav-tabs .active').attr('aria-controls');
      var target_container = '#' + target_map;

      //--------------------------
      // マップ拡大
      //--------------------------
      // コンテナ設定
      var img_height = $(target_container + ' .zoom_map').height();
      var img_width = $(target_container + ' .zoom_map').width();
      $('.zoom_map__container').addClass('image_zoom');
      $(target_container + ' .zoom_map__wrapper').attr( 'style', 'height: ' + img_height + 'px' );

      // 画像をオリジナル幅にしてドラッグ有効化
      var org_width = $(target_container + ' .zoom_map').width();
      var org_height = $(target_container + ' .zoom_map').height();
      $(target_container + ' .zoom_map__wrapper').scrollLeft(org_width * 0.25);
      $(target_container + ' .zoom_map__wrapper').scrollTop(org_height * 0.25);

      if (!_ua.Tablet && !_ua.Mobile) {
        // PC表示
        $(target_container + ' .zoom_map__wrapper').dragScroll();
      }else{
        // SP表示
        $(target_container + ' .zoom_map__wrapper').addClass('image_zoom_sp');
      }

      $(window).resize();

    }
  });

  // 縮小
  $('.btn-zoom-minus').click( function(){
    if( !$(this).hasClass('btn-zoom-active') ){
      // 連続クリック対策
      $(this).addClass('btn-zoom-active');
      $('.btn-zoom-plus').removeClass('btn-zoom-active');

      var target_map = $('.nav-tabs .active').attr('aria-controls');
      var target_container = '#' + target_map;

      // マップ縮小
      $('.zoom_map__container').removeClass('image_zoom');
      $(target_container + ' .zoom_map__wrapper').attr( 'style', '' );

      // ドラッグ無効化
      $(target_container + ' .zoom_map__wrapper').removeClass('image_zoom_sp');

      $(window).resize();

    }
  });

  ///////////////////////////////////////////////
  // ロールオーバー実装
  ///////////////////////////////////////////////
  $('area').hover(
    function() {
      if (!_ua.Tablet && !_ua.Mobile) {
        // 画像切り替え
        var target = $(this).data('target');
        if( target != undefined ) {
          $('#' + target).attr('src', $(this).data('src'));
        }
        // ポップアップ表示
        var shopid = $(this).data('shopid');
        if( shopid != undefined ) {
          var maptype = $(this).attr('shape');
          var mapposition = $(this).attr('coords').split(',');
          if( maptype == 'circle' ) {
            // 円形の場合
            var map_left = Number( mapposition[0] ) - 160;
            var map_top = Number( mapposition[1] ) - 165;
          }else{
            // その他
            var map_center = ( mapposition[2] - mapposition[0] ) / 2;
            if( map_center < 0 ){
              map_center = 0;
            }
            var map_left = Number( mapposition[0] ) + Number( map_center ) - 160;
            var map_top = mapposition[1] - 125;
          }
          $('#shopinfo-'+shopid).css('left', map_left )
            .css( 'top', map_top )
            .fadeIn();
        }
      }
    },
    function() {
      if (!_ua.Tablet && !_ua.Mobile) {
        // 画像切り替え
        var target = $(this).data('target');
        if( target != undefined ) {
          $('#' + target).attr('src', $('#' + target).data('src'));
        }
        // ポップアップ非表示
        var shopid = $(this).data('shopid');
        if( shopid != undefined ) {
          if ($('#shopinfo-'+shopid+':hover').length == 0) {
            if ($('area[data-shopid='+shopid+']').css('display') != 'none') {
              // ポップアップ非表示
              $('#shopinfo-'+shopid).fadeOut();
            }
          }
        }
      }
    }
  );

  // ポップアップから外れた場合
  $('.shopinfo').mouseleave(function(){
    var mapid = $(this).data('mapid');
    if ( $('area:hover').length === 0 || ( $('area:hover').length !== 0 && $('area:hover').data('shopid') !== mapid ) ) {
      // ポップアップ非表示
      $(this).fadeOut();
    }
  });

  ///////////////////////////////////////////////
  // ポップアップクリック処理
  ///////////////////////////////////////////////
  $('.shopinfo').click( function(){
    var mapid = $(this).data('mapid');
    location.href = 'https://app.morinomachi-grace.jp/shop/'+mapid+'/';
  });


  ///////////////////////////////////////////////
  // スマホ時ポップアップ表示処理
  ///////////////////////////////////////////////
  $(document).on( 'click', '.image_zoom area', function(e){
    if (_ua.Tablet || _ua.Mobile) {

      // 他のポップアップを非表示
      $('.shopinfo').fadeOut();

      // ポップアップ表示
      var shopid = $(this).data('shopid');
      if( shopid != undefined ) {
        e.preventDefault();
        var maptype = $(this).attr('shape');
        var mapposition = $(this).attr('coords').split(',');
        if( maptype == 'circle' ) {
          // 円形の場合
          var map_left = Number( mapposition[0] ) - 130;
          var map_top = Number( mapposition[1] ) - 155;
        }else{
          // その他
          var map_center = ( mapposition[2] - mapposition[0] ) / 2;
          if( map_center < 0 ){
            map_center = 0;
          }
          var map_left = Number( mapposition[0] ) + Number( map_center ) - 130;
          var map_top = mapposition[1] - 115;
        }
        $('#shopinfo-'+shopid).css('left', map_left )
          .css( 'top', map_top )
          .fadeIn();
      }
    }
  });

  /*
  $(document).on( 'click', '.image_zoom .zoom_map', function(e){
    if( $('area:hover').length === 0 && $('.shopinfo:hover').length === 0 ){
      // 他のポップアップを非表示
      $('.shopinfo').fadeOut();
    }
  });
   */

});