Index: animated_map.xsl
===================================================================
--- animated_map.xsl	(revision 492)
+++ animated_map.xsl	(revision 670)
@@ -4,9 +4,9 @@
 <!--                                                            -->
 <!-- $RCSfile: animated_map.xsl,v $                             -->
 <!--                                                            -->
-<!-- $Revision: 1.28 $                                          -->
+<!-- $Revision: 1.44 $                                          -->
 <!--                                                            -->
-<!-- $Date: 2002/06/25 18:30:24 $                               -->
+<!-- $Date: 2002/08/07 20:20:10 $                               -->
 <!--                                                            -->
 <!-- Copyright (C) 2002 Susan Barnett                           -->
 <!--   contribution from Bruce Robertson brobertson@mta.ca      -->
@@ -32,7 +32,7 @@
 <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-->

 <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
-    xmlns:heml="http://www.heml.org/schemas/2001-07-02/heml"
+    xmlns:heml="http://www.heml.org/schemas/2002-05-29/heml"
     xmlns:lxslt="http://xml.apache.org/xslt"
      xmlns:xalan="http://xml.apache.org/xalan"
     xmlns:chronology="xalan://org.heml.chronology.parse.Chronology"
@@ -45,41 +45,18 @@
 <xsl:import href="lib/text_filter.xsl"/>
 <xsl:import href="../../../funct/international_dates.xsl"/>
 <xsl:import href="../../../funct/linking.xsl"/>
+<xsl:import href="../../../../site/translator.xsl"/>
 <xsl:key name="locationRefs" match="heml:LocationRef" use="@idref"/>
 <xsl:key name="Locations" match="heml:Location" use="../heml:Event/@id"/>

-<lxslt:component prefix="my-ext" functions="hmsToDecimal">
-  <lxslt:script lang="javascript">
-    function hmsToDecimal(hour, minute, second) {
-      return (hour*1 + minute/60 + second/3600);
-      }
-    function timeToAnimationTime(time, timeStart, timeEnd, durationOfAnimation) {
-      return (durationOfAnimation * (time - timeStart)/ (timeEnd - timeStart)/1000);
-      }
-
-  </lxslt:script>
-</lxslt:component>
-  <!-- THIS XSLT GENERATES AN ANIMATED MAP FROM   -->
-  <!-- A FILE COMPRISING THE MAP, ITS METADATA   -->
-  <!-- AND THE EVENTS TO BE LABELED              -->
-
-<!-- ANIMATION VARIABLES -->
-
-<!-- how long do animations last in miliseconds? -->
-<xsl:param name="durationOfAnimation" select="'30000'"/>
-<!-- how long should events appear at a minimum? -->
-<xsl:param name="min_duration" select="'500'"/>
-<xsl:variable name="timeStart" select="number($earliest_timing)"/>
-<xsl:variable name="timeEnd" select="number($latest_timing)"/>
-<!-- VARIABLES COMMON TO HEML CODE -->
+<!-- VARIABLES COMMON TO HEML CODE             -->
 <xsl:param name="calendar" select="'Gregorian'"/>
 <xsl:param name="url" select="'http://foo.bar'"/>
 <xsl:param name="lang" select="'en'"/>
 <xsl:param name="country" select="'US'"/>
 <xsl:param name="dateFormat" select="'yyyy G'"/>

-  <!-- MAP VARIABLES                             -->
-
+<!-- MAP VARIABLES                             -->
 <xsl:param name="mapName" select="'world'"/>
 <xsl:param name="mapfile" select="concat('../../../../../docs/source/map/',$mapName,'.xml')"/>
 <xsl:param name="mapdoc"  select="document($mapfile)"/>
@@ -94,119 +71,130 @@
 <xsl:param name="map_width"        select="$mapdoc/map/description/@map_width"/>
 <xsl:param name="map_height"       select="$mapdoc/map/description/@map_height"/>

-  <!-- THE SVG ELEMENT IS COPIED OVER, AND EVENT -->
-  <!-- LABELS ADDED                              -->
+<!--*************************************
+* parameter setting the size of the resulting image.
+* This will be used to scale the map *and* table window.
+* Useful to make full-screen versions for teaching and
+* demonstration
+****************************************-->
+<!-- currently this param does nothing -->
+<xsl:param name="svg_is_resized" select="true"/>
+<xsl:param name="svg_resized_width" select="'1000'"/>


 <xsl:template match="/">
