$(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');
var headings = $( ":header" )
var mascotStyle = $( ".mascot" )




//RELEASE 2: 
  // Add code here to modify the css and html of DOM elements
headings.css({color: "blue", border: "2px solid black", visibility: "initial"})
$( "h1:contains('Mascot')").html("My Fiddler Crabs Mascot")

//RELEASE 3: Event Listener
  // Add the code for the event listener here 
$('img').on('mouseover', function(e) {
    e.preventDefault()
    $(this).attr('src','http://2.bp.blogspot.com/-JXdSrHoMR18/T9sxLkOJtkI/AAAAAAAAAZc/aNlkvHcZAso/s1600/fiddler-crab.jpg')
})

$('img').on('mouseleave', function(e) {
    $(this).attr('src','http://ebmedia.eventbrite.com/s3-s3/eventlogos/28578437/4809359925-1.png')
})



//RELEASE 4 : Experiment on your own
$('img').css({border: "2px sold blue"})
$('img').css({border: "2px solid black"})

$('img').click(function() {
    $('img').animate({
        borderWidth: "10px",
        height: "200",
    }, 3000, function() {
  })
})





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