// this is the script to gather all divs with detailed infos for each subject
// and make it browsable by hiding the overview and showing the details to the clicked item
$(document).ready(function(){

	// animation time for all transitions
	var animTime = 300;
	
	// click to close the currently shown detail with its hover highlight
	$(".closeFloater").click(
		function(){
			$(this).parent().parent().fadeOut(animTime, function(){
			$("#contentmenu").fadeIn(animTime);
			});
		}
	).hover(function(){
			$(this).addClass('closeFloaterHL');
			}, function(){
			$(this).removeClass('closeFloaterHL');
			}
	);

//    $(".closeFloater").fadeIn()
	
	// create links for each <li> to the corresponding div
	// Note, that the divs themselves get dynamically named
	// each <li> item gets its name form its parent tag =>
	// the #name attribute of the <ul> tag and appends an index number
	// so that we have unique ID names for the detail divs
	$("#contentmenu li").each(function(i){
		$(this).click(function(){
			var divname = "#details_" + $(this).parent().attr("name") + "_" + (i+1);
			$("#contentmenu").fadeOut(animTime, function(){
			$(divname).fadeIn(animTime);
			});
		});
	});
	
	// now go thorugh all .floaterBox divs and give them IDs and
	// create the click links for the fwd and bckwd arrows
	var lastobjID;
    
	$(".floaterBox").each(function(i){
		var thisObj = $(this);
		var thisObjID = "details_" + thisObj.attr("name") + "_" + (i+1);
		if (lastobjID){
			var closure = function(lobjID){ // we must use a closure
			// to ensure the correct value of the variable lobjID
			
				// first set the link and the hover highlight of the
				// "next" link of the div of the last repeat iteration
				//  => lobjID to the current div
				$("#" + lobjID + " .nextFloater").click(function(){
					$("#" + lobjID).fadeOut(animTime, function(){
					$("#" + thisObjID).fadeIn(animTime);
					});
				})
				.hover(function(){
					$(this).addClass('nextFloaterHL');
					}, function(){
					$(this).removeClass('nextFloaterHL');
					}
				);


//                $(document).ready(function(){
//                    alert("ein string")
//                });

                
				// now set the "back" link to the last detail div
				// from the last repeat iteration => lobjID
				// and its hover highlight
				$(".backFloater", thisObj).click(function(){
					$(thisObj).fadeOut(animTime, function(){
					$("#" + lobjID).fadeIn(animTime);
					});
				})
				.hover(function(){
					$(this).addClass('backFloaterHL');
					}, function(){
					$(this).removeClass('backFloaterHL');
					}
				);
			};
			closure(lastobjID);
		}
		else{ // this is the first page and thus the back link will be the overview
			$(".backFloater", thisObj).click(function(){
				$(thisObj).fadeOut(animTime, function(){
				$("#contentmenu").fadeIn(animTime);
				});
			})
			.hover(function(){
				$(this).addClass('backFloaterHL');
				}, function(){
				$(this).removeClass('backFloaterHL');
				}
			);
		}
		// store the current div id for the next repeat iteration:
		lastobjID = thisObjID;
		
		// hide this div at the beginning
		$(thisObj).hide();
		
		// set the ID of this div to the dynamically computed id
		// which the <li> items will refer to in their click() function
		$(thisObj).attr("id", lastobjID);


	});
	
	// now set the link of the last article to go back to the overview
	if (lastobjID){
		var closure = function(lobjID){
			$("#" + lobjID + " .nextFloater").click(function(){
				$("#" + lobjID).fadeOut(animTime, function(){
				$("#contentmenu").fadeIn(animTime);
				});
			})
			.hover(function(){
				$(this).addClass('nextFloaterHL');
				}, function(){
				$(this).removeClass('nextFloaterHL');
				}
			);
		};
		closure(lastobjID);
	}
	
	
	var directLink = window.location.search.substring(1);
	if (directLink.length){
		$("li:contains('" + directLink + "')").click();
	}
	
});