var userInfoMap = {};

function showHideDiv(event){	
	var data = userInfoMap[this];	
	if(data){
		var div = data.div;		
		if(
			event == undefined
			|| (event.type == "mouseout" && event.relatedTarget != div)			
		){
			div.style.display = div.style.display == "none" ? "" : "none";			
		}	
	}else if (event.type == "mouseout" && event.target == this && event.relatedTarget.parentNode != this){		
		this.style.display = this.style.display == "none" ? "" : "none";		
	}
}

function showUserInfo(el, uid, event){
	if(userInfoMap[el] == undefined){
		var query = FB.Data.query('select pic_square from user where uid = {0}', uid);
		query.wait(function(rows){		
			var row = rows[0];
			if(row){
				var pic = row.pic_square;
				var div = document.createElement("div");
				div.style.position = "absolute";
				div.style.width = "50px";
				div.style.height = "50px";
				div.style.backgroundColor = "transparent";
				div.style.padding = "5px";
				var offset = $(el).offset();			
				div.style.top = parseInt(offset.top) - 55 + "px";
				div.style.left = parseInt(offset.left) + "px";
				div.style.display = 'none';
				
				var img = document.createElement("img");				
				img.setAttribute("src", pic);
				img.setAttribute("class", "avatar");
				div.appendChild(img);				
				
				document.body.appendChild(div);
				
				userInfoMap[el] = {'div' : div};
								
				//el.onmouseout = showHideDiv;
				$(el).mouseout(showHideDiv);				
				$(div).mouseout(showHideDiv);
				
				showHideDiv.call(el);
				
			}else{
				//TODO: handle error when row is empty
			}
		});
	}else{
		showHideDiv.call(el);
	}	
}

window.addEventListener("load", function(){	
	var ids = ["socialTranslations", "translations"];
	for(var i in ids){
		(function(){var id = ids[i];
			var control = $("#" + id + "_control");		
						
			var content = $("#" + id + "_content");
			if(content[0]){
				control.click(function(){
					if(!content.is(":visible")){
						control[0].setAttribute("class", "control_clicked");
						content.slideDown();
					}else{
						control[0].setAttribute("class", "control");
						content.slideUp();
					}					
				});
			}
		})();		
	}	
}, false);