// -------- avatar selector ---------
(function($) {
	var settings = null;
	var currentImage = null;
	var container = null;
	var strip = null;
	var prevLink = null;
	var nextLink = null;
	var width;
	var anim = false;
	var hiddenField = null;
	
	settings = {
		 name: 'avatar'		
		,duration: 200
		,current: 0
	};
	
	var showAvatar = function(img)
	{
		var newImage = $('<img />').insertAfter(currentImage).attr('src', img.url);
		currentImage.remove();
		currentImage = newImage;
		hiddenField.val(img.id);
	}
	
	var nextAvatar = function(img) {
		if (anim) return;
		hiddenField.val(img.id);
		anim = true;
		$('<img />').insertAfter(currentImage).load(function(){
			var newImage = $(this); 
			//currentImage.removeClass('png');
			strip.animate({marginLeft: -width}, settings.duration, 'linear', function(){
				strip.css({marginLeft: 0});
				currentImage.remove();
				delete currentImage;
				currentImage = newImage;
				//currentImage.addClass('png');
				anim = false;
			});
		}).attr('src', img.url);			
	}
	
	var prevAvatar = function(img) {
		if (anim) return;
		hiddenField.val(img.id);
		anim = true;
		$('<img>').hide().insertBefore(currentImage).load(function(){
			var newImage = $(this).show();
			strip.css({marginLeft: -width});
			strip.animate({marginLeft: 0}, settings.duration, 'linear', function(){
				currentImage.remove();
				delete currentImage;
				currentImage = newImage;
				anim = false;
			});
		}).attr('src', img.url);
	}
	
	var isIe6 = function() {
		return (jQuery.browser.msie && (jQuery.browser.version < 7));
	}
	
	$.fn.selectuseravatar = function(images, options){
		settings = (options) ? $.extend(settings, options) : settings;
		var currentAvatar = settings.current;
		if (images.length == 0) images[0] = { id: 0, url: $(this).attr('src') };
		//if (isIe6()) $(this).addClass('png');
		
		prevLink = $('<a class="prev" href="#"></a>').click(function(e){
			currentAvatar = (currentAvatar + images.length - 1) % images.length;
			if (isIe6()) showAvatar(images[currentAvatar]); else prevAvatar(images[currentAvatar]);
			e.preventDefault();
		});
		nextLink = $('<a class="next" href="#"></a>').click(function(e){
			currentAvatar = (currentAvatar + 1) % images.length;
			if (isIe6()) showAvatar(images[currentAvatar]); else nextAvatar(images[currentAvatar]);
			e.preventDefault();
		});
		container = $('<div class="avatar-selector-user"></div>');
		hiddenField = $('<input type="hidden" id="current-avatar-id" name="current-avatar-id" value="" />').val(images[currentAvatar].id);
		
		var prepareImage = function() {
			var img = $(this);
			var height = img.height();
			width = img.width();
			img.wrap($('<div></div>').css({overflow: 'hidden', float: 'left'}).height(height).width(width)).wrap($('<div></div>').width(2*width).height(height));
			strip = $(img).parent();			
		}
		
		currentImage = $(this).wrap(container).after(nextLink).after(prevLink);
		if (currentImage[0].complete) {
			prepareImage.call(currentImage);
		}
		else {
			currentImage.one('load', prepareImage);
		} 
		
		return this;
	}
})(jQuery);