
<div class="widget-link  widget-3" style="position: relative;">
  <div class="widget-link__more-wrap clearfix">
    <h2 class="widget-link__widget-title">
      <span>{{widget-title}}</span>
    </h2>
  </div>
  
  <ul class="widget-link__list row" data-level="0" data-list="web_link" style="position:relative; z-index: 3">
    <li class="widget-link__item  col-md-3">
      <div class="liWrapper">
            <img class="widget-link__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
      </div>
    </li>
  </ul>
  <div style="position: absolute;top: 55%;bottom: 50%;width:100%;">
	<button class="btn-left" title = "<%= (I18n.locale.to_s =="zh_tw") ? "上一張" : "prev" %>" style="float: left;height: 2.5em; width: 2.5em;background: url(/assets/link-left.png) no-repeat;border: 0;background-size: contain;position: absolute;transition:.3s; left: -1%;"></button>
	<button class="btn-right" title = "<%= (I18n.locale.to_s =="zh_tw") ? "下一張" : "next" %>" style="float: right;;height: 2.5em; width: 2.5em;background: url(/assets/link-right.png) no-repeat;background-size: contain;border: 0;position: absolute;transition:.3s;right: -2%;"></button>
  </div>
  <a class="widget-link__more btn" href="{{more_url}}"><%= t("web_link.more") %></a>
</div>

