<%
' (SS,25/02/10) Added Magic Zoom Plus
' (SS,25/06/10) Change to ShowProductDetail
' (SS,06/07/10) replaced GetProductLink with GetProductLinkWithName for SEO in Sub ShowProductRelatedItem
' (SS,07/11/11) changes to work with Magic Zoom Plus 4.04
' (SS,20/5/13) added per section price for radiators to Sub ShowProductDetail
' (SS,21/02/14) replaced facebook like with iframe version because the script version was causing problems in Chrome when going back to previous
'               page using browser back button, i.e. related product "add" buttons would stop working for 45secs and "like" might disappear
' (SS,11/09/14) New Bootstrap version, many changes
' (SS,23/10/14) Write Review was removed in Bootstrap viewed, added back in and improved to work in Bootstrap
' (SS,28/11/14) Added call to CustomShowHolidayNotice
' (SS,01/03/15) Added alt attribute to "img src" to remove W3C validation error
' (SS,01/04/22) removed Facebook, Twitter and Google+ sharing links, only twitter was functioning anyway, also removed the Trustpilot review link

' (SS,13/9/14) added following class to store temporary values used by this unit/module, currently just dimensions
Class ProductDetail
  Private FDimensions
  
  Private Sub Class_Initialize()
  End Sub
  
  Private Sub Class_Terminate()
  End Sub  
  
  Public Property Get Dimensions()
    Dimensions = FDimensions
  End Property
  
  Public Property Let Dimensions(AValue)
    FDimensions = Trim(AValue)
  End Property
  
End Class

Dim oProductDetail


' --- START OF PRODUCT DETAIL TEMPLATES --- '

Sub ShowProductDetailYouAreHere(AGroup, ACategory, ASubcategory)
  Response.Write GetBreadcrumb(AGroup, ACategory, ASubcategory, "")
End Sub

' (SS,1/9/14) now showing Bootstrap style alert
Sub ShowProductDetailNotFound(AProductCode)
  ShowAlertMesssage "warning", "Could not find Product Code: <b>" & AProductCode & "</b>"
End Sub

' (SS,15/6/09) added AShowDescription which is used to print main description or not
' (SS,25/6/10) added Or IsStockAvailable to allow ordering if not in stock but available
' (SS,30/6/11) added AProductID, used by ShowProductOptions, which was also added
' (SS,7/11/11) changes to work with Magic Zoom Plus 4.04
' (SS,17/1/13) added ending / to an img src
' (SS,20/5/13) added per section price for radiators
' (SS,1/03/15) added alt attribute to "img src" to remove W3C validation error
Sub ShowProductDetail(AProductID, AProductCode, AProductName, AProductDesc, ADimensions, ASalePrice, AStdPrice, ANumInStock, ANew, ACategory, ASubcategory, AShowLarge, ALargePicWidth, ALargePicHeight, AShowDescription)

  ' (SS,13/9/14) create the private object used to store some values, for convenience, to pass onto other functions in this module
  Set oProductDetail = New ProductDetail
  oProductDetail.Dimensions = ADimensions

  ' (SS,22/6/11) following used to determine whether to show "Add Review" or "Reviews" tab, "Add Review" shown if no reviews
  Dim LReviewRating, LReviewCount
  LReviewRating = GetReviewRatingAndCount(AProductCode, LReviewCount)

  ' (SS,22/9/17)
  Dim LBrandFound, LBrand, LMPN
  LBrandFound = GetBrandAndMPN(AProductID, AProductCode, LBrand, LMPN)    
  
