TemplatedElement = {
	_buildFromTemplate: function(template, cloneNode) {
		if (arguments.length == 1) var cloneNode = true;
		if (typeof(template) == "string")
			template = $(template);

		if (cloneNode) {
			this.element = template.cloneNode(true);
			this.element.id = '';
		} else
			this.element = template;
		this._parseAttributes (this.element, 'element');
		this._parseElement (this.element);
	},
	_buildFromTemplateInside: function (template, name) {
		if (typeof(template) == "string")
			template = $(template);

		var new_element;
		new_element = template.cloneNode(true);
		new_element.id = '';
		this._parseAttributes(new_element, name)
		this._parseElement (new_element);
		this[name] = $(new_element);
	},

	_parseAttributes: function (node, el) {
		for (var j = node.attributes.length - 1; j >= 0; j -- ) {
			if (/^on/.test(node.attributes[j].name) && typeof(this[node.attributes[j].value]) == "function") {
				var action = node.attributes[j].value;
				var name = node.attributes[j].name;
				this[el][name] = null;
				Event.observe(this[el], (name.replace(/^on/, '')), this[action].bindAsEventListener(this));
			}
		}
	},

	// private!
	_parseElement: function (element) {
		for (var i = 0; i < element.childNodes.length; i ++) {
			var node = element.childNodes[i];
			if (node.className) {
				var parts = node.className.match(/tmpl_([^\s]+)/); //  /tmpl_([^\s]+)\s*/g);
				if (parts != null && parts.length == 2) {
					var el = parts[1];
					eval ('this.' + el + ' = $(node);');
					// attach events if needed...
					this._parseAttributes (node, el);
					// check if it should be hoverable image
					if (node.className.match(/priv_hoverable/))
						eval('this._hi_' + el + ' = new THoverableImage(node);');
				}
			}
			if (node.childNodes && node.childNodes.length > 0)
				this._parseElement(node);
		}
	}
};

/* ------ */
/* few additional small classes */
/* ------ */
THoverableImage = Class.create({
	initialize: function (element) {
		this.element = element;
		if (this.element.tagName != 'IMG') return;
		var chunks = this.element.getAttribute('alt').match(/.*url\((.*)\).*/);
		if (chunks && chunks[1]) {
			this.altImg = chunks[1];
			this.element.alt = this.element.getAttribute('alt').replace(/url\((.*)\)/, '');
			Interface.cacheImage(this.altImg);
			this.element.observe("mouseover", this.onMouseOver.bind(this));
			this.element.observe("mouseout", this.onMouseOut.bind(this));
		}
	},
	onMouseOver: function () {
		this.normalImg = this.element.src; // the problem is that one can decide to change this source
		this.element.src = this.altImg;
	},
	onMouseOut: function () {
		this.element.src = this.normalImg;
	}
})