Several files squished into one for a mysql enabled editor with schema to json to html converter

gistfile1.phtml

/**
 *Requires CodeMirror
 *Seperate files
 * probably have to fix links in html
 * javascript/php post not working
 * PM/pm.js, PM/pm.html, PM/pm.css, PM/data.php
 *
**/ 


//Inline Javascript
function AJAX(url, vars,callback){
	var httpRequest;
	if (window.XMLHttpRequest) { // Mozilla, Safari, ...
	    httpRequest = new XMLHttpRequest();
	} else if (window.ActiveXObject) { // IE 8 and older
	    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
	}
	httpRequest.onreadystatechange = function(){
		if (httpRequest.readyState === 4){
			if (httpRequest.status === 200){
				console.log("Response Received");
				console.log(httpRequest.responseText);
				callback(httpRequest.responseText);
			}else{
				console.log(httpRequest.status);
				console.log(httpRequest.response);
				//Error
			}
		}else{
			//console.log(httpRequest.readyState);
			//Not Ready
		}
	};
	var req = "";
	if (typeof vars === "string") {
		req = vars;
	}else if (typeof vars === "object"){
		req = "?"
		function call(o,prefix){
			return crawl(o,prefix);
		}
		function crawl(o,prefix){
			for (var k in o){
				if (typeof k==="string"){
					var val = o[k];
					if (typeof val==="string"){
						req+=prefix+k+"="+escape(val)+"&";
					}else if(typeof val === "object"){
						call(o,prefix+k+"-");
					}
				}
				
			}
		}
		call(vars,"");
	}
	console.log(req);
	function get() {
    	httpRequest.open('GET', url+req, true);
    	httpRequest.send(null);
	}
	function post() {
    	httpRequest.open('post', url, false);
    	httpRequest.send(req);
	}
	return {'post': post, 'get': get};
}
var DocTitle = "Untitled Document"; 
var h1 = document.body.getElementsByTagName("h1")[0];
h1.addEventListener("click",function(e){
	h1.innerHTML = prompt("Title", DocTitle);
},false);
var myTextArea = document.getElementById("myTextArea");
var specificData = document.getElementById("specific").getElementsByTagName("p")[0];
var mappings = {
	'Shift-Ctrl-S': function(cm) {
		//Actually save data here
		var val = cm.getValue();
		var doc = encodeURIComponent(btoa(val));
		specificData.innerHTML = doc;
		var req = "?derpr=herp&title="+escape(h1.innerHTML)+"&doc="+doc+"&name=Guest&details=No%20details&version=2";
		//req = {"mode": "save", "title" : escape(h1.innerHTML),"doc":encodeURIComponent(btoa(val))};
		AJAX("PM/data.php", req, function(data){
			specificData.innerHTML = data;
		}).post()
	},
	'Shift-Ctrl-D': function(cm) {
		//Load a file
		AJAX("PM/data.php","title="+escape(h1.innerHTML),function(data){
			specificData.innerHTML = data;
		}).post();
	},
	'Shift-Ctrl-A': function(cm) {
		//Insert Time
		var pos = cm.getCursor();
		cm.replaceRange((new Date).toLocaleString(), pos);
	},
	"F11": function(cm) {
		setFullScreen(cm, !isFullScreen(cm));
	},
	"Esc": function(cm) {
		if (isFullScreen(cm)) setFullScreen(cm, false);
	}
};
function charMultiply(character,times){
	str=""; 
	for (var i=0; i<times; i++) { str+=character; }
	return str;
}
function genhtml(obj){
	var b1= "";
	call(obj,0);
	//Array(myCodeMirror.getOption("indentUnit") + 1).join(" ");
	
	function call(o,l){
		return crawl(o,l);
	}
	function crawl(o,l){
		for (var k in o) {
			ident = "  ";
			var c = o[k];
			var attributes = "";
			if (!!c['attr']){
				for (var key in c['attr']){
					var value = c['attr'][key];
					attributes += " " + key + "=\"" + value + "\"";
				}
			}
			if (!!c['value']){
				c=c['value'];
			}
			if (k == "text-node"){
				b1+="\n"+charMultiply(ident,l)+c;
			}else if (k == "text-nodes") {
				for (var i = 0; i < c.length; i++){
					b1+="\n"+charMultiply(ident,l)+c[i];
				}
			}else if (typeof c === "string"){
				b1+="\n"+charMultiply(ident,l)+"<"+k+attributes+">"+c+"</"+k+">";
			}else if (['attr','value'].indexOf(k)!=-1){
			}else{
				b1+="\n"+charMultiply(ident,l)+"<"+k+attributes+">";
				var so = call(c,l+1);
				b1+="\n"+charMultiply(ident,l)+"</"+k+">";
			}
		}
	}
	return b1.trim();
}
/*
	Ctrl-F / Cmd-F
	Start searching
	Ctrl-G / Cmd-G
	Find next
	Shift-Ctrl-G / Shift-Cmd-G
	Find previous
	Shift-Ctrl-F / Cmd-Option-F
	Replace
	Shift-Ctrl-R / Shift-Cmd-Option-F
*/
function isFullScreen(cm) {
	return /\bCodeMirror-fullscreen\b/.test(cm.getWrapperElement().className);
}
function winHeight() {
	return window.innerHeight || (document.documentElement || document.body).clientHeight;
}
function setFullScreen(cm, full) {
	var wrap = cm.getWrapperElement();
	if (full) {
		wrap.className += " CodeMirror-fullscreen";
		wrap.style.height = winHeight() + "px";
		document.documentElement.style.overflow = "hidden";
	} else {
		wrap.className = wrap.className.replace(" CodeMirror-fullscreen", "");
		wrap.style.height = "";
		document.documentElement.style.overflow = "";
	}
	cm.refresh();
}
CodeMirror.on(window, "resize", function() {
	var showing = document.body.getElementsByClassName("CodeMirror-fullscreen")[0];
	if (!showing) return;
	showing.CodeMirror.getWrapperElement().style.height = winHeight() + "px";
});
var valhtml = genhtml(
	{
		"text-node": "<!doctype html>",
		"html":
		{"attr":{"lang":"en"},
			"head": {
				"title":"Untitled Document",
				"style":{
					"text-nodes":[
						"html, body { height: 100%; }",
						"* { margin: 0; padding: 0; }"
				]}
			} ,
			"body": {
				"h1":"",
				"script":{
					"attr":{"type":"text/javascript"},
					"value":{"text-node":"//Javascript"}
				},
//"!--":'{"html":{"attr":{"lang":"en"},"head": {"title":"Untitled Document","style":{"text-nodes":["html, body { height: 100%; }","* { margin: 0; padding: 0; }"]}'
			} 
		}
	}
);
var myCodeMirror = CodeMirror(
	function(elt) {
  		myTextArea.parentNode.replaceChild(elt, myTextArea);
	}, {
		//value: myTextArea.value,
		mode: "htmlmixed",
		theme: "ambiance",
		lineNumbers: true,
		//electricChars: true,
		extraKeys: mappings,
		tabMode: 'indent',
		value: valhtml,
		indentWithTabs: true,
		styleActiveLine: true,
		lineWrapping: true,
		//viewportMargin: Infinity
		//(html (head (title "Untitled Document") (style "")) (body (h1 "")))
	}
);
var delay;
// Initialize CodeMirror editor with a nice html5 canvas demo.
/*
setTimeout(updatePreview, 300);
myCodeMirror.on("change", function() {
	clearTimeout(delay);
	delay = setTimeout(updatePreview, 300);
});
function updatePreview() {
	var previewFrame = document.getElementById('preview');
	var preview =  previewFrame.contentDocument ||  previewFrame.contentWindow.document;
	preview.open();
	preview.write(myCodeMirror.getValue());
	preview.close();
}*/
//End of javascript




