<?xml version="1.0" encoding="utf-8" ?>
<xsl:stylesheet version="1.0"
                xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
                xmlns:msxsl="urn:schemas-microsoft-com:xslt"
                xmlns:qv="urn:QuickViewXmlUtil"
                xmlns:p="urn:PropertyXmlUtil">
   <xsl:template match="/">
      <xsl:text disable-output-escaping="yes">
      <![CDATA[<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">]]>
      </xsl:text>
      <html xmlns="http://www.w3.org/1999/xhtml">
         <head>
            <title>Configuration: Quick View</title>
            <style>
               html { overflow:auto; }
               body { margin:6px; font-family:Tahoma, Arial, sans-serif; font-size:11px; background-color:white; }
               div.outer { border:solid 1px #898C95 }
               .xCfg { font-size:.8em; margin:0 }
               div.infoBar { font-family:Segoe UI, Tahoma, Arial, sans-serif; padding:5px 10px; border-bottom:1px solid saddlebrown; background:cornsilk; color:SaddleBrown; font-size:15px; background-image:url(../../site/styles/Default/iconInformation.png); background-repeat:no-repeat; background-position:7px 7px; }
               div.infoBar span { margin-left:20px; display:block; }
               .modelHeader { padding:2px; font-weight:bold; font-size:14px; color:#ffffff; background-color:#666677 }
               .optionTable { width:100%; font-size:12px; border:1px solid #999999 }
               .optionHeader, .optionRow { background-color:#CCCCCC; filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#EFEFEF, endColorstr=#CFCFCF) }
               .optionHeader { font-weight:bold }
               .optionProperty { background-color:#EFEFEF; color:#003366 ;filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#EFEFEF, endColorstr=#F9F9F9) }
               .optionExpandButton { width:20px; cursor:pointer; font-size:14px; background-color:#CCCCCC; filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#BBCCDD, endColorstr=#99AABB) }

               @media screen {
               body { background-repeat:no-repeat; background-position:right bottom; }
               }

               @media print {
               .noPrint, .expandButton { visibility:hidden;   /* suppressed, but still allocate the space for them */ }
               }
            </style>
            <script>
               <![CDATA[
               function toggleOption(opt) {
                  var model = opt.parentNode.parentNode;
                  if ( "" == opt.innerHTML ) return;
                  
                  var id = opt.id;
                  var tr = model.getElementsByTagName("TR");
                  
                  // we cannot simply use a for loop with a less-than symbol due to how the server HtmlEncodes the the CDATA, resulting in
                  // a &lt;.  therefore, resort to a different loop mechanism
                  var i = 0;
                  var expand = ( "+" == opt.innerHTML );
                  while ( i != tr.length ) {
                     var row = tr[i++];
                     if ( !row.hasAttribute('parent') || row.getAttribute('parent') != id ) continue;
                     try {
                        row.style.display = ( expand ) ? "table-row" : "none";
                     }
                     catch ( e ) {
                        row.style.display = ( expand ) ? "block" : "none";
                     }
                  }
                  
                  opt.innerHTML = ( "-" == opt.innerHTML ) ? "+" : "-";
                  window.parent.resizeIFrame();
               }
               ]]>
            </script>
         </head>
         <body>
            <xsl:apply-templates />
         </body>
      </html>
   </xsl:template>

   <xsl:template match="mpcconfiguration">
      <xsl:apply-templates select="notfound" />
      <xsl:apply-templates select="error" />
      <xsl:apply-templates select="lineitem" />
   </xsl:template>

   <xsl:template match="error">
      <div style="margin:8px;">
         <span style="font-size:14px;font-weight:bold;">Unable to display the configuration in the Quick View.</span>
         <br />Please contact your administrator for assistance.
      </div>
   </xsl:template>

   <xsl:template match="notfound">
      <div style="margin:8px;">
         <span style="font-size:14px;font-weight:bold;">There is no configuration to display.</span>
         <br />A configuration must be saved before it can be displayed in the Quick View.
      </div>
   </xsl:template>

   <xsl:template match="lineitem">
      <xsl:variable name="lineItemId" select="@id" />
      <xsl:variable name="hasErrors" select="@haserrors" />
      <xsl:variable name="isDraft" select="@isdraft" />
      <div class="outer">
         <xsl:if test="$hasErrors > 0 or $isDraft > 0">
            <div class="infoBar">
               <xsl:if test="$hasErrors > 0">
               <span>
                  <xsl:value-of select="qv:GetHasErrorsText()" />
               </span>
               </xsl:if>
               <xsl:if test="$isDraft > 0">
               <span>
                  <xsl:value-of select="qv:GetIsDraftModeText()" />
               </span>
               </xsl:if>
            </div>
         </xsl:if>
         <div class="modelHeader">
            <xsl:choose>
               <xsl:when test="qv:HasConfigurationDisplayName($lineItemId) = true()">
                  <nobr>
                     <b>Name: </b>
                     <xsl:value-of select="qv:GetConfigurationDisplayName($lineItemId)" disable-output-escaping="yes" />
                  </nobr>
               </xsl:when>
               <xsl:otherwise>
                  <nobr>
                     <b>Series: </b>
                     <xsl:choose>
                        <xsl:when test="not(seriesdesc)">
                           <xsl:value-of select="@seriesid" />
                        </xsl:when>
                        <xsl:otherwise>
                           <xsl:value-of select="seriesdesc" />
                        </xsl:otherwise>
                     </xsl:choose>
                  </nobr>
                  &#160;&#160;&#160;
                  <nobr>
                     <b>Model: </b>
                     <xsl:choose>
                        <xsl:when test="not(modeldesc)">
                           <xsl:value-of select="@modelid" />
                        </xsl:when>
                        <xsl:otherwise>
                           <xsl:value-of select="modeldesc" />
                        </xsl:otherwise>
                     </xsl:choose>
                  </nobr>
               </xsl:otherwise>
            </xsl:choose>
         </div>
         <div style="height:1%">
            <table class="optionTable" cellpadding="3px" cellspacing="1px" id="configuration">
               <tr>
                  <td class="noPrint"></td>
                  <td class="optionHeader" style="width:170px">Category</td>
                  <td class="optionHeader">Description</td>
                  <td class="optionHeader" style="width:30px;text-align:center">Qty</td>
                  <td class="optionHeader" style="width:60px;text-align:right">Price</td>
               </tr>
               <xsl:apply-templates select="(category[not(@hide)]|category[@hide='0'])/option" />
               <tr>
                  <td class="optionHeader" colspan="4" style="text-align:right">Total Price:</td>
                  <td class="optionheader" style="text-align:right">
                     <xsl:value-of select="p:FormatProperty('Price', unitprice)" />
                  </td>
               </tr>
            </table>
         </div>
      </div>
   </xsl:template>

   <xsl:template match="option">
      <tr>
         <td class="optionExpandButton" align="center" id="{generate-id(.)}" onclick="toggleOption(this);">
            <xsl:if test="count(property) > 0">+</xsl:if>
         </td>
         <td class="optionRow" align="left">
            <xsl:value-of select="../description" />
         </td>
         <td class="optionRow">
            <xsl:value-of select="description" />
         </td>
         <td class="optionRow" align="center">
            <xsl:value-of select="quantity" />
         </td>
         <td class="optionRow" align="right">
            <xsl:value-of select="p:FormatProperty('Price', quantity * unitprice)" />
         </td>
      </tr>
      <xsl:apply-templates select="property[not(@hide)]|property[@hide='0']" />
   </xsl:template>

   <xsl:template match="property">
      <tr parent="{generate-id(..)}" style="display:none">
         <td style="background-color:#ECECEC"></td>
         <td style="background-color:#ECECEC">&#160;</td>
         <td class="optionProperty" colspan="3">
            <xsl:call-template name="propLabel">
               <xsl:with-param name="propId" select="@id" />
            </xsl:call-template>
            <xsl:call-template name="formatProperty">
               <xsl:with-param name="propId" select="@id" />
               <xsl:with-param name="value" select="." />
            </xsl:call-template>
         </td>
      </tr>
   </xsl:template>

   <xsl:template name="propLabel">
      <xsl:param name="propId" />
      <xsl:choose>
         <xsl:when test="@label">
            <xsl:value-of select="@label" />: &#160;
         </xsl:when>
         <xsl:when test="ancestor::lineitem/labels/label[@id=$propId]">
            <xsl:value-of select="ancestor::lineitem/labels/label[@id=$propId]" />: &#160;
         </xsl:when>
         <xsl:otherwise>
            <xsl:value-of select="$propId" />: &#160;
         </xsl:otherwise>
      </xsl:choose>
   </xsl:template>

   <xsl:template name="formatProperty">
      <xsl:param name="propId" />
      <xsl:param name="value" />
      <xsl:choose>
         <xsl:when test="p:HasHtmlFormat($propId) = true()">
            <xsl:value-of select="p:FormatPropertyNoEscaping($propId, $value)" disable-output-escaping="yes" />
         </xsl:when> 
         <xsl:otherwise>
            <xsl:value-of select="p:FormatProperty($propId, $value)" />
         </xsl:otherwise>
      </xsl:choose>
   </xsl:template>
</xsl:stylesheet>