+    <xsl:choose>
+      <xsl:when test="xalan:nodeset($svgEventLabels)//*[@id='HEML_ERROR']">
+       <svg xmlns="http://www.w3.org/2000/svg" >
+        <text x="10" y="20">******MAP GENERATION ERROR********</text>
+        <g transform="translate(0,30)">
+        <xsl:comment>####### exception code caught; error statement should follow</xsl:comment>
+        <xsl:copy-of select="xalan:nodeset($svgEventLabels)//*[@id='HEML_ERROR']"/>
+        </g>
+       </svg>
+      </xsl:when>
+       <xsl:otherwise>
+  <svg id="animated_svg"  onload="init(evt,{$map_width},{$map_height},{$svg_resized_width});" width ="{$map_width + 100}">
+	<xsl:comment>Generated by: $Id: animated_map.xsl,v 1.44 2002/08/07 20:20:10 sudoba Exp $ </xsl:comment>
+		<xsl:comment>x bottom  left: <xsl:value-of select="$x_bottom_left"/>
+	</xsl:comment>
+	<!--xsl:copy-of select="$svgEventLabels"/-->

-  <svg id="animated_svg"
-	onload="init(evt, {$timeStart}, {$timeEnd}, {$durationOfAnimation}, {$map_width}, {$map_height});">
-  <xsl:comment>Generated by: $Id: animated_map.xsl,v 1.28 2002/06/25 18:30:24 sudoba Exp $ </xsl:comment>
-  <xsl:comment>Earliest Time is: <xsl:value-of select="$earliest_timing"/>; Latest Time is:
-    <xsl:value-of select="$latest_timing"/>
-x bottom  left: <xsl:value-of select="$x_bottom_left"/>
-  </xsl:comment>
-  <!--xsl:copy-of select="$svgEventLabels"/-->
-  <script xlink:href="/heml-cocoon/js/mapAnimation.js" type="text/ecmascript"></script>
-  <xsl:copy-of select="$text_filter"/>
+	<script xlink:href="/heml-cocoon/js/mapAnimation.js" type="text/ecmascript"></script>

+	<xsl:copy-of select="$text_filter"/>

+
 <!--*******************************************************************************
 *  control bar element for animated map
 ********************************************************************************-->

   <defs>
-    <g id="button">
+    <g id="button" pointer-events="all">
     	<rect fill="rgb(230,230,230)" stroke="rgb(128,128,128)" x="2" width="40" height="40"/>
-    	<polyline points="4,38.5 4,2.5 39.5,2.5" fill="none" stroke="white"/>
-    	<polyline points="39,3 39,37 4.5,37" fill="none" stroke="rgb(136,128,136)"/>
-    	<polyline points="40,2 40,38 3.5,38" fill="none" stroke="rgb(100,100,100)"/>
+    	<polyline points="5,38.5 5,2.5 39.5,2.5" fill="none" stroke="white"/>
+    	<polyline points="39,3 39,37 5.5,37" fill="none" stroke="rgb(136,128,136)"/>
+    	<polyline points="40,2 40,38 4.5,38" fill="none" stroke="rgb(100,100,100)"/>
     </g>

-    <g id="pause">
+    <g id="pause_symbol" pointer-events="none">
     	<polyline points="15,29 15,9 20,9"  fill="none" stroke="black"/>
     	<polyline points="20,9 20,29 15,29" fill="none" stroke="white"/>
     </g>

-    <g id="rewind">
+    <g id="rewind_symbol" pointer-events="none">
   	<polyline points="20,29 20,9" fill="none" stroke="rgb(136,128,136)"/>
   	<polyline points="20,9 8,19"  fill="none" stroke="black"/>
   	<polyline points="8,19 20,29" fill="none" stroke="white"/>
     </g>

-    <g id="forward">
+    <g id="forward_symbol" pointer-events="none">
   	<polyline points="11,29 11,9"  fill="none" stroke="rgb(136,128,136)"/>
   	<polyline points="11,9 23,19"  fill="none" stroke="black"/>
   	<polyline points="23,19 11,29" fill="none" stroke="white"/>
     </g>

   </defs>
