var $j = jQuery.noConflict();
var reStaff; // data to be fueled from JSON
var timeoutId;

$j("document").ready(function(){
	reInitStaff();
	reInitCodeBoxes();
	reInitLanguageFilter();
});

// Staff Details
function reInitStaff(){
	$j.getJSON("/re_staff.json", function(data){
		if(!data) return; // if no data has been returned, do nothing
		else reStaff = data.staff; // set global reStaff
		// init variables
		var staff = document.getElementById("staff");
		var ja_staff_members = $j("a.staff-member");
		// iterate through all the a.staff-member anchors
		$j.each(ja_staff_members, function(i, a_staff_member){
			var ja_staff_member = $j(a_staff_member);
			var id = ja_staff_member.attr("title");
			var member = reGetMemberDetailsById(id);
			if(!member) return; // do nothing if member is null
			a_staff_member.details = member; // set member object to the anchor as details
			ja_staff_member.removeAttr("title"); // title attribute not needed any more
			// if a_staff_member is a child of staff, replace name text inside "a" with "img"
			if(a_staff_member.parentNode == staff){
				var img = document.createElement("img");
				var jImg = $j(img);
				var icon;
        if(member.icon){ icon = reStaff.iconPath + member.icon + ".png" }
        else{icon = $j("#staff-icon-url-" + id).text(); }
        if(!icon) icon = reStaff.iconPath + "anonymous.png"
				jImg.attr({src:icon, width:50, height:50, alt:member.name});
				ja_staff_member.empty();
				ja_staff_member.append(img);
			}
		});
		// set hover handlers to all a.staff-member, as well as removing title attributes
		ja_staff_members.hover(
			function(evt){
				try{reShowMemberDetails(this, evt);}catch(err){alert(err.message)}
			},
	    function(evt){
	      var self = this;
	      var f = function(){try{reHideMemberDetails();}catch(err){alert(err.message)}}
	      timeoutId = setTimeout(f, 500);
	    }
		);
	});
}

function reGetMemberDetailsById(id){
	var ret = null;
	var members = reStaff.members;
	var cnt = members.length;
	for(var i=0; i<cnt; i++){
		var member = members[i];
		if(member.id == id){ret = member; break;}
	}
	return ret;
}
function reGetMemberDetails(criteria, value){
	var ret = [];
	var members = reStaff.members;
	var cnt = members.length;
	for(var i=0; i<cnt; i++){
		var member = members[i];
		if(member[criteria]==value) ret.push(member);
	}
	return ret;
}
// Thanks to Alen Grakalic for tutorial http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
function reShowMemberDetails(a, evt){
	// show member details
  reHideMemberDetails();
  
	var memberDetailsContent = reCreateMemberDetails(a.details);
	$j("body").append(memberDetailsContent);
	
	var jDivMemberDetails = $j("#member-details");
	var dx = reGetMemberDetailsX(jDivMemberDetails, evt.pageX);
	var dy = reGetMemberDetailsY(jDivMemberDetails, evt.pageY);
	jDivMemberDetails
	.css("left", dx + "px")
	.css("top", dy + "px")
	.css("display", "block");
	
	jDivMemberDetails.unbind("mouseenter").bind("mouseenter", function(){
	  clearTimeout(timeoutId);
	});
	jDivMemberDetails.unbind("mouseleave").bind("mouseleave", function(){
	  reHideMemberDetails();
	});
}
function reHideMemberDetails(){
  clearTimeout(timeoutId);
	$j("#member-details").remove();
}
function reGetMemberDetailsX(jDivMemberDetails, mx){
	var x;
	var winWidth = $j(window).width();
	if(mx < winWidth/2){
		x = mx + 14;
	}else{
		x = mx - jDivMemberDetails.width() - 30;
	}
	return x;
}
function reGetMemberDetailsY(jDivMemberDetails, my){
	var y;
	var winHeight = $j(window).height();
	var scrollTop = $j(window).scrollTop();
	if(my - scrollTop < winHeight/2){
		y = my + 24;
	}else{
		y = my - jDivMemberDetails.height() - 26;
	}
	return y;
	
}
function reCreateMemberDetails(details){
	var icon;
  if(details.icon){ icon = reStaff.iconPath + details.icon + ".png"; }
  else{icon = $j("#staff-icon-url-" + details.id).text(); }
  if(!icon) icon = reStaff.iconPath + "anonymous.png"
  
  var url;
  if(details.url){ url = details.url; }
  else{url = $j("#staff-url-" + details.id).text(); }
  
	var name = details.name;
	var role = details.role;
	var office = details.office;
	var intro = null;
	if(role && office) intro = role + ", " + office + " office";
	else if(role) intro = role;
	else if(office) intro = office + " office";
	var from = details.from;
	var interests = details.interests;
	var twitter = details.twitter;
	var comment = details.comment;
	
	var str = '';
	str += '<div id ="member-details">';
	str += '<div id="member-details-icon"><img src="' + icon + '" width="50" height="50" alt="" /></div>';
	str += '<div id="member-details-desc">';
	str += '<div id="member-details-name">' + name + '</div>';
	if(intro) str += '<div id="member-details-intro">' + intro + '</div>';
	if(from || interests){
		str += '<dl>';
		if(from) str += '<dt>From: </dt><dd>' + from + '<br /></dd>';
		if(interests) str += '<dt>Interests: </dt><dd>' + interests + '<br /></dd>';
		if(url && url!=twitter) str += '<dt>URL: </dt><dd><a href="' + url + '">' + reTruncateStr(url, 36) + '</a><br /></dd>';
		if(twitter) str += '<dt>twitter: </dt><dd><a href="' + twitter + '">' + twitter + '</a><br /></dd>';
		str += '</dl>';
	}
	if(comment) str += '<div id="member-details-comment">' + comment + '</div>';
	str += '</div>';
	str += '</div>';
	
	return str;
}

