YUI.add('game-players', function(Y) {

	var NS = Y.namespace('mazzle');	
	NS.GamePlayers = GamePlayers;
	
	function GamePlayers(config) {
		GamePlayers.superclass.constructor.apply(this, arguments);
	}

	GamePlayers.NAME = "game-players";

	GamePlayers.ATTRS = {
		container: {
			value: null
		},
		maxNumberOfPlayers: {
			value: 50
		},
		emptyShow: {
			value: false
		},
		countShow: {
			value: true
		},
		user: {
			value: null
		},
		players: {
			value: []
		}
	};

	GamePlayers.LIST_CLASS = 'game-players';
	GamePlayers.LIST_TEMPLATE = '<ul class="'+GamePlayers.LIST_CLASS+'"></ul>';

	/* GamePlayers extends the base Widget class */
	Y.extend(GamePlayers, Y.Base, {

		initializer: function() {
			if(Y.one(this.get("container"))) {
				this.list = null;
				this._renderContent();
				this.syncUI();
				this.after("playersChange", this.syncUI);
			}
		},
		
		syncUI: function() {
			var players = this.get("players"),
				nodes = this.list.all("li");

			players.sort(function(p1,p2) { return p2.score - p1.score });
			
			for(var i=0; i < players.length; i++) {
				var node = nodes.item(i);
				if(node) {
					node.setContent(this.formatPlayer(players[i], i));
					node.removeClass("hidden");
				}
			}
		},

		destructor : function() {
		},

		_renderContent : function() {
			var content = Y.one(this.get("container")),
				max = this.get("maxNumberOfPlayers");
							
			// add list
			var	list = content.one("."+GamePlayers.LIST_CLASS);
			if(!list) {
				list = Y.Node.create(GamePlayers.LIST_TEMPLATE);
				content.appendChild(list);
			}
			for (var i=0; i < max; i++) {
				var node = list.appendChild(Y.Node.create('<li class="player"></li>'));
				if(!this.get("emptyShow")) {
					node.addClass("hidden");
				}
				if(this.get("countShow")) {
					var count=i+1;
					node.append('<div class="count">'+count+'.</div>');
				}
			}
			this.list = list;
		},
	
		formatPlayer : function(player, index) {
			var html = "",
				name = (player.player == this.get("user")) ? "You" : player.name;
				
			if(this.get("countShow")) {
				var count = index+1;
				html += '<div class="count">'+count+'.</div>';
			}
			html += '<div class="name">'+name+'</div>';
			if(player.score) {
				html += '<div class="score">'+player.score+'</div>';
			}
			return html;
		}
	});
	  
}, 'gallery-2010.03.02-18' ,{requires:['node','base']});