Here is the HTML:

Code:
<img src="/_images/bhm-circle-chart-members.jpg" width="504" height="504" border="0" usemap="#Map" />

<div id="popupContact2" class="popupContact"> 
	<a class="popupContactClose">x</a>
		<h1>22Title of our cool popup, yay!</h1>
		<p id="contactArea">
			22sutff goes here
		</p>
</div>

<div id="popupContact" class="popupContact"> 
	<a class="popupContactClose">x</a>
		<h1>Title of our cool popup, yay!</h1>
		<p id="contactArea">
			sutff goes here
		<a href="resource-center.asp">link</a>
		</p>

</div>


<map name="Map" id="Map">
<area shape="poly" coords="90,63,128,110,150,95,177,80,202,71,229,65,250,65,249,4,220,3,194,8,165,17,142,29,114,42" href="#" id="button" popup="popupContact" />
<area shape="poly" coords="255,5,257,64,276,68,301,73,325,83,345,91,373,109,408,61,387,42,355,25,324,13,281,3" href="#" id="button" popup="popupContact2" />
</map>

<div class="backgroundPopup"></div>
and the jQuery. What i can not seem to figure out is why the script does not seem to apply to the 2nd div... can anyone point out what im doing wrong?? the first DIV "popupContact" works fine, but the "popupContact2" is not working...?!?!

Code:
var popupStatus = {}; 
 

function loadPopup(popupId){ 

    if(popupStatus[popupId]==0){ 
        $(".backgroundPopup").css({ 
            "opacity": "0.7" 
        }); 
        $(".backgroundPopup").fadeIn("slow"); 
        $("#" + popupId).fadeIn("slow"); 
        popupStatus[popupId] = 1; 
    } 
} 
 

function disablePopup(popupId){ 

    if(popupStatus[popupId]==1){ 
        $(".backgroundPopup").fadeOut("slow"); 
        $("#" + popupId).fadeOut("slow"); 
        popupStatus[popupId] = 0; 
    } 
} 
 

function centerPopup(popupId){ 

    var windowWidth = document.documentElement.clientWidth; 
    var windowHeight = document.documentElement.clientHeight; 
    var popupHeight = $("#" + popupId).height(); 
    var popupWidth = $("#" + popupId).width(); 

    $("#" + popupId).css({ 
        "position": "absolute", 
        "top": windowHeight/2-popupHeight/2, 
        "left": windowWidth/2-popupWidth/2 
    }); 

 
    $(".backgroundPopup").css({ 
        "height": windowHeight 
    }); 
 
} 
 
 

$(document).ready(function(){ 
    popupStatus = { popupContact: 0, popupContact2: 0 }; 
 
 
    $("#button").click(function(){
	  
        var popupId = $(this).attr("popup"); 

        centerPopup(popupId); 

        loadPopup(popupId); 
    }); 
 
    $(".popupContactClose").click(function(){ 
        var popupId = $(this).parents("div").attr("id"); 
        disablePopup(popupId); 
    }); 

    $(".backgroundPopup").click(function(){ 

        for (var popupId in popupStatus) 
        { 
          if (popupStatus[popupId] == 1) 
            disablePopup(popupId); 
        } 
    }); 

    $(document).keypress(function(e){ 
        var popupId = $(e.target).parents("div.popupContact").attr("id"); 
        if(e.keyCode==27 && popupStatus[popupId]==1){ 
            disablePopup(popupId); 
        } 
    });

 
 
});