/**
 * Controller for Röckelein
 * (c) 2010, Benjamin Zaiser, info@benjamin-zaiser.de
 */ 
$(document).ready(function(){
	//ist kein .column div vorhanden -> wird irgendwas anderes angezeit -> Finger weg!
	if($('.content .column').length <= 0) return;

	//overflow brauchen wir nicht, da ja javascript offensichtlich aktiviert ist
	$('.content').css('overflow', 'hidden');

	//Aufteilen des Inhalts in class="content" in mehrere Spalten
	cWidth = $('.content .column').height();
	cHeight = $('.content').height();
	
	height = 0;
	columns = new Array();
	html = '';
	$('.content .column h2, .content .column h3, .content .column p, .content .column li').each(function(){
		if(height + $(this).height() < cHeight){
			//das aktuelle Element passt noch in die Spalte
			html += $(this).outerHTML();
			height += $(this).height();
		}
		else{
			//passt nicht mehr rein -> neue Spalte beginnen
			columns.push(html);
			html = $(this).outerHTML();
			height = $(this).height();
		}
	});
	columns.push(html);

	//den Inhalt in content mit den columns ersetzen
	$('.content').empty();
	$('.content').append('<div class="columns"></div>');
	for(var i=0; i<columns.length; i+=2){
		colgroup = '<div class="colgroup">';
		colgroup += '<div class="column left">' + columns[i] + '</div>';
		colgroup += (i+1 < columns.length) ? '<div class="column right">' + columns[i+1] + '</div>' : '';
		colgroup += '<div class="clearer"></div>';
		$('.content .columns').append(colgroup);
	}

	//Wenn mehr als zwei Spalten, zeige Navigation an
	if(columns.length > 2){
		contentnavi = '<div class="contentnaviwrapper"><a class="prev">&lt;</a> <span>Seite:</span><ul id="contentnavi">';
		for(var i=0; i<columns.length/2; i++){
			liClazz = (i==0) ? ' class="first"' : '';
			aClazz = (i==0) ? ' class="current"' : '';
			contentnavi += '<li' + liClazz + '><a id="t' + (i+1) + '"' + aClazz + '>' + (i+1) + '</a></li>';
		}
		contentnavi += '</ul><a class="next">&gt;</a><div class="clearer"></div></div>';
		$('.content').after(contentnavi);
		
		//Columnslider aktivieren
		$('.content').scrollable({
			items: ".columns"
		}).navigator({
			navi: "#contentnavi",
			naviItem: 'a',
			activeClass: 'current'
		});
	}

});

jQuery.fn.outerHTML = function() {
    return $('<div>').append( this.eq(0).clone() ).html();
};