<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
	<head>
		<title>log4javascript in-page console demo</title>
		<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
		<meta name="author" content="Tim Down - tim@log4javascript.org" />
		<meta name="description" content="log4javascript, a logging framework for JavaScript based on log4j" />
		<meta name="robots" content="all" />
		<link rel="stylesheet" type="text/css" media="screen,print" href="../main.css" title="Default" />
		<script type="text/javascript" src="../js/log4javascript_uncompressed.js"></script>
		<script type="text/javascript">
			// <![CDATA[
			var log = log4javascript.getLogger("main");
			var appender = new log4javascript.InPageAppender();
			log.addAppender(appender);
			log.debug("This is a debugging message from the log4javascript in-page page");

			var words = ["Watford", "eased", "their", "relegation", "fears", "with", "a", "win",
				"against", "a", "Charlton", "side", "who", "slipped", "further", "towards", "the",
				"drop", "Don", "Cowie", "drilled", "in", "a", "shot", "to", "put", "the", "Hornets",
				"ahead", "before", "Tresor", "Kandol", "ended", "a", "powerful", "run", "by",
				"rounding", "keeper", "Scott", "Loach", "and", "slotting", "in", "to", "level"
			];

			var loaded = false;

			function generateRandom() {
				var numberOfEntries = parseInt(document.getElementById("numberOfLogEntries").value);
				for (var i = 0; i < numberOfEntries; i++) {
					var numberOfWords = 1 + Math.floor(10 * Math.random());
					var entryWords = [];
					for (var j = 0; j < numberOfWords; j++) {
						entryWords.push(words[Math.floor(Math.random() * words.length)]);
					}
					var entryMessage = entryWords.join(" ");
					var levelNum = Math.floor(Math.random() * 6);
					switch (levelNum) {
						case 0:
							log.trace(entryMessage);
							break;
						case 1:
							log.debug(entryMessage);
							break;
						case 2:
							log.info(entryMessage);
							break;
						case 3:
							log.warn(entryMessage);
							break;
						case 4:
							log.error(entryMessage);
							break;
						case 5:
							log.fatal(entryMessage);
							break;
					}
				}
			}
			
			var consoleVisible = true;
			
			function toggleConsole(button) {
				if (consoleVisible) {
					appender.hide();
					button.value = "Show console";
					consoleVisible = false;
				} else {
					appender.show();
					button.value = "Hide console";
					consoleVisible = true;
				}
			}

			function generateObjectExpansion() {
				var debugObj = {
					a: {
						b: "stuff",
						c: 3,
						d: {
							e: ["a", "b", "c"]
						}
					},
					f: "Things",
					g: 5
				};
				log.debug(debugObj);
			}

			function generateError() {
				try {
					throw new Error("Made up error");
				} catch (ex) {
					log.error("Logging an error!", ex);
				}
			}
			// ]]>
		</script>
	</head>
	<body>
		<div id="container" class="nonav">
			<div id="header">
				<h1><a href="/docs/index.html">log4javascript</a></h1>
			</div>
			<div id="content">
				<div id="nav">
					<a class="navitem" href="../index.html">home</a>
					| <a class="navitem" href="http://sourceforge.net/projects/log4javascript" target="_blank" title="Download (opens in new window)">download</a>
					| <a class="navitem" href="../docs/index.html">docs</a>
					| <a class="navitem" href="../docs/quickstart.html">quick start</a>
					| <a class="navitem" href="index.html">demos</a>
					| <a class="navitem" href="http://log4javascript.org" target="_blank">website</a>
					| <a class="navitem" href="http://www.timdown.co.uk" target="_blank">timdown.co.uk</a>
				</div>
				<h1>log4javascript in-page console demo</h1>
				<p>
					This demo demonstrates an in-page logger. The example uses the default behaviour, which
					is to place the log console in a fixed area at the bottom of the page. However, the
					console may be placed inside any element in the page. To do this, you may specify the ID
					of the element (even if the page has not yet loaded) or a reference to the element itself.
				</p>
				<p>
					Enter a log message below and click on one of the buttons to log
					your message at your desired level. You can then filter by
					log level, toggle word-wrapping and perform text and regular
					expression searches on the log entries.
				</p>
				<div class="example">
					<input type="button" value="Hide console" onclick="toggleConsole(this)" />
					<br />
					<input type="text" id="logText" value="Put log message here" />
					<input type="button" value="debug" onclick="log.debug(document.getElementById('logText').value)" />
					<input type="button" value="info" onclick="log.info(document.getElementById('logText').value)" />
					<input type="button" value="warn" onclick="log.warn(document.getElementById('logText').value)" />
					<input type="button" value="error" onclick="log.error(document.getElementById('logText').value)" />
					<input type="button" value="fatal" onclick="log.fatal(document.getElementById('logText').value)" />
					<br />
					<input type="button" value="assert 1 equals 1" onclick="log.assert(1 === 1)" />
					<input type="button" value="assert 1 equals 2" onclick="log.assert(1 === 2)" />
					<br />
					Generate <input type="text" size="5" id="numberOfLogEntries" value="50" /> random log entries
					<input type="button" value="go" onclick="generateRandom()" />
					<br />
					<input type="button" value="Log exception" onclick="generateError()" />
					<input type="button" value="Log example object" onclick="generateObjectExpansion()" />
					<br />
					<input type="checkbox" id="enabled" onclick="log4javascript.setEnabled(this.checked)" checked="checked" /> <label for="enabled">logging enabled</label>
					<br />
					<input type="text" id="groupName" value="Group name" />
					<input type="button" value="group" onclick="log.group(document.getElementById('groupName').value)" />
					<input type="button" value="end group" onclick="log.groupEnd()" />
					<br />
					<input type="text" id="timerName" value="Example timer name" />
					<input type="button" value="start timer" onclick="log.time(document.getElementById('timerName').value)" />
					<input type="button" value="end timer" onclick="log.timeEnd(document.getElementById('timerName').value)" />
				</div>
			</div>
			<br class="clear" />
			<div id="log"></div>
			<div id="footer">
				<span class="externallinkinfo">
					<strong>NB.</strong> All external links open in a new window.
				</span>
				Written by Tim Down. <a href="mailto:tim@log4javascript.org">tim@log4javascript.org</a>
				<br />
				log4javascript is distributed under the <a href="http://www.apache.org/licenses/LICENSE-2.0.html"
					title="Apache License, Version 2.0 (opens in new window)" target="_blank">Apache License,
					Version 2.0</a>

			</div>
		</div>

	</body>
</html>