#if($DataList.Count > 0)
<div class="bolgDashBoard_filter filter_Box $EffectThemeName" id="bolgDashBoard_filter${ModuleID}" data-categoryid="" data-categorys="${ChooseCategories}" data-tags="${ChooseTags}" data-feature="${ArticleFeature}"  data-pageindex="0" data-loaddisplay="${xf.ViewEffectSetting("LoadDisplay","3")}" data-firstscreen="${PageSize}" data-sequence="${ArticleSequence}" data-order="${Order}" data-thumbnail_width="${xf.ViewEffectSetting("thumbnail_width","400")}" ${xf.AjaxParameters}>
  <div class="filter_block">
  #if( ${xf.ViewEffectSetting("DisplayCs","true")} == "true")    
    <div class="filters"> 
    #if( ${xf.ViewEffectSetting("DisplayAll","true")} == "true")    
    <a href="javascript:;" data-id="-1" >All</a> 
    #end
   #foreach($CategorieItem in $CategoryList) 
    <a href="javascript:;" data-id="${CategorieItem.ID}">${CategorieItem.Name}</a> 
   #end 
    </div>
 #else
    <div class="filters" style="display:none;"> 
       #foreach($CategorieItem in $CategoryList) 
        <a href="javascript:;" data-id="${CategorieItem.ID}">${CategorieItem.Name}</a> 
       #end 
	</div> #end 
 
 
 
    <div style="clear: both;"></div>
  </div>
  <div class="Portfolio_loader"><span></span></div>
  <div class="portfolio_block image-grid">
  
  #foreach($DataItem in $DataList)
<div class="element isotope-item">
  <div class="view-tenth">
  
  #if( ${xf.ViewEffectSetting("ImagesShow","true")} == "true")    
	<div class="item_image">
		<a href="${xf.GoUrl($DataItem)}"><img alt="${xf.ViewContent("Title",$DataItem)}" title="${xf.ViewContent("Title",$DataItem)}" src="${xf.ThumbnailUrl($DataItem,${xf.ViewEffectSetting("thumbnail_width",400)},400,"W")}" /> <span class="image_dim"></span></a>
	</div>
  #end
  
  #if( ${xf.ViewEffectSetting("TitleShow","true")} == "true" || ${xf.ViewEffectSetting("DateShow","true")} == "true" || ${xf.ViewEffectSetting("ContentShow","true")} == "true")   
    <div class="portfolio_descr">
        #if( ${xf.ViewEffectSetting("TitleShow","true")} == "true")             
            <div class="name"> 
                <a href="${xf.GoUrl($DataItem)}" title="${xf.ViewContent("Title",$DataItem)}">${xf.ViewContent("Title",$DataItem)}</a> 
            </div>
        #end
        #if( ${xf.ViewEffectSetting("DateShow","true")} == "true")             
            <div class="date" data-datetime="${number}">
               ${PTime}
            </div>
        #end
        #if( ${xf.ViewEffectSetting("ContentShow","true")} == "true")             
            <p> ${xf.ViewSummary($DataItem,500,"...")}</p>
        #end
    </div>
  #end  
  </div>
</div>
  #end
  </div>
  <div class="meassage_box"> <a class="moremeassage" href="javascript:;"><span class="fa showloading"></span> ${xf.ViewEffectSetting("MoreText","MORE")}</a> </div>
</div>
<script id="AjaxSliders${ModuleID}" type="text/x-jquery-tmpl">
<div class="element isotope-item">
  <div class="view-tenth">
  
  #if( ${xf.ViewEffectSetting("ImagesShow","true")} == "true")    
	<div class="item_image">
		<a href="${ArticleUrl}"> <img alt="${Title}" title="${Title}" src="${ThumbnailUrl}" /> <span class="image_dim"></span></a>
	</div>
  #end
  
  #if( ${xf.ViewEffectSetting("TitleShow","true")} == "true" || ${xf.ViewEffectSetting("DateShow","true")} == "true" || ${xf.ViewEffectSetting("ContentShow","true")} == "true")   
    <div class="portfolio_descr">
        #if( ${xf.ViewEffectSetting("TitleShow","true")} == "true")             
            <div class="name"> 
                <a href="${ArticleUrl}" title="${Title}">${Title}</a> 
            </div>
        #end
        #if( ${xf.ViewEffectSetting("DateShow","true")} == "true")             
            <div class="date" data-datetime="${number}">
               ${PTime}
            </div>
        #end
        #if( ${xf.ViewEffectSetting("ContentShow","true")} == "true")             
            <p>${Summary}</p>
        #end
    </div>
  #end  
  </div>
</div>
</script>
<style>
	#bolgDashBoard_filter${ModuleID} .filters a.active, 
	#bolgDashBoard_filter${ModuleID} .filters a.active:hover,
	#bolgDashBoard_filter${ModuleID} .filters  a:hover{
		color:${xf.ViewEffectSetting("FilterAccentColour","#2e84eb")};
	}
	.bolgDashBoard_filter .filter-switch{
		background-color:${xf.ViewEffectSetting("FilterAccentColour","#2e84eb")};
	}
	.bolgDashBoard_filter .view-tenth:hover .portfolio_descr{
		background-color:${xf.ViewEffectSetting("ContentAccentColour","#2e84eb")};
	}
	#bolgDashBoard_filter${ModuleID} .image-grid{
		margin-left:-${xf.ViewEffectSetting("ItemSpacing","12")}px;
	}
	#bolgDashBoard_filter${ModuleID} .image-grid .view-tenth{
		margin-left:${xf.ViewEffectSetting("ItemSpacing","12")}px;
		margin-bottom:${xf.ViewEffectSetting("ItemSpacing","12")}px;
	}
	#bolgDashBoard_filter${ModuleID} .moremeassage {
		opacity:0.8;
		background-color:${xf.ViewEffectSetting("morebg","#3b9cf7")};
	}
	#bolgDashBoard_filter${ModuleID} .moremeassage:hover {
		opacity:1;
	}
	
	
