<?xml version="1.0"?>
<!-- 
COPYRIGHT AND LICENSE
If you find this code useful, consider placing a link to http://code.mincus.com on your site.

Copyright 2006, Allen Holman.  All rights reserved.

    This program is free software; you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation; either version 2 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program; if not, write to the Free Software
    Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307  USA
-->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
         "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     onload="init();">

<script type="text/javascript"><![CDATA[
    var SVG_NS ="http://www.w3.org/2000/svg";

    function make_rect( args ) {
        var rect = document.createElementNS( SVG_NS, "polygon" );
        rect.setAttribute( "points", args.tl.x + ',' + args.tl.y + ' ' + args.tr.x + ',' + args.tr.y + ' ' +
                                     args.br.x + ',' + args.br.y + ' ' + args.bl.x + ',' + args.bl.y );
        return( rect );
    }

    function make_cube( args ) {
        args.x_start += args.z_start;
        args.y_start -= ( args.z_start / 2.4 );

        var points = new Object();
        points.tfl = new Object();
        points.tfl.x = args.x_start;                         points.tfl.y = args.y_start + ( args.width / 2.0 );
        points.tfr = new Object();
        points.tfr.x = args.x_start + args.width;            points.tfr.y = args.y_start + ( args.width / 2.0 );
        points.bfl = new Object();
        points.bfl.x = args.x_start;                         points.bfl.y = args.y_start + args.height + ( args.width / 2.0 );
        points.bfr = new Object();
        points.bfr.x = args.x_start + args.width,            points.bfr.y = args.y_start + args.height + ( args.width / 2.0 );
        points.tbl = new Object();
        points.tbl.x = args.x_start + ( args.width * 1.25 ); points.tbl.y = args.y_start;
        points.tbr = new Object();
        points.tbr.x = args.x_start + ( args.width * 2.25 ); points.tbr.y = args.y_start;
        points.bbl = new Object();
        points.bbl.x = args.x_start + ( args.width * 1.25 ); points.bbl.y = args.y_start + args.height;
        points.bbr = new Object();
        points.bbr.x = args.x_start + ( args.width * 2.25 ); points.bbr.y = args.y_start + args.height;

        var squares = [
            [ 'tbl', 'tbr', 'bbl', 'bbr' ], //back
            [ 'bbl', 'bbr', 'bfl', 'bfr' ], //bottom
            [ 'tbl', 'tbr', 'tfl', 'tfr' ], //top
            [ 'tfl', 'tbl', 'bfl', 'bbl' ], //left
            [ 'tfl', 'tfr', 'bfl', 'bfr' ], //front
            [ 'tfr', 'tbr', 'bfr', 'bbr' ]  //right
        ];

        var wrapper = document.createElementNS( SVG_NS, "g" );
        wrapper.setAttribute( "fill", "red" );
        wrapper.setAttribute( "fill-opacity", ".5" );
        wrapper.setAttribute( "stroke", "black" );
        wrapper.setAttribute( "stroke-width", "1" );
        wrapper.setAttribute( "onmouseover", 'set_color(this);' );
        wrapper.setAttribute( "onmouseout", 'unset_color(this);' );

        for ( var i = 0; i < squares.length; ++i ) {
            var rect = make_rect( { tl: points[squares[i][0]], tr: points[squares[i][1]], bl: points[squares[i][2]], br: points[squares[i][3]] } );
            wrapper.appendChild( rect );
        }

        return( wrapper );
    }

    function init() {
        var height = 30;
        var width = 24;
        var x_seperation = width * 1.5;
        var y_seperation = width * 1.5;
        var z_seperation = ( x_seperation + x_seperation ) / 1.75;
        var z = z_seperation * 7;

        while ( z > 0 ) {
            var x = 0;
            while ( x <= ( x_seperation * 7 ) ) {
                var y = 0;
                while ( y < y_seperation ) {
                    if ( height != 0 ) {
                        var wrapper = make_cube( { x_start: x, y_start: y, z_start: z, height: height, width: width } );
                        document.getElementById( "top_level" ).appendChild( wrapper );
                    }
                    y += y_seperation;
                }
                x += x_seperation;
            }
            z -= z_seperation;
        }
    }

    function set_color( event ) {
        event.setAttribute( 'fill', 'blue' );
    }

    function unset_color( event ) {
        event.setAttribute( 'fill', 'red' );
    }
]]></script>

<g id="top_level" transform="translate(20, 140)" />
</svg>