function hideElement(elementId) {
	document.getElementById(elementId).style.display = 'none';
}

function showElement(elementId) {
	document.getElementById(elementId).style.display = '';	
}

/*
	A function to toggle the display style attribute between 'none' and ''.

	Usage: pass the ID of the element you want to toggle.
*/
function toggleHiddenElement(elementId) {
	if (document.getElementById(elementId).style.display == 'none') {
		showElement(elementId);
	} else {
		hideElement(elementId);
	}
}

/*
	A function to toggle the visibilty of every row in a table using the
	display style attribute. It doesn't toggle individual rows, but changes
	every row to correspond to the value of the button.

	Usage: pass the name of the form which the button is in which is used
	to toggle the rows visibilty. Also pass how many rows are to be toggled.

	Note: the button must be named rowTogg and it's value must swap between
	'+' and '-' using an external method. This function is associated with
	a button on each row (named showitems[]) which toggles the individual rows
	visibilty.
*/
function toggleHiddenRows(formName, totalrows) {
	for(var x=0; x < totalrows; x++)
		if (document.forms[formName]['rowTogg'].value == '+') {
			document.getElementById('row' + x + 'a').style.display = '';
			document.forms[formName]['showitems[]'][x].value = '-';
		} else {
			document.getElementById('row' + x + 'a').style.display = 'none';
			document.forms[formName]['showitems[]'][x].value = '+';
		}
}

/*
	A function to increment the value of a quantity input box upon the
	clicking of a button.
*/
function increaseQty(elementId) {
	var qty = document.getElementById('q' + elementId).value;

	if(qty == '' || qty == null)
		document.getElementById('q' + elementId).value = 1;
	else
		document.getElementById('q' + elementId).value++;
}

/*
	A function to decrement the value of a quantity input box upon the
	clicking of a button.	
*/
function decreaseQty(elementId) {
	var qty = document.getElementById('q' + elementId).value;

	if(qty != 0 && qty != '' && qty != null)
		document.getElementById('q' + elementId).value--;
}

/*
	A function which loops through every row (20) until it finds one
	which is currently invisible, it then shows that row and terminates.
*/
function showNextRow() {
	for(var x = 0; x < 20; x++) {
		if(document.getElementById('tr' + x).style.display == 'none') {
			showElement('tr' + x);
			break;
		}
	}

	updateRowTotal();
}

/*
	A function which loops through every row (20) starting from the last row
	until it finds a row which is currently visible, it then hides that row
	and terminates.
*/
function hideLastRow() {
	for(var x = 19; x > 0; x--) {
		if(document.getElementById('tr' + x).style.display == '') {
			hideElement('tr' + x);
			break;
		}
	}

	updateRowTotal();
}

/*
	A function which loops through every row (20) until it finds a row which
	is currently invisible, it then terminates and sets a 'totalrows' hidden
	input field to the amount of visible rows.
*/
function updateRowTotal() {
	for(var x = 0; x < 20; x++)
		if(document.getElementById('tr' + x).style.display == 'none')
			break;

	document.getElementById('totalrows').value = x;
}

/*
	A function which creastes a DIV element to a style of your
	choice, and puts an "x" in the corner to close the box. The DIV
	element is then inserted into the HTML document before the tableno
	element.
*/
function showClosableMessageBox(msg, style) {
	var time = new Date().getTime();
	$('<div id="box' + time + '" class="' + style + '">' + 
		'<div class="xButton">' + 
			'<a href="javascript:hideElement(\'box' + time + '\');">X</a>' +
		'</div>' + 
		'<p>' + 
			msg + 
		'</p>' + 
		'<div style="clear: both;"></div>' + 
	'</div>').insertBefore('#tableno');
}

/*
	A function which is to be called at regular intervals which will send a GET request
	to a PHP script containing a waiter's ID. The PHP script then returns an XML document
	of results, which is put into a new closableMessageBox which uses a timestamp for it's ID.
*/
function getWaiterAlerts(waiterId) {
	//Send a GET request to the getWaiterAlerts PHP script
	$.get("getWaiterAlerts.php", 

		//Containing a parameter called waiter which contains the waiters ID
		{ waiter: waiterId },

		//Define a callback function
		function(xml){
			
			//Loop through every notification element in the returned XML document
			$('notification', xml).each(
				function(){
					//Make a new closable message box with the order info. in it
					showClosableMessageBox(
						'The order you took for table ' + 
						$("table", this).text() +
						' at ' + $("time", this).text() + 
						' is now ready to be served.', 'info');
				}
			);
		},
		
		//Set the data type as XML
		'xml'
	);
}

/*
	A function to decrease the value in an element with ID totalrows
*/
function decreaseRowTotal()
{
	document.getElementById('totalrows').value--;
}

/*
	A function to increase the value in an element with ID totalrows
*/
function increaseRowTotal()
{
	document.getElementById('totalrows').value++;
}

/*
	A function to change the value of the hidden "note" input field
	which corresponds to a menu item on the order.
*/
function showNoteInput(elementId)
{
	document.getElementById('n' + elementId).value = 
		prompt("Note: ", document.getElementById('n' + elementId).value);
}

/*
	A function to show a tooltip with a specific ID.
*/

function showToolTip(e, id, text)
{
	$('body')
		.append('<p class="tooltip" id="tooltip-' + id + '">' + text + '</p>');

	$('#tooltip-' + id)
		.css("top", (e.pageY + 10) + "px")
		.css("left", (e.pageX + 20) + "px")
		.fadeIn("fast");
}

/*
	A function to show a tooltip with a specific ID, for 3 seconds only.
*/

function showTimedToolTip(e, id, text)
{
	$('body')
		.append('<p class="tooltip" id="tooltip-' + id + '">' + text + '</p>');

	$('#tooltip-' + id)
		.css("top", (e.pageY + 10) + "px")
		.css("left", (e.pageX + 20) + "px")
		.fadeIn("fast");

	setInterval('hideToolTip(\'' + id + '\')', 3000);
}

/*
	A function to hide a tooltip with a specific ID.
*/
function hideToolTip(id)
{
	$('#tooltip-' + id)
		.fadeOut("fast");	
}