$(document).ready( function () {
	
	
	$("#content_for_print").html($("#diagram #content_diagram").html());
	$("#content_for_print .div_hover").attr("id","");
	
	$("#diagram #content_diagram .diagram").css("display","none");
	$("#diagram .fullDisplay").css("display","block");
	$("#diagram #content_diagram .div_hover").addClass("javascript");
	$("#diagram #content_diagram").addClass("js");
	//$("#diagram #content_diagram .div_hover .content_hover").addClass("overflow");
	$("#diagram #content_diagram .div_hover .link_to_top").css("display","none");
	
	$("#loadingFrame").css("display","block");
	
	
	
	$(window).load( function () {
		$("#loadingFrame").css("display","none");

				
		$("#diagram #content_diagram .diagram").fadeIn(1800, function () {
			initDiagram();		
		});
	});
	
	function initDiagram () {
		
		initFramSize ();
		
		$("#diagram #diagram_map area").bind("mouseover",function (e) {showContentHover($(this),e); return false;});
		$("#diagram #diagram_map area").bind("click",function () {return false;});
		
		$("#diagram #diagram_map area").bind("mouseout",function (){
			contentHoverDivId = $(this).attr("href").substring(1);		
			$("#content_diagram .div_hover[id = " + contentHoverDivId + "]").css("display","none");
																				   
		});
		$("#diagram .fullDisplay").bind("click",function () {$(this).fullDisplay();});
		/*$("#diagram #diagram_map area").hover(function () {
			idArea = $(this).attr("href").substring(1);		
			$("#diagram #content_diagram img.diagram").attr("src","/diagrams/images/community_development_model/community_development_model_" + idArea  + ".gif");
		 
																		 
		},
		function () {
			$("#diagram #content_diagram img.diagram").attr("src","/diagrams/images/community_development_model/CommunityDevelopmentModel.gif");
			
		});*/
		
	
	}
	
	function initFramSize () {
		
		/* FIX THE MAXIMUM SIZE OF THE CONTENT DIV CONSIDERING THE SIZE OF MAIN-CONTENT DIV */
		$("#diagram #content_diagram .div_hover").each(function () {
																						 
				contentHoverMaxWidth = $(this).width() ;
				if (contentHoverMaxWidth > $("#diagram #content_diagram").width() / 1.6)
					contentHoverMaxWidth = $("#diagram #content_diagram").width() / 1.6;
					
				$(this).css("width",contentHoverMaxWidth);
					
				contentHoverMaxHeight = $(this).height();
				if (contentHoverMaxHeight > $("#diagram #content_diagram").height() / 1.15)
					contentHoverMaxHeight = $("#diagram #content_diagram").height() / 1.15;
				
				$(this).css("height",contentHoverMaxHeight);
			});
		}
	
	function showContentHover (obj,e){
	
		/* GET THE ID OF THE CONTENT DIV TO DISPLAY */
		contentHoverDivId = $(obj).attr("href").substring(1);		
		
		/* SPACE BWT CURSOR AND FRAME */
		if ($.browser.msie){
			spaceX = 7;
			spaceY = 20;			
		} else {
			spaceX = 7;
			spaceY = 20;			
		}
		
		/* FIX THE MAXIMUM SIZE OF THE CONTENT DIV CONSIDERING THE SIZE OF MAIN-CONTENT DIV */
		contentHoverMaxWidth = $("#content_diagram .div_hover[id = " + contentHoverDivId + "] ").width() ;
		if (contentHoverMaxWidth > $("#diagram #content_diagram").width() / 1.6)
			contentHoverMaxWidth = $("#diagram #content_diagram").width() / 1.6;
			
		$("#content_diagram .div_hover[id = " + contentHoverDivId + "]").css("width",contentHoverMaxWidth);
			
		contentHoverMaxHeight = $("#content_diagram .div_hover[id = " + contentHoverDivId + "] ").height();
		if (contentHoverMaxHeight > $("#diagram #content_diagram").height() / 1.15)
			contentHoverMaxHeight = $("#diagram #content_diagram").height() / 1.15;
		
		$("#content_diagram .div_hover[id = " + contentHoverDivId + "]").css("height",contentHoverMaxHeight);
		
		
		contentHoverDivX = e.pageX - $("#content_diagram").offset().left + spaceX;
		contentHoverDivY = e.pageY - $("#content_diagram").offset().top - $("#content_diagram").height() + spaceY;
		
		if ( ( e.pageX + contentHoverMaxWidth ) > $("#main-content").offset().left + $("#main-content").width() - 17 ) {
			$("#content_diagram .div_hover[id = " + contentHoverDivId + "]").css("margin-left",contentHoverDivX - contentHoverMaxWidth - 32);
		} else {
			$("#content_diagram .div_hover[id = " + contentHoverDivId + "]").css("margin-left",contentHoverDivX);
		}
		
		if ( ( e.pageY + contentHoverMaxHeight ) > $("#main-content").offset().top + $("#main-content").height() - spaceY ) {
			$("#content_diagram .div_hover[id = " + contentHoverDivId + "]").css("margin-top",contentHoverDivY - contentHoverMaxHeight - 40);				
		} else {
			$("#content_diagram .div_hover[id = " + contentHoverDivId + "]").css("margin-top",contentHoverDivY);				
		}
		
		$("#content_diagram .div_hover[id = " + contentHoverDivId + "]").css("display","block");
		
		$("#content_diagram .div_hover[id = " + contentHoverDivId + "]").bind("mouseover",function (){
			$(this).css("display","block");
		});
		
		$("#content_diagram .div_hover[id = " + contentHoverDivId + "]").bind("mouseout",function (){
			$(this).css("display","none");
		});
		
		$(document).bind("mousemove",function(e){
			contentHoverDivX = e.pageX - $("#content_diagram").offset().left + spaceX;
			contentHoverDivY = e.pageY - $("#content_diagram").offset().top - $("#content_diagram").height() + spaceY;
			
			if ( ( e.pageX + contentHoverMaxWidth ) > $("#main-content").offset().left + $("#main-content").width() - 17 ) {
				$("#content_diagram .div_hover[id = " + contentHoverDivId + "]").css("margin-left",contentHoverDivX - contentHoverMaxWidth - 32);
			} else {
				$("#content_diagram .div_hover[id = " + contentHoverDivId + "]").css("margin-left",contentHoverDivX);
			}
			
			if ( ( e.pageY + contentHoverMaxHeight ) > $("#main-content").offset().top + $("#main-content").height() - spaceY ) {
				$("#content_diagram .div_hover[id = " + contentHoverDivId + "]").css("margin-top",contentHoverDivY - contentHoverMaxHeight - 40);				
			} else {
				$("#content_diagram .div_hover[id = " + contentHoverDivId + "]").css("margin-top",contentHoverDivY);				
			}
		});
				
	}


	$.fn.fullDisplay = function () {
		
		$("#diagram #diagram_map area").unbind();
		$(document).unbind("mousemove");
		$("#diagram #content_diagram .div_hover ").unbind();	
		
		$("#diagram img.fullDisplay").unbind();
		
		$("#diagram img.fullDisplay").animate({ 
			opacity: 0
		},600, function () { 
			$(this).attr("src","/diagrams/images/diagramarrow_up.gif");
			$(this).attr("alt","Collapse all"); 
			$(this).attr("title","Collapse all"); 
		}).animate({ 
			opacity: 1
		},  {queue:true,  duration: 600 } );
		
								
		//$("#diagram #content_diagram .div_hover").removeClass("javascript");		
		//$("#diagram #content_diagram .div_hover .content_hover").removeClass("overflow");		
		
		/*$("#diagram #content_diagram .div_hover .content_hover ").css("width","auto");	
		$("#diagram #content_diagram .div_hover .content_hover ").css("height","auto");	*/
		$("#diagram #content_diagram .div_hover ").css("width","auto");	
		$("#diagram #content_diagram .div_hover ").css("height","auto");	
		$("#diagram #content_diagram .div_hover ").css("position","relative");	
		$("#diagram #content_diagram .div_hover ").css("marginTop","10px");	
		$("#diagram #content_diagram .div_hover ").css("marginLeft","0px");	
		$("#diagram #content_diagram .div_hover .link_to_top").css("display","block");	
		
		$("#diagram #content_diagram .div_hover").fadeIn(1200);
		$("#diagram img.fullDisplay").bind("click",function () {$(this).smallDisplay();});
		
	}						
	
	$.fn.smallDisplay = function () {
		
		$("#diagram img.fullDisplay").unbind();
		
		$("#diagram img.fullDisplay").animate({ 
			opacity: 0
		},600, function () { 
			$(this).attr("src","/diagrams/images/diagramarrow_down.gif");
			$(this).attr("alt","Expand all"); 
			$(this).attr("title","Expand all"); 
		}).animate({ 
			opacity: 1
		},  {queue:true,  duration: 600 } );
		
		$("#diagram #content_diagram .div_hover ").fadeOut(1200, function () {
																  
								
			$("#diagram #content_diagram .div_hover").addClass("javascript");		
			//$("#diagram #content_diagram .div_hover .content_hover").addClass("overflow");	
			$("#diagram #content_diagram .div_hover .link_to_top").css("display","none");
			$("#diagram #content_diagram .div_hover  ").css("position","absolute");	
			$("#diagram #content_diagram .div_hover ").css("marginTop","0px");	
			$("#diagram img.fullDisplay").bind("click",function () {$(this).fullDisplay();});
			initDiagram();
			initFramSize ();
			
			
			
		});
		
		
	}							
	
});