wess/views.js

## views.js
<script type="text/javascript" charset="utf-8">
		;(function($){
			var views = {};
			views.FULL_WIDTH = "100%";

			views.__builder = Class.extend({
				init: function(options)
				{
					this.styles 	= options.styles || false;
					this.classes 	= options.classes || false;
					this.id			= options.id || false;
					this.tag		= options.tag || 'div';
					this.commit		= options.commit || true;

					this.target		= (options.target == document.body)? document.body : $(options.target)[0] || document.body;
				},

				set: function(key, val)
				{
					this[key] = val;
				},

				render: function()
				{
					this.element = document.createElement(this.tag);

					if(this.id)
						this.attr('id',this.id);

					if(this.classes)
						this.attr('class', this.classes.join(" "));

					this.__styles();

					if(this.commit)
						this.target.appendChild(this.element);

					return this.element;
				},

				__styles: function()
				{
					var styleString = '';

					if(this.styles)
					{
						for(item in this.styles)
							styleString += "%@:%@;".$$(item, this.styles[item]);
					}

					this.attr('style', styleString);
				},

				attr: function(key, value)
				{
					this.element.setAttribute(key, value);
				}
			});

			// Page types are divs with absolute position.
			views.Page = function(options)
			{
				var background = options.background || false;

				var styles = {
					position:'absolute',
					top:0,
					left:0,
					bottom:0,
					right:0,
					width:views.FULL_WIDTH,
					height:"100%",
					background:'red'
				}

				if(background)
					styles.background = background

				this.builder = new views.__builder({
					styles: styles,
					classes: ['mk-main-pane'],
					tag: 'div',
					target: document.body,
					commit: true
				});

				this.element = this.builder.render();

				var children = options.children || {};
				if(Object.size(children) > 0)
				{
					for(child in children)
					{
						children[child].set("id", child);
						this.element.appendChild(children[child].render());
					}
				}
			};

			views.Pane = function(options)
			{
				var options = options || {};
				var layout 	= options.layout || { top: 0, left:0, right:0, bottom:"", width:"", height:"" };
				var styles 	= options.styles || {};
				var tag 	= 'div';

				var classes = options.classes || [];
				classes.push('mk-general-pane');

				Object.extend(styles, {
					position:"absolute",
					top: layout.top || "",
					left: layout.left || "",
					right: layout.right || "",
					bottom:layout.bottom || "",
					width:layout.width || "",
					height:layout.height || ""
				});

				this.builder = new views.__builder({
					styles: styles,
					classes: classes,
					tag: 'div',
					commit: options.commit || false
				});

				return this.builder;
			}

			window.views = views;
		})(Sizzle);
</script>
</head>
<body>
<script type="text/javascript" charset="utf-8">
	var mainPage = new views.Page({
		children: {
			header: views.Pane({
				layout: { top: 0, left: 0, right:0, width:views.FULL_WIDTH, height:"60px" },
				styles: {
					background:"blue",
					"border-bottom": "1px solid black"
				},
				classes: ['header']
			}),

			leftCol: views.Pane({
				layout: { top: "61px", left:0, bottom:0, width:"200px", height:"auto"},
				styles: {
					background:"green"
				},

				classes: ['col']
			})
		}
	})
</script>
</body>
	<script type="text/javascript" charset="utf-8">
	;(function($){
	var views = {};
	views.FULL_WIDTH = "100%";

	views.__builder = Class.extend({
	init: function(options)
	{
	this.styles = options.styles \|\| false;
	this.classes = options.classes \|\| false;
	this.id = options.id \|\| false;
	this.tag = options.tag \|\| 'div';
	this.commit = options.commit \|\| true;

	this.target = (options.target == document.body)? document.body : $(options.target)[0] \|\| document.body;
	},

	set: function(key, val)
	{
	this[key] = val;
	},

	render: function()
	{
	this.element = document.createElement(this.tag);

	if(this.id)
	this.attr('id',this.id);

	if(this.classes)
	this.attr('class', this.classes.join(" "));

	this.__styles();

	if(this.commit)
	this.target.appendChild(this.element);

	return this.element;
	},

	__styles: function()
	{
	var styleString = '';

	if(this.styles)
	{
	for(item in this.styles)
	styleString += "%@:%@;".$$(item, this.styles[item]);
	}

	this.attr('style', styleString);
	},

	attr: function(key, value)
	{
	this.element.setAttribute(key, value);
	}
	});

	// Page types are divs with absolute position.
	views.Page = function(options)
	{
	var background = options.background \|\| false;

	var styles = {
	position:'absolute',
	top:0,
	left:0,
	bottom:0,
	right:0,
	width:views.FULL_WIDTH,
	height:"100%",
	background:'red'
	}

	if(background)
	styles.background = background

	this.builder = new views.__builder({
	styles: styles,
	classes: ['mk-main-pane'],
	tag: 'div',
	target: document.body,
	commit: true
	});

	this.element = this.builder.render();

	var children = options.children \|\| {};
	if(Object.size(children) > 0)
	{
	for(child in children)
	{
	children[child].set("id", child);
	this.element.appendChild(children[child].render());
	}
	}
	};

	views.Pane = function(options)
	{
	var options = options \|\| {};
	var layout = options.layout \|\| { top: 0, left:0, right:0, bottom:"", width:"", height:"" };
	var styles = options.styles \|\| {};
	var tag = 'div';

	var classes = options.classes \|\| [];
	classes.push('mk-general-pane');

	Object.extend(styles, {
	position:"absolute",
	top: layout.top \|\| "",
	left: layout.left \|\| "",
	right: layout.right \|\| "",
	bottom:layout.bottom \|\| "",
	width:layout.width \|\| "",
	height:layout.height \|\| ""
	});

	this.builder = new views.__builder({
	styles: styles,
	classes: classes,
	tag: 'div',
	commit: options.commit \|\| false
	});

	return this.builder;
	}

	window.views = views;
	})(Sizzle);
	</script>
	</head>
	<body>
	<script type="text/javascript" charset="utf-8">
	var mainPage = new views.Page({
	children: {
	header: views.Pane({
	layout: { top: 0, left: 0, right:0, width:views.FULL_WIDTH, height:"60px" },
	styles: {
	background:"blue",
	"border-bottom": "1px solid black"
	},
	classes: ['header']
	}),

	leftCol: views.Pane({
	layout: { top: "61px", left:0, bottom:0, width:"200px", height:"auto"},
	styles: {
	background:"green"
	},

	classes: ['col']
	})
	}
	})
	</script>
	</body>