<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:gmd="http://www.isotc211.org/2005/gmd" xmlns:gco="http://www.isotc211.org/2005/gco" xmlns:gml="http://www.opengis.net/gml" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:tsxx="http://www.terrasar.com/tsxx/" exclude-result-prefixes="gmd gco">
<!-- © Airbus DS Geo GmbH -->
  <xsl:output method="html"/>
  <xsl:template match="/">
    <xsl:variable name="lat_min" select="//gmd:MD_Metadata/gmd:identificationInfo/gmd:MD_DataIdentification/gmd:extent/gmd:EX_Extent/gmd:geographicElement/gmd:EX_GeographicBoundingBox/gmd:southBoundLatitude/gco:Decimal"/>
    <xsl:variable name="lat_max" select="//gmd:MD_Metadata/gmd:identificationInfo/gmd:MD_DataIdentification/gmd:extent/gmd:EX_Extent/gmd:geographicElement/gmd:EX_GeographicBoundingBox/gmd:northBoundLatitude/gco:Decimal"/>
    <xsl:variable name="lon_min" select="//gmd:MD_Metadata/gmd:identificationInfo/gmd:MD_DataIdentification/gmd:extent/gmd:EX_Extent/gmd:geographicElement/gmd:EX_GeographicBoundingBox/gmd:westBoundLongitude/gco:Decimal"/>
    <xsl:variable name="lon_max" select="//gmd:MD_Metadata/gmd:identificationInfo/gmd:MD_DataIdentification/gmd:extent/gmd:EX_Extent/gmd:geographicElement/gmd:EX_GeographicBoundingBox/gmd:eastBoundLongitude/gco:Decimal"/>
    <xsl:variable name="height_mean" select="//gmd:MD_Metadata/gmd:contentInfo/tsxx:TSXX_addMD/tsxx:DEMInfo/tsxx:productStatistics/tsxx:meanValue"/>
    <xsl:variable name="height_min" select="//gmd:MD_Metadata/gmd:contentInfo/tsxx:TSXX_addMD/tsxx:DEMInfo/tsxx:productStatistics/tsxx:minValue"/>
    <xsl:variable name="height_max" select="//gmd:MD_Metadata/gmd:contentInfo/tsxx:TSXX_addMD/tsxx:DEMInfo/tsxx:productStatistics/tsxx:maxValue"/>
    <xsl:variable name="height_stddev" select="//gmd:MD_Metadata/gmd:contentInfo/tsxx:TSXX_addMD/tsxx:DEMInfo/tsxx:productStatistics/tsxx:stdDev"/>
    <xsl:variable name="height_nrInvalid" select="//gmd:MD_Metadata/gmd:contentInfo/tsxx:TSXX_addMD/tsxx:DEMInfo/tsxx:productStatistics/tsxx:nrInvalidPixels"/>
    <xsl:variable name="dem_width" select="//gmd:MD_Metadata/gmd:contentInfo/tsxx:TSXX_addMD/tsxx:DEMInfo/tsxx:productDetails/tsxx:imageDetails/tsxx:imageRaster/tsxx:numberOfColumns"/>
    <xsl:variable name="dem_height" select="//gmd:MD_Metadata/gmd:contentInfo/tsxx:TSXX_addMD/tsxx:DEMInfo/tsxx:productDetails/tsxx:imageDetails/tsxx:imageRaster/tsxx:numberOfRows"/>
    <xsl:variable name="product_name" select="//gmd:MD_Metadata/gmd:dataSetURI/gco:CharacterString"/>
    <xsl:variable name="product_variant" select="//gmd:MD_Metadata/gmd:contentInfo/tsxx:TSXX_addMD/tsxx:DEMInfo/tsxx:productVariantInfo/tsxx:productVariant"/>
    <xsl:variable name="product_variant_description" select="//gmd:MD_Metadata/gmd:contentInfo/tsxx:TSXX_addMD/tsxx:DEMInfo/tsxx:productVariantInfo/tsxx:productVariantDescription"/>
    <xsl:variable name="pixel_spacing_lat" select="//gmd:MD_Metadata/gmd:contentInfo/tsxx:TSXX_addMD/tsxx:DEMInfo/tsxx:productDetails/tsxx:imageDetails/tsxx:imageRaster/tsxx:columnSpacing"/>
    <xsl:variable name="pixel_spacing_lon" select="//gmd:MD_Metadata/gmd:contentInfo/tsxx:TSXX_addMD/tsxx:DEMInfo/tsxx:productDetails/tsxx:imageDetails/tsxx:imageRaster/tsxx:rowSpacing"/>
    <xsl:variable name="bit_depth" select="//gmd:MD_Metadata/gmd:contentInfo/tsxx:TSXX_addMD/tsxx:DEMInfo/tsxx:productDetails/tsxx:imageDetails/tsxx:imageDataDepth"/>
    <xsl:variable name="aoi_size" select="//gmd:MD_Metadata/gmd:contentInfo/tsxx:TSXX_addMD/tsxx:DEMInfo/tsxx:productDetails/tsxx:productExtent/tsxx:sizeOfAOI"/>
    <xsl:variable name="production_date" select="//gmd:MD_Metadata/gmd:contentInfo/tsxx:TSXX_addMD/tsxx:DEMInfo/tsxx:processingDetails/tsxx:postProcessing/tsxx:citation/gmd:CI_Citation/gmd:date/gmd:CI_Date/gmd:date/gco:Date"/>
    <xsl:variable name="web_address" select="//gmd:MD_Metadata/gmd:contact/gmd:CI_ResponsibleParty/gmd:contactInfo/gmd:CI_Contact/gmd:onlineResource/gmd:CI_OnlineResource/gmd:linkage/gmd:URL"/>
    <xsl:variable name="email_address" select="//gmd:MD_Metadata/gmd:contact/gmd:CI_ResponsibleParty/gmd:contactInfo/gmd:CI_Contact/gmd:address/gmd:CI_Address/gmd:electronicMailAddress/gco:CharacterString"/>
    <xsl:variable name="company_name" select="//gmd:MD_Metadata/gmd:contact/gmd:CI_ResponsibleParty/gmd:organisationName/gco:CharacterString"/>
    <xsl:variable name="datestamp" select="//gmd:MD_Metadata/gmd:dateStamp/gco:Date"/>
    <html>
      <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <link rel="stylesheet" href="INFO/WorldDEM.css" type="text/css" />
      </head>
      <body onload="init()">
        <script>
          dem_height = <xsl:value-of select="$dem_height"/>;
          dem_width = <xsl:value-of select="$dem_width"/>;
          ql_width = Math.min(dem_width/10, 900);
          ql_height = Math.min(dem_height/10, dem_height*900/ql_width);
          if (ql_width &lt; 400 &amp;&amp; ql_height &lt; 400)
          {
            ql_width *= 2;
            ql_height *= 2;
          }
          max_lat = <xsl:value-of select="$lat_max"/>;
          min_lat = <xsl:value-of select="$lat_min"/>;
          max_lon = <xsl:value-of select="$lon_max"/>;
          min_lon = <xsl:value-of select="$lon_min"/>;
          height_min = <xsl:value-of select="$height_min"/>;
          height_max = <xsl:value-of select="$height_max"/>;
          files = {
          <xsl:for-each select="//gmd:MD_Metadata/gmd:contentInfo/tsxx:TSXX_addMD/tsxx:DEMInfo/tsxx:productAddContent/tsxx:productLayer">
            '<xsl:value-of select="tsxx:contentDetail"/>': ['<xsl:value-of select="tsxx:contentLocation/tsxx:file"/>', <xsl:value-of select="tsxx:imageRaster/tsxx:numberOfRows"/>, <xsl:value-of select="tsxx:imageRaster/tsxx:numberOfColumns"/>],
          </xsl:for-each>
            '': ''
          };

            <![CDATA[
          function doClick(id)
          {
            var id_list = ['general', 'location', 'quicklook', 'auxfiles'];
            for (var i = 0; i < 4; i++)
            {
              tab = document.getElementById(id_list[i] + "_tab")
              content = document.getElementById(id_list[i])
              if (id_list[i] == id)
              {
                tab.className="selected";
                content.className="tabContent";
              }
              else
              {
                tab.className="";
                content.className="tabContent hide";
              }
            }
          }
          function addDiscreteLegend(container, items)
          {
            var table = document.createElement("table");
            for (var i = 0; i < items.length; i++)
            {
              var tr = table.insertRow()
              tr.setAttribute('height', '40px');
              var td = tr.insertCell();
              td.innerHTML = "&nbsp;";
              td.setAttribute('width', '20px');
              td.style.background = items[i][0];
              td.style.fontSize="10pt";
              td.className = "legend_cell";
              td = tr.insertCell();
              td.setAttribute('text-size', '8pt');
              td.innerHTML=items[i][1];
//              td.appendChild(document.createTextNode(items[i][1]));
              td.className = "legend_cell";
              td.style.padding = "2px";
            }
            container.appendChild(table);
          }
          function addGradientLegend(container, style_name, items)
          {
            var gradient_div = document.createElement("div");
            gradient_div.className = style_name + "_img";
            container.appendChild(gradient_div);
            var labels_div = document.createElement("div");
            labels_div.className = style_name + "_labels";
            var top_label = document.createElement("p");
            top_label.className = "gradient_top_label";
            top_label.innerHTML = items[0]
            labels_div.appendChild(top_label);
            var bottom_label = document.createElement("p");
            bottom_label.className = "gradient_bottom_label";
            bottom_label.innerHTML = items[1]
            labels_div.appendChild(bottom_label);
            container.appendChild(labels_div);
          }
          function optSpacing(v1, v2, n, min_spacing)
          {
            var d = (v2 - v1) / min_spacing;
            var scale = min_spacing * 100;
            if (d < 3) scale = min_spacing / 10;
            else if (d < 30) scale = min_spacing;
            else if (d < 300) scale = min_spacing * 10;
            var out;
            out = [Math.ceil(v1/scale)*scale, Math.floor(v2/scale)*scale, 500, n];
            d = (out[1] - out[0]);
            var factors = [1, 1, 2, 3, 5, 10, 20, 30, 50, 100, 200, 300, 500];
            for (var i = 1; i < factors.length; i++)
            {
              if (d < min_spacing * factors[i] * n - 0.01)
              {
                var spacing = min_spacing * factors[i];
                n = Math.floor(d / spacing);
                var dd = Math.floor(((d - spacing*n) / min_spacing) / 2) * min_spacing;
                var v1b = Math.ceil((v1 + dd) / (scale*spacing) - 0.05) * scale*spacing;
                out = [v1b, v1b + spacing * n,  spacing, n + 1];
                return out;
              }
            }
            return out;
          }
          function getSpacing(n_entries, entry_size, p1, gap, max_size, absolute)
          {
            var results = [];
            var p = 0;
            var next_p = p1;
            align = 0;
            for (var i = 0; i < n_entries; i++)
            {
              var g = Math.floor(next_p - p - entry_size/2);
              if (g < entry_size/2+0) g = 0;
              if (absolute) results[i] = [p + g, align];
              else results[i] = [g, align];
              next_p += gap;
              if (next_p + entry_size > max_size)
              {
                next_p = max_size - entry_size/2;
                align = 2;
              }
              else align = 1;
              p += g + entry_size;
            }
            return results;
          }
          function setYAxis(lines_div, labels_div, height, n)
          {
            lines_div.style.height = height + 'px';
            labels_div.style.height = height + 'px';
            var lat_grid = optSpacing(min_lat, max_lat, n, 0.1);
            n = lat_grid[3];
            var scale_height = (lat_grid[1] - lat_grid[0]) / (max_lat - min_lat) * height / (n-1);
            var h = getSpacing(n, 1, scale_height*(max_lat - lat_grid[1])/lat_grid[2], scale_height, height, false); 
            for (var i = 0;i < n; i++)
            {
              var line = document.createElement('div')
              line.style.marginTop = h[i][0]+'px';
              line.className = "y_axis_line";
              lines_div.appendChild(line);
            }
            h = getSpacing(n, 30, scale_height*(max_lat - lat_grid[1])/lat_grid[2], scale_height, height, false); 
            for (var i = 0; i < n; i++)
            {
              var label = document.createElement('div');
              label.style.marginTop = h[i][0] + "px";
              label.style.height = "30px";
              var span = document.createElement('span');
              span.style.verticalAlign = ['text-top', 'middle', 'bottom'][h[i][1]];
              span.style.height = "30px";
              span.style.display = "table-cell";
              span.innerHTML = (lat_grid[1] - lat_grid[2] * i).toFixed(1) + "&deg;";
              label.appendChild(span);
              label.className = "y_axis_label";
              labels_div.appendChild(label);
            }
          }
          function setXAxis(lines_div, labels_div, width, n)
          {
            lines_div.style.width = width + 'px';
            labels_div.style.width = width + 'px';
            var lon_grid = optSpacing(min_lon, max_lon, n, 0.1, true);
            n = lon_grid[3];
            var scale_width = (lon_grid[1] - lon_grid[0]) / (max_lon - min_lon) * width / (n-1);
            var w = getSpacing(n, 0, scale_width*(lon_grid[0] - min_lon)/lon_grid[2], scale_width, width, true); 
            for (var i = 0;i < n; i++)
            {
              var line = document.createElement('div')
              line.style.left = w[i][0]+'px';
              line.className = "x_axis_line";
              lines_div.appendChild(line);
            }
            w = getSpacing(n, 50, scale_width*(lon_grid[0] - min_lon)/lon_grid[2], scale_width, width, true); 
            for (var i = 0; i < n; i++)
            {
              var label = document.createElement('div');
              label.innerHTML = (lon_grid[0] + lon_grid[2] * i).toFixed(1) + "&deg;";
              label.style.left = w[i][0]+'px';
              label.style.textAlign = ['left', 'center', 'right'][w[i][1]];
              label.style.width = "50px";
              label.className = "x_axis_label";
              labels_div.appendChild(label);
            }
          }
          function setQuicklook()
          {
            document.getElementById("dem_image").src = 'INFO/' + files['QL_DEM'][0].replace(".tif", ".jpg");
            setYAxis(document.getElementById("dem_y_axis_lines"), document.getElementById("dem_y_axis_labels"), files['QL_DEM'][1] * ql_width / files['QL_DEM'][2], 5);
            setXAxis(document.getElementById("dem_x_axis_lines"), document.getElementById("dem_x_axis_labels"), ql_width, 5);
            addGradientLegend(document.getElementById("dem_legend"), "dem_ql_legend", [Math.round(height_max)+'m', Math.round(height_min)+'m']);
          }
          com_legend_table = [
            ["rgb(255, 255, 255)", "No Data"],
            ["rgb(170, 0, 0)", "Large Inconsistencies"],
            ["rgb(255, 0, 0)", "Small Inconsistencies"],
            ["rgb(230, 230, 230)", "Only One Coverage"],
            ["rgb(150, 230, 0)", "No Inconsistencies"],
            ["rgb(255, 170, 0)", "Partially Consistent /<br/>Large Deviations"],
            ["rgb(255, 255, 0)", "Partially Consistent /<br/>Small Deviations"]];
          cov_legend_table = [
            ["rgb(255, 255, 255)", "No Data"],
            ["rgb(255, 235, 205)", "1 Coverage"],
            ["rgb(254, 224, 185)", "2 Coverages"],
            ["rgb(252, 212, 165)", "3 Coverages"],
            ["rgb(250, 200, 145)", "4 Coverages"],
            ["rgb(249, 189, 125)", "5 Coverages"],
            ["rgb(248, 178, 105)", "6 Coverages"],
            ["rgb(246, 166, 85)", "7 Coverages"],
            ["rgb(244, 154, 65)", "8 Coverages"],
            ["rgb(243, 143, 45)", "9 Coverages"],
            ["rgb(242, 132, 25)", "10 Coverages"],
            ["rgb(240, 120, 5)", "11+ Coverages"]];
          lsm_legend_table = [
            ["rgb(255, 255, 255)", "No Data"],
            ["rgb(230, 230, 230)", "Valid Data"],
            ["rgb(130, 0, 200)", "Shadow"],
            ["rgb(230, 0, 170)", "Layover"]];
          wam_legend_table = [
            ["rgb(255, 255, 255)", "No Data"],
            ["rgb(230, 230, 230)", "Valid Data"],
            ["rgb(190, 240, 240)", "1 x Coherence"],
            ["rgb(110, 220, 235)", "2 x Coherence"],
            ["rgb(30, 200, 230)", "3 x Coherence"],
            ["rgb(30, 170, 230)", "1 x Strict Amp."],
            ["rgb(20, 142, 210)", "2 x Strict Amp."],
            ["rgb(10, 115, 190)", "3 x Strict Amp."],
            ["rgb(0, 80, 135)", "1 x Related Amp."],
            ["rgb(0, 52, 97)", "2 x Related Amp."],
            ["rgb(0, 25, 60)", "3 x Related Amp."],
            ["rgb(255, 255, 0)", "No Detection"]];
          edm_legend_table = [
            ["rgb(255, 255, 255)", "No Data"],
            ["rgb(200, 200, 200)", "No Editing"],
            ["rgb(100, 100, 100)", "Infill"],
            ["rgb(0, 255, 0)", "Void Fill"],
            ["rgb(255, 215, 0)", "Blur"],
            ["rgb(255, 120, 0)", "Airport Editing"],
            ["rgb(140, 70, 20)", "Depression"],
            ["rgb(255, 100, 180)", "Flattened"],
            ["rgb(0, 0, 210)", "Ocean Editing"],
            ["rgb(30, 150, 255)", "Lake Editing"],
            ["rgb(0, 255, 255)", "River Editing"],
            ["rgb(255, 0, 0)", "Shoreline"],
            ["rgb(150, 0, 210)", "Morph Tool"]]
          flm_legend_table = [
            ["rgb(255, 255, 255)", "Void (no data)"],
            ["rgb(0, 255, 0)", "Edited"],
            ["rgb(0, 100, 0)", "Not edited"],
            ["rgb(255, 215, 0)", "ASTER"],
            ["rgb(255, 0, 0)", "SRTM90"],
            ["rgb(255, 120, 0)", "SRTM30"],
            ["rgb(140, 70, 20)", "Globe"]]
          wbm_legend_table = [
            ["rgb(255, 255, 255)", "No Data"],
            ["rgb(0, 0, 210)", "Ocean"],
            ["rgb(30, 150, 255)", "Lake"],
            ["rgb(0, 255, 255)", "River"]]
          function setAux(aux_type)
          {
            file = files['QL_'+aux_type]
            document.getElementById("aux_image").src = 'INFO/' + file[0].replace(".tif", ".jpg");
            document.getElementById("aux_y_axis_lines").innerHTML = "";
            document.getElementById("aux_y_axis_labels").innerHTML = "";
            setYAxis(document.getElementById("aux_y_axis_lines"), document.getElementById("aux_y_axis_labels"), file[1] * ql_width / file[2], 5);
            document.getElementById("aux_x_axis_lines").innerHTML = "";
            document.getElementById("aux_x_axis_labels").innerHTML = "";
            setXAxis(document.getElementById("aux_x_axis_lines"), document.getElementById("aux_x_axis_labels"), ql_width, 5);
            legend_div = document.getElementById("aux_legend");
            legend_div.innerHTML = "";
            switch(aux_type)
            {
            case "AMP":
              break;
            case "COM":
              addDiscreteLegend(legend_div, com_legend_table);
              break;
            case "COV":
              addDiscreteLegend(legend_div, cov_legend_table);
              break;
            case "EDM":
              addDiscreteLegend(legend_div, edm_legend_table);
              break;
            case "FLM":
              addDiscreteLegend(legend_div, flm_legend_table);
              break;
            case "HEM":
              addGradientLegend(legend_div, "hem_ql_legend", ["0m", "5m+"]);
              break;
            case "LSM":
              addDiscreteLegend(legend_div, lsm_legend_table);
              break;
            case "WAM":
              addDiscreteLegend(legend_div, wam_legend_table);
              break;
            case "WBM":
              addDiscreteLegend(legend_div, wbm_legend_table);
              break;
            }
            var chooser = document.getElementById("chooser");
            var link_list = chooser.getElementsByTagName("a")
            for (var i = 0; i < link_list.length; i++)
            {
              var link = link_list[i];
              var id = link.innerHTML;
              if (aux_type == id) link.className="selected";
              else link.className="";
            }
          }
          function init()
          {
            document.getElementById("dem_map").style.height=Math.max(ql_height, 900) + "px";
            document.getElementById("dem_map").style.width=ql_width + "px";
            document.getElementById("dem_image").style.width=ql_width + "px";
            document.getElementById("aux_map").style.height=Math.max(ql_height, 900) + "px";
            document.getElementById("aux_map").style.width=ql_width + "px";
            document.getElementById("aux_image").style.width=ql_width + "px";
            setQuicklook();
            var chooser_list = document.getElementById("chooser");
            var chosen = false;
            for (file in files)
            {
              if (file.substr(0,3) == 'QL_' && file.substr(3,3) != 'DEM' && file.substr(3,3) != 'RLM')
              {
                var id = file.substr(3,3);
                var li = document.createElement("li");
                var a = document.createElement("a");
                a.innerHTML = id;
                a.onclick = function() {setAux(this.innerHTML);}
                if (!chosen)
                {
                  setAux(id);
                  a.className = "selected";
                  chosen = true;
                }
                li.appendChild(a);
                chooser_list.appendChild(li);
                chooser_list.appendChild(document.createTextNode(" "));
              }
            }
          }
        ]]>
        </script>


    <br/>
    <div style="float: right; padding: 0.5em;"><p style="text-align: right"><b>Product: <xsl:value-of select="$product_name"/></b></p></div>
    <table>
      <tr>
        <td><img src="INFO/logo.png"/></td>
        <td style="padding-left: 2em;"><span style="font-size: 24px;"><b>WorldDEM<sup>TM</sup></b></span></td>
      </tr>
    </table>
    <br/>
    <div style="clear: right;" />
    <ul id="tabs">
      <li><a id="general_tab" class="selected" onclick='doClick("general")'>General</a></li>
      <li><a id="location_tab" onclick='doClick("location")'>Location</a></li>
      <li><a id="quicklook_tab" onclick='doClick("quicklook")'>DEM Quicklook</a></li>
      <li><a id="auxfiles_tab" onclick='doClick("auxfiles")'>AUX Files</a></li>
    </ul>

    <div class="tabContent" id="general">
      <table class="metadata" width="100%">
        <tr><th colspan="2">Description</th></tr>
        <tr><td class="leftcol">Name</td><td><xsl:value-of select="$product_name"/></td></tr>
        <tr class="empty"/>
        <tr><th colspan="2">General Information</th></tr>
        <tr><td class="leftcol">Product Name</td><td><xsl:value-of select="$product_variant_description"/></td></tr>
        <tr><td class="leftcol">Product Type</td><td><xsl:value-of select="$product_variant"/></td></tr>
        <tr class="empty"/>
        <tr><th colspan="2">Image Dimensions</th></tr>
        <tr><td class="leftcol">Number of Columns</td><td><xsl:value-of select="$dem_width"/></td></tr>
        <tr><td class="leftcol">Number of Rows</td><td><xsl:value-of select="$dem_height"/></td></tr>
        <tr><td class="leftcol">Bit Depth</td><td><xsl:value-of select="$bit_depth"/></td></tr>
        <tr><td class="leftcol">Pixel Spacing (longitude)</td><td><xsl:value-of select="$pixel_spacing_lat"/> arcseconds</td></tr>
        <tr><td class="leftcol">Pixel Spacing (latitude)</td><td><xsl:value-of select="$pixel_spacing_lon"/> arcseconds</td></tr>
        <tr class="empty"/>
        <tr><th colspan="2">Production</th></tr>
        <tr><td class="leftcol">Production Date</td><td><xsl:value-of select="$production_date"/></td></tr>
        <tr><td class="leftcol">Dataset Producer Identification</td><td><xsl:value-of select='$company_name'/></td></tr>
        <tr class="empty"/>
        <tr><th colspan="2">Contact Information</th></tr>
        <tr><td class="leftcol">Company</td><td><xsl:value-of select='$company_name'/></td></tr>
        <tr><td class="leftcol">Web Link</td><td><a><xsl:attribute name="href"><xsl:value-of select="$web_address"/></xsl:attribute><xsl:value-of select="$web_address"/></a></td></tr>
        <tr><td class="leftcol">Email Address</td><td><a><xsl:attribute name="href">mailto:<xsl:value-of select="$email_address"/></xsl:attribute><xsl:value-of select='$email_address'/></a></td></tr>
        <tr class="empty"/>
      </table>
    </div>
    <div class="tabContent hide" id="location">
      <table class="metadata" width="100%">
        <tr><th colspan="2">Geo location</th></tr>
        <tr><td class="leftcol">Upper Latitude</td><td><xsl:value-of select="$lat_max"/></td></tr>
        <tr><td class="leftcol">Left Longitude</td><td><xsl:value-of select="$lon_min"/></td></tr>
        <tr><td class="leftcol">Right Longitude</td><td><xsl:value-of select="$lon_max"/></td></tr>
        <tr><td class="leftcol">Lower Latitude</td><td><xsl:value-of select="$lat_min"/></td></tr>
        <tr><td class="leftcol">Size of Product (km²)</td><td><xsl:value-of select="$aoi_size"/></td></tr>
        <tr class="empty"/>
        <tr><th colspan="2">Reference System</th></tr>
        <tr><td class="leftcol">Horizontal Reference System</td><td>WGS84-G1150</td></tr>
        <tr><td class="leftcol">Vertical Reference System</td><td>EGM2008</td></tr>
        <tr><td class="leftcol">Coordinate System</td><td>Geographic</td></tr>
        <tr class="empty"/>
      </table>
    </div>
    <div class="tabContent hide" id="quicklook">
      <div>
        <div class="ql_map" id="dem_map" style="width: 900px; height: 900px">
          <img id="dem_image" src="" style="display: block;"/>
        </div>
        <div class="y_axis_lines" id="dem_y_axis_lines" />
        <div class="y_axis_labels" id="dem_y_axis_labels" />
        <div class="sidepane">
          <table height="100%">
            <tr style="vertical-align: middle;"><td>
              <div id="dem_legend"/>
            </td></tr>
            <tr style="vertical-align: center;"><td>
              <div id="dem_stats" style="font-size: 10pt; vertical-align: bottom; display: table-cell;">
              Min Value: <xsl:value-of select="$height_min"/><br/>
              Max Value: <xsl:value-of select="$height_max"/><br/>
              Mean Value: <xsl:value-of select="$height_mean"/><br/>
              Std. Deviation: <xsl:value-of select="$height_stddev"/><br/>
              Invalid Pixels: <xsl:value-of select="$height_nrInvalid"/><br/>
              </div>
            </td></tr>
           </table>
        </div>
        <div class="x_axis_lines" id="dem_x_axis_lines" />
        <div class="x_axis_labels" id="dem_x_axis_labels" />
      </div>
    </div>
    <div class="tabContent hide" id="auxfiles">
      <ul id="chooser" />
      <div class="position:relative; display: table-row;">
        <div class="ql_map" id="aux_map" style="width: 900px; height: 900px">
          <img id="aux_image" src="" style="display: block;"/>
        </div>
        <div class="y_axis_lines" id="aux_y_axis_lines" />
        <div class="y_axis_labels" id="aux_y_axis_labels" />
        <div class="sidepane">
          <div style="height: 80px"/>
          <div class="container">
            <div class="aux_legend" id="aux_legend" />
          </div>
          <div id="aux_stats" />
        </div>
        <div class="x_axis_lines" id="aux_x_axis_lines" />
        <div class="x_axis_labels" id="aux_x_axis_labels" />
      </div>
    </div>
    <div class="copyright">
      <xsl:choose>
        <xsl:when test="$product_variant = 'COR'">
          © DLR e.V. <xsl:value-of select="substring($production_date, 1, 4)"/>, Distribution Airbus DS Geo GmbH
        </xsl:when>
        <xsl:otherwise>
          © DLR e.V. <xsl:value-of select="substring($production_date, 1, 4)"/>  and
          © Airbus DS Geo GmbH <xsl:value-of select="substring($datestamp, 1, 4)"/>
        </xsl:otherwise>
      </xsl:choose>
    </div>

      </body>
    </html>
  </xsl:template>
</xsl:stylesheet>
