function closePopup() {
	document.getElementById('popup').style.display="none";
}

function showPopup( boxData ) {

	// Prepare output

	boxHtml  = "<table style='width:100%;height:100%;border=1px;'>";
	boxHtml += "<tr><td style='background:#8bcd5b;color:#000000;padding:5px;height:14px;border:1px solid #000; vertical-align:top; overflow:hidden;'><p><b>" + boxData["title"].toString() + "</b></p></tr></td>";
	boxHtml += "<tr><td style='padding:5px; vertical-align:top; overflow:hidden;'><p>" + boxData["content"].toString() + "</p></tr></td>";
	
	var myPopup = document.getElementById('popup');
	
	// defaults
	
	if ( boxData["width"] == undefined )
		boxWidth = 300;
	else
		boxWidth = boxData["width"];
	
	if ( boxData["height"] == undefined )
		boxHeight = 200;
	else
		boxHeight = boxData["height"];
		
	if ( boxData["buttons"] == undefined )
		boxHtml += "<tr><td style='height:14px;text-align:center;'><input type='button' onclick='closePopup()' value='Close'/></tr></td>";
	
	boxHtml += "</table>";
	
	// get scolling position
	
	var scrolledX, scrolledY;
	if( self.pageYOffset ) {
	  scrolledX = self.pageXOffset;
	  scrolledY = self.pageYOffset;
	} else if( document.documentElement && document.documentElement.scrollTop ) {
	  scrolledX = document.documentElement.scrollLeft;
	  scrolledY = document.documentElement.scrollTop;
	} else if( document.body ) {
	  scrolledX = document.body.scrollLeft;
	  scrolledY = document.body.scrollTop;
	}
  
  	// get center
  
	var centerX, centerY;
	if( self.innerHeight ) {
	  centerX = self.innerWidth;
	  centerY = self.innerHeight;
	} else if( document.documentElement && document.documentElement.clientHeight ) {
	  centerX = document.documentElement.clientWidth;
	  centerY = document.documentElement.clientHeight;
	} else if( document.body ) {
	  centerX = document.body.clientWidth;
	  centerY = document.body.clientHeight;
	}
	
	// calc popup position
	
	var leftOffset = scrolledX + (centerX - boxWidth) / 2;
	var topOffset = scrolledY + (centerY - boxHeight) / 2;
	
	//alert( leftOffset + ";" + topOffset );
	
	myPopup.innerHTML = boxHtml;
	myPopup.style.top = topOffset + 'px';
	myPopup.style.left = leftOffset + 'px';
	myPopup.style.width= boxWidth + 'px';
	myPopup.style.height = boxHeight + 'px';
	myPopup.style.border = 1 + 'px' + "solid #000000";
	myPopup.style.display = "block";
	//alert( boxHtml );
}

function getRequestObject () {
  if (navigator.appName == "Microsoft Internet Explorer")
    return new ActiveXObject ("Microsoft.XMLHTTP");
  else
    return new XMLHttpRequest ();
}

function sendPostRequest ( postUrl, parameter, cbf ) {
  callbackFunction = cbf;
  var parameterList = [];
  for ( var element in parameter ) {
  	parameterList.push( element + "=" + escape( parameter[element] ) );
  }
  var parameterString = parameterList.join( "&" );
  //alert( parameterString );
  httpRequestObject.open ('POST', postUrl, true);
  httpRequestObject.onreadystatechange = handleResponse;
  httpRequestObject.setRequestHeader ('Content-Type', 'application/x-www-form-urlencoded');
  httpRequestObject.send (parameterString);
}

function handleResponse () {
  if (httpRequestObject.readyState == 4 && httpRequestObject.status == 200) {
    var response = httpRequestObject.responseText;
    //alert (response);
    //showPopup( {title:'testTitle', content:response });
    callbackFunction( response );
  }
}

var httpRequestObject = getRequestObject();
var callbackFunction;

window.onunload = function() {
	httpRequestObject.abort();
}

function commentAdd ( translationId ) {
	sendPostRequest( 
		"/comments/add/", 
		{ translation_id:translationId, no_frame:"true" }, 
		function( response ) { showPopup( { title:"Your Comment", content:response, width:380, height:280 } ); } 
	);
}

function commentSubmit( comment, translationId ) {
	sendPostRequest( 
		"/comments/add/", 
		{ translation_id:translationId, comment:comment,no_frame:"true" }, 
		function( response ) { showPopup( { title:"Your Comment", content:response } ); } 
	);
}

function searchHelp() {
	
	helpHtml = "You can use the +/- word tags to filter your search results if you use multiple words.<br/>";
	helpHtml += "<i>+someword -anotherword</i> for example only shows results that have <i>someword</i> as part of phrase or translation,";
	helpHtml += "but hides all entries with <i>anotherworld</i>.";
	showPopup( { title:"Search Help", content:helpHtml } );
}

function translationVote( translationId,vote) {
	sendPostRequest( 
		"/translation/vote/", 
		{ translation_id:translationId, vote:vote }, 
		function( response ) { showPopup( { title:"Your Vote", content:response } ); } 
	);
}