var moreAsync = {
  //読み込み先エレメント
  el:$('#more_loadarea'),
  dataObj:[],
  //data
  data:{
    loadNum:20,                   //デフォルト 表示数
    fadeSpeed:500,                
    loadText:'読み込み中',
    btnText:'More',       
    dataFile:'',                  //読み込みデータ
    requestShop:'',               //店舗
    asyncData:{
      mode:'fetch'
    },     //デフォルト post mode
  },
  //読み込みデータ
  setDataFile:function(file_path){
    'use strict';
    var $this = this;
    $this.data.dataFile = file_path;
    return this;
  },
  //データファイルのセット
  setLoadNum:function(num){
    'use strict';
    var $this = this;
    $this.data.loadNum = num;
    return this;
  },
  //post dataのセット
  setAsyncData:function(data){
    'use strict';
    var $this = this;
    $this.data.asyncData = data;
    return this;
  },
  // リクエストショップのセット
  setRequestShop:function(){
    'use strict';
    //GETパラメーター取得
    var $this = this;
    var url = location.href;
    var params = url.split("?");
    if(params.length === 2){
      
      var spparams = params[1].split("&");
      var paramObj = {};
      
      for(var i = 0; i < spparams.length; i++){
        var keys = spparams[i].split("=");
        paramObj[keys[0]] = keys[1];
      }
      
      //getにshopがあれば
      if(paramObj.shop !== undefined){
        $this.data.asyncData.shop = paramObj.shop;
      }
    }
    return this;
  },
  //ここの部分はインスタンス化時にオーバーライドしてください
  setHtml:function(i){
    var template = '<li class="loadItem cf '+ $this.el.dataObj[i].shop +'">'
    + '</li>';
    $(template).appendTo($this.el).css({opacity:'0'}).animate({opacity:'1'},$this.data.fadeSpeed);
    
  },
  //データ取得
  setDataObj:function(){
    $this = this;
    return new Promise(function(resolve,reject){
      $.getJSON($this.data.dataFile,$this.data.asyncData,function(res){
        $this.dataObj = res;
        resolve(res);
      })
      .fail(function(error){
        //console.log('null')
        //reject();
      });
    })
  },

  //init
  init:function(){
    'use strict';
    var $this = this;
    this.setDataObj().then(function(){
      $this.el.after('<div class="btnMore">' + $this.data.btnText + '</div>');
      var setMore = $this.el.next('.btnMore');
      setMore.click(function(){
        var dataLengh = $this.dataObj.length,
        done_view = false,
        loadItemLength = $this.el.find('.loadItem').length,
        setAdj = (dataLengh)-(loadItemLength),
        setBeg = (dataLengh)-(setAdj);
        if(!(dataLengh == loadItemLength)){
          $this.el.append('<div id="nowLoading">' + $this.data.loadText + '</div>');
          if(loadItemLength == 0){
            if(dataLengh <= $this.data.loadNum){
              for (var i=0; i<dataLengh; i++) {
                $this.setHtml(i);
                //$('<div id="item' + data[i].itemNum + '" class="loadItem">' + data[i].itemSource + '</div>').appendTo($this.el).css({opacity:'0'}).animate({opacity:'1'},$this.data.fadeSpeed);
              }
              done_view = true;
              setMore.remove();
            } else {
              for (var i=0; i<$this.data.loadNum; i++) {
                $this.setHtml(i);
                //$('<div id="item' + data[i].itemNum + '" class="loadItem">' + data[i].itemSource + '</div>').appendTo($this.el).css({opacity:'0'}).animate({opacity:'1'},$this.data.fadeSpeed);
              }
              done_view = true;
            }
          } else if(loadItemLength > 0 && loadItemLength < dataLengh){
            if($this.data.loadNum < setAdj){
              for (var i=0; i<$this.data.loadNum; i++) {
                var v = i+setBeg;
                $this.setHtml(v);
                //$('<div id="item' + data[v].itemNum + '" class="loadItem">' + data[v].itemSource + '</div>').appendTo($this.el).css({opacity:'0'}).animate({opacity:'1'},$this.data.fadeSpeed);
              }
              done_view = true;
            } else if($this.data.loadNum >= setAdj){
              for (var i=0; i<setAdj; i++) {
                v = i+setBeg;
                $this.setHtml(v);
                //$('<div id="item' + data[v].itemNum + '" class="loadItem">' + data[v].itemSource + '</div>').appendTo($this.el).css({opacity:'0'}).animate({opacity:'1'},$this.data.fadeSpeed);
              }
              done_view = true;
              setMore.remove();
            }
          } else if(loadItemLength == dataLengh){
            return false;
          }
        } else {
          return false;
        }
        if(done_view){
          $('#nowLoading').each(function(){
            $(this).remove();
          });
        }
      });
    });
  },
}