
Listing 1

<cfprocessingdirective suppresswhitespace="yes">


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional
//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>


<script src="../scripts/common.js" type=text/javascript></script>

   <!---The query will find which states have centers, and group the cities in which centers are located.

We use distinct to get only one city per state for the listing purposes. The ORDER BY will be called by the GROUP parameter of the
 cfquery call. LEFT OUTER JOIN will give us all state abbreviations.
---->

   <cfquery name="getmapinfo" datasource="#request.dsn#" username="#request.dsnusername#" password="#request.dsnpassword#">

SELECT distinct c.state,  c.city, c.status, c.state_full, s.state_ab, s.state_top, s.state_left

   FROM tbl_states s

   LEFT OUTER JOIN biocenters c

   ON s.state_ab = c.state

   ORDER BY state_ab, status, city

   </cfquery>



   <!--- Have one place to make offsets ----->

   <cfset thetopoffset=146>

   <cfset theleftoffset=170>

   <style>

<cfoutput query="getmapinfo" group="state_ab">



<!---apply the offsets----->

<cfset variables.state_top = #val(getmapinfo.state_top)# + #variables.thetopoffset#>

<cfset variables.state_left = #val(getmapinfo.state_left)# + #variables.theleftoffset#>

<!----for states with no centers, create div that will put state abbreviation on map in white type ----->

<cfif NOT #len(getmapinfo.city)#>

###state_ab#_set {

	position: absolute;

	left: #variables.state_left#px;

	top: #variables.state_top#px;

	visibility:visible;

	Z-INDEX: 5;

	border:0px;

	padding:0px;

	background-color:##dedede;

	width:10px;

	font-size:10px;

	font-weight:bold;

	color:##fff;

}

</cfif>



<!----Set a position for the rollover which is to be called, for those states that have centers.  This will change so that items
 on the left will pop right and items on the right will pop left---->

<cfif #len(getmapinfo.city)#>

<CFIF #Val(state_left)# gt 320>

<CFSET theDetailLeft = #Val(variables.state_left)# -240>

<CFELSE>

<CFSET theDetailLeft = #Val(variables.state_left)# + 30>

</CFIF>

<CFSET theDetailTop = #Val(variables.state_top)# -20>


###state_ab#_abbrev {

	position: absolute;

	left: #variables.state_left#px;

	top: #variables.state_top#px;

	visibility:visible;

	Z-INDEX: 10;

	border:0px;

	padding:0px;

	background-color:##dedede;

	width:10px;

	font-size:10px;

	font-weight:bold;


}


###state_ab#_detail {

	position: absolute;

	left: #variables.TheDetailLeft#px;

	top: #variables.theDetailTop#px;

	width:220px;

	visibility:hidden;

	border:1px solid black;

	padding:3px;

	background-color:##f8eee3;

	z-index:30;

	font-family:Verdana, Arial, Helvetica, sans-serif;

	font-size:11px;

	color:##8f420f;

}



</cfif>

</cfoutput>

</style>



</head>



<body>



<div id="themap">

<img src="images/BaseMap100.gif" alt="US Map" title="" />

</div>





<cfoutput query="getmapinfo" group="state_ab">

   	<!---First, put in the state abbreviations without rollovers and popups. We identify this by the city field being empty----->

      <cfif NOT #len(getmapinfo.city)#>

         <div id="#state_ab#_set">#state_ab#</div>

      </cfif>

	  <!----Now we put in the divs for those that will have rollovers---->

      <cfif #len(getmapinfo.city)#>

         <div id="#state_ab#_abbrev"> <a href="OneStateMap.cfm?state_ab=#state_ab#" class="map"
		  onMouseOver="show('#state_ab#_detail')" onMouseOut="hide('#state_ab#_detail')">#state_ab#</a> </div>

		<!---Next, create the div that will popup on mouseover------------>

         <div id="#state_ab#_detail"> <strong>#state_full#</strong><br />

            <cfoutput group="status">

               <cfif #status# is "Open">

                  <cfoutput> · #city# </cfoutput> <br />

               </cfif>

               <cfif #status# is "Soon">

                  <em>Opening soon in:<br />

                  <cfoutput> · #city# </cfoutput> </em> <br />

               </cfif>

            </cfoutput> <strong><em>Click now for details...</em></strong> </div>

      </cfif>

</cfoutput>



</body>

</html>



</cfprocessingdirective>



Listing 2

<cfset variables.numberofcolumns = 3>
<cfset variables.thecolumncounter = 1>
<cfset variables.theitemcounter = 1>
<cfset variables.thetotalitems = statecount.thestatecount>
<table width="370" cellpadding="5" cellspacing="0" border="0">
   <tr>
            <td class="jobs" valign="top">
            <cfoutput query="GetOpenAndSoonCenters" group="state_full">
            <strong>#state_full#:</strong><br />
            <cfoutput>
               <cfif #city# neq #variables.thecity#>
                  #city#<br />
               </cfif>
               <cfset thecity = "#city#">
            </cfoutput>
	    <br />
            <cfset variables.theitemcounter = variables.theitemcounter + 1>
            <cfif variables.theitemcounter gte ((variables.thecolumncounter / variables.numberofcolumns) * 
			variables.thetotalitems)>
               <cfset variables.thecolumncounter = variables.thecolumncounter +1>
               <cfif variables.thecolumncounter lte variables.numberofcolumns>
                  </td>
                  <td class="jobs" valign="top">
               </cfif>
            </cfif>
            </cfoutput>
            </td>
         </tr>
</table>