#!/usr/bin/perl -w
#
# Example 7-4. Twirling squares.

use strict;
use XML::Writer;    # Used to write the SVG output
use IO::Scalar;

my ($width, $height) = (200,200);
my $sprite = new IO::Scalar;
my $writer = XML::Writer->new(OUTPUT => $sprite);
$writer->setDataMode(1);
$writer->setDataIndent(2);

$writer->startTag('svg',
                  id => 'sprite',
                  height => $height,
                  width  => $width,
                  onload => "StartAnimation(evt)", 
                  'xmlns:xlink' => 'http://www.w3.org/1999/Xlink');

$writer->startTag('script',
                  type => "text/ecmascript");
print $sprite <<ENDSCRIPT;
<![CDATA[
    var delay = 1;
    var angle=0;
    var cx = 100;
    var cy = 100;
    var frames = 30;
    var direction = -1;
    var count = 0;
    var element = new Array();
    var xIncrement = new Array();
    var yIncrement = new Array();
    var parent;
    var i,x,y;
    

function StartAnimation(evt) {
      parent =evt.target.ownerDocument;
      for (i=0; i<25; i++) {
          element[i] = parent.getElementById("box"+i);
          x = element[i].getAttribute("x");
          y = element[i].getAttribute("y");
          xIncrement[i] = (cx-element[i].getAttribute("x"))/frames;
          yIncrement[i] = (cy-element[i].getAttribute("y"))/frames;
      }
      MoveElements();
    }

    function MoveElements() {
        angle = angle+360/frames; 
        count = count+1;
        if (count==frames) {
          direction=direction*-1;
          count =0;
        }
        for (i=0; i<25; i++) {
            x = element[i].getAttribute("x");
            y = element[i].getAttribute("y");
            element[i].setAttribute("transform",  
                "rotate("+angle+","+x+","+y+")");
            element[i].setAttribute("x", 
                x - direction * xIncrement[i]);
            element[i].setAttribute("y", 
                y - direction * yIncrement[i]);
	   
        }
        setTimeout("MoveElements()", delay)
    }

    function ChangeColor(evt) {
        evt.target.setAttribute("fill", "#FF0000");
    }

    function ChangeColorBack(evt) {
        evt.target.setAttribute("fill", "none");
    }
]]>
ENDSCRIPT
$writer->endTag('script');

foreach my $row (1..5) {
    foreach my $col (1..5) {
        $writer->emptyTag('rect',
                  id => "box".(($row-1)*5+$col-1),
                  onmouseover => "ChangeColor(evt)",
                  onmouseout => "ChangeColorBack(evt)",
                  width => 20, height => 20,
                  'stroke-width' => 1,
                  stroke => '#000000',
                  fill  => 'none',
                  x => 30*$col, y => 30*$row);
    }
}
$writer->endTag('svg');

my $toplevel = new IO::Scalar;
$writer = XML::Writer->new(OUTPUT => $toplevel);
$writer->setDataMode(1);
$writer->setDataIndent(2);
$writer->startTag('svg',
                  height => $height,
                  width  => $width,
                  'xmlns:xlink' => 'http://www.w3.org/1999/Xlink');
$writer->startTag('script',
                  type => "text/ecmascript");

print $toplevel <<ENDSCRIPT;
<![CDATA[
    function MoveCenter(evt) {
      var sprite = evt.target.ownerDocument.getElementById("sprite");
      sprite.setAttribute("x", evt.clientX-$width/2);
      sprite.setAttribute("y", evt.clientY-$height/2);
    }
]]>
ENDSCRIPT
$writer->endTag('script');

$writer->emptyTag('rect',
                  id => "background",
                  onmousedown => "MoveCenter(evt)",
                  width => 400, height => 400,
                  fill  => 'pink');
	
print $toplevel $sprite;
$writer->endTag('svg');

print $toplevel;