TemplatesContainer = {
	URL: 'js_templates.html',
	templatesStorage: 'templates',
	initialize: function () {
		this.templatesStorage = $(this.templatesStorage);
		new Ajax.Request (this.URL, {method:'post', onSuccess: this.getTemplates_handler.bind(this), asynchronous: false});
	},
	getTemplates_handler: function (ajaxRequest) {
		this.templatesStorage.innerHTML += ajaxRequest.responseText;
		this.templatesStorage.cleanWhitespace();
	}
};

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);
	},

	_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;
				//eval('Event.observe(this.' + el + ', "' + (name.replace(/^on/, '')) + '", this.' + action + ".bindAsEventListener(this))" );
				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];
					this[el] = $(node);
					// attach events if needed...
					this._parseAttributes (node, el);
					// check if it should be hoverable image
					if (node.className.match(/priv_hoverable/))
						this['_hi_' + el] = new THoverableImage(node);
				}
			}
			if (node.childNodes && node.childNodes.length > 0)
				this._parseElement(node);
		}
	}
};

if (/MSIE/.test(navigator.userAgent)) {
	TemplatedElement._parseAttributes = function (node, el) {
		for (var i = 0; i < TemplatedElementAttributes.length; i ++) {
			var a = TemplatedElementAttributes[i];
			if (node[a] && typeof node[a] == "function") {
				var action = node[a];
				var chunk = action.toString().split ("\n");
				action = chunk [ chunk.length - 2 ].replace(/\s/g, '');
				if (action.charAt(action.length - 1) == ';')
					action = action.substring(0, action.length - 1);
				if (!action || !this[action]) continue;
				var name = a;
				this[el][name] = null;
				Event.observe(this[el], (a.replace(/^on/, '')), this[action].bindAsEventListener(this));
			}
		}
	}
}

TemplatedElementAttributes = ['onclick', 'ondblclick', 'onmousedown', 'onmousemove', 'onmouseup', 'onmousewheel', 'onmouseover', 'onmouseout',
	'onsubmit', 'onkeypress', 'onkeydown', 'onkeyup', 'onchange', 'onfocus', 'onblur' ];

/* ------ */
/* 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;
	}
})