<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="html" /> 
<xsl:template match="/WCData">
	<script>
		var newmemberinfo = new Array();
		function moreinfo(position) {
			document.getElementById("newmember_details_"+position).innerHTML = "&lt;p class='hoverbox'&gt;Member since: "+newmemberinfo[position][1]+"&lt;/p&gt;";
			}
		function delay(position) {
			setTimeout(moreinfo(position),500);
		}
		function lessinfo(position) {
			document.getElementById("newmember_details_"+position).innerHTML = "";
			}
	</script>
	<style>
		.newmember_details {position:relative;z-index:2;left: 50px;width:0;height:0;overflow:visible;display:block;}
		.hoverbox {width:200px;border:#999999 1px solid;padding: 5px;background-color:#ffffff;}
		.newmember {position: relative;}
	</style>
	<ul class="NewMembers_Container">
	<xsl:for-each select="New_Members_1_Result">
		<li>
			<div id="newmember_{position()}" class="newmember" onMouseOver="//delay({position()});" onMouseOut="//lessinfo({position()});" style="cursor:pointer;">
				<a href="https://web.grandhavenchamber.org/wcdirectory/results/listing.aspx?listingid={ListingID}" >
					<xsl:value-of select="OrgName" /> 
				</a>
			</div>
			<div id="newmember_details_{position()}" class="newmember_details"></div>
		</li>
		<script>
			newmemberinfo[<xsl:value-of select='position()' />] = new Array("<xsl:value-of select="OrgName" />","<xsl:value-of select="DateCreated" />","<xsl:value-of select="ShortDescr" />");
		</script>
	</xsl:for-each>
	</ul>
</xsl:template>
</xsl:stylesheet>