{extend name="layout/layout" /}
{block name="title"}分类{/block}
{block name="css"}
<!-- 这里引入css -->
<link href="{:client_asset('/css/frontend/common.css')}" rel="stylesheet" type="text/css">
<link href="{:client_asset('/css/frontend/classify.css')}" rel="stylesheet" type="text/css">
{/block}
{block name="zepto"}
<!-- 这是zepto插件 -->
{/block}
{block name="menu_title"}分类{/block}
{block name="main"}


<!-- 这是正文 -->

<div class="body_sytle">
	
	<div class="c_list_box">
		
		<div class="c_list_tab_box">
			<a href="javascript:;" {neq name="sex" value="2"} class="hover" {/neq} sex="1">男生</a>
			<a href="javascript:;" {eq name="sex" value="2"} class="hover" {/eq} sex="2">女生</a>
		</div>
		
		<ul class="c_list_ul"></ul>
	</div>
	
</div>



{/block}
{block name="footer"}
<!-- 这里引入底部footer -->

<!--活动弹框-->
<div {empty name="activityRes"}style="display: none;" {else /}data-type="1"{/empty} class="christmas_popup_box">
<div class="christmas_body">
	<div class="christmas_main">
		<a href="javascript:;" class="christmas_close_2"></a>
		{notempty name="$activityRes"}
		<a href="/s/0?rid={$activityRes.id}&aid={$activityRes.aid}" class="christmas_main_but"><img src="{$activityRes.popimage}" /></a>
		{/notempty}
	</div>
</div>
<div class="christmas_jgb"></div>
</div>

{/block}
{block name="js"}
<!-- 这里引入js -->
<script type="text/javascript">
	$(function(){
		var sex  = {$sex};
		loadCategories(sex);
		$(".c_list_tab_box > a").click(function(){
			$(this).addClass("hover");
			$(this).siblings().removeClass("hover");
			var sex = $(this).attr("sex");
			loadCategories(sex);
		});
	})

	function loadCategories(sex){
		var opposite = (sex==1) ? 2 : 1;
		$(".sex_"+opposite).hide();
		if(!$(".sex_"+sex).length){
			makeCategoryHtml(sex);
		}
		$(".sex_"+sex).show();
	}

	function makeCategoryHtml(sex){
		$.get("/clientwebapi/category/channelcategoriesapi",{'sex':sex},function(data){
			$.each(data,function(key,value){
			    var imgList = [
			        "{:client_asset('/img/frontend/banner/classify_icon_1.png')}",
			        "{:client_asset('/img/frontend/banner/classify_icon_2.png')}",
			        "{:client_asset('/img/frontend/banner/classify_icon_3.png')}",
			        "{:client_asset('/img/frontend/banner/classify_icon_4.png')}",
			        "{:client_asset('/img/frontend/banner/classify_icon_5.png')}",
			        "{:client_asset('/img/frontend/banner/classify_icon_6.png')}",
			        "{:client_asset('/img/frontend/banner/classify_icon_7.png')}"
                ];
				var simg = imgList[(key % 7)];
				if(value.image){
					simg = value.image;
				}
				var item = '<li class="sex_'+sex+'">';
					item +='<a href="/clientweb/category/books?book_category_id='+value.id+'" category-id="'+value.id+'">';
					item +='<span>' +value.name+ '</span>';
					item +='</a>';
					item +='</li>';
				$("ul.c_list_ul").append(item);
			});
		});
	}
</script>

{/block}