function reTruncateStr(str, maxChars, offset){
	var lStr = (str) ? str : "";
	var lOffset = (offset) ? offset : 3;
	if (lStr.length>maxChars) lStr = str.substring(0, maxChars - lOffset) + "...";
	return lStr;
}

// Code Box
function reInitCodeBoxes(){	
	$j.each($j("pre"), function(){
		if($j("code", this).length>0) return;
		$j(this.childNodes).wrapAll(document.createElement("code"));
	});
	// var isFF3OrLater = (navigator.oscpu && document.getElementsByClassName);
	// if(isFF3OrLater) reMakeCodeBoxExpandable();
}
// Thanks to Jeff Starr for tutorial http://digwp.com/2009/07/making-an-expanding-code-box/
function reMakeCodeBoxExpandable(){
	$j("pre > code").hover(
		function() {
			var jDiv = $j(this);
			var jPre = $j(this.parentNode);
			var codeWidth = jDiv.width() + 16;
			var preWidth = jPre.width();
			jPre.data("orgWidth", preWidth);
			if(codeWidth > preWidth){
				jPre
				.stop(true, false)
				.css({zIndex:"100", position:"relative", maxWidth:"none"})
				.animate({width:codeWidth + "px"});
			}
		},
		function() {
			var jPre = $j(this.parentNode);
			jPre.stop(true, false).animate({width:jPre.data("orgWidth")}, "fast", "linear", function(){jPre.css({zIndex:"0", position:"static", maxWidth:"100%", width:"auto"});});
		}
	);
}

// Language Filter
var RE_LANG_EN = "en";
var RE_LANG_CN = "cn";
var RE_LANG_JA = "ja";
function reInitLanguageFilter(){
	try{		
		var frmLangFilter = document.getElementById("frm-lang-filter");
		if(!frmLangFilter) return;
		
		$j("#btn-lang-filter").click(
			function(){
				reApplyLanguageFilter();
			}
		);
		
		var langFilter = reGetCookie("langFilter");
		if(!langFilter) return;
		
		var checkBoxes = frmLangFilter["cb_lang"];
			
		if(langFilter.indexOf(RE_LANG_EN)==-1){
			$j(".en").css("display", "none");
			checkBoxes[0].checked = false;
		}
		if(langFilter.indexOf(RE_LANG_CN)==-1){
			$j(".cn").css("display", "none");
			checkBoxes[1].checked = false;
		}
		if(langFilter.indexOf(RE_LANG_JA)==-1){
			$j(".ja").css("display", "none");
			checkBoxes[2].checked = false;
		}
	}catch(err){
		alert(err.toString());
	}
}
function reApplyLanguageFilter(){
	try{
		var frmLangFilter = document.getElementById("frm-lang-filter");
		if(!frmLangFilter) return;
		
		var checkBoxes = frmLangFilter["cb_lang"];
		var cnt = checkBoxes.length;
		var isAllChecked = true;
		var strFilterValue = "";
		
		for (var i=0; i<cnt; i++){
			var cb = checkBoxes[i];
			if(cb.checked) strFilterValue += cb.value + "_";
			else isAllChecked = false;
		}
		
		if(isAllChecked) reDeleteCookie("langFilter");
		else reSetCookie("langFilter", strFilterValue, 180);
		
		window.location.reload();
	}catch(err){
		alert(err.toString());
	}
}

// not used for now
function reGetBrowserLanguage(){
	var lang = null;
	try{
		lang = (navigator.language) ? navigator.language : navigator.userLanguage;
	}catch(err){
		lang = null;
	}
	return lang;
}


// Cookies
reSetCookie = function(key, value, expire){
	var str = "";
	var expires = "";
	if (expire){
		var date = new Date();
		date.setTime(date.getTime()+(expire*24*60*60*1000));
		expires = "; expires=" + date.toGMTString();
	}
	str = key + "=" + value + expires + "; path=/;";
	document.cookie = str;
}

reGetCookie = function(key){
	var str = null;
	var a = document.cookie.split(";");
	var keyEq = key + "=";
	for(var i=0; i<a.length; i++){
		var c = a[i];
		while (c.charAt(0)==' ') c = c.substring(1, c.length); // strip white space
		if(c.indexOf(keyEq) == 0){
			str = c.substring(keyEq.length, c.length);
			break;
		}
	}
	return str;
}

reDeleteCookie = function(key){
	reSetCookie(key, "" , -1);
}
//

// Popup Windows
function reOpenWindow(aUrl, aName, aFeatures){
	var win = window.open(aUrl, aName, aFeatures);
	if(win && typeof(win.focus)!="undefined") win.focus();
	return false;
}

function reOpenPlainWindow(aUrl, aName, aw, ah){
	var l = Math.floor((screen.width - aw) / 2);
	var t = Math.floor((screen.height - ah) / 2);
	var features = "left=" + l + ", top=" + t + ", width=" + aw + ", height=" + ah + ", resizable=no, scrollbars=yes, status=no";
	var win = window.open(aUrl, aName, features);
	if(win && typeof(win.focus)!="undefined") win.focus();
	return false;
}