morebg	
</style>
<!---->
<script type="text/javascript">
     jQuery(document).ready(function($) {
        var m = jQuery("#bolgDashBoard_filter${ModuleID}"),
			l=m.find(".portfolio_block"),
			lazyload=0,
			container,
			t_img,
			isLoad = true,
			times=0,
			n=1,
			ScrollMaxPage=0,
			times=0,
			stops=true,
			newitm=true,
			ScrollMaxPage=0,
			szie = {
			  MobileSmall : [320,${xf.ViewEffectSetting("thMobileSmall","1")}],
			  Mobile : [479,${xf.ViewEffectSetting("thMobile","2")}],
			  Tablet : [768,${xf.ViewEffectSetting("thTable","3")}],
			  DesktopSmall : [979,${xf.ViewEffectSetting("thDesktopSmall","3")}],
			  Desktop : [1199,${xf.ViewEffectSetting("thDesktop","4")}]
			},
			itme=${xf.ViewEffectSetting("thitems","4")};
		var timedifference=new Date().getTimezoneOffset()*60000;
			
			function ImgLoad(callback,e){
				var imgdefereds=[];
				e.find('img').each(function(){
					var dfd=jQuery.Deferred();
						$(this).bind('load',function(){
							dfd.resolve();
						}).bind('error',function(){
						})
						if(this.complete) setTimeout(function(){
							dfd.resolve();
						},1000);
						imgdefereds.push(dfd);
				})
				jQuery.when.apply(null,imgdefereds).done(function(){
					callback();
				});
			}
			function responsive(list){
				w=$(window).width();
				if(w<=szie.MobileSmall[0]){
						list.width(100/szie.MobileSmall[1]+"%")
				}else if(w<=szie.Mobile[0]){
						list.width(100/szie.Mobile[1]+"%")
				}else if(w<=szie.Tablet[0]){
						list.width(100/szie.Tablet[1]+"%")
				}else if(w<=szie.DesktopSmall[0]){
						list.width(100/szie.DesktopSmall[1]+"%")
				}else if(w<=szie.Desktop[0]){
						list.width(100/szie.Desktop[1]+"%")
				}else{
						list.width(100/itme+"%")
				}
			}	
		var operation = function(e, minWidth) {
			if(n==1){
				container = l.isotope({
					itemSelector: '.isotope-item'
					
				});
			}else{
				e.isotope();
			}
		};
		operation(m);
		
        var LoadAjaxItems${ModuleID} = function () {
			stops=false;
			m.data("loaddisplay",${xf.ViewEffectSetting("LoadDisplay","3")});
			
			if(newitm){
				if(m.find(".filters .active").length==0){
					m.find(".filters a").eq(0).addClass("active")
				}
				m.data("categoryid",m.find(".filters .active").data("id"));
				m.data("pageindex",0);
				m.data("loaddisplay",${PageSize});
				l.isotope('remove',m.find(".isotope-item"));
				l.addClass("xbd-loading");
			}
			m.addClass("xbd-loading2");
			
            $(m).PostService({ 
                callback: function (items,pages,IsEnd) {
					var box = $("<div>");
					jQuery.each(items, function (i, item) {
						
					var ST = new Date(parseInt(item.PublishTime.replace(/\/Date\((\d+)\)\//gi, '$1'))+timedifference),
						ET = new Date(parseInt(item.PublishTime.replace(/\/Date\((\d+)\)\//gi, '$1'))+timedifference);
						
						item.PTime = ST.format("${xf.ViewEffectSetting("dateformat","MM/dd/yyyy hh:mm:ss tt")}");
						item.number = ET.format("yyyyMMddhhmmss");
						item.Summary =item.Summary.length >${xf.ViewEffectSetting("Summarynumber","300")}?item.Summary.substr(0,${xf.ViewEffectSetting("Summarynumber","300")})+"...":item.Summary;
						box.append(jQuery("#AjaxSliders${ModuleID}").tmpl(item));
					});
					times=0;
					ImgLoad(function(){
						responsive(box.find(".isotope-item"));
						l.isotope('insert',box);
						box.remove();
						l.removeClass("xbd-loading");
						m.removeClass("xbd-loading2");
						stops=true;
						if(IsEnd){
							m.find(".moremeassage").removeClass("active");
						}else{
							m.find(".moremeassage").addClass("active");
						}
					},box)	
                }
            });
		}
		LoadAjaxItems${ModuleID}();
		
		m.find(".filters a").on("click",function(){
			if(stops && !$(this).hasClass("active")){
				$(this).addClass("active").siblings().removeClass("active");
				newitm=true;
				LoadAjaxItems${ModuleID}();
			}
		})
		
		#if(${xf.ViewEffectSetting("loadeddata","On Scroll")}=="On Scroll")		
			$(window).scroll(function() {
				if ($(window).scrollTop() + $(window).height() > m.find(".moremeassage").offset().top && stops) {
					if(ScrollMaxPage < ${xf.ViewEffectSetting("ScrollMaxPage","3")}){
						newitm=false;
						ScrollMaxPage++;
						LoadAjaxItems${ModuleID}();
					}
				}
			});
			
		#else
			$("#isotope${ModuleID} a.moremeassage").show();
		#end
		
		m.find(".moremeassage").on("click",function(){
			newitm=false;
			LoadAjaxItems${ModuleID}();
		})


     
		
    jQuery(window).resize(function() {responsive(m.find(".isotope-item"));});


	 });
 </script> 
#end