+ <!-- move over so the dates on the slider pointer are always visible -->
+ <g transform="translate(15,0)">

+  <xsl:comment>Animation manipulation buttons</xsl:comment>
   <!--play button -->
-  <g id="start" transform="translate(20,20) scale(0.65)"
-	 onclick="startAnimation(evt)"
-	 onmouseover="showButton(evt)">
+  <g id="start" transform="translate(20,20) scale(0.65)">
     <use xlink:href="#button"/>
-    <polyline id="start_indicator" points="16,28 16,10 28,20" fill="none" stroke="none"/>
+    <polyline id="start_indicator" pointer-events="none"
+	 points="15.5,28 15.5,10 29,19" fill="none" stroke="none"/>
+    <polyline points="29,19 15,29" fill="none" stroke="white"/>
     <polyline points="15,29 15,9"  fill="none" stroke="rgb(136,128,136)"/>
     <polyline points="15,9 29,19"  fill="none" stroke="black"/>
-    <polyline points="29,19 15,29" fill="none" stroke="white"/>
   </g>

   <!--stop button -->
-  <g id="stop" transform="translate(60,20) scale(0.65)"
-	 onclick="stopAnimation()"
-	 onmouseover="showButton(evt)">
+  <g id="stop" transform="translate(60,20) scale(0.65)">
     <use xlink:href="#button"/>
-    <polyline id="stop_indicator" points="14,24 14,16 28,16 28,24 14,24" fill="none"
-	stroke="none"/>
-    <polyline points="13,25 13,15 29,15" fill="none" stroke="black"/>
-    <polyline points="29,15 29,25 13,25" fill="none" stroke="white"/>
+    <rect id="stop_indicator" pointer-events="none" x="14" y="16" width="14" height="8"
+	fill="none" stroke="none"/>
+    <polyline points="29,14.5 29,25 13,25" fill="none" stroke="white"/>
+    <polyline points="13,25.5 13,15 29.5,15" fill="none" stroke="black"/>
   </g>

   <!--pause button -->
-  <g id="pause" transform="translate(100,20) scale(0.65)"
-	 onclick="pauseAnimation()"
-	 onmouseover="showButton(evt)">
+  <g id="pause" transform="translate(100,20) scale(0.65)">
     <use xlink:href="#button"/>
     <g id="pause_indicator" fill="none">
       <polyline points="16,28 16,10 19,10 19,28 16,28" stroke="none"/>
       <polyline transform="translate(10,0)" points="16,28 16,10 19,10 19,28 16,28"
         stroke="none"/>
     </g>
-    <use xlink:href="#pause"/>
-    <use transform="translate(10,0)" xlink:href="#pause"/>
+    <use xlink:href="#pause_symbol"/>
+    <use transform="translate(10,0)" xlink:href="#pause_symbol"/>
   </g>

   <!--rewind button -->
-  <g id="rewind" transform="translate(140,20) scale(0.65)"
-	 onmousedown="rewindAnimation(evt)"
-	 onmouseover="showButton(evt)">
+  <g id="rewind" transform="translate(140,20) scale(0.65)">
     <use xlink:href="#button"/>
     <g id="rewind_indicator" fill="none">
       <polyline points="19,28 19,10 9,19" stroke="none"/>
       <polyline transform="translate(12,0)" points="19,28 19,10 9,19" stroke="none"/>
     </g>
-    <use xlink:href="#rewind"/>
-    <use transform="translate(12,0)" xlink:href="#rewind"/>
+    <use xlink:href="#rewind_symbol"/>
+    <use transform="translate(12,0)" xlink:href="#rewind_symbol"/>
   </g>

   <!--fast forward button -->
-  <g id="forward" transform="translate(180,20) scale(0.65)"
-	 onmousedown="forwardAnimation(evt)"
-	 onmouseover="showButton(evt)">
+  <g id="forward" transform="translate(180,20) scale(0.65)">
     <use xlink:href="#button"/>
     <g id="forward_indicator" fill="none">
       <polyline points="12,28 12,10 22,19" stroke="none"/>
       <polyline transform="translate(12,0)" points="12,28 12,10 22,19" stroke="none"/>
     </g>