%>
<!-- START OF PRODUCT DETAIL -->
<div itemscope itemtype="http://schema.org/Product">
    <div class="row" style="margin-left: 0px; margin-right: 0px">
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="border-bottom: 1px solid #ccc; border-top: 1px solid #ccc;">
        <h2 itemprop="name" style="text-align:center; margin-top:10px; margin-bottom:10px;"><%=AProductName%></h2>
      </div>
    </div>

    <div class="row" style="margin-left: 0px; margin-right: 0px">
        <!-- magic zoom plus-->
        <div class="col-lg-6 col-md-6" style="padding-left: 0px; padding-right: 0px">
            <div class="col-md-12" style="padding-left: 0px; padding-right: 0px">
              <div style="max-width: 425px; margin: 0 auto;">
              <a id="Zoomer1" href="<%=GetProductImageLink(AProductCode, "o")%>" class="MagicZoomPlus" rel="selectors-effect: fade; selectors-change: mouseover; selectors-effect: false; disable-zoom: true; pan-zoom: false; expand-effect:linear; expand-speed: 0; show-title: bottom; hint: false" title="<%=ToNamedHTML(AProductName)%>"><img src="<%=GetProductImageLink(AProductCode, "l")%>" alt="<%=AProductCode%>" /></a> <br/>         
              </div>
            </div>
            <!-- magic zoom plus thumbnails -->
            <div class="col-md-12" id="magic-zoom-thumbs" style="padding-left: 0px; padding-right: 0px">
              <%ShowProductMoreImages AProductCode, 0, ""%>
            </div>
        </div> 
        
  <%If LBrandFound Then%>
        <meta itemprop="brand" content="<%=LBrand%>" />
        <meta itemprop="mpn" content="<%=LMPN%>" />
  <%End If%> 
       
        <!-- price and description etc -->
        <div class="col-lg-6 col-md-6" style="padding-left: 0px; padding-right: 0px">
          
      
  <div id="product-detail-code" style="margin-top: 10px">
    Product Code: <strong><%=AProductCode%></strong>
  </div>    
      
  <div class="price"> 
    <h3 style="margin-top: 10px; margin-bottom: 5px">Price: 
    <span class="regular"><% ShowProductPriceV2 ASalePrice, AStdPrice, False, False, "savepc" %></span>
    </h3>
    <%ShowProductPriceExcVAT ASalePrice, AStdPrice%>
    <span itemprop="offers" itemscope itemtype="http://schema.org/Offer">
      <meta itemprop="priceCurrency" content="<%=GetCurrencyCode%>">
      <meta itemprop="price" content="<%=GetProductPriceForMicrodata(False)%>">
      <meta itemprop="itemCondition" content="<%=GetProductConditionForMicrodata(AProductID)%>"> 
      <%=GetStockAvailabilityMicrodata(AProductCode, AProductName, ANumInStock)%>
    </span>   
  </div>
  
  <!-- REVIEW RATING *** to be improved -->
  <%'ShowReviewRatingV2 AProductCode, True, True, "left"%>
  <!-- END OF REVIEW RATING *** to be improved -->
 
<%If Not ProductDiscontinued(AProductCode, AProductName) Then%>
  <%If InStock(ANumInStock) Or IsStockAvailable Then%>
    <form name="frmBasket" class="form-inline" role="form" action="<%=GetProductLink(AProductCode)%>" method="post" style="margin-bottom: 10px">             
      <%ShowProductOptions AProductID%>                            
      <div id="ajax-info" class="price-total" style="margin-top: 5px; margin-bottom: 10px">
      </div>
      <h3 style="margin-top:0px"><%=GetStockInfo%></h3>
      <div class="form-group">      
        Quantity<br>
        <select class="form-control" name="qty">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
          <option value="6">6</option>
          <option value="7">7</option>
          <option value="8">8</option>
          <option value="9">9</option>
          <option value="10">10</option>
          <option value="11">11</option>
          <option value="12">12</option>
          <option value="13">13</option>
          <option value="14">14</option>
          <option value="15">15</option>
          <option value="16">16</option>
          <option value="17">17</option>
          <option value="18">18</option>
          <option value="19">19</option>
          <option value="20">20</option>        
        </select>
       </div>
    </form>
    <button class="btn btn-default btn-success btn-lg" onclick="<%=GetBuyOLink(AProductID)%>"><span class="glyphicon glyphicon-shopping-cart"></span> Add to Basket</button>   
  <%Else%>
    <h3 style="margin-top:0px"><%=GetStockInfo%></h3>    
              <%ShowStockNotificationLink(AProductCode)%>
  <%End If%>
<%End If%>

  
  
  <div style="margin-top: 10px">
  
  <!-- accordian panel panes -->
  
  
