//use jquery to detect when the page has fully loaded
$(document).ready(function() {
			
			  //once the page has fully loaded, set jquery event handlers

				//change the class of this element on mouseover events
				$(".navg").mouseover(function(event) {
					$(this).removeClass("navg");
					$(this).addClass("navga");
				});
				
				//change the class of this element on mouseover events
				$(".navg").mouseout(function(event) {
					$(this).removeClass("navga");
					$(this).addClass("navg");				
				});
				
				
				$(".nagv_sub").mouseover (function () {
				$(".icons_b", this).toggle();
				});
				$(".nagv_sub").mouseout (function () {
					$(".icons_b", this).toggle();
				});
				
				// mouse over for word
				$(".right_sub").mouseover (function () {
					$(".sub", this).toggle();
				});
				$(".right_sub").mouseout (function () {
					$(".sub", this).toggle();
				});
				
	
				
						
		//create an event handler for the snippet1 link
				$("a#web").click(function() {
					//make an ajax request for _snippet1.html and put it into the snippet container div
					$("div#ajax_box").load("web.html");
				});

				//create an event handler for the snippet2 link
				$("a#print").click(function() {
					//make an ajax request for _snippet2.html and put it into the snippet container div
					$("div#ajax_box").load("print.html");
				});

				//create an event handler for the snippet3 link
				$("a#display").click(function() {
					//make an ajax request for _snippet3.html and put it into the snippet container div
					$("div#ajax_box").load("display.html");
				});
				
					$("a#resume").click(function() {
					//make an ajax request for _snippet1.html and put it into the snippet container div
					$("div#ajax_box").load("steve.html");
				});

				//create an event handler for the snippet3 link
				$("a#contact").click(function() {
					//make an ajax request for _snippet3.html and put it into the snippet container div
					$("div#ajax_box").load("contact.html");
				});
				
				
});