## Note that _${dynamicMap} is used a lot to make the javascript variables (count) and function names (hover, revert) unique
## so that multiple macros can appear on the same page. Just remember that Velocity substitution happens on the server, and the 
## Javascript execution happens in the browser.
<!--
  ~ Copyright (c) 2006 Stepstone Technologies Inc.
  ~ All rights reserved.
  -->

<span class="image-wrap #if ($class)${class}#end"
	#if ($id) id="$id" #end
	#if ($align == "left" || $align == "right") style="float: $align" #end
	#if ($align == "center") style="text-align: $align" #end
><img border="0" 
	id="$dynamicMap"
	class="dynamic-image" 
	usemap="#$dynamicMap"
	#if($width) width="$width" #end 
	#if($height) height="$height" #end
	src="$contextPath/download/attachments/$attachmentPage.id/$brikitCore.urlEncode($image)"
/></span>

<script type="text/javascript">

	function hover_${dynamicMap}(image) {
		jQuery("#$dynamicMap").attr("src", image);
	}

	function revert_${dynamicMap}() {
		hover_${dynamicMap}("$contextPath/download/attachments/$attachmentPage.id/$brikitCore.urlEncode($image)");
	}

	revert_${dynamicMap}();

</script>

<map name="$dynamicMap">
	$body
</map>