<div class="panel-group" id="accordion">

  <%ShowProductDescriptionSections(AProductDesc)%>

  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseRelated">
          <i class="glyphicon glyphicon-chevron-down" style="margin-right:10px"></i>Related Products</a>
          &nbsp;<span id="related-product-count" class="badge" style="background-color: grey">0</span>
      </h4>
    </div>
    <div id="collapseRelated" class="panel-collapse collapse">
      <div class="panel-body">
        <%ShowRelatedProducts(AProductCode)%>
        
        <%ShowViewOtherProducts(AProductCode)%>
      </div>
    </div>
  </div>  
</div>  

  
  </div>
   
  

</div>
        </div>
        <!--/price and description etc -->
          
</div>
<!-- END OF PRODUCT DETAIL -->   

<!-- product option change -->
<script type="text/javascript">
  // globals holding selected values
  ITP_sections = "";
  ITP_paint_finish = "";
  
  function itp_product_option_change(AType, AOption) {
    if (AType == 'sections') {
      ITP_sections = AOption.value;
    }
    else if (AType == 'paint finish') {
      if (AOption.value != "") {
        ITP_paint_finish = AOption.options[AOption.selectedIndex].text;
      }
      else {
        ITP_paint_finish = "";
      };
    };
    // alert("ITP_sections: " + ITP_sections + "\n" + "ITP_paint_finish: " + ITP_paint_finish);
    //alert($('#productid').val());
    //alert(frmBasket.productid.value);
    $.get('ajax.asp?cmd=custom&options=productprice&productid=' + frmBasket.productid.value + '&sections=' + ITP_sections + '&paintfinish=' + ITP_paint_finish, 
      function(data) {
        $("#ajax-info").html(data);
      }
    );
    
  }
  
</script>

<%
' (SS,24/10/14) if in write review i.e. cmd=writereview then move to this section
If InWriteReview Then%>
<script type="text/javascript">
  $(function() {
      $(document).scrollTop( $("#collapseReviews").offset().top );  
  });
</script>
<%End If%>

<%
  
  ' (SS,13/9/14) destroy the object created at the start
  Set oProductDetail = Nothing

End Sub

' (SS,22/8/14)
' (SS,23/10/14) added InWriteReview
Sub ShowProductDetailDescriptionSection(ASectionDesc, ASectionName, AFirstSection)
  Dim LSectionAnchorName
  LSectionAnchorName = "collapse" & Replace(ASectionName, " ", "") ' removes spaces from name
%>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#<%=LSectionAnchorName%>">
          <i class="glyphicon glyphicon-chevron-<%=IIf(AFirstSection, "up", "down")%>" style="margin-right:10px"></i><%=ASectionName%>
        </a>
      </h4>
    </div>
    <div id="<%=LSectionAnchorName%>" class="panel-collapse collapse<%=IIf(AFirstSection And Not InWriteReview, " in", "")%>">
      <div class="panel-body">
				<%=ASectionDesc%>
        <%If AFirstSection And oProductDetail.Dimensions <> "" Then%>
        <%=BR&BR%><b>Dimensions:</b>&nbsp;&nbsp;<%=oProductDetail.Dimensions%>
        <%End If%>
      </div>
    </div>
  </div>
<%
End Sub

Sub ShowProductDetailViewOtherProductsHeader
%>
          <div id="product-detail-other-products">
            <h3>View other products in</h3>
<%
End Sub

Sub ShowProductDetailViewOtherProductsItem(AGroup, ACategory, ASubcategory)
%>
            <div class="product-detail-other-products-single">
              <%ShowCategoryAndSubcategoryWithLink AGroup, ACategory, ASubcategory%>
            </div>
<%            
End Sub

Sub ShowProductDetailViewOtherProductsFooter
%>
          </div> <!-- end #product-detail-other-products -->   
<%
End Sub

Sub ShowProductMoreImagesHeader
%>

<%
End Sub

