$(document).ready(function(){
          
     jQuery('li[class]').filter(function () {
        return jQuery(this).attr("class") == "cat";
     }).attr("id", function (index) {
        index = index || "";
        index++;
        return "cat"+index;
     });
  

     $(".content_bottom #1:first").addClass("selected");
     $("#cat1:first span").addClass("active");
     $(".ref_box[id!=1]").css("display", "none");
     var k = 1;
     var refcount = $(".ref_box[id=1]").size();
	for (i=1; i<refcount+1; i++) {
		$("#refnavi").append('<li class="'+k+'"></li>');
		k++;
	}
      $("#refnavi li:first").addClass("active");
      var newwidth = refcount * 623;
      $(".wrapper").css({
	'width':newwidth,
	'margin':'0px'
       }, 300);
     
     
	
	$(".content_top #catnavi li").live("click", function(){
		
		/* neue id ermitteln */
		var id = $(this).attr("id").substr(3, 1);
		
		/* die falschen kategorien ausblenden 
		$(".ref_box[id="+id+"]").css("display", "block");
		$(".ref_box[id!="+id+"]").css("display", "none");
		*/
		$(".ref_box[id!="+id+"]").fadeOut("slow");
		$(".ref_box[id="+id+"]").fadeIn("slow");
		
		/* klassen neu vergeben */
		$(".selected").removeClass("selected");
		$(".content_bottom #"+id+":first").addClass("selected");
		$("#catnavi .active").removeClass("active");
		$(this).find("span").addClass("active");
		$("#refnavi li:first").addClass("active2");
		
		
		/* refnavi erzeugen bzw. erneuern */
		var k = 1;
		$("#refnavi").empty();
		var refcount = $(".ref_box[id="+id+"]").size();
		for (i=1; i<refcount+1; i++) {
			$("#refnavi").append('<li class="'+k+'"></li>');
			k++;
		}
		
		/* wrapper einstellen */
		var newwidth = refcount * 623;
		$(".wrapper").css({
			'width':newwidth,
			'margin':'0px'
		});
		
		// refnavi sliden
		var newmargin = [id-1]*20+2;
		$("#refnavi").animate({
			marginTop:newmargin
		});
		
		$("#refnavi li:first").addClass("active");
					
	});
	
	$(".content_top #refnavi li").live("click", function(){	
		$("#refnavi .active").removeClass("active");
		
		var id = $(this).attr("class");
		var newmargin = [id-1] * -623;
		$(".wrapper").animate({
      			marginLeft: newmargin
   		}, { duration: 500, queue: false });
   		
   		/* neue klassen vergeben */
   		$(this).addClass("active");
	});
});