function diagramHover() {
	$("#teachers_diagram ul li a").hover(function() {
		var oldSrc = $(this).parents("li").find("img").attr("src");
		var newSrc = oldSrc.replace(/_off/, "_on");
		$(this).parents("li").find("img").attr("src", newSrc);
	}, function() {
		var oldSrc = $(this).parents("li").find("img").attr("src");
		var newSrc = oldSrc.replace(/_on/, "_off");
		$(this).parents("li").find("img").attr("src", newSrc);
	});
}
function shiftBubble(ele, pos) {
	if(pos == "bottom" || pos == "top") {
		if(pos == "bottom") {
			var wImg = 88;
			var hImg = 88;
			var linkTop = 70;
			var linkLeft = -145;
			var eleLeft = 88;
			var eleTop = 235;
		} else if(pos == "top") {
			var wImg = 116;
			var hImg = 116;
			var linkTop = -15;
			var linkLeft = -95;
			var eleLeft = 35;
			var eleTop = 87;
		}
		$(ele).find("a.text_link").css("right", "auto");
		$(ele).css("right", "auto");
		$(ele).find("img").animate({
			width: wImg,
			height: hImg
		});
		$(ele).find("a.text_link").animate({
			top: linkTop,
			left: linkLeft
		});
		$(ele).animate({
			left: eleLeft,
			top: eleTop
		});
		$(ele).find("a.text_link").css({
			"right": "auto",
			"background-image": "url(/images/arrow_green_sm_right.gif)",
			"padding-right": "10px"
		});
	} else if(pos == "main") {
		$(ele).find("a.text_link").hide();
		$(ele).css("right", "auto");
		$(ele).find("img").animate({
			width: 284,
			height: 284
		});
		$(ele).animate({
			left: 190,
			top: 30
		//	right: "auto"
		});
	}
}
function showDetails() {
	$("#teachers_diagram ul li a").click(function() {
		//find out which bubble was clicked and hide old text
		$("#teachers_diagram div.bubble_pop").hide();
		var showDiv = $(this).attr("href").replace(/#/, "");
		
		//Disable hover event after a bubble is clicked and show all text links
		$("#teachers_diagram ul li").find("a.text_link").show();
		
		//Shift the diagram to the left and shrink the text
		$("#teachers_diagram ul").css("right", "auto");
		$("#teachers_diagram ul").animate({
			top: -10,
			left: 80
//			right: "auto"
		}, 1500);
		$("#teachers_diagram ul a").not("li." + showDiv + " a").animate({
			fontSize: 11
		}, "fast");
			
		//Position the all bubbles
		var clicked = $("#teachers_diagram ul li").index($("#teachers_diagram ul li." + showDiv));
		if(clicked == 2) {
			var nextElement = $("#teachers_diagram ul li").eq(0);
			var nextNextElement = $("#teachers_diagram ul li").eq(1);
		} else if(clicked == 1) {
			var nextElement = $(this).parents("li").next();
			var nextNextElement =$("#teachers_diagram ul li").eq(0);
		} else if(clicked == 0) {
			var nextElement = $(this).parents("li").next();
			var nextNextElement = $(this).parents("li").next().next();
		}
				
		var clickedElement = $(this).parents("li");
				
		shiftBubble(nextElement, "bottom");
		shiftBubble(nextNextElement, "top");
		shiftBubble(clickedElement, "main");

		//Change the arrow image
		var otherArrows = $("#teachers_diagram ul li.arrows img").attr("src").replace(/_off/, "_on");
		$("#teachers_diagram ul li.arrows img").attr("src", otherArrows);
		$("#" + showDiv).show("slow");
		
		return false;
	});
}
$(document).ready(function() {
//	diagramGrow();
	diagramHover();
	showDetails();
});