<style>
  ul.widget-link__list {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .widget-3 li {
    background-color: #fff;
    padding: 3px;
    min-height: 97px;
    max-height: 97px;
  }
  .widget-link__more {
    background-color: #811515;
    font-size: 1.4em;
    color: white !important;
    display: block;
    width: 200px;
    text-align: center;
    border-radius: 5px;
    bottom: 8px;
    margin: 50px auto 0 auto !important;
    padding: 15px 10px;
  }
  .widget-link__more:hover {
    background-color: #6b1111;
  }
</style>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
	function combineul_{{subpart-id}}(){
		var parents = $('[data-subpart-id=\"{{subpart-id}}\"] ul.widget-link__list').parent();
		parents.each(function(i,v){
			for(var i=1;i<$(v).find('ul.widget-link__list').length;i++)
				$(v).find('ul.widget-link__list').eq(0).find('>li').eq(-1).after($(v).find('ul.widget-link__list').eq(i).html());
			var ullength = $(v).find('ul.widget-link__list').length;
			for(var i = 1;i < ullength;i++)
				$(v).find('ul.widget-link__list').eq(-1).remove();
		})
	};
	var num;
	var lilength = $('[data-subpart-id=\"{{subpart-id}}\"] li.widget-link__item').length;
	function reorganize_{{subpart-id}}(num){
		var uls = $('[data-subpart-id=\"{{subpart-id}}\"] ul.widget-link__list').toArray();
		var currentul = uls.findIndex(function(v){
			return $(v).hasClass("active") && !$(v).hasClass("hidden_item");
		})
		if(currentul == -1)
			currentul = 0;
		var li_active_idx = 0;
		if(currentul != 0)
			li_active_idx = $(uls[currentul]).find("li.widget-link__item").eq(0).index("li.widget-link__item");
		combineul_{{subpart-id}}();
		var parents = $('[data-subpart-id=\"{{subpart-id}}\"] ul.widget-link__list').parent();
		parents.each(function(i,v){
			var lilength = $(v).find('li.widget-link__item').length;
			var ul_length = Math.ceil(lilength/num);
			for(var ii=1;ii< ul_length;ii++){
				var clone_ul = $(v).find('ul.widget-link__list').eq(-1).clone();
				clone_ul.empty();
				clone_ul.removeClass("active");
				clone_ul.css("display","");
				$(v).find('ul.widget-link__list').eq(-1).after(clone_ul.prop("outerHTML"));
				var lihtml="";
				if(ii != (ul_length-1)){
					for(var j=0;j<num;j++){
						lihtml += $(v).find('li.widget-link__item').eq(ii*num+j).prop("outerHTML");
					};
				}else{
					for(var j=0;j< lilength - num *(ul_length-1) ;j++){
						lihtml += $(v).find('li.widget-link__item').eq(ii*num+j).prop("outerHTML");
					};
				};
				$(v).find('ul.widget-link__list').eq(-1).html(lihtml);
			}
			if(ul_length != 1 )
				for(var i=0;i< lilength -num ; i++)
					$(v).find('ul.widget-link__list').eq(0).find("li.widget-link__item").eq(num).remove();
		})
		$('[data-subpart-id=\"{{subpart-id}}\"] ul.widget-link__list').css("display","none");
		$('[data-subpart-id=\"{{subpart-id}}\"] ul.widget-link__list').css('padding','0 1.125em');
		$('[data-subpart-id=\"{{subpart-id}}\"] button').css('z-index','10');
		$('[data-subpart-id=\"{{subpart-id}}\"] ul.widget-link__list >li').css('width','calc('+100/num+'% - '+20/16+'em)'); //20px=>li的margin
	  	//$('[data-subpart-id=\"{{subpart-id}}\"] ul.widget-link__list >li').css('float','left');
	  	var active_ul = $("[data-subpart-id=\"{{subpart-id}}\"] li.widget-link__item").eq(li_active_idx).parents("ul.widget-link__list");
		active_ul.addClass("active");
		active_ul.removeClass("hidden_item");
		active_ul.css("display","");
	};
	$(window).resize(function(){
		if($(window).width()>1024){
			reorganize_{{subpart-id}}(4);
			num=4;
		}else if($(window).width()>576){
			reorganize_{{subpart-id}}(2);
			num=2;
		}else{
			reorganize_{{subpart-id}}(1);
			num=1;
		}
	})
	$(document).ready(function(){
		if($(window).width()>1024){
			reorganize_{{subpart-id}}(4);
			num=4;
		}else if($(window).width()>576){
			reorganize_{{subpart-id}}(2);
			num=2;
		}else{
			reorganize_{{subpart-id}}(1);
			num=1;
		}
	var flag=false;
	$('.btn-left').click(function(){	
		if(!flag){
			var uls = $('[data-subpart-id=\"{{subpart-id}}\"] ul.widget-link__list:not(.hidden_item)').toArray();
			var ul_length = uls.length;
			var currentul = uls.findIndex(function(v){
				return $(v).hasClass("active");
			})
			$('[data-subpart-id=\"{{subpart-id}}\"] ul.widget-link__list').css('display','none');
			if(currentul - 1 < 0)
				currentul += ul_length;
			$('[data-subpart-id=\"{{subpart-id}}\"] ul.widget-link__list:not(.hidden_item)').removeClass("active");
			var active_item = $(uls[currentul-1]);
			active_item.addClass("active");
			active_item.find("li").css("display","block");
			flag=true;
			$('[data-subpart-id=\"{{subpart-id}}\"] ul.widget-link__list.active').eq(0).effect("slide", { direction: "left", mode: 'show', duration: 500},function(){flag=false;});
		};
	});
	$('.btn-right').click(function(){
		var lilength = $('[data-subpart-id=\"{{subpart-id}}\"] li.widget-link__item').length;
		if(!flag){
			var uls = $('[data-subpart-id=\"{{subpart-id}}\"] ul.widget-link__list:not(.hidden_item)').toArray();
			var ul_length = uls.length;
			var currentul = uls.findIndex(function(v){
				return $(v).hasClass("active");
			})
			$('[data-subpart-id=\"{{subpart-id}}\"] ul.widget-link__list').css('display','none');
			if(currentul + 1 > ul_length - 1)
				currentul -= ul_length;
			$('[data-subpart-id=\"{{subpart-id}}\"] ul.widget-link__list:not(.hidden_item)').removeClass("active");
			var active_item = $(uls[currentul+1]);
			active_item.addClass("active");
			active_item.find("li").css("display","block");
			flag=true;
			$('[data-subpart-id=\"{{subpart-id}}\"] ul.widget-link__list.active').eq(0).effect("slide", { direction: "left", mode: 'show', duration: 500},function(){flag=false;});
		};
	});
	});
</script>
