var ChooserRegistry = {
	
	col: {},
	pos: {},
	
	status: {
		gender: 'male',
		skin: 'light',
		hair_color_id: 1,
		hair_style_id: 1,
		beard_id: null,
		glasses_id: null,
		top_size: null,
		bottom_size: null,
		height: 0,
		weight: 0,
		is_private: false
	},
	
	previousStatus: {},
	statusChanged: {},
	observers: {},
	oneOpen: false,
	
	setStatus: function(name, status) {
		
		ChooserRegistry.statusChanged[name] = true;
		ChooserRegistry.previousStatus[name] = ChooserRegistry.status[name];
		ChooserRegistry.status[name] = status;
		
		var observers = ChooserRegistry.observers[name] || [];
		for (var i = 0; i < observers.length; i++) {
			observers[i].changeStatus(name);
		}
	},
	
	statusChanged: function(name) {

		return (ChooserRegistry.previousStatus[name] 
				!== ChooserRegistry.status[name] );
	}
};

var ChooserStrategy =	{
		
	getValueByDir: function(str, separator){
		if (!separator) separator = '/';
		var p = str.split(separator);
		return p[p.length-1].split('.')[0];
	},
	
	singleIcon: function() {
		
		this.register();
		var name = this.name;
		
		this.hideContainer = function (){};
		
		$('#' + name + ' a').click(function(e){
				e.preventDefault();
		
				var 
					aHref =	$(this),
					li = aHref.parent(),
					gender = li.attr('id').split('_')[1];
				
				li.parent().find('a').removeClass('active');
				aHref.addClass('active');
		
				ChooserRegistry.setStatus(name, gender);
		});
	},
	
	hairStyleChangeStatus: function(name) {

		var reg = ChooserRegistry;
		
		if ( ! reg.statusChanged(name))
			return;
			
		var
			gender		= reg.status.gender,
			hair_color	= reg.status.hair_color_id,
			skin		= reg.status.skin;
			
			
		getSrc = function(index, gender, hair_color, skin) {
			return '/images/hair_styles/' + gender + '/' + 
					skin + '/color_' + hair_color + '/' + 
					addZero(parseInt(index, 10)) + '.gif';
		};	
		
		this.items.each(function(index){
			$(this).attr('src', getSrc(index + 1, gender, hair_color, skin));
		});
		
		this.opener.attr('src', getSrc(reg.status.hair_style_id, gender, hair_color, skin));
	},
	
	beardChangeStatus: function(name) {
		
		var reg = ChooserRegistry;
		
		if ( ! reg.statusChanged(name))
			return;
			
		var
			gender = reg.status.gender,
			skin = reg.status.skin;
			
		if (name === 'gender') {
			if (gender === 'female') {
				this.element.hide();
			}
			else {
				this.element.show();
			}
			return;
		}
		
		if (skin === null || reg.status.beard_id === null) {
			return;
		}
		
		getSrc = function(index, skin) {
			 return '/images/beard/' + skin + '/'	+ addZero(parseInt(index, 10)) + '.gif';
		};	
		
		this.items.each(function(index, el){
			$(this).attr('src', getSrc(index + 1, skin));
		});
		
		this.opener.attr('src', getSrc(reg.status.beard_id, skin));		
	}
};
	
var Chooser = function(name) {
	
	var that = this;

	this.addObservers = function() {
		
		var observerName;

		for (var i = 0; i < arguments.length; i++) {
			observerName = arguments[i];
			ChooserRegistry.observers[observerName].push(this);
		}
		return this;
	};
	
	this.setFn = function(name, fn) {
		that[name] = fn;
		return that;
	};
	
	this.addFn = function(name, fn) {
		
		that[name] = function() {
			that[name]();
			fn();
		};
		return that;
	};
	
	this.onClick = function(){
		
		that.opener.click(function(){
			
			if (ChooserRegistry.oneOpen) {
				that.closeAll();
				
				if (ChooserRegistry.oneOpen === that.name) {
					that.closeAll();
					ChooserRegistry.oneOpen = false;
					return;
				}
			}
			
			ChooserRegistry.oneOpen = that.name;
			
			that.scrollable.show();
			that.arrows.show();
		});
	};
	
	this.closeAll = function() {
	
		for (var name in ChooserRegistry.col) {
			ChooserRegistry.col[name].hideContainer();
		}	
	};
	
	this.onChoose = function() {
	 
		that.items.live('click', function(){
			
			var src = $(this).attr('src');
			
			ChooserRegistry.setStatus(name, that.getValue(src));
			ChooserRegistry.oneOpen = false;
			that.updateOpener(src);
			
			that.hideContainer();
		}); 
	};
	
	this.hideContainer = function() {
		
		that.arrows.hide();
		that.scrollable.hide();
	};
	
	this.updateOpener = function(src) {

		that.opener.attr('src', src);
	};
	
	this.getValue = function(src) {
		
		return ChooserStrategy.getValueByDir(src);
	}
	
	this.changeStatus = function() {};
	this.previousStatus = this.status;
	
	this.name			= name;
	
	this.initElements = function() {
		
		that.element	= $('#' + name + '_chooser');
		
		that.arrows		= that.element.find('.browse');
		that.opener		= that.element.find('.open');
		that.scrollable	= that.element.find('.scrollable');
		that.items		= that.scrollable.find('img');
		
		that.scrollable.scrollable({circular: false, speed: 900}); 		
	};
	
	this.initEvents = function() {
		
		that.onChoose();	
		that.onClick();	
	};
	
	this.register = function() {
		
		ChooserRegistry.col[that.name] = that;
		ChooserRegistry.observers[that.name] = [];		
	};
	
	this.init = function() {
		
		that.initElements();
		that.initEvents();
		that.register();
		
		return that;
	};
	
	return this;
};