var Teasers = Class.create({
	initialize: function(id) {
		var that = this;
		if(!$(id)) return false;
		
		var classContent = "teaser",
			classContentCurrent = "current",
			classLink = "title",
			elements = $(id).select('.'+classContent);
		
		elements.each(function(el,i){
			// Replace non-script link by span
			var link = el.select('a.'+classLink)[0];
			if (link) link.replace('<span class="'+classLink+'">'+link.innerHTML+'</span>');
			
			// Change class of current element	
			el.observe('click', function(evt){
				that.clickHandler(this, id, classContentCurrent, evt);
			});
			el.observe('focus', function(){
				that.clickHandler(this, id, classContentCurrent, evt);
			});
			
			// FF and IE do not allow hover effects on spans with the doctype used
			if (Prototype.Browser.Gecko || Prototype.Browser.IE) {
				el.observe('mouseover', function(){
					el.addClassName('hover');
				});
				el.observe('mouseout', function(){
					el.removeClassName('hover');
				});
			}
		});
	},
	clickHandler: function(el, id, classContentCurrent, evt) {
		var current = $(id).select('.'+classContentCurrent);
		current.each(function(e,j){
			e.removeClassName(classContentCurrent)
		});
		el.addClassName(classContentCurrent);
	}
});

document.observe("dom:loaded", function(){
	// Initialize teasers (on elemnt with ID "teasers")
	newsTeaser = new Teasers("teasers");
	
	// Submit form (Themen A-Z) on select
	if($("select") != null) {
		$("select").observe("change", function(){ 
			this.up('form').submit();
		});
	}
});