#!/bin/sh
#Create a flipbook animation of several svg files.
#Example:  animsvgwww `ls frame*.svg | numericsort 2` > myanim.html
#
#Animates a sequence of svg files using Javascript and HTML.

echo "<html>"
echo "<head>"
echo "	<title>SVG+JavaScript Slideshow</title>"	
echo ""
echo "</head>"
echo "<body>"
echo ""
echo "<center><img src=\"$1\" alt=\"rotating image\" width=\"400\" height=\"300\" id=\"flipbookimage\">"
echo "<br>"
echo "<button id=\"slowerButton\">Slower</button>"
echo "<button id=\"stopButton\">Stop</button>"
echo "<button id=\"fasterButton\">Faster</button>"
echo "<button id=\"forwardOneButton\">Fwd</button>"
echo "<button id=\"backwardOneButton\">Bwd</button>"
echo "</center>"
echo ""
echo "<script type=\"text/javascript\">"
echo "(function() {"
echo "   var rotator = document.getElementById('flipbookimage');" 
echo "   var imageDir = './';"  			
echo "   var delayInSeconds = 0.1;"			      
echo "   var num = 0;"    
echo ""
echo "   var images = ["
     
for fn in $*; do
	if [ "$fn" != "$1" ];then
		echo "                '$fn',"	
	fi
done

echo "                '$1'];"	
echo ""



echo "   var incrementImage = function() {"
echo "           var len = images.length;"
echo "	   num++;"
echo "	   if (num == len) {"
echo "               num = 0;"
echo "           }"
echo "           rotator.src = imageDir + images[num];"
echo ""          
echo "      };"
echo ""       
echo "  var decrementImage = function() {"
echo "           var len = images.length;"
echo "	   num--;" 
echo "	   if (num == -1) {" 
echo "               num = len-1;" 
echo "           }" 
echo "           rotator.src = imageDir + images[num];" 
echo ""            
echo "       };" 
 echo " " 
echo "  var stopImage = setInterval(incrementImage, delayInSeconds * 1000);" 
echo ""        
echo "  slowerButton.onclick = function()"  
echo "  {" 
echo "  	clearInterval(stopImage);" 
echo "	delayInSeconds*=2.0;" 
echo "	stopImage = setInterval(incrementImage, delayInSeconds  * 1000);" 
echo "  };" 
echo ""   
echo "  stopButton.onclick = function()"  
echo "  {" 
echo "  	clearInterval(stopImage);" 
echo "  };" 
echo ""  
echo "  fasterButton.onclick = function()" 
echo "  {"
echo " 	clearInterval(stopImage);"
echo "	delayInSeconds*=0.5;"
echo "	stopImage = setInterval(incrementImage, delayInSeconds * 1000);"
echo "  };"
echo "" 
echo " forwardOneButton.onclick = function()" 
echo "  {"
echo "  	clearInterval(stopImage);"
echo "	incrementImage();"
echo "  };"
echo "" 
echo "  backwardOneButton.onclick = function()" 
echo "  {"
echo "  	clearInterval(stopImage);"
echo "	decrementImage();"
echo "  };"
echo "" 
echo ""
echo "   })();"
echo "" 




echo "</script>"
echo ""   
echo "</body>"
echo "</html>"
echo ""   
