//**********************************************************************************************************
// JavaScript Document
// navfade.js: rev:1.0 - 04/11/09 - jmt
// Rename to navfade(x) - 07/11/09 - jmt
// DESCRIPTION: .hover acts against attribute DISPLAY in the (div id =(jbLayer_(x)) When hover over the navigation 
// buttons (class=nav_(x))the DISPLAY attribute for the corresponding layer (id=jb_Layer_(x)) is given
// effect "show". When hover is removed, attribute is "hide". Also the "home" layer must be displayed
// (fadeIn) [see last statement in each function].
// This requires that the attribute DISPLAY be set to HIDE in the disv id for all div id's EXCEPT
// the "home" div id which is set to INHERIT so that it will display. It would seem that this would be more
// intuitive if it acted agaist the attribute VISIBILITY but I'm following examples found at
// www.jquery.com and as this seems to work I'm leaving as is but "may" revisit later.
// Also each option is coded separately. Need to combine through use of variables and parsing, etc. 

// 22/11/09: Created the fix for flashing when moving from button to button - jmt
// *********************************************************************************************************
 
  $(document).ready(function(){
		$("#navFixRight").hover(function(){
		$("#jbLayer_Yel").fadeIn()
    },function () {
      $("#jbLayer_Prp").fadeOut()
      $("#jbLayer_Red").fadeOut()
      $("#jbLayer_Org").fadeOut()
      $("#jbLayer_Grn").fadeOut()
      $("#jbLayer_Blu").fadeOut()
		});
	});

  $(document).ready(function(){
		$("#navFixLeft").hover(function(){
		$("#jbLayer_Yel").fadeIn()
    },function () {
      $("#jbLayer_Prp").fadeOut()
      $("#jbLayer_Red").fadeOut()
      $("#jbLayer_Org").fadeOut()
      $("#jbLayer_Grn").fadeOut()
      $("#jbLayer_Blu").fadeOut()
		});
	});

 $(document).ready(function(){
		$("#navFixUp").hover(function(){
		$("#jbLayer_Yel").fadeIn()
    },function () {
      $("#jbLayer_Prp").fadeOut()
      $("#jbLayer_Red").fadeOut()
      $("#jbLayer_Org").fadeOut()
      $("#jbLayer_Grn").fadeOut()
      $("#jbLayer_Blu").fadeOut()

		});
	});
 $(document).ready(function(){
		$("#navFixLower").hover(function(){
		$("#jbLayer_Yel").fadeIn()
    },function () {
      $("#jbLayer_Prp").fadeOut()
      $("#jbLayer_Red").fadeOut()
      $("#jbLayer_Org").fadeOut()
      $("#jbLayer_Grn").fadeOut()
      $("#jbLayer_Blu").fadeOut()
		});
	}); 
  $(document).ready(function(){
      $(".nav_Yel").hover(function () {
      $("#jbLayer_Yel").fadeIn("slow")
     });
  });
 
 $(document).ready(function(){
    
      $(".nav_Red").hover(function () {	//mouseOver we want to display "red" layer
      $("#jbLayer_Red").fadeIn()	//show red layer
      $("#jbLayer_Yel").hide()			//hide "home" layer
 },function () {						//mouseOut
      $("#jbLayer_Red").hide()		//hide "red layer via effect "slideUp"
    });

  });


  $(document).ready(function(){
    
      $(".nav_Org").hover(function () {
      $("#jbLayer_Org").fadeIn()
      $("#jbLayer_Yel").hide()
    },function () {
      $("#jbLayer_Org").hide()
    });

  });

 $(document).ready(function(){
    
      $(".nav_Prp").hover(function () {
      $("#jbLayer_Prp").fadeIn("slow")
      $("#jbLayer_Yel").hide()
    },function () {
      $("#jbLayer_Prp").hide()
    });

  });
  
 $(document).ready(function(){
    
      $(".nav_Grn").hover(function () {
      $("#jbLayer_Grn").fadeIn("slow")
      $("#jbLayer_Yel").hide()
    },function () {
      $("#jbLayer_Grn").hide()
    });

  });

   $(document).ready(function(){
    
      $(".nav_Blu").hover(function () {
      $("#jbLayer_Blu").fadeIn("slow")
      $("#jbLayer_Yel").hide()
    },function () {
      $("#jbLayer_Blu").hide()
    });

  });