VipChat();
function VipChat(){

	review_list("chat_review_list");
	
	
	function review_list(asWrapperId){	
		var leWrapper = document.getElementById(asWrapperId);
		if(!leWrapper){
			return false;
		}
		var smartList = smartListWithPager({
			dataUrl:"http://vipchat.myspace.cn/jbft2/jsi.php?act=list_history&p={K:num}&c={K:count}",
			wrapper:leWrapper,
			getTopPager:function(){return document.getElementById("vipchat_topPager");},
			getBottomPager:function(){return document.getElementById("vipchat_bottomPager");},
			repeater:[
				'<li>',
				'	<div class="pic">',
				'		<a target="_blank" href="{K:url}"><img src="{K:img}" alt="{K:name}" /></a>',
				'	</div>',
				'	<div class="name"><a target="_blank" href="{K:url}">{K:name}</a></div>',
				'	<div class="intro">{K:desc}</div>',
				'</li>'
			].join(""),		
			emptyView:'<ul class="clearfix"><div class="isNull">没有内容啦！</div></ul>',
			pageSize:12
		});		
		smartList.buildUI();		
	}	
	

	function smartListWithPager(aoConf){
		var obj = {};
		obj.data = {};
		obj.view = {};
		obj.ctrl = {};
		obj.dom = {};
		obj.event = {};    
		
		obj.view.header = aoConf.header || "";
		obj.view.repeater = aoConf.repeater || ""; 
		obj.view.footer = aoConf.footer || "";
		obj.view.empty = aoConf.emptyView || "";
		obj.ctrl.dataUrl = aoConf.dataUrl || "";
		obj.ctrl.pageSize = aoConf.pageSize || 10;
		obj.dom.wrapper = aoConf.wrapper;
		obj.dom.getTopPager = aoConf.getTopPager;
		obj.dom.getBottomPager = aoConf.getBottomPager;
			
		obj.pager = Pager({
				wrapper:aoConf.pager,
				curPage:aoConf.curPage || 1,
				pageStep:aoConf.pageStep || 5			
			});
		obj.pager.event.clickLink = function(){
			obj.buildUI();
			return !1;
		}
		
		obj.getData = getData;
		obj.buildUI = buildUI;
		return obj;
		
		function getData(asUri,afCallback){
			var loData = obj.data[asUri];
			if(!loData){
				loadJsonP(asUri,action);			
			}else{
				obj.pager.ctrl.totalPage = Math.ceil(parseInt(loData.Total) / obj.ctrl.pageSize);
				afCallback(loData.List);
				if(obj.event.getData){
					obj.event.getData(loData);
				}			
			}
			function action(aoResp){
				var loResp = aoResp;
				obj.data[asUri] = loResp;
				obj.pager.ctrl.totalPage = Math.ceil(parseInt(loResp.Total) / obj.ctrl.pageSize);
				afCallback(loResp.List);
				if(obj.event.getData){
					obj.event.getData(loResp);
				}
			}
		}

		function buildUI(){  
			var liCurRecord = (obj.pager.ctrl.curPage-1) * obj.ctrl.pageSize;
			var lsUri = smartView(obj.ctrl.dataUrl,{num:obj.pager.ctrl.curPage,count:obj.ctrl.pageSize});
			//lsUri += "&r="+Math.random();
			obj.getData(lsUri,action);
			function action(axData){
				var lxData = axData;
				if(obj.formateData){
					lxData = obj.formateData(axData);
				}		
				if(lxData.length < 1){				
					obj.dom.wrapper.innerHTML = obj.view.empty;
					if(obj.dom.getTopPager){
						obj.pager.dom.wrapper = obj.dom.getTopPager();
						obj.pager.dom.wrapper.style.visibility="hidden";
					}
					if(obj.dom.getBottomPager){
						obj.pager.dom.wrapper = obj.dom.getBottomPager();
						if(obj.pager.dom.wrapper){
							obj.pager.dom.wrapper.style.visibility="hidden";	
						}
					}	    		
				}else{
					obj.dom.wrapper.innerHTML = [obj.view.header,smartView(obj.view.repeater,lxData),obj.view.footer].join("");	    	
					if(obj.dom.getTopPager){
						obj.pager.dom.wrapper = obj.dom.getTopPager();
						obj.pager.dom.wrapper.style.visibility="visible";
						obj.pager.buildUI();	
					}
					if(obj.dom.getBottomPager){
						obj.pager.dom.wrapper = obj.dom.getBottomPager();
						obj.pager.dom.wrapper.style.visibility="visible";
						obj.pager.buildUI();
					}			
				}
				  
				if(obj.modifyUI){
					obj.modifyUI();
				}
				if(obj.event.buildUI){
					obj.event.buildUI();
				}			
			}
		}    
		function smartView(asHTML, axData){
			var lxLeft = asHTML.split("{K:");
			var lxHTML = [];
			if(!axData){
				return false;
			}
			if(axData.constructor != Array){
				if(axData.constructor == Number){
					var liIndex = axData;
					axData = [];				
					axData[liIndex - 1] = {};
				}else{
					axData = [axData];	
				}
			}
			for (var i = 0; axData && i < axData.length; i++) {
				for (var j = 0; j < lxLeft.length; j++) {
					var lsProp = lxLeft[j].substring(0, lxLeft[j].indexOf("}"));
					if (lsProp != "") {
						if(lsProp == "k"){            		
							lxHTML[lxHTML.length] = i;
							lxHTML[lxHTML.length] = lxLeft[j].substring(lxLeft[j].indexOf("}") + 1);
						}else{
							lxHTML[lxHTML.length] = axData[i][lsProp];
							lxHTML[lxHTML.length] = lxLeft[j].substring(lxLeft[j].indexOf("}") + 1);
						}
					   
					}
					else {
						lxHTML[lxHTML.length] = lxLeft[j];
					}
				}
			}
			return lxHTML.join("");
		}
		function loadJsonP(asUrl, afCallback){
			if (!asUrl) {
				return false;
			}
			var lsUrl = asUrl;
			var lsGUID="";
			if (lsUrl.indexOf("callback=") == -1) {
				lsGUID="_autoCallBack"+Math.floor(Math.random()*16000).toString(16);
				lsUrl = lsUrl + (lsUrl.indexOf("?") != -1 ? "&" : "?") + "callback=" + lsGUID;
			}
			window[lsGUID] = afCallback;
			
			var leTag = document.createElement('script');
			leTag.setAttribute('type', 'text/javascript');
			leTag.setAttribute('src', lsUrl);
			document.getElementsByTagName('head')[0].appendChild(leTag);				
		}

		function Pager(aoConf){
			var obj = {};
			if(!aoConf){
				aoConf = {};
			}
			obj.dom = {wrapper:aoConf.wrapper};
			obj.dom.getLinks = function(){
				return obj.dom.wrapper.getElementsByTagName("a");
			}
			obj.ctrl = {};
			obj.ctrl.curPage = aoConf.curPage || 1;
			obj.ctrl.totalPage = aoConf.totalPage || 20;
			obj.ctrl.pageStep = aoConf.pageStep || 5;
			obj.ctrl.href = aoConf.href || "?page=";
			
			obj.event = {};
			obj.event.clickLink = function(){
				obj.buildUI();
				return !1;
			};
			obj.event.buildUI = function(){
				obj.listen();
			};		
			obj.listen = listen;
			obj.buildUI = buildUI;
			return obj;
			
		
			function listen(){	    
				var lxLinks = obj.dom.getLinks();
				for (var i = 0; i < lxLinks.length; i++) {
					var leA = lxLinks[i];
					switch (leA.innerHTML) {
						case "首页":
							leA.onclick = clickLinkHandler(leA, "first");
							break;
						case "上一页":
							leA.onclick = clickLinkHandler(leA, "prev");
							break;
						case "下一页":
							leA.onclick = clickLinkHandler(leA, "next");
							break;
						case "末页":
							leA.onclick = clickLinkHandler(leA, "last");
							break;
						default:
							leA.onclick = clickLinkHandler(leA, "mid");
					}
				}
				function clickLinkHandler(aeA, asType){
					return function(){
						switch (asType) {
							case "first":
								obj.ctrl.curPage = 1;
								break;
							case "prev":
								--obj.ctrl.curPage;
								break;
							case "mid":
								obj.ctrl.curPage = parseInt(aeA.getAttribute("title"))
								break;
							case "next":
								++obj.ctrl.curPage;
								break;
							case "last":
								obj.ctrl.curPage = obj.ctrl.totalPage;
								break;
						}
						return obj.event.clickLink();
					}
				}
			}
			function buildUI(){
				var liStart = obj.ctrl.curPage - Math.floor(obj.ctrl.pageStep / 2);
				var liEnd = obj.ctrl.curPage + Math.floor((obj.ctrl.pageStep + 1) / 2) - 1;	
				if (liStart >= 1) {
					if (liEnd > obj.ctrl.totalPage) {
						liEnd = obj.ctrl.totalPage;
						liStart = liEnd - obj.ctrl.pageStep + 1;
						liStart = liStart > 0 ? liStart : 1;
					}
				}
				else {
					liStart = 1;
					liEnd = liStart + obj.ctrl.pageStep - 1;
					liEnd = liEnd <= obj.ctrl.totalPage ? liEnd : obj.ctrl.totalPage;
				}
				var lxHTML = [];
				lxHTML.push(['<a href="' , obj.ctrl.href , '1' , '" title="',1,'">首页</a><span>|</span><a href="' , obj.ctrl.href , (obj.ctrl.curPage - 1) , '" title="',(obj.ctrl.curPage - 1),'">上一页</a>'].join(""));
				lxHTML.push('<span>|</span>');
				for (var i = liStart; i <= liEnd; i++) {
					if (i == obj.ctrl.curPage) {
						lxHTML.push('<label>' + i + '</label>');
					}
					else {
						lxHTML.push(['<a href="' , obj.ctrl.href , i , '" title="', i ,'">' , i , '</a>'].join(""));
					}
					lxHTML.push('<span>|</span>');
				}
				lxHTML.push(['<a href="' , obj.ctrl.href , (obj.ctrl.curPage + 1) , '" title="',(obj.ctrl.curPage + 1),'">下一页</a><span>|</span><a href="' , obj.ctrl.href , obj.ctrl.totalPage , '" title="',obj.ctrl.totalPage,'">末页</a>'].join(""));
				
				if (obj.ctrl.curPage == 1) {
					lxHTML.shift();
				}
				if (obj.ctrl.curPage == obj.ctrl.totalPage) {
					lxHTML.pop();
				}
				
				obj.dom.wrapper.innerHTML = lxHTML.join("");
				obj.event.buildUI();
			}  
		}	  
	}
}