/**
 * Class HTML
 * a static class which is an html helper in that it outputs valid xhtml objects
 */
var HTMLObj = new Object();
Object.extend(
	HTMLObj, {
		/** 
		 * method tag
		 * @tag string - the html tag
		 * @attr_hash hash - a hash of attributes for the tag 
		 *@contents string - any text to go between open and closing.  must be clean; no <>'s can be passed in unescaped
		 */
		tag : function(tag, attr_hash, content) {
			var node = document.createElement(tag);

			if (attr_hash) {
				$H(attr_hash).each (function (attr) {
					var at = document.createAttribute(attr.key);
					at.value = attr.value;
					try {
						node.setAttributeNode(at);	//for firefox
					} catch (e) {
						node.setAttribute(at);	//for IE
					}
					if (attr.key == 'style') {
						var key_value = String(attr.value).split(';');
						key_value = $A(make_array(key_value));
						key_value.each (
							function (kv) {
								try {
									kv = String(kv).split(':');
									var styles = {};
									styles[kv[0]] = String(kv[1]).camelize();
									Element.setStyle(node, styles);
								}catch(e){}
							}
						);
					}
				});
			};
			
			if (content) {
				if (!is_array(content)) {
					this.append(node, content);
				} else {
					for (var i=0; i<content.length; i++) {
						this.append(node, content[i]);
					}
				}
			}
			
			return node;
		},
		
		append: function(node, content) {
			if (is_string(content)) {
				node.appendChild(document.createTextNode(content));
			} else if (is_object(content)) {
				node.appendChild(content);
			}
		}
	} //hash
); //object.extend
/**
 * rather than write a function for each tag, we're going to dynamically extend the HTML
 * object for the following tags, using the list to generate tag specific functions
 */
var tags = [
	'a',
	'address',
	'b',
	'body',
	'br',
	'code',
	'dd',
	'div',
	'dl',
	'dt',
	'em',
	'fieldset',
	'form',
	'h1',
	'h2',
	'h3',
	'h4',
	'h5',
	'h6',
	'head',
	'hr',
	'html',
	'i',
	'iframe',
	'img',
	'input',
	'label',
	'legend',
	'li',
	'link', 
	'ol',
	'optgroup',
	'option',
	'p',
	'pre',
	'script',
	'select',
	'span',
	'strong',
	'table',
	'tbody',
	'td',
	'textarea',
	'tfoot',
	'th',
	'thead',
	'title',
	'tr',
	'tt',
	'ul'
];

tags.each (
	function (t) {
		HTMLObj[t] = function (attributes, content) {
			return HTMLObj.tag (t, attributes || {}, content || '');
		}
	}
); //tags.each

/**
 * OVERRIDES
 */

/**
 * overriding radio due to IE7 bug - http://cf-bill.blogspot.com/2006/03/another-ie-gotcha-dynamiclly-created.html
 * @param {Object} attributes
 * @param {Object} content
 */
HTMLObj.input = function (attributes, content) {
	if (attributes['type'] != 'radio') {
		return (HTMLObj.tag ('input', attributes || {}, content || ''));	/* normal way is fine */
	}
	
	/* radio override engage */
	try{
		var att_string = $H(attributes || {}).collect(
			function (attr) {
				return (attr.key + ' = "' + attr.value + '"');
			}
		).join(' ');
		var element = document.createElement('<input type="radio" ' + att_string + ' />');
		return (element);
	} catch(e) {
		return (HTMLObj.tag ('input', attributes || {}, content || ''));
	}
};