$(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 bodyElement = $("body");
bodyElement.css({'background-color': 'blue'});
 
//RELEASE 2: 
  // Add code here to modify the css and html of DOM elements
 
var h1Element = $('h1');
h1Element.css({'color': 'white'});
h1Element.css({'border': '2px solid #de0012' });
//h1Element.css({'visibility': 'hidden'});

$('.mascot h1').html("Fiery Skippers");

var pic = $('.mascot img');
pic.css({ 'border': '1px solid #000000' });

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

pic.on('mouseover', function(e) {
	e.preventDefault()
	$(this).attr('src', 'http://i.minus.com/iycUZ6Xjh1MIy.jpg')
})

pic.on('mouseleave', function(e) {
	e.preventDefault()
	$(this).attr('src', 'http://i.minus.com/iNHdVKGk3A9eZ.jpg')
})
 
//RELEASE 4 : Experiment on your own

pic.click(function (){
	$(this).animate({
		borderWidth: '30px',
		width: '+=50'},
	100, function (){
		$(this).animate({
			borderWidth: '1px',
			width: '-=50'
		})
	})
})
 
 
})  // end of the document.ready function: do not remove or write DOM manipulation below this.