jQuery(document).ready(function() {

	$(function(){
				

		if($('ol.scrollContent').is("ol")) {
			 $pureHTML = "<div class='flowNavi inbetween'><ul id='flowtabs' class='cf'>"; 		 
			 $.each($('ol.scrollContent > li'), function(key, value) {
				i = key + 1;
				$pureHTML += "<li><a id='t"+ i +"' href='#"+ i +"'>"+ i +"</a></li>";
			 })		 
			 $pureHTML += "</ul></div>";
			 
			 $.each($('ol.scrollContent li'), function(key, value) {
				$(this).replaceWith("<div>" + $(this).html() + "</div>");
			 });

			 $('ol.scrollContent').before($pureHTML);
			 $('ol.scrollContent').replaceWith("<div id='flowpanes' class='mixedContent'><div id='leftBtn' class='naviBtn custom prev'></div><div class='items'>" + $('ol.scrollContent').html() + "</div><div id='rightBtn' class='naviBtn custom next'></div>");
		}
	
	
		if($('ul.ContentSlider').is("ul")) {
			 $pureHTML = "<div class='flowNavi'><button class='custom prev'>Zurück</button><ul id='flowtabs' class='cf'>"; 		 
			 $.each($('ul.ContentSlider > li'), function(key, value) {
				i = key + 1;
				$pureHTML += "<li><a id='t"+ i +"' href='#"+ i +"'>"+ i +"</a></li>";
			 })		 
			 $pureHTML += "</ul><button class='custom next'>Weiter</button></div>";
			 
			 $.each($('ul.ContentSlider li'), function(key, value) {
				$(this).replaceWith("<div>" + $(this).html() + "</div>");
			 });

			 $('ul.ContentSlider').before($pureHTML);
			 $('ul.ContentSlider').replaceWith("<div id='flowpanes'><div class='items'>" + $('ul.ContentSlider').html() + "</div></div>");
		}

		
	});

	// wait until document is fully scriptable 

	if (jQuery('#flowpanes').is("div")) {
	  var api = jQuery('#flowpanes').scrollable({ 
		  size: 1, 
		  clickable: false, 
		  disabled: false 
		}).navigator({ 
		  navi: '#flowtabs', 
		  naviItem: 'a', 
		  activeClass: 'current', 
		  api: true 
	  }); 
	  api.onReload(function() { 
		var height = 0; 
		var visible = this.getItems();  
		visible.each(function() { 
		  if(height == 0) 
		  { 
			height = jQuery(this).height() + 20; 
			return false; 
		  } 
		});  
		this.getRoot().add(this.getItemWrap()).height(height);  
	  });  
	  api.onSeek(function() { 
		var i = 0; 
		var newHeight = 0; 
		var scrollIndex = this.getIndex(); 
		var visible = this.getItems();  
		visible.each(function() { 
		  if(i == scrollIndex) 
		  { 
			newHeight = jQuery(this).height() + 20; 
			return false; 
		  } 
		  i++; 
		});  
		this.getRoot().add(this.getItemWrap()).animate({ height : newHeight });  
	  });  
	  api.reload(); 
	}

});