var HtmlRepeater = function(id) {
	this._id=id;//div之id
	this._value_map={};//基本变量替换
	this._arr_map={};//循环体对应数组
	this._callback_map={};//循环体的callback
	
	
	this._out_html="";
	this.TEMPLATE=document.getElementById(this._id).innerHTML;//第一次保存原始模板

	this.HTML_PARAM_MARK_BEGIN="<!--%";
	this.HTML_PARAM_MARK_END="%-->";
	
	this.HTML_REPEATER_BEGIN="<!--%$";
	this.HTML_REPEATER_END="_begin$%-->";
};

HtmlRepeater.getInstance = function(id) {
		if ( !this._pool )
			this._pool={};
		if ( !this._pool[id] )
		{
			this._pool[id]=new HtmlRepeater(id);
		}
		
		return this._pool[id];
}

HtmlRepeater.prototype = {
	
	run : function (method) {
		
		var index_begin=0, index_end=0;
		var repeater_begin=0, repeater_end=0;
		var tag="";
		var end_tag="";//<!--%$xxx_end$%-->
		
		while(1)
		{
			index_end=this.TEMPLATE.indexOf(this.HTML_REPEATER_BEGIN, index_begin);
			if ( index_end<0 )
			{
				this.doTemplate(this.TEMPLATE.substr(index_begin));
				break;
			}
			else
				this.doTemplate(this.TEMPLATE.substr(index_begin, index_end-index_begin));//前面的自由块
			
			repeater_begin=index_end+this.HTML_REPEATER_BEGIN.length;
			repeater_end=this.TEMPLATE.indexOf(this.HTML_REPEATER_END, repeater_begin);
			if ( repeater_end<0 )
				break;
			tag=this.TEMPLATE.substr(repeater_begin, repeater_end-repeater_begin);
			
			repeater_begin=repeater_end+this.HTML_REPEATER_END.length;
			end_tag="<!--%$"+tag+"_end$%-->";
			repeater_end=this.TEMPLATE.indexOf(end_tag, repeater_begin);
			
			this.doRepeat(this.TEMPLATE.substr(repeater_begin, repeater_end-repeater_begin), tag);
			
			index_begin=index_end=repeater_end+end_tag.length;
		}
		
		if ( !method )
		{
			document.getElementById(this._id).innerHTML=this._out_html;
		}
		else if ( method=="head" )//在头部添加
		{
			var tmp=this._out_html+document.getElementById(this._id).innerHTML;
			document.getElementById(this._id).innerHTML=tmp;
		}
		else if ( method=="tail" )//尾部添加
		{
			document.getElementById(this._id).innerHTML+=this._out_html;
		}
		else
			document.getElementById(this._id).innerHTML=this._out_html;
		
		document.getElementById(this._id).style.display="block";
		this.clear();//清空这次数据
	},
	
	clear : function (){
		this._out_html="";
		this._value_map={};
		this._arr_map={};
		this._callback_map={};
	},
	
	insertValue : function (name ,value) {
		this._value_map[name]=value;
		this._value_map[name+"_encode"]=encodeURIComponent(value);
	},
	
	insertArray : function (name, arr, callback) {
		this._arr_map[name]=arr;

		if(callback)
			this._callback_map[name]=callback;
	},
	
	inserObjectValue : function (obj) {
		for(var name in obj)
			this.insertValue(name, obj[name]);
	},

	doTemplate : function (p){
		var reg=null;
		for (var name in this._value_map)
		{
			reg=new RegExp("(&lt;|%3C|<)(%21|!)--%"+name+"%--(&gt;|>|%3E)", "g");
			p=p.replace(reg, this._value_map[name]);
		}
		this._out_html+=p;
	},
	
	doRepeat : function (p, name) {
		var arr=this._arr_map[name];
		if ( typeof(arr)=="undefined" )//没有设置此循环模板对应数组
		{
			return;
		}
		
		//如果设置了回调
		if(this._callback_map[name])
			return this._callback_map[name](this, p, this._arr_map[name]);

		for (var i=0; i<arr.length; i++ )
		{
			this.inserObjectValue(arr[i]);
			/*for (var name in arr[i])
				this.insertValue(name, arr[i][name]);*/
				
			this.doTemplate(p);
		}
	},

	getTemplate : function (p, begin, end) {
		var pBegin, pEnd;
		if(begin=="")
			pBegin=0;
		else
			pBegin=p.indexOf(begin);
		
		if(end=="")
			pEnd=p.length;
		else
			pEnd=p.indexOf(end);

		if(pBegin<0 || pEnd<0 || pBegin>pEnd)
			return "";
		
		pBegin+=begin.length;
		return p.substr(pBegin, pEnd-pBegin);
	}
};

/*//////////////////////////////////////testing///////////////////////////////////////////////
var g_arr = {
	head: {uin:"supergui", test1:"test1", test2:"test2"},
	list:[
	{uin:"yezhihui", i:"1"},
	{uin:"yezhihui", i:"2"},
	{uin:"yezhihui", i:"3"},
	{uin:"yezhihui", i:"4"},
	{uin:"yezhihui", i:"5"}
	],
	list2:[
	
	{uin:"fuck", i:"1"},
	{uin:"fuck", i:"2"},
	{uin:"fuck", i:"3"},
	{uin:"fuck", i:"4"},
	{uin:"fuck", i:"5"}
	
	]
};

function test()
{
	var Repeater = RepeaterManager.getInstance("test");
	
	//设置变量
	Repeater.insertValue("uin", g_arr.head.uin);
	Repeater.insertValue("test1", g_arr.head.test1);
	Repeater.insertValue("test2", g_arr.head.test2);
	
	//设置循环体对应数组
	Repeater.insertArray("list", g_arr.list);
	Repeater.insertArray("list2", g_arr.list2);
	
	Repeater.run();
}


<div id="test">
<p>大家好，我是<!--%uin%-->。靠，不是吧，我<!--%test1%-->不相信<!--%test2%-->啊</p>

<div>
<!--%$list_begin$%-->
这个一个列表啊<!--%uin%--><!--%i%-->
<!--%$list_end$%-->
</div>

<div>
<!--%$list2_begin$%-->
这是第二个列表啊<!--%uin%--><!--%i%-->
<!--%$list2_end$%-->
</div>


</div>

*/