// Sets animation and speed of hover image divs
$(document).ready(function() {
        $('.wrap').hover(function() {
            $(this).children('.front').stop().animate({ "top" : '0px'}, 200);   //slide up
        }, function() {
            $(this).children('.front').stop().animate({ "top" : '93px'}, 1200);    //slide back   
        });
    });

//DISJOINTED ROLLOVERS USING BUTTON NAVIGATION AND IMAGES FADING IN AND OUT
$(document).ready(function(){
//disjointed rollover function starting point
$("div#button li").hover(function(){
	//make a variable and assign the hovered id to it
	var elid = $(this).attr('id');
	//hide the image currently there
	$("div#images div").hide();
	//fade in the image with the same id as the selected buttom
	$("div#images div#" + elid + "").fadeIn("slow");

	});
});