<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style>
	.tempale-category_ui { background:#fff; border:1px #aedcfe solid; border-right:none;}
</style>
<div style="text-align:center"><img src="images/Noviceguide_2.gif" alt="第一步" align="middle"/></div>
<div class="NoviceguideHead_content2">
	<div class="tacleft">
		<span style="font-size:13px; display:block; padding-bottom:4px;">
			请选择网站类型及模板&nbsp;
		</span>
		<div style="height:25px;line-height:25px;margin-top:5px;*margin-top:10px;">
			*建站模板及内容来源站长推荐，如存在版权争议，请联系优拓客服QQ:325129611
		</div>
		<div id="tempale-category" style="width:110px; padding-top:5px;top:161px;float:left; "></div>
		
		<div id="tempale-list" style="padding:5px; background:#fff; border:1px #aedcfe solid; height:255px; width:310px;float:right;"></div>

		
		<div style="clear:both; width:1px; height:0px; overflow:hidden;"></div>
		

	</div>
	<div class="tacright">
		<iframe name="wbb" id="wbb" marginheight="0" marginwidth="0" width="228px" height="314px"  style="background-color:#fff" frameborder="0" src=""></iframe>
	</div>
</div>
<div class="NoviceguideFooter">
	<input type="submit" name="Submit" value="上一步" class="dis"/>
	<input type="submit" name="Submit" value="下一步" class="next gonext" />
	<div style="clear:both; height:1px; overflow:hidden"></div>
</div>

<script src="js/jquery/jquery.cookie.js"></script>
<script>
	$(document).ready(function(){
		
		$(".gonext").click(function(){
			$(this).attr("disabled",'disabled').addClass("dis");
			init_next(3);
		});
		
		var cookie_template_cateid = $.cookie('init_template_cateid');
		
		$.ajax({
			async:false,
			cache:false,
			//contentType:'json' ,
			//data:{},
			url:'./index.php?r=Init.getAllCategory',
			type:'get',
			success:function(data){
				//alert(data);
				data = eval('{'+data+'}');
				var html = '';
				var i =0 ;
				var cid = 0;
				$(data).each(function(k,v){
					if (cookie_template_cateid) {
						if (cookie_template_cateid == v.id) {
							cid = v.id;
							html += '<div style=" height:26px; line-height:26px;"><input class="webT" type="radio" checked="checked" name="radiobutton" value="' + v.id + '" />' + v.cate_name + '</div>';
						}
						else {
							html += '<div style=" height:26px; line-height:26px;"><input class="webT" type="radio" name="radiobutton" value="' + v.id + '" />';
							html += v.cate_name  + '</div>'
							
						}
					}
					else {
						if (i == 0) {
							cid = v.id;
							$("#wbb").attr('src',v.demo_url);
							html += '<div style=" height:26px; line-height:26px;"><input class="webT" type="radio" checked="checked" name="radiobutton" value="' + v.id + '" />' + v.cate_name + '</div>';
						}
						else {
							html += '<div style=" height:26px; line-height:26px;"><input class="webT" type="radio" name="radiobutton" value="' + v.id + '" />';
							html += v.cate_name  + '</div>'
							
						}
					}
					
					i++;
				});
				$("#tempale-category").html(html);
				gettemplatelist(cid,0,0);
			}
		});
		
		$(".webT").live('click',function(){
			var id = $(this).val();
			gettemplatelist(id,0,0);
		});
		$(".template-id").live('click',function(){
			var id = $(this).val();
			var cid = $(this).attr('cate');
			$("#wbb").attr('src',$(this).attr('url'));
			$.cookie('init_template_id',id,{expires: 1});
			$.cookie('init_template_cateid',cid,{expires: 1});
		});
	});
	function gettemplatelist(cid,limit,page)
	{
		var cookie_template = $.cookie('init_template_id');
		var cookie_cateid = $.cookie('init_template_cateid');
		
		$.ajax({
			async:false,
			cache:false,
			//contentType:'json' ,
			data:{id:cid},
			url:'./index.php?r=Init.getTemplateList',
			type:'get',
			success: function(data){
				data = eval('{'+data+'}');
				var i =0 ;
				var html = '';
				$(data).each(function(k,v){
					if (cookie_template && cookie_cateid == cid) {
						if (v.id == cookie_template) {
							$("#wbb").attr('src',v.demo_url);
							html += '<div style=" color:#0197cf;font-size:13px; height:22px;line-height:22px;padding-left:5px;"><input class="template-id" url="'+v.demo_url+'" cate="'+v.cate_id+'" type="radio" checked="checked" name="template_id" value="' + v.id + '" />&nbsp;' + v.title + '</div><div style=" color:#8d8d8d; font-size:12px;padding:5px;border:1px #e2f0fd solid;background:#f7fcff;margin:auto 10px;">' + v.description + '</div>'
						}
						else {
							html += '<div style=" color:#0197cf;font-size:13px; height:22px;line-height:22px;padding-left:5px;"><input class="template-id" url="'+v.demo_url+'" cate="'+v.cate_id+'" type="radio" name="template_id" value="' + v.id + '" />&nbsp;' + v.title + '</div><div style=" color:#8d8d8d; font-size:12px;padding:5px;border:1px #e2f0fd solid;background:#f7fcff;margin:auto 10px;">' +  v.description + '</div>'
						}
					}
					else {
						if (i == 0) {
							$("#wbb").attr('src',v.demo_url);
							$.cookie('init_template_id',v.id,{expires: 1});
							$.cookie('init_template_cateid',cid,{expires: 1});
							html += '<div style=" color:#0197cf;font-size:13px; height:22px;line-height:22px;padding-left:5px;"><input class="template-id" url="'+v.demo_url+'" cate="'+v.cate_id+'" type="radio" checked="checked" name="template_id" value="' + v.id + '" />&nbsp;' + v.title + '</div><div style=" color:#8d8d8d; font-size:12px;padding:5px;border:1px #e2f0fd solid;background:#f7fcff;margin:auto 10px;">' +  v.description+ '</div>'
						}
						else {
							html += '<div style=" color:#0197cf;font-size:13px; height:22px;line-height:22px;padding-left:5px;"><input class="template-id"  url="'+v.demo_url+'" cate="'+v.cate_id+'" type="radio" name="template_id" value="' + v.id + '" />&nbsp;' + v.title + '</div><div style=" color:#8d8d8d; font-size:12px;padding:5px;border:1px #e2f0fd solid;background:#f7fcff;margin:auto 10px;">' +  v.description + '</div>'
						}
					}
					i++;
				});
				html+='';
				$("#tempale-list").empty().append($(html));
				
				$("#tempale-list").css({background:'#fff'});
			}
		});
	}
</script> 