var avatarCreator = new function() {
	this.HAIRS = 8;
	this.HAIR_COLORS = 8;
	this.FACES = 8;
	this.SHIRTS = 8;
	this.SHIRT_COLORS = 8;
	this.STUFF = 8;
	
	this.init = function() {
		
		var creator = $('.avatar_creator');
		var gender = creator.attr('gender');
		var hair = creator.attr('hair');
		var hair_color = creator.attr('haircolor');
		var face = creator.attr('face');
		var shirt = creator.attr('shirt');
		var shirt_color = creator.attr('shirtcolor');
		var stuff = creator.attr('stuff');
		
		if(!gender) gender = 'girl';
		if(!hair) hair = Math.ceil(Math.random() * this.HAIRS);
		if(!hair_color) hair_color = Math.ceil(Math.random() * 6); // Exclude pink and blue 
		if(!face) face = Math.ceil(Math.random() * this.FACES);
		if(!shirt) shirt = Math.ceil(Math.random() * this.SHIRTS);
		if(!shirt_color) shirt_color = Math.ceil(Math.random() * this.SHIRT_COLORS);
		if(!stuff) stuff = 1; // No stuff
		
		creator.addClass(gender);
		
		creator.append('<div class="avatar big framed"><div class="b"></div><div class="f"></div><div class="h"></div><div class="s"></div><div class="a"></div><div class="fr"></div></div>');
		
		creator.append('<div class="title"><span>Твой персонаж</span></div>');
		
		creator.append('<div class="gender_selector"><a href="#boy" class="button_boy"><span>Мальчик</span></a><a href="#girl" class="button_girl"><span>Девочка</span></a><input type="hidden" name="gender" value="" /></div>');
		$('.avatar_creator .gender_selector a.button_' + gender).addClass('selected');
		$('.avatar_creator .gender_selector input').val(gender);
		
		creator.append('<div class="tab_menu"><a class="hair selected" href="#hair"><span>Волосы</span></a><a class="face" href="#face"><span>Лицо</span></a><a class="shirt" href="#shirt"><span>Одежда</span></a><a class="stuff" href="#stuff"><span>Аксессуары</span></a></div>');
		
		// Palette HAIR
		
		creator.append('<div class="palette hair"><div class="colors"></div><div class="variants c' + hair_color + '"></div></div>');
		
		for(var i=1;i<=this.HAIRS;i++) $('.palette.hair .variants', creator).append('<a class="h' + i + '" href="#h' + i + '"><span>Волосы ' + i + '</span></a>');
		$('.palette.hair .variants', creator).append('<input type="hidden" name="hair" value="' + hair + '" />');
		
		for(var i=1;i<=this.HAIR_COLORS;i++) $('.palette.hair .colors', creator).append('<a class="c' + i + '" href="#c' + i + '"><span>Цвет ' + i + '</span></a>');
		$('.palette.hair .colors', creator).append('<input type="hidden" name="hair_color" value="' + hair_color + '" />');
		
		// Palette FACE
		
		creator.append('<div class="palette face" style="display: none"><div class="colors empty"></div><div class="variants"></div></div>');
		
		for(var i=1;i<=this.FACES;i++) $('.palette.face .variants', creator).append('<a class="f v' + i + '" href="#v' + i + '"><span>Лицо ' + i + '</span></a>');
		$('.palette.face .variants', creator).append('<input type="hidden" name="face" value="' + face + '" />');
		
		// Palette SHIRT
		
		creator.append('<div class="palette shirt" style="display: none"><div class="colors"></div><div class="variants c' + shirt_color + '"></div></div>');
		
		for(var i=1;i<=this.SHIRTS;i++) $('.palette.shirt .variants', creator).append('<a class="s' + i + '" href="#s' + i + '"><span>Одежда ' + i + '</span></a>');
		$('.palette.shirt .variants', creator).append('<input type="hidden" name="shirt" value="' + shirt + '" />');
		
		for(var i=1;i<=this.SHIRT_COLORS;i++) $('.palette.shirt .colors', creator).append('<a class="c' + i + '" href="#c' + i + '"><span>Цвет ' + i + '</span></a>');
		$('.palette.shirt .colors', creator).append('<input type="hidden" name="shirt_color" value="' + shirt_color + '" />');
		
		// Palette STUFF
		
		creator.append('<div class="palette stuff" style="display: none"><div class="colors empty"></div><div class="variants"></div></div>');
		
		for(var i=1;i<=this.STUFF;i++) $('.palette.stuff .variants', creator).append('<a class="a v' + i + '" href="#v' + i + '"><span>Аксессуар ' + i + '</span></a>');
		$('.palette.stuff .variants', creator).append('<input type="hidden" name="stuff" value="' + stuff + '" />');
		
		// Events
	
		$('.avatar_creator .tab_menu a').click(function(){
			var tab = avatarCreator.getSharp($(this).attr('href'));
			var prevtab = avatarCreator.getSharp($('.avatar_creator .tab_menu .selected').attr('href'));
			if(prevtab != tab){
				$('.avatar_creator .palette.' + prevtab).fadeOut(300, function(){
					$('.avatar_creator .palette.' + tab).fadeIn(300);
				});
				$('.avatar_creator .tab_menu .selected').removeClass('selected');
				$(this).addClass('selected');
			}
			return false;
		});
		$('.avatar_creator .palette .colors a').click(function(){
			$(this).addClass('selected').siblings('a').removeClass('selected');
			var color = avatarCreator.getSharp($(this).attr('href'));
			$(this).parents('.palette').find('.variants').attr('class', 'variants ' + color);
			$(this).siblings('input').val(color.substr(1));
			avatarCreator.animateUpdate($(this).parents('.palette').attr('class').substr(8));
			return false;
		});
		$('.avatar_creator .palette .variants a').click(function(){
			$(this).addClass('selected').siblings('a').removeClass('selected');
			var variant = avatarCreator.getSharp($(this).attr('href'));
			$(this).siblings('input').val(variant.substr(1));
			avatarCreator.animateUpdate($(this).parents('.palette').attr('class').substr(8));
			return false;
		});
		$('.avatar_creator .gender_selector a').click(function(){
			$(this).addClass('selected').siblings('a').removeClass('selected');
			$(this).siblings('input').val(avatarCreator.getSharp($(this).attr('href')));
			avatarCreator.updateAvatar();
			return false;
		});
		avatarCreator.updateAvatar();
	}
	
	this.getSharp = function(string) {
		return string.substr(string.indexOf("#")+1);
	}
	
	this.updateAvatar = function() {
		var gender = $('.avatar_creator input[name=gender]').val();
		var hair = $('.avatar_creator input[name=hair]').val();
		var hair_color = $('.avatar_creator input[name=hair_color]').val();
		var face = $('.avatar_creator input[name=face]').val();
		var shirt = $('.avatar_creator input[name=shirt]').val();
		var shirt_color = $('.avatar_creator input[name=shirt_color]').val();
		var stuff = $('.avatar_creator input[name=stuff]').val();
		var ava = $('.avatar_creator .avatar');
		
		$('.f', ava).attr('class', 'f v' + face);
		$('.h', ava).attr('class', 'h h' + hair + ' c' + hair_color);
		$('.s', ava).attr('class', 's s' + shirt + ' c' + shirt_color);
		$('.a', ava).attr('class', 'a v' + stuff + ' f' + face);
		ava.removeClass('boy girl').addClass(gender);
		$('.avatar_creator').removeClass('boy girl').addClass(gender);
	}
	
	this.animateUpdate = function(part) {
		var ava = $('.avatar_creator .avatar');
		if(part == 'stuff') part = 'a'; else part = part.substr(0,1);
		$('.' + part, ava).animate({'left': '220px'}, 220, function(){
			avatarCreator.updateAvatar();
			$('.' + part, ava).css({'left': '-220px'}).animate({'left': '0'}, 220);
		});
	}
}