$(document).ready(function(){

//RELEASE 0: 
  //Link this script and the jQuery library to the jquery_example.html file and analyze what this code does. 

$('body').css({'background-color': 'pink'})

//RELEASE 1:
  //Add code here to select elements of the DOM 
var h1 = $("h1");
var image = $("div img");
var bodyElement = $('body')

//RELEASE 2: 
  // Add code here to modify the css and html of DOM elements
h1.css({'border': '2px solid black'});
h1.css({'color': 'blue'});
h1.first().css({'visibility': 'hidden'});
//h1.first().next().html("<h1>POCKET GOPHERS</h1>");
var image_h1 = $("div h1");
image_h1.html("POCKET GOPHERS")

//RELEASE 3: Event Listener
  // Add the code for the event listener here 
  // $('img').on('mouseover', function(e){
  //    e.preventDefault()
  //   $(this).attr('src', 'http://richditch.wordpress.com/files/2009/04/pocket-gopher-052a-720.jpg')
  // })
  //  $('img').on('mouseout', function(e){
  //    e.preventDefault(),
  //   $(this).attr('src', 'http://images.nationalgeographic.com/wpf/media-live/photos/000/004/cache/african-elephant_435_600x450.jpg')
  // })
//RELEASE 4 : Experiment on your own
  image.on('mouseover', function() {
	  image.fadeOut(500,function(){
	   	image.attr('src', 'http://richditch.wordpress.com/files/2009/04/pocket-gopher-052a-720.jpg')
	  	image.fadeIn(500);
	  });
	});

	image.on('mouseout', function() {
	  image.fadeOut(500,function(){
	   	image.attr('src', 'http://images.nationalgeographic.com/wpf/media-live/photos/000/004/cache/african-elephant_435_600x450.jpg')
	  	image.fadeIn(500);
	  });
	});
 



})  // end of the document.ready function: do not remove or write DOM manipulation below this.