$(document).ready(function(){
			$('#hero_fade').innerfade({
			    animationtype: 'fade',
				speed: 3000,
				timeout: 5000,
				type: 'sequence',
				containerheight: '260px'
			});
		


	$(".showOverlay").each(function() {
        $(this).click(function(e) {
            e.preventDefault();
            // Find which item and content to add to overlay
            var whichItem = $(this).attr("rel");
			
            // Create Overlay DIV and background Overlay DIV
            var coverup = $("<div/>").attr("class", "coverup");
            var olDiv = $("<div/>").attr("id", "overlay");
            $("body").append(coverup);
            $("body").append(olDiv);

            //Create Close button for DIV and Cover Up
            $("#overlay").append("<span id='overlayClose'><a href='#' title='Close'></a></span>");
            $("#overlayClose a, .coverup").click(function(e) {
                e.preventDefault();
                $("#overlay").fadeOut("normal", function() {
                    $("#overlay").remove();
                });
                $(".coverup").fadeOut("normal", function() {
                    $(".coverup").remove();
                });
            });

            // Populate Overlay
            $("#overlay").append($("#" + whichItem).html());

            // Position and Reveal Overlay and Coverup
            $.positionDiv("#overlay");
            $(".coverup").fadeIn();
            $("#overlay").fadeIn();

        });
    });


});
// Position element centered on the screen
//========================================
$.positionDiv = function(id){
	var l = ($(window).width()-$(id).width())/2;
	var t = ($(window).height()-$(id).height())/2;
	$(id).css("left",l);
	$(id).css("top",t);	
	
	//If the User resizes the window, adjust the #container height
	$(window).bind("resize", function(){
		updatePosition(id)
	});
	
}
function updatePosition(id) {
	var l = ($(window).width()-$(id).width())/2;
	var t = ($(window).height()-$(id).height())/2;
	$(id).css("left",l);
	$(id).css("top",t);	
}