<!doctype html>
<html lang="en">
<head>
	<title>Project Manager</title>
	<link rel="stylesheet" href="/codemirror/lib/codemirror.css">
	<link rel="stylesheet" href="/codemirror/theme/ambiance.css">
	<link rel="stylesheet" href="/codemirror/theme/solarized.css">
	<link rel="stylesheet" href="/codemirror/addon/dialog/dialog.css">
	<link rel="stylesheet" href="PM/pm.css">
	<script src="/codemirror/lib/codemirror.js"></script>
	<script src="/codemirror/mode/javascript/javascript.js"></script>
	<script src="/codemirror/mode/xml/xml.js"></script>
	<script src="/codemirror/mode/javascript/javascript.js"></script>
	<script src="/codemirror/mode/css/css.js"></script>
	<script src="/codemirror/mode/vbscript/vbscript.js"></script>
	<script src="/codemirror/mode/htmlmixed/htmlmixed.js"></script>
	<script src="/codemirror/addon/selection/active-line.js"></script>
	<script src="/codemirror/addon/search/search.js"></script>
	<script src="/codemirror/addon/search/searchcursor.js"></script>
	<script src="/codemirror/addon/dialog/dialog.js"></script>
</head>
<body>
	<div class="hb1"><h1>Untitled Document</h1></div>
	<!--iframe id="preview"></iframe-->
	<textarea id="myTextArea" name="mta"></textarea>
	<ol class="left side">
		<div id="generic">
			<h2>Generic Project Management Information</h2>
			<h3>Intro</h2>
			<p>Hello I am introducing <em>#LbPM#</em>, a developmentally staged Project Management system created for the browser. The main goal was to be able to not only code anywhere but to be able to work as a team with other people and have the data on a readily accessible server. By the time the project is finshed, honestly that might take a while BUT, it will hopefully meet those goals or requirements. </p>
			<h3>Usage</h3>
			<p>Right now the only usage is that you can click the title to change it, it has basic CodeMirror functions like CTRL+F to find, and I am working on CTRL+SHIFT+S to save and CTRL+SHIFT+D to load. </p>
		</div>
		<div id="specific">
			<h2>Project specific information</h2>
			<p>No data has been set for this project</p>
		</div>
		<div id="collab">
			<h2>Collaboration</h2>
			<p></p>
		</div>
	</ol>
	<ol class="right side">
		<div id="details">
			<h2>Version details</h2>
			<div class="minipage">
				<div id="r1">
					<h3>Release 1 by Admin</h3>
					<p>First version, changes not applicable</p>
				</div>
				<div id="r2">
					<h3>Release 2 by Admin</h3>
					<p>Second release, minor changes</p>
				</div>
			</div>
		</div>
		<div id="versions">
			<h2>Versions</h2>
			<ol>
				<li><a href="#r1">Release 1 - January 1, 2011</a></li>
				<li><a href="#r2">Release 2 - January 2, 2011</a></li>
			</ol>
		</div>
	</ol>
	<script type="text/javascript" src="PM/pm.js"></script>