' (SS,25/02/10) modified to work with Magic Zoom Plus
' (SS,24/5/11) changed class="MagicThumb" rel="zoom-id:Zoomer;" 
' to class="MagicThumb" rel="zoom-id:Zoomer; group:Zoomer;"
' fix first thumbnail not having previous/next arrows
' (SS,7/11/11) changes to work with Magic Zoom Plus 4.04
' (SS,18/8/14) new Bootstrap RWD version, this is version 2 which has ACaption as a parameter, and APictureID instead of AProductCode, also AMaxImageCount, calls GetProductImageLinkForPictureID instead of GetProductImageLinkWithImageNo
' (SS,01/03/15) added alt attribute to "img src" to get rid of W3C validation error
Sub ShowProductMoreImagesItem(APictureID, AImageNo, AMaxImageCount, ACaption)
%>
              <a class="thumbnail MagicThumb magiczoom_thumbnailsmall" href="<%=GetProductImageLinkForPictureID(APictureID, "o")%>" rel="zoom-id: Zoomer1; hint: false" rev="<%=GetProductImageLinkForPictureID(APictureID, "l")%>" title="<%=ACaption%>"><img src="<%=GetProductImageLinkForPictureID(APictureID, "s")%>" alt="<%=ACaption%>" /></a>              
<%		
End Sub

Sub ShowProductMoreImagesFooter
%>

<%
End Sub

Sub ShowProductFilesHeader
%>
<table width="100%" border="0" cellspacing="0" cellpadding="8">
<tr>
<td>more details</td>
</tr>
<%
End Sub

Sub ShowProductFilesItem(AProductCode, AFileName, LFileNameNoExt, AFileNo, AFileType, AFileSize)
%>
<tr>
<td><a href="<%=GetProductFileLink(AProductCode, AFileNo)%>"><%=LFileNameNoExt%> [<%=AFileSize%>]</a></td>
</tr>
<%
End Sub

Sub ShowProductFilesFooter
%>
</table>
<%
End Sub

' (SS,12/9/14) removed "<h3>You may also be interested in</h3>"
Sub ShowProductRelatedHeader
  ClearCounter ' (SS,13/9/14)
%>
  <div class="row">
         <div id="product-detail-related-items">
<%
End Sub

' (SS,6/7/10) replaced GetProductLink with GetProductLinkWithName for SEO
' (SS,12/9/14) changes for Bootstrap
Sub ShowProductRelatedItem(AProductCode, AProductName, AProductDescription)
  IncCounter ' (SS,13/9/14)
%>
          <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
            <div class="product-detail-related-item" style="border: 1px dashed #f4f4f4; padding: 10px"> 
              <div class="product-detail-related-item-image">
                <a href="<%=GetProductLinkWithName(AProductCode, AProductName)%>"><%=GetProductImgSrcThumbnailSmall(AProductCode, AProductName)%></a>
              </div>
              <div class="product-detail-related-item-name" style="height: 3em">
                <a href="<%=GetProductLinkWithName(AProductCode, AProductName)%>"><%=AProductName%></a>
              </div>
              <div class="product-detail-related-item-price-section">
                <div class="product-detail-related-item-add-button pull-left">
<%If InStock(GetNumInStock) Or IsStockAvailable Then%>
                  <a href="<%=GetBuyLink(AProductCode)%>" class="btn btn-primary btn-sm" role="button" style="margin-right: 10px; margin-top: 5px">Add</a>
<%End If%>                
                </div>                
                <div class="product-detail-related-item-price-info">
                  Price: <% ShowProductPriceV2 CorrectCurrencyNV(GetSalePrice), CorrectCurrencyNV(GetStdPrice), True, False, "" %>
                </div>  
              </div>
              <div class="product-detail-related-item-stock-info">
                <%=GetStockInfo%>
              </div>  
            </div>
          </div><!--col-->       
<%
End Sub

' (SS,13/9/14) set the count in the header
Sub ShowProductRelatedFooter
%>
          </div> <!-- end #product-detail-related-items -->
    </div><!--row-->
<script>
  document.getElementById("related-product-count").innerHTML = '<%=GetCounter%>';  
</script>
<%
End Sub

' --- END OF PRODUCT DETAIL TEMPLATES --- '


%>