
//catch rollover events
function startInfobox(id, parentid, dx, dy, width, height, bkgdimg, containermargin) {
    //add the elements to the DOM
	$(parentid) // CUSTOM (au lieu de body)
		.append('<div class="infoboxBkgd siteOverlay" id="infoboxBkgd_'+id+'"></div><div class="infoboxContainer siteOverlay" id="infoboxContainer_'+id+'"></div>');

    //animate the semitransparent layer
    $("#infoboxBkgd_"+id).css({"left":$("#"+id).position().left+dx+"px", "top":$("#"+id).position().top+dy+"px", "width":width+"px", "height":height+"px", "background-image":"url('"+bkgdimg+"')"});
    $("#infoboxContainer_"+id).css({"left":$("#"+id).position().left+dx+"px", "top":$("#"+id).position().top+dy+"px", "margin":containermargin+"px", "width":width-containermargin*2+"px", "height":height-containermargin*2+"px"});

    //fill the infobox container with html
    $("#infoboxContainer_"+id).html(Infoboxes[''+id]);

    //initiate the click remove
    window.removeInfoboxOnClick();
}

function removeInfobox(id) {
    // if id bears a value there has been a rollout of the button
	$("#infoboxContainer_"+id+", #infoboxBkgd_"+id).remove();	
}

function removeInfoboxOnClick() {
    // allow users to be able to close the infobox by clicking anywhere
    $(document).click(function(){
        $(".infoboxContainer, .infoboxBkgd").animate({"opacity":"0"}, 0, "linear", function(){
            $(".infoboxContainer, .infoboxBkgd").remove();	
        });
    });
}