-    <use xlink:href="#forward"/>
-    <use transform="translate(12,0)" xlink:href="#forward"/>
+    <use xlink:href="#forward_symbol"/>
+    <use transform="translate(12,0)" xlink:href="#forward_symbol"/>
   </g>

+  <xsl:comment>Duration selector</xsl:comment>
   <!-- duration selection bar -->
-  <g id="duration_selector" transform="translate(273,30) scale(0.8)">
+  <g id="duration_selector" transform="translate(275,30) scale(0.8)">
     <rect x="0" y="0" width="200" height="20" fill="rgb(230,230,230)"/>
     <rect x="0" y="0" width="200" height="20" fill="none" stroke="rgb(128,128,128)"/>
     <polyline points="199,0.5 199,19 1.5,19" fill="none" stroke="white"/>
@@ -233,17 +221,23 @@
       <line x1="190" x2="190" y1="7" y2="13"/>
     </g>

-    <text y="-5" style="fill: rgb(0,0,0); font-size: 10; font-family: Arial Unicode MS">
-	Duration time
-    </text>
+	<g style="fill: rgb(0,0,0); font-size: 11; font-family: Arial Unicode MS">
+      <text x="0" y="-5">
+	     <xsl:call-template name="translatePhrase">
+            <xsl:with-param name="key_name">duration</xsl:with-param>
+		    <xsl:with-param name="language"><xsl:value-of select="$lang"/></xsl:with-param>
+         </xsl:call-template>
+	  </text>
+      <text id="duration_timer" x="100" y="-5">0 </text>
+	  <text x="121" y="-5">
+	     <xsl:call-template name="translatePhrase">
+            <xsl:with-param name="key_name">seconds</xsl:with-param>
+		    <xsl:with-param name="language"><xsl:value-of select="$lang"/></xsl:with-param>
+         </xsl:call-template>
+	  </text>
+	</g>

-    <polyline points="-7,4 -7,14 -12,9"   fill="rgb(200,200,200)" stroke="none" />
-    <polyline points="-12,9 -7,14"        stroke="rgb(128,128,128)" />
-    <polyline points="207,4 207,14 212,9" fill="rgb(200,200,200)" stroke="none" />
-    <polyline points="206.5,4 206.5,14"   stroke="rgb(128,128,128)" />
-
-    <g id="duration_slider" pointer-events="all" fill="none"
-        onmousedown="startSetDuration(evt);">
+    <g id="duration_slider" fill="none" transform="translate(0,0)">
       <polyline points="2,18.5 2,2 18.5,2"   stroke="white"/>
       <polyline points="18,1.5 18,18 1.5,18" stroke="black"/>
       <polyline points="17,2.5 17,17 2.5,17" stroke="rgb(128,128,128)"/>
@@ -258,126 +252,109 @@
       <line x1="9.75" x2="9.75" y1="14" y2="16" stroke="rgb(128,128,128)"
         stroke-width="0.75"/>
       <line x1="10.5" x2="10.5" y1="14" y2="16" stroke="white" stroke-width="0.5"/>
-      <rect x="2" y="2" height="16" width="16" fill="none" pointer-events="visible"/>
+      <rect x="-16" y="-16" height="64" width="64" fill="none" pointer-events="visible"/>
     </g>
   </g>

+ <xsl:comment>Following g element scales the entire image</xsl:comment>
+ <g>
+ <xsl:attribute name="transform">
+   <xsl:value-of select="concat('scale(',$svg_resized_width div $map_width,')')"/>
+ </xsl:attribute>
+
+
 <!--*******************************************************************************
-*  slider element for animated map
+*  slider element for animated map - hidden until set by init()
 ********************************************************************************-->
-  <g id="slider" transform="translate(0,80)" >
+  <xsl:comment>Timeline slider</xsl:comment>
+  <g id="slider" transform="translate(0,80)" visibility="hidden">

     <!-- line for timeline slider.  Will be the same length as the map  -->
     <line id="slider_line" style="fill: none; stroke: rgb(0,0,0); stroke-width: 2;
       stroke-linecap :round" x1="11px" y1="17px" x2="520px" y2="17px" />

     <!-- polygon and date that will slide upon this line -->
