;(function($){
	window.tw2widget = window.tw2widget ||{}; 
	
	// === AVATAR CODE ===
	// Inflating the data definition here to a convenient format
	var inflate = function(data) {
		var code = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ$()=?&%![]{}+-#.:;";
		var fromb80 = function(num) {
			return code.indexOf(num.charAt(1))+code.indexOf(num.charAt(0))*code.length;
		}
		var out = {}
		var imgs = data.i.split(/ /);
		var strls = data.s.split(/,/);
		var picpo = [];
		var i,s,j;
		var expand = function(x){ return strls[fromb80(x)];	}
		for (i=0;i<strls.length;i+=1) {
			strls[i] = strls[i].match(/_/)?strls[i].replace(/[^_]+/g,expand):strls[i];
		}
		
		for (i=0;i<data.p.length;i+=10) {
			picpo.push({
				x:fromb80(data.p.substr(i,2)),
				y:fromb80(data.p.substr(i+2,2)),
				w:fromb80(data.p.substr(i+4,2)),
				h:fromb80(data.p.substr(i+6,2)),
				src:fromb80(data.p.substr(i+8,2))
			});
		}
		
		for (i=0;i<imgs.length;i+=2) {
			var path = imgs[i].replace(/[^/]+/g,expand);
			var picdef = imgs[i+1];
			for (j=0;j<picdef.length;j+=4) {
				var picinfo = picpo[fromb80(picdef.substr(j,2))];
				var fileinfo = strls[fromb80(picdef.substr(j+2,2))];
				var file = fileinfo.substr(0,fileinfo.length-4);
				var minx = fromb80(fileinfo.substr(fileinfo.length-4,2));
				var miny = fromb80(fileinfo.substr(fileinfo.length-2,2));
				out[path+"/"+file+".png"] = {k:path+"/"+file+".png", x:picinfo.x,y:picinfo.y,w:picinfo.w,h:picinfo.h,src:picinfo.src,ox:minx,oy:miny};
			}
		}
		return out;
	}
	// decompress the downloaded js file content into something meaningful
	window.avatar_72x72_data = inflate(window.avatar_72x72_data);
	window.avatar_135x135_data = inflate(window.avatar_135x135_data);
	window.avatar_150x170_data = inflate(window.avatar_150x170_data);
	// now, we have a simple structure in the avatar_..._data objects:
	// "filename":{x,y: coordinate on picture; w,h:width and height of the picture; src: the image where the sprite is painted on (numerical); ox,oy: Offset to top/left corner} 

	// avatarLayers are the layers we have with body parts of the avatar
	window.avatarLayers = ["head","eyes","nose","mouth","hatsb","hair","clothing","beards1","skin_1","skin_2","beards2","accessoires_1","accessoires_2","wounds","hatsa","pose"];
	
	/**
	 * @param div: The div element we place the content in.
	 * @param size: String that is either "big", "large" or "small"
	 * @param config: The configuration of the avatar. Must contain the following list of elements:
	 * 	{ (background,head,eyes,nose,mouth,hatsb,hair,clothing,beards1,skin_1,skin_2,beards2,accessoires_1,accesoires_2,wounds,hatsa,pose):imagename}
	 */
	window.tw2widget.avatarPicture = function (div, size, config) {
		var avatar_data,pic;
		var bg = avatar_backgrounds[config.background];
		var ww,hh;
		switch(size) {
			case 'big':
				avatar_data = window.avatar_135x135_data;
				pic = '/images/avatargen/avatar_135x135-';
				hh = ww = 136;
				break;
			case 'large':
				avatar_data = window.avatar_150x170_data;
				pic = '/images/avatargen/avatar_150x170-';
				hh = 176;
				ww = 152;
				break;
			case 'small':
				hh = ww = 72;
				avatar_data = window.avatar_72x72_data;
				pic = '/images/avatargen/avatar_72x72-';
				break;
		}
		div = $("<div></div>").attr('class',$(div).attr('class')).addClass("avatar_"+size).appendTo($(div).addClass("avatar_pic").empty())
			.append("<div class='avatar_background' style='background-position:-"+bg[1]*ww+"px -"+bg[0]*hh+"px'></div>");
		for (var i=0;i<avatarLayers.length;i+=1) {
			var part = avatarLayers[i];
			var path = config[part];
			if (!path) continue;
			if (!path.match(/\.png$/)) path += '.png';
			var img = avatar_data[path.replace(/^\//,'')];
			if (!img) continue;
			div.append("<div style='left:"+img.ox+"px;top:"+img.oy+"px;width:"+img.w+"px;height:"+img.h+"px'>" +
					"<img class='avatar_"+part+"' src='"+pic+img.src+".png?21' " +
					"style='left:-"+img.x+"px;top:-"+img.y+"px' /></div>")
		}
		div.append("<div class='avatar_overlay'></div>");
	}
})(jQuery);