Made-Up UI Framework.js

myFramework = {
	viewport: {
		height: "800"
		, width: "800"
		, color: "#cdcdcd"
		, components: []
		, render: function(){
			//Destory viewport if it already exists
			var existingVp = document.getElementById('myFramework-viewport');
			if (existingVp){
				existingVp.outerHTML = '';
				delete existingVp;
			}

			//Create base viewport
			var vpContent = document.createTextNode("hello world");
			
			this.el = document.createElement('div');
			this.el.appendChild(vpContent);
			this.el.id = 'myFramework-viewport'
			this.el.style.height = this.height;
			this.el.style.width = this.width;
			this.el.style.backgroundColor = this.color;

			document.body.insertBefore(this.el, document.body.firstChild);

			//Render out components
			for (var i = 0; i < this.components.length; i++) {
				var cmp = this.components[i];
				cmp.render();
			};
		}
	}
	, init: function(){
		this.render();
	}
	, component: function(){

		return {
			height: '400'
			, width: '400'
			, content: 'Default Component Content'
			, color: "#f1f1f1"
			, render: function(){
				var cmpConent = document.createTextNode(this.content);
				var viewport = document.getElementById('myFramework-viewport');

				this.el = document.createElement('div');
				this.el.appendChild(cmpConent);
				this.el.style.height = this.height;
				this.el.style.width = this.width;
				this.el.style.backgroundColor = this.color;
				

				viewport.insertBefore(this.el, viewport.firstChild);
			}
		}
	}
	, registerComponent: function(component){
		this.viewport.components.push(component);
		this.render();
	}
	, render: function(){
		this.viewport.render();
	}
}

foo = new myFramework.component();
myFramework.registerComponent(foo);

bar = new myFramework.component();
bar.content = "Some other bullshit";
bar.color = "red";
myFramework.registerComponent(bar);