<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="544" height="400" viewBox="0 0 544 400" onload="init()"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
<script type="text/ecmascript"><![CDATA[
if (typeof getURL == 'undefined') {
  getURL = function(url, fn) { 
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.open("GET", url, true);
    xmlhttp.onreadystatechange = function() {
      if (xmlhttp.readyState == 4) {
        fn({status:xmlhttp.status, statusText:xmlhttp.statusText,
          content:xmlhttp.responseText,
          contentType:xmlhttp.getResponseHeader("Content-Type")})
      }
    }
    xmlhttp.send(null);
  }
}

var svgWidth = 544;
var svgHeight = 400;
var label1Element = null;
var label2Element = null;
var label3Element = null;
var targetWidth = 0;
var targetHeight = 0;

function init() {
    label1Element = document.getElementById("label1").childNodes.item(0);
    label2Element = document.getElementById("label2").childNodes.item(0);
    label3Element = document.getElementById("label3").childNodes.item(0);
    var image = document.getElementById("image");
    targetWidth = image.getAttribute("width");
    targetHeight = image.getAttribute("height");
    flip();
}

function parseXML(s) {
    return (new DOMParser()).parseFromString(s, "text/xml");
}

function flipCallback(status) {
    if (status.status == 200) {
        var frag = parseXML(status.content, null);
        var buildup = frag.getElementsByTagName("buildup").item(0);
        var buildupUid = buildup.getAttribute("buildupUid");
        var imageURI = buildup.getAttribute("imageURI");
        var imageWidth = buildup.getAttribute("imageWidth");
        var imageHeight = buildup.getAttribute("imageHeight");
        var image = document.getElementById("image");
        image.setAttributeNS("http://www.w3.org/1999/xlink", "href", imageURI);
        var scale = Math.min(
            targetWidth / imageWidth, targetHeight / imageHeight
        );
        image.setAttribute("width", imageWidth * scale);
        image.setAttribute("height", imageHeight * scale);
        image.setAttribute("x", (svgWidth - imageWidth * scale) / 2);
        var kitName = buildup.getAttribute("kitName");
        var producerName = buildup.getAttribute("producerName");
        label1Element.data = kitName;
        var painterName = buildup.getAttribute("painterName");
        if (painterName != undefined) {
            label2Element.data = "painted by";
            label3Element.data = painterName;
        } else
        if (producerName != undefined) {
            label2Element.data = "produced by";
            label3Element.data = producerName;
        } else {
            label2Element.data = "";
            label3Element.data = "";
        }
        var link = document.getElementById("link");
if (link != undefined) {
        link.setAttributeNS(
            "http://www.w3.org/1999/xlink", "href",
            "/garage/galleryView.jsp?buildupUid=" + buildupUid
        );
}
    }
    setTimeout("flip()", 5000);
}

function flip() {
    getURL("kitInfo.jsp", flipCallback);
}
]]></script>
<a id="link">
<text id="label1" x="277" y="15" text-anchor="middle" font-size="15"> </text>
<text id="label2" x="277" y="25" text-anchor="middle" font-size="9" font-style="italic" fill="#c0c0c0"> </text>
<text id="label3" x="277" y="37" text-anchor="middle" font-size="12"> </text>
<image id="image" x="0" y="50" width="544" height="350" preserveAspectRatio="xMidYMin"/>
</a>
</svg>
