var Screening = {
	views : [],
	x : 0,
	y : 0,
	
	/**
	 * Get the X and Y properties of the viewport
	 */
	getViewPortXY : function () {
		var x,y;
		if (window.innerHeight) // all except Explorer
		{
			x = window.innerWidth;
			y = window.innerHeight;
		}
		else if (document.documentElement && document.documentElement.clientHeight)
			// Explorer 6 Strict Mode
		{
			x = document.documentElement.clientWidth;
			y = document.documentElement.clientHeight;
		}
		else if (document.body) // other Explorers
		{
			x = document.body.clientWidth;
			y = document.body.clientHeight;
		}
		
		this.x = x;
		this.y = y;
	},
	
	/**
	 * Add multiple layouts. 
	 * @param cssId String -> the id specified in your CSS like body#pda 'pda' would be your ID
	 * @param layoutWidth int -> the max. width of your layout that is specified with cssId
	 * @param layoutHeight int -> the max. height of your layout that is specified with cssId
	 */
	addView : function (cssId, layoutWidth, layoutHeight) {
		this.views.push({id:cssId, width:layoutWidth, height:layoutHeight});
	},
	
	/**
	 * Set one of the specified views added by addView();
	 */
	init : function () {
		Screening.changeView();
		window.onresize = function () {
			Screening.changeView();
		}
	},
	
	changeView : function () {
		this.getViewPortXY();
		document.body.id = this.getViewId();
	},
	
	/**
	 * Get the id for the current view
	 * @todo Implement the height check
	 * @return String
	 */
	getViewId : function () {
		var activeView = 0;
		for (var i=0; i<this.views.length; i++)
		{
			if (this.views[i].width > this.x)
			{
				continue;
			}
			activeView = i;
		}
		return this.views[activeView].id;
	}
}