-    <g id="slider_pointer" transform="translate(0,0)" pointer-events="all"
-	   onmousedown ="startSliderManip(evt);">
+    <g id="slider_pointer" transform="translate(0,0)">
+
       <animateMotion id="pointer_motion"  to="509,0" begin="indefinite"
 	    end="indefinite" dur="10s" fill="freeze"/>

-      <!-- rectangle encloses the polygon and date for bigger target area-->
-      <rect id="outline" x="0px" y="0px" width="23px" height="20px" fill="none" pointer-events="none"/>
-
-      <!-- date sits on top of polygon -->
-      <text id="pointer_date" y="7px" x="3px" style="fill:rgb(0,0,0); font-size:8;
-	font-family:Arial Unicode MS">1900</text>
-
+      <!-- rectangle encloses the polygon and date for bigger target area -->
+      <rect x="0px" y="0px" width="23px" height="23px" fill="none" pointer-events="visible"/>
+
       <!-- polygon thats slides upon the line under the date -->
-      <polygon id="pointer_poly" style="fill: rgb(173,216,230); stroke: rgb(0,0,128);
-	stroke-width: 1" points="6.18588,8.47967 15.8058,8.61865 11.1667,13.5317"/>
+      <polygon id="pointer_poly"  style="fill: rgb(173,216,230); stroke: rgb(0,0,128);
+	    stroke-width: 1" points="6.18588,8.47967 15.8058,8.61865 11.1667,13.5317"/>
+
+      <!-- date sits on top of polygon -->
+      <text id="pointer_date" y="7px" x="12px" style="fill:rgb(0,0,0); font-size:8;
+	    font-family:Arial Unicode MS" text-anchor="middle" pointer-events="none">1900</text>
     </g>

     <!-- add dates to either end of the slider to demarcate starting and ending dates -->
-    <g id = "slider_dates" style="fill: rgb(0,0,0); font-size: 8;
-      font-family: Arial Unicode MS">
+    <g id = "slider_dates" style="fill: rgb(0,0,0); font-size: 8; font-family: Arial Unicode MS">
       <text id="start_date" y="27.363px" x="2.09091px" >1900</text>
-      <text id="end_date" y="27.363px" x="513px" >2001</text>
+      <text id="end_date" text-anchor="end" x="{$map_width - 2.09091}" y="27.363px" >2001</text>
     </g>
   </g>
   <!-- ************* end slider element **************-->


-
 <!--*******************************************************************************
 *  map element
 ********************************************************************************-->
   <g id="{$mapName}" transform="translate(0,110)" >
-    <xsl:copy-of select="$mapdoc/map/svg/*"/>
+       <xsl:copy-of select="$mapdoc/map/svg/*"/>
     <g id="events">
       <xsl:apply-templates select="/heml:Heml/heml:Events/heml:Event"/>
     </g>
   </g>
   <!-- ************* end map element **************-->
-</svg>

-</xsl:template>

