﻿function AvatarCanvas( options ) {
	
	var that = this;
	var canvas = $( "<canvas width='78' height='100' />" )[0];
	
	var images = new Array();
	var imgsloaded = 0;
	
	for	( var i = 0; i < options.images.length; i++ ) {
		images.push( new AvatarImage( options.images[ i ], this ) );
	}
	
	function draw(){
		for	( var i=0; i < images.length; i++ ) {
			var img = images[i];
			var image = img.getImage();
			var imgX = img.getAvimgX();
			var imgY = img.getAvimgY();
			var c = that.getCanvas().getContext( "2d" );
			c.drawImage( image, Number(imgX) ,Number(imgY) );
		}
	}
	
	this.onImage = onImage;
	function onImage( ai ){
		imgsloaded++;
		if	( imgsloaded == images.length) {
			draw();
		}
	}
	
	this.getCanvas = function(){
		return canvas;
	}
	
	function AvatarImage( props, av ) {
	
		var that = this;
		var src = props.src;
		var avimgx = props.x;
		var avimgy = props.y
		var avatarcanvas = av;
		
		var img = new Image();
				//$( img ).addClass( clazz );
		
		img.onload = function(){
			
			avatarcanvas.onImage( that );
		}
		img.src = src;
		
		
		this.getAvimgX = getAvimgX;
		function getAvimgX() {
			return avimgx;
		}
		this.getAvimgY = getAvimgY;
		function getAvimgY() {
			return avimgy;
		}
		
		this.getImage = getImage;
		function getImage(){
			return img;
		}
	}
}
