debugScreen

base on JQuery lib add a debug Screen on the page. developer can add more command on it.

by canis

HTML

<input type="button" onClick="$.debug.show();" value="DEBUG"/>
  <ol>
    <li>$.debug.init();<br>
     init debug window.</li>
    <li>$.debug.show();<br>
     display debug window</li>
    <li>$.debug.hide();<br>
     hidden debug window</li>
    <li>$.debug.log(string);<br>
     print text(string) on debug console. do what ever you want.</li>
    <li>$.debug.addCmd(cmdClass,cmdClass,cmdClass);<br>
     assign a command function to debug window.<br>
     cmdClass must contain following object.<br>
     cmdClass.tag = “string"; // your command<br>
     cmdClass.info = “string"; // description for your command<br>
     cmdClass.fn = function(){}; // the function call you want to link to this command</li>
    <li>$.debug.run(string)<br>
     this will tried to search the command you setup. and do the job.</li>
  </ol>

CSS

/**********************
 debug scr
**********************/
#debugScr{
	top:-100%;
	left:5%;
	z-index: 10;
	display:none;
	margin:0px;
	padding:10px;
	color: #0F0;
	background-color:#000000;
	background-color: rgba(0,0,0,0.8);
	overflow:hidden;
	font-family: 'monospace','Lucida Console','Lucida Sans Unicode','Verdana';
	-moz-box-shadow: 0px 0px 10px #000000;
	-webkit-box-shadow: 0px 0px 10px #000000;
	box-shadow: 0px 0px 10px #000000;
}
#debugScr.fixed{
	position:fixed;
	_position:absolute;
}
#debugScr.small
{
	width:80%;
	height:50%;
}
#debugScr.full
{
	width:90%;
	height:90%;
}
#debugScr table{
	border: 1px #050 dashed;
	padding:10px;
}
#debugScr h1{
	font-family: 'Impact';
	font-size: 200%;
	font-weight: normal;
	color:#090;
	margin:0px;
	padding:0px;
	line-height: normal;
}
#debugScr #terminal{
	width:100%;
	height:100%;
	background-color:transparent;
	color: #00CC00;
	white-space:nowrap;
	border-style:none;
	resize: none;
	outline:none;
	-moz-appearance:none; // firefox outline remove
	overflow: auto;
}
#debugScr .inputArea{
	position:relative;
	border-top: 1px #009900 dashed;
	background-color: transparent;
}
#debugScr .inputArea:after{
	content:" > ";
	position: absolute;
	top: 3px;
	left:15px;
	font-size:130%;
	font-family: 'Impact','Verdana';
	text-decoration: blink;
}
#debugScr .inputArea input{
	background-color: transparent;
	color: #0F0;
	padding:5px;
	padding-left:40px;
	font-size:120%;
	border:none;
	width:95%;
}

JavaScript

(function($, window, document){
	var debugScr;
	var terminal;
	var inputBox;
	var runCmd = "";
	var cmdList = [];
	var _debug = {
		init : function(){
			if( $("#debugScr").length===0){
				// create
				$("body").append("<div id=\"debugScr\" class=\"fixed small\">"+
						"<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" height=\"100%\">"+
						"<tbody><tr valign=\"top\"><td><h1>DEBUG :</h1></td></tr>"+
						"<tr height=\"80%\" valign=\"top\"><td height=\"80%\">"+
						"<textarea id=\"terminal\" rows=\"25\" readonly=\"readonly\"></textarea>"+
						"</td></tr><tr>"+
						"<td><div class=\"inputArea\"><input type=\"text\" value=\"\"></div></td></tr></tbody></table></div>");
			}
			debugScr=$("#debugScr");
			terminal=$("#debugScr #terminal");
			inputBox=$("#debugScr .inputArea input:first");
			// function method
			debugScr.dblclick(function(){ $.debug.hide(); });
			debugScr.click(function(){ inputBox.focus(); });
			// run input command.
			inputBox.keyup(function(event){
				if( event.keyCode==13 ){
					runCmd = $(this).val();
					$(this).val("");
					$.debug.run(runCmd);
				}
			});
			// link up debug panel.
			$(window).error(function(msg,url,line){
				try{
					$.debug.log("[System Error]\n\t url : "+url+"\n\t line : "+line+"\n\t msg : "+msg+"\n");
				}catch(e){}
				return true;
			});
			// last status of debug window.
			if( $.loadCache("CFDebug",false) )
				$.debug.show();
			else
				$.debug.hide();
		},
		log : function (_str){
			var _txt = terminal.val();
			terminal.val(_txt +"\n "+ _str);
			terminal.scrollTop( terminal.get(0).scrollHeight );
			_txt = "";
		},
		show : function(){
			$.debug.log("display debug screen");
			debugScr.show().animate({top:'0px'},800);
			inputBox.focus();
			$.saveCache("CFDebug", true, 5); // within 5min refresh, will remind display this screen
		},
		hide : function(){
			$.debug.log("hidden debug...