-
-
-
-
-
-<!-- DRAWS THE DOTS CORRESPONDING TO THE EVENTS  -->
-<!-- :TODO: this revision fails to take into account the minutes and seconds -->
-<xsl:template match="heml:Event">
-
-  <xsl:comment>Event: <xsl:value-of select="heml:EventLabelSet/heml:Label[1]"/></xsl:comment>
-<!-- check that there exists the needed data -->
-<!--xsl:if test="heml:Location/heml:Longitude/heml:GeographicalHourLongitude and heml:Location/heml:Latitude/heml:GeographicalHourLatitude" -->
-<!--xsl:text>Long: <xsl:text><xsl:value-of select="heml:Location/heml:Longitude/heml:GeographicalHourLongitude"/>
-</xsl:comment-->
-<a>
-<xsl:attribute name="xlink:href"><xsl:apply-templates select="@id" mode="svg_popup"/></xsl:attribute>
-<g visibility="hidden" fill="black">
-<xsl:comment>The following eventTime element will be replaced by the eventEndTime and eventStartTime elements real, real soon</xsl:comment>
-<eventTime>
-  <xsl:attribute name="timing"><xsl:value-of select="xalan:nodeset($time_info)/Wrapper/Timing/time[../id=current()/@id]"/>
-   </xsl:attribute>
-</eventTime>
-<eventStartTime>
-  <xsl:attribute name="timing"><xsl:value-of select="chronology:getEarliestTime(heml:Chronology)"/></xsl:attribute>
-</eventStartTime>
-<eventEndTime>
-  <xsl:attribute name="timing"><xsl:value-of select="chronology:getLatestTime(heml:Chronology)"/></xsl:attribute>
-</eventEndTime>
-<set attributeName="visibility" to="visible"  begin="indefinite" dur="2000ms">
-  <xsl:attribute name="id"><xsl:value-of select="concat('set_visibility_', @id)"/></xsl:attribute>
-</set>
-<set attributeName="fill" to="crimson" begin="indefinite" dur="indefinite">
-  <xsl:attribute name="id"><xsl:value-of select="concat('set_fill_', @id)"/></xsl:attribute>
-</set>
-<xsl:copy-of select="xalan:nodeset($svgEventLabels)//*[@id = current()/@id]"/>
+  <!-- rectangle to pick up mouseup events when required -->
+  <rect id="mat" x="0" y="0" width="0" height="0" fill="none"
+    stroke="none" pointer-events="none"/>
 </g>
-</a>
-<!--/xsl:if-->
+</g>
+</svg>
+</xsl:otherwise>
+</xsl:choose>
 </xsl:template>


-<!-- FUNCTION WHICH PROVIDES A POINT IN X,Y     -->
-<!-- CORRESPONDING TO THE LAT, LONG WITH        -->
-<!-- OPTIONAL OFFSET.                           -->
-<xsl:template name="toX">
-  <xsl:param name="longitude"/>
-
-  <xsl:param name="offset" select="'0'"/>
-  <xsl:value-of select="$offset + ($x_bottom_left +
-        (($longitude - $long_bottom_left)
-        div ($long_top_right - $long_bottom_left)
-        * ($x_top_right - $x_bottom_left)))"/>
+<!--*******************************************************************************
+*  set visibility and duration information for the events
+********************************************************************************-->
+<xsl:template match="heml:Event">
+	<xsl:comment>Event: <xsl:value-of select="heml:EventLabelSet/heml:Label[1]"/></xsl:comment>
+	<!-- check that there exists the needed data -->
+	<xsl:if test="heml:Location/heml:Longitude or heml:LocationRef" >
+		<a>
+		<xsl:attribute name="xlink:href"><xsl:apply-templates select="@id" mode="svg_popup"/></xsl:attribute>
+		<g visibility="hidden" fill="black">
+			<eventStartTime>
+				<xsl:attribute name="timing">
+					<xsl:value-of select="chronology:getEarliestTime(heml:Chronology)"/>
+				</xsl:attribute>
+			</eventStartTime>
+			<eventEndTime>
+				<xsl:attribute name="timing">
+					<xsl:value-of select="chronology:getLatestTime(heml:Chronology)"/>
+				</xsl:attribute>
+			</eventEndTime>
+			<set attributeName="visibility" to="visible"  begin="indefinite" dur="2000ms">
+				<xsl:attribute name="id"><xsl:value-of select="concat('set_visibility_', @id)"/></xsl:attribute>
+			</set>
+			<set attributeName="fill" to="crimson" begin="indefinite" dur="indefinite">
+				<xsl:attribute name="id"><xsl:value-of select="concat('set_fill_', @id)"/></xsl:attribute>
+			</set>
+			<xsl:copy-of select="xalan:nodeset($svgEventLabels)//*[@id = current()/@id]"/>
+		</g>
+		</a>
+	</xsl:if>
 </xsl:template>

-<xsl:template name="toY">
-  <xsl:param name="latitude"/>
-  <xsl:param name="offset"/>
-  <xsl:value-of select="$y_bottom_left -
-        (($latitude - $lat_bottom_left)
-        div ($lat_top_right - $lat_bottom_left)
-        * ($y_bottom_left - $y_top_right))"/>
-
-</xsl:template>
-
 </xsl:stylesheet>