$(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

headingOne = $("h1");
mascotClass = $(".mascot");
picture = $("img");
bodyElement = $('body');

// This is interesting.  When the variables are placed here with no "var" keyword, they don't do anything.  
// When defined outside the jQuery function either with or without the "var" keyword, they return an empty
// array.  Here, no "var" keyword and it returns everything about the given selector.

//RELEASE 2:
// Add code hese to modify the css and html of DOM element
$("h1").css({"color": "blue", 
	"border": "2px solid black",
	"visibility": "visible"
	})

$("div h1").html("<h1>Grasshoppers!</h1>")

 
//RELEASE 3: Event Listener
// Add the code for the event listener here

$('img').on('mouseenter', function(e){
   e.preventDefault()
  $(this).attr('src', 'grasshopper.jpg')
  })
$('img').on('mouseleave', function(e){
     e.preventDefault()
    $(this).attr('src', 'dbc_logo.jpg')
  })

 
 
//RELEASE 4 : Experiment on your own
 
 $("img").on("mouseenter", function(){
	$("img").animate({
		width: "50%",
		borderWidth: "15px"
	}, 2000);
	$("#landof").css("visibility", "visible");
})
$("img").on("mouseleave", function(){
	$("img").animate({
		width: "393px",
		borderWidth: "2px"
	}, 2000);
	$("#landof").css("visibility", "hidden");
})
 
 
 
 
}) // end of the document.ready function: do not remove or write DOM manipulation below this.