goog.provide('oneup.ui.widgets.FriendScoreList');
goog.provide('oneup.ui.widgets.FriendScoreList.FriendLine');

oneup.ui.widgets.FriendScoreList = function() {
	oneup.ui.widgets.Widget.call(this, 'fslWidget');
};
goog.inherits(oneup.ui.widgets.FriendScoreList, oneup.ui.widgets.Widget);

oneup.ui.widgets.FriendScoreList.prototype.dataLoaded = function(data) {
	if (data.target.getResponseJson()) {
		var header = goog.dom.createDom('div', {'class': 'widgetHeader'}, 'Most Achieved Friends');
		this.holder_.appendChild(header);
		for (var i = 0; i < data.target.getResponseJson().length; i++) {
			var friend = data.target.getResponseJson()[i];
			this.holder_.appendChild(new oneup.ui.widgets.FriendScoreList.FriendLine(friend).render());
		}
		return this.holder_;
	}
};

oneup.ui.widgets.FriendScoreList.FriendLine = function(friend) {
	oneup.ui.Component.call(this);
	this.friend_ = friend;
}
goog.inherits(oneup.ui.widgets.FriendScoreList.FriendLine, oneup.ui.Component);

oneup.ui.widgets.FriendScoreList.FriendLine.prototype.render = function() {
	var friend = this.friend_;
	var friendLine = goog.dom.createDom('div', {'class':'friendLine'});
	var table = goog.dom.createDom('table');
	var row = goog.dom.createDom('tr');
	var imgCell = goog.dom.createDom('td');
	var countCell = goog.dom.createDom('td', {'width':'100%'});
	var friendPic = goog.dom.createDom('img', {'src': 'http://graph.facebook.com/' + friend.id + '/picture', 'height': '30px'});
	var friendCount = goog.dom.createDom('div', {'class': 'friendCount', 'style': 'width:' + friend.width + '%;'});
	var friendCountSpan = goog.dom.createDom('span', {}, friend.count + '');
	var friendName = goog.dom.createDom('div', {'class':'friendName floatBox', 'style':'display:none;'}, friend.name)
	friendCount.appendChild(friendCountSpan);
	imgCell.appendChild(friendPic);
	countCell.appendChild(friendCount);
	row.appendChild(imgCell);
	row.appendChild(countCell);
	table.appendChild(row);
	friendLine.appendChild(friendName);
	friendLine.appendChild(table);
	
	goog.events.listen(table, goog.events.EventType.MOUSEMOVE, function(e) {
		var x = goog.style.getClientPosition(e).x + window.scrollX;
		var y = goog.style.getClientPosition(e).y + window.scrollY;
		friendName.style.display = '';
		goog.style.setPosition(friendName, x+10 + 'px', y+10 + 'px');
	});
	goog.events.listen(table, goog.events.EventType.MOUSEOUT, function(e) {
		friendName.style.display = 'none';
	});
	goog.events.listen(table, goog.events.EventType.CLICK, function(e) {
		go('friend?id=' + friend.id);
	});
	return friendLine;
}