// Animated navigation (CSS Sprites)
// http://www.alistapart.com/articles/sprites2

function str_replace (search, replace, subject) {
// http://www.fobit.com/index.php?article=JavaScript%3A%20str_replace
  var result = "";
  var  oldi = 0;
  for (i = subject.indexOf (search)
     ; i > -1
     ; i = subject.indexOf (search, i))
  {
    result += subject.substring (oldi, i);
    result += replace;
    i += search.length;
    oldi = i;
  }
  return result + subject.substring (oldi, subject.length);
}



function attachNavEvents(id) {
	// reading the current background-image and adding events for onMouseOver and onMouseOut for each passed element
	
	var current_backgroundimage = $(id).children("a").css("background-image");
	var default_backgroundimage = current_backgroundimage;
	var removed_ext = default_backgroundimage.substring(0, default_backgroundimage.indexOf('.gif'));
	var hover_backgroundimage = removed_ext + "_hover.gif)";
	var div_effect_class = 'navisprite-' + str_replace("#","",id);
	
    $(id).children("a").mouseover(function() {
 			$(id).css({backgroundImage:default_backgroundimage}); // Adding the background-image of the link to the li, so that when the link is made transparent, there is no flicker

			$(id).children("a").css({backgroundImage:"none"}); // Removing the image from the link, making the link transparent so the background image of the li-element shines through

			// Adding a absolute positioned div with the same background-image as the link between the <li> and the <a> that can be faded through jQuery
	       	$(id).children("a").before('<div class="' + div_effect_class + '" style="width: 100%; height: 100%;"></div>');
	       	$("div." + div_effect_class).css("background-image",hover_backgroundimage);
			$("div." + div_effect_class).css("background-color","transparent");
			$("div." + div_effect_class).css("background-position","top left");
			$("div." + div_effect_class).css("background-repeat","no-repeat");
			$("div." + div_effect_class).css("position","absolute");

 			// $("div." + div_effect_class).css("border","2px solid red"); // Adding the background-image of the link to the li, so that when the link is made transparent, there is no flicker
			// alert($("div." + div_effect_class).css("background-image"));

	       	$("div." + div_effect_class).css({display:"none"}) .fadeIn(300);

			// alert("attached mouseover css backgroundimage " + hover_backgroundimage + " to children 'a' of " + id);
	   }).mouseout(function() {
	        // fade out & destroy effect-divs
			$(id).css({backgroundImage:default_backgroundimage});

			$("div." + div_effect_class).fadeOut(300, function() {
	            $(this).remove();
 				$(id).children("a").css({backgroundImage:default_backgroundimage});

				$(id).css({backgroundImage:"none"});
				});

			// $(id).children("a").css({backgroundImage:"none"});
	        // $(id).children("a").css({backgroundImage:default_backgroundimage}).fadeIn(500);
			// alert("attached mouseout css backgroundimage " + default_backgroundimage + " to children 'a' of " + id);
    }).mousedown(function() {
        // do things here
    }).mouseup(function() {
        // do things here
    });
}


$(document).ready(function(){                                         
	
	$("#hauptnavi").children("ul").children("li").each(function() {
		id = "#" + $(this).attr("id");

		// Looking for the links within each li and removing the background images in case it is not the active link
		var active = "active";
		var childrenClass = $(this).children("a").attr("class");
		if (childrenClass != active) {
			attachNavEvents(id);
		}
	});  

});