function AvatarList(List, relPath, selectedName, imPerPage) {
	this.relPath = relPath;
	this.perPage=imPerPage;
	this.root=cn('div').cls('AvatarList').sp(getDomEntry().parentNode);
	this.initNavigation();
	this.content=this.root.ac2('div').cls('AvatarContent');
	this.startPos=0;
	this.endPos=List.length>this.perPage?this.perPage:List.length;
	this.value=this.root.ac2('input').att('name', selectedName);
	this.items=List;
	this.build();
}

AvatarList.prototype={
	initNavigation:function(){
		this.nav=this.root.ac2('div').cls('AvatarNavigation');
		$E.Add(this.navBack=this.nav.add('a','<<').cls('back'),'click',this.goBack.bind(this));
		$E.Add(this.navForward=this.nav.add('a','>>').cls('forward'),'click',this.goForward.bind(this));
	},
	checkNavigation:function(){
		if(this.endPos==this.items.length){
			this.navForward.ss({display:'none'});
		}else{
			this.navForward.ss({display:''});
		}
		if(this.startPos==0){
			this.navBack.ss({display:'none'});
		}else{
			this.navBack.ss({display:''});
		}
	},
	build:function(){
		clearNode(this.content);
//		$E.CleanTmp('AvatarList');
		for(var i=this.startPos;i<this.endPos;i++){
			if(!this.items[i]){
				continue;
			}
			var img=this.content.ac2('img').att('src',this.relPath+this.items[i][0]).att('alt',this.items[i][1]);
			if(img.src==this.value.value){
				img.cls('selected');
			}
			$E.AddTmp('AvatarList',img,'click',this.setAsSelected.bind(this));
		}
		//this.setAsSelected({el:this.root.getElementsByTagName('img')[0]});
		this.checkNavigation();
	},
	goBack:function(){
		if(this.startPos>this.perPage){
			this.startPos-=this.perPage;
			this.endPos-=this.perPage;
		}else{
			this.endPos=this.perPage;
			this.startPos=0;
		}
		this.build();
	},
	goForward:function(){
		if((this.items.length-this.endPos)>this.perPage){
			this.startPos+=this.perPage;
			this.endPos+=this.perPage;
		}else{
			if((this.startPos+this.perPage)<this.items.length){
				this.startPos+=this.perPage;
			}
			this.endPos=this.items.length;
		}
		this.build();
	},
	setValue:function(fileName){
		this.value.value=fileName;
	},
	setAsSelected:function(e){
		this.setValue(e.el.src);
		var imgs=this.content.getElementsByTagName('img'),img=null,i=0;
		while(img=imgs[i++]){
			img.cls('');
		}
		e.el.cls('selected');
	}
};