forcen/Tag library sample

## Tag library sample
<html>
<head>
<title>
	Tag library sample
</title>
<style type="text/css">
	body{margin:0;padding:0}
	.tag-header{background:gray;height:30px;text-align:center;color:white;margin:0 0 12px 0;padding:12px;}
	.tag-header h1{font:bold 24px Helvetica;margin:0;padding:0;}
	.tag-content{text-align:center;padding:0 16px}
	.tag-content button{display:block;margin:16px auto;padding:12px;border-radius:8px;font:bold 18px Helvetica;width:100%;}
</style>
</head>

<body>
	<div id="one" tag-role="header">
		<h1>Test</h1>
	</div>

	<div tag-role="content">
		<button id="first" tag-click="btnAlert">Click Me</button>

		<button id="second" tag-click="btnAlert">Click Me Too</button>
	</div>
</body>

<script>
function btnAlert (objItem) {
	alert(objItem.id);
}

var libTag = {
	applyStyles: function () {
		var arrElements = document.getElementsByTagName('div'),
			numElements = arrElements.length,
			strRole, i;

		for(i = 0; i < numElements; i++) {
			strRole = arrElements[i].getAttribute('tag-role');

			if(strRole) {
				arrElements[i].setAttribute('class', 'tag-' + strRole);
			}
		}
	},

	createClickListener: function (strController, objItem) {
	    objItem.addEventListener('click',
					function () {
						if(window[strController] && typeof window[strController] === 'function') {
							window[strController](objItem);
						}
					},
					false);
	},

	applyControllers: function () {
		var arrElements = document.getElementsByTagName('*'),
			numElements = arrElements.length,
			strController,
			i;

		for(i = 0; i < numElements; i++) {
			strController = arrElements[i].getAttribute('tag-click');
			if(strController) {
				this.createClickListener(strController, arrElements[i]);
			}
		}
	}
};

(function () {
	libTag.applyStyles();
	libTag.applyControllers();
}());
</script>
</html>
	<html>
	<head>
	<title>
	Tag library sample
	</title>
	<style type="text/css">
	body{margin:0;padding:0}
	.tag-header{background:gray;height:30px;text-align:center;color:white;margin:0 0 12px 0;padding:12px;}
	.tag-header h1{font:bold 24px Helvetica;margin:0;padding:0;}
	.tag-content{text-align:center;padding:0 16px}
	.tag-content button{display:block;margin:16px auto;padding:12px;border-radius:8px;font:bold 18px Helvetica;width:100%;}
	</style>
	</head>

	<body>
	<div id="one" tag-role="header">
	<h1>Test</h1>
	</div>

	<div tag-role="content">
	<button id="first" tag-click="btnAlert">Click Me</button>

	<button id="second" tag-click="btnAlert">Click Me Too</button>
	</div>
	</body>

	<script>
	function btnAlert (objItem) {
	alert(objItem.id);
	}

	var libTag = {
	applyStyles: function () {
	var arrElements = document.getElementsByTagName('div'),
	numElements = arrElements.length,
	strRole, i;

	for(i = 0; i < numElements; i++) {
	strRole = arrElements[i].getAttribute('tag-role');

	if(strRole) {
	arrElements[i].setAttribute('class', 'tag-' + strRole);
	}
	}
	},

	createClickListener: function (strController, objItem) {
	objItem.addEventListener('click',
	function () {
	if(window[strController] && typeof window[strController] === 'function') {
	window[strController](objItem);
	}
	},
	false);
	},

	applyControllers: function () {
	var arrElements = document.getElementsByTagName('*'),
	numElements = arrElements.length,
	strController,
	i;

	for(i = 0; i < numElements; i++) {
	strController = arrElements[i].getAttribute('tag-click');
	if(strController) {
	this.createClickListener(strController, arrElements[i]);
	}
	}
	}
	};

	(function () {
	libTag.applyStyles();
	libTag.applyControllers();
	}());
	</script>
	</html>