# HG changeset patch
# User Nicholas Jillings <nickjillings@users.noreply.github.com>
# Date 1425841086 0
# Node ID c97a35dc45e54e26c07873936cc681ddc7d4e12b
# Parent  e1f00361326d970eb9e06a78b4b1e8b1cc202717
function loadProjectSpec will parse XML project specification and build interface. Still needs full work. Interface is loaded in ape.js

diff -r e1f00361326d -r c97a35dc45e5 ape.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/ape.js	Sun Mar 08 18:58:06 2015 +0000
@@ -0,0 +1,61 @@
+/**
+ *  ape.js
+ *  Create the APE interface
+ */
+
+// Once this is loaded and parsed, begin execution
+loadInterface(projectXML);
+
+function loadInterface(xmlDoc) {
+	
+	var width = window.innerWidth;
+	var height = window.innerHeight;
+	
+	// Set background to grey #ddd
+	document.getElementsByTagName('body')[0].style.backgroundColor = '#ddd';
+	
+	// The injection point into the HTML page
+	var insertPoint = document.getElementById("topLevelBody");
+	
+	// Decode parts of the xmlDoc that are needed
+	// xmlDoc MUST already be parsed by jQuery!
+	var xmlSetup = xmlDoc.find('setup');
+	// Should put in an error function here incase of malprocessed or malformed XML
+	
+	// Create the top div for the Title element
+	var titleAttr = xmlSetup[0].attributes['title'];
+	var title = document.createElement('div');
+	title.className = "title";
+	title.align = "center";
+	var titleSpan = document.createElement('span');
+	
+	// Set title to that defined in XML, else set to default
+	if (titleAttr != undefined) {
+		titleSpan.innerText = titleAttr.value;
+	} else {
+		titleSpan.innerText =  'APE Tool';
+	}
+	// Insert the titleSpan element into the title div element.
+	title.appendChild(titleSpan);
+	
+	// Now create the slider and HTML5 canvas boxes
+	
+	var sliderBox = document.createElement('div');
+	sliderBox.className = 'sliderCanvasDiv';
+	sliderBox.id = 'sliderCanvasHolder'; // create an id so we can easily link to it later
+	sliderBox.align = 'center';
+	
+	var canvas = document.createElement('canvas');
+	canvas.id = 'slider';
+	canvas.width = width - 100;
+	canvas.height = 150;
+	canvas.style.backgroundColor = '#eee';
+	
+	sliderBox.appendChild(canvas);
+	
+	
+	// Inject into HTML
+	insertPoint.innerHTML = null; // Clear the current schema
+	insertPoint.appendChild(title); // Insert the title
+	insertPoint.appendChild(sliderBox);
+}
diff -r e1f00361326d -r c97a35dc45e5 core.js
--- a/core.js	Sun Mar 08 12:30:25 2015 +0000
+++ b/core.js	Sun Mar 08 18:58:06 2015 +0000
@@ -7,7 +7,7 @@
 
 /* create the web audio API context and store in audioContext*/
 var audioContext;
-
+var projectXML;
 var audioEngineContext;
 
 window.onload = function() {
@@ -25,6 +25,28 @@
 function loadProjectSpec(url) {
 	// Load the project document from the given URL, decode the XML and instruct audioEngine to get audio data
 	// If url is null, request client to upload project XML document
+	var r = new XMLHttpRequest();
+	r.open('GET',url,true);
+	r.onload = function() {
+		loadProjectSpecCallback(r.response);
+	}
+	r.send();
+}
+
+function loadProjectSpecCallback(response) {
+	// Function called after asynchronous download of XML project specification
+	var decode = $.parseXML(response);
+	projectXML = $(decode);
+	
+	// Now extract the setup tag
+	var xmlSetup = projectXML.find('setup');
+	var interfaceType = xmlSetup[0].attributes['interface'];
+	var interfaceJS = document.createElement('script');
+	interfaceJS.setAttribute("type","text/javascript");
+	if (interfaceType.value == 'APE') {
+		interfaceJS.setAttribute("src","ape.js");
+	}
+	document.getElementsByTagName("head")[0].appendChild(interfaceJS);
 }
 
 function createProjectSave(destURL) {
diff -r e1f00361326d -r c97a35dc45e5 graphics.css
--- a/graphics.css	Sun Mar 08 12:30:25 2015 +0000
+++ b/graphics.css	Sun Mar 08 18:58:06 2015 +0000
@@ -2,6 +2,9 @@
  * Define colours and effects for classes and objects
  */
 
+div.title {
+	font-size: 2em;
+}
+
 body {
-
 }
diff -r e1f00361326d -r c97a35dc45e5 structure.css
--- a/structure.css	Sun Mar 08 12:30:25 2015 +0000
+++ b/structure.css	Sun Mar 08 18:58:06 2015 +0000
@@ -2,6 +2,12 @@
  * Define the structure for classes and objects in HTML
  */
 
+div.title {
+	width = 100%;
+	height = 50px;
+	margin-bottom: 10px;
+}
+
 body {
 
 }