// JavaScript Document

// ** Swap the random image area with a different div when a main button link is hovered
// ** return to original state when mouse leaves that area
// ** by Dan Meade 2010



$(document).ready( function(){
 // hides the divs as soon as the DOM is ready
 // to hide all the divs with one statement they share the same class name.
 // then we want to be sure the default div is showing, the random img div.
  $('div.tab').hide();
  $('div#random_img_index').show();
 

// on hover, hide the random img div or other active "tab" div and show the div associated with the button that is being hovered over.

   $('#swap_renew').hover(function() {
	    $('div#random_img_index').hide();
		$('div.tab').hide();
		$('#renew_rollovr').show();
	});
   
	$('#swap_learn').hover(function() {
		$('div#random_img_index').hide();
		$('div.tab').hide();
		$('#learn_rollovr').show();
	});
	  
	$('#swap_signup').hover(function() {
		$('div#random_img_index').hide();
		$('div.tab').hide();
		$('#signup_rollovr').show();
	});
		 
	$('#swap_apply').hover(function() {
		$('div#random_img_index').hide();
		$('div.tab').hide();
		$('#apply_rollovr').show();
	});

  // Leave function - when the mouse leaves the defined area, things will go back to default.
  $('#ajax_area').mouseleave(function() {
		 $('div.tab').hide();
		 $('#random_img_index').show();
	  });
  
    

	
  
});