</body>
</html>


html, body { height: 100%; }
* { margin: 0; padding: 0; }
h1, h1 input {
	font-family: serif;
	font-weight: bold;
	text-align: center;
	margin: auto;
	vertical-align: middle;
}
h1 input, h1 input:focus {
	border: 0px solid transparent;
	outline: none;
}
.CodeMirror-activeline-background {background: #333 !important;}
.CodeMirror-fullscreen {
	display: block;
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	z-index: 9999;
}
.CodeMirror-scroll {
  height: auto;
  overflow-y: hidden;
  overflow-x: auto;
  width: 100%
}
.CodeMirror {
  height: auto;
}
.minipage {
	overflow: hidden;
	height: 100%;
}
.minipage * {
	height: 100%;
}
@media(min-width:800px) {
	.CodeMirror {
		min-width: 800px;
		margin: auto;
	}
	.hb1 {
		border-bottom: #7a7aa7 1px solid;
		margin-bottom: 16px;
		height: 42px;
	}
	h1 {
		background: #bbb;
		-webkit-background-clip: text;
		color: transparent;
		text-shadow: rgba(255,255,255,.5) 0px 5px 5px;
		font-size: 32px;
	}
	.hb1, h1 input {
		line-height: 42px;
		background: #eee;
		font-size: 32px;
	}
	.side {
		min-width: 300px;
		width: 43%;
		display: inline-block;
	}
	.side > div {
		min-height: 128px;
		margin: 16px;
		border: 1px solid #000;
		text-align: center;
		padding: 16px;
	}
	.side div h2 {
		margin: 8px;
		font-size: 28px;
	}
	.side div h3 {
		font-size: 22px;
		margin: 2px;
	}
	.side div p {
		font-family: sans-serif;
		font-size: 12px;
		width: 100%;
		word-wrap: break-word;
	}
	.side div ol, .side div ul {
		list-style-type: none;
	}
	.side div a, .side div a:active {
		color: #555;
		text-decoration: none;
	}
	.left {
		margin-left: 3%;
		float: left;
	}
	.right {
		margin-right:3%;
		float: right;
	}
	#preview {
		width: 100%;
		height: 400px;
		border: 1px solid #000;
		border-left: 0 solid transparent;
		border-right: 0 solid transparent;
	}
} 
@media(max-width:800px){
	.CodeMirror { 
		width: 100%;
	}
}


<?php
	//Please remember to change this later
	$host = 'sql3.mit.edu';
	$user = 'root';
	$pass = 'MIT.security~!';
	$name = 'lbpm';
	$con = mysql_connect($host,$user,$pass) or die(mysql_error());
	$dba = mysql_select_db($name, $con) or die(mysql_error());
	function createTable($name){
		if (isset($name)==true) {
			if(mysql_num_rows(mysql_query("SHOW TABLES LIKE '".$table."'"))==1){
				return "Table exists";
			}else{
				$cdt = "CREATE TABLE `lbpm`.`".$name."` (`id` INT NOT NULL AUTO_INCREMENT, `date` DATE NOT NULL, `version` VARCHAR(8) NOT NULL, `user` VARCHAR(16) NOT NULL, `details` VARCHAR(160) NOT NULL, `data` TEXT NOT NULL, PRIMARY KEY (`id`)) ENGINE = InnoDB;";
				mysql_query($cdt) OR die(mysql_error());
				return true;
			}
			
		}
		
	}
	function insertData($name, $version, $username, $details, $data){
		if (isset($name)!=true) { return false; }
		if (isset($version)!=true) { return false; }
		if (isset($username)!=true) { return false; }
		if (isset($details)!=true) { return false; }
		if (isset($data)!=true) { return false; }
		$itr = "INSERT INTO `lbpm`.`".$name."` (`id`, `date`, `version`, `user`, `details`, `data`) VALUES (NULL, CURRENT_TIMESTAMP, '".$version."', '".$username."', '".$details."', '".$data."')";
		mysql_query($itr) OR die(mysql_error());
		return true;
	}
	function getData($name) {
		$gtd = "\SELECT * FROM `".$name."` ORDER BY `id` DESC LIMIT 1";
		$res = mysql_query($gtd) or die(mysql_error());
		$obj = "null";
		if (msql_num_rows($res) == 0){
			return "{\"count\":0}";
		}
		while ($row = mysql_fetch_assoc($res)) {
			//id	date	version	user	details	data
			$jar = array($row['id'], $row['date'], $row['version'], $row['details'], $row['data']);
			echo $row['version'];
			$obj = json_encode($jar);
		}
		echo '\n\n';
		return $obj;
	}
	function parse(){
		$title = $_POST['title'];
		$docum = $_POST['doc'];
		$versn = $_POST['version'];
		$detai = $_POST['details'];
		$named = $_POST['name'];
		if (isset($_POST['title'])!=true) { return "No title"; }
		if (isset($docum)==true && isset($versn)==true && isset($detai)==true && isset($named)==true) {
			createTable($title);
			$returned = insertData($title, $versn, $named, $detai, $docum);
			return "Attempted to insert data";
		}else{
			return getData($title);
		}
	}
	echo parse();
	mysql_close($con);
?>