<%
' (SS,15/07/11) new radiator builder / selector
' (SS,06/02/13) added pipe shrouds

Const RB_PRODUCT_TYPE_RADIATOR = "Radiator"
Const RB_PRODUCT_TYPE_WALL_STAY = "Wall Stay"
Const RB_PRODUCT_TYPE_VALVE_SET = "Valve Set"
Const RB_PRODUCT_TYPE_PIPE_SHROUDS = "Pipe Shrouds" ' (SS,6/2/13)
Const RB_SHORT_TITLE = "Rads & Add-ons"
Const RB_TITLE = "Radiator and Add-ons"

Sub ShowPage_radiatorbuilder
%>
<script type="text/JavaScript">
  $(document).ready(function() {    
  
    $(function() {
        $('tr').hover(function() {
          // RGBColor used because Chrome returns colour in different format to IE
          var color = new RGBColor($(this).css('background-color'));
          if (color.r == 222)
            $(this).css('background-color', 'transparent');
          else if (color.r != 229)
          {
            $(this).css('background-color', 'rgb(222, 222, 222)');
          }
        },
        function() {
          var color = new RGBColor($(this).css('background-color'));
          if (color.r != 229)
          { 
            $(this).css('background-color', 'transparent');
          }
        });
    });
    
     
    $(function(){
      $(".rb-image").hover(function(){      
        
        var caption = $(this).attr('title');
        if (!caption) { caption = $(this).attr('alt') };
        
        // default image size
        var imagewidth = 320; 
        var imageheight = 320; 
        
        /*
        var url = window.location.href;
        
        if (imagesize = parseInt(url.substr(url.indexOf('&is=') + 4, 10))) {; // from is= in querystring
         // alert('valid');          
        }
        else
          imagesize = 320;
        */
        
        // if image size is > 160 then fetch bigger thumbnail if applicable, else resize down to 160
        var Lhtml = $(this).html();
        if (Lhtml.indexOf('size=') > 0) { 
          if (imagewidth > 160) {
            Lhtml = Lhtml.replace('size=s', 'size=l');
            $("#rb-hover-image").css('font-size', '12px');
          }
        }
        else {
          // default for paint finish images
          imagewidth = 190; 
          imageheight = 272;
          Lhtml = Lhtml.replace('-small.png', '.jpg');      
        }
        
        $("#rb-hover-image").html(Lhtml + '<div>' + caption + '</div>');
        $("#rb-hover-image img").css('width', imagewidth + 'px');
        $("#rb-hover-image img").css('height', imageheight + 'px');       
        
        var height = $("#rb-hover-image").height();        
        var top = $(this).position().top - height / 2 + $(this).height() / 2
        if (top >= $(window).height() - height - 10) {
          top = $(window).height() - height - 10;
        }
        $("#rb-hover-image").css('top', top);
        
        var width = $("#rb-hover-image").width();
        var left = $(this).position().left + $(this).width() + 4;
        if (left >= $(window).width() - width) {
          left = left - width - $(this).width() - 9;
        }
        $("#rb-hover-image").css('left', left);

        $("#rb-hover-image").css('display', 'block');       
        
        
      }, function() {
        $("#rb-hover-image").css('display', 'none');
      });
    });     

    

   });
    
    
  
    $(function() {
      $('tr').click( function() {
        $(this).parents('table').find('tr').each( function( index, element ) {
            $(this).css('background-color', 'transparent');
        } );
        $(this).css('background-color', 'rgb(229, 221, 221)');    
        $(this).find("input[type='radio']").prop('checked', true);
        rbSelect(); // because this event doesn't run
    } );
      
    // reduce the left padding around first table cell (i.e. radio button) in IE 7 or before, to allow label text to fit without wrapping, radio button spacing two much in IE 7 or before
    if ($.browser.msie && $.browser.version.substr(0,1) <= 7) {
      $("table.rb-table td:first-child").css('padding','0px');
      // adjust hidden hover over image positions which are different in IE 7 or before
      $(".rb-info img").css('margin-left','0px');
      $(".rb-info img").css('margin-top','25px');
    };
    
    rbSelect(); // to an initial select to fetch the default text
    
    
  } ); 
  
  // clear the background of each table row back to transparent to show nothing selected
  function rbClearSelect() {
    $('table.rb-table tr').css('background-color', 'transparent');
  }

  // called when radio button clicked
  function rbSelect() {
    //alert(AElement.value);
    //alert(AElement.name);
    rbSendToServer();
  };
    
  function rbSendToServer() {
    $.post('ajax.asp?cmd=custom&options=selections', 
      $('form[name="frmRadiatorBuilder"]').serialize(),
      function(data) {
        $("#rb-selections").html(data);
      }
    );
    
    $.post('ajax.asp?cmd=custom&options=radiatorinfo', 
      $('form[name="frmRadiatorBuilder"]').serialize(),
      function(data) {
        $("#rb-radiator-info").html(data);
        if (data == "")
          $("#rb-radiator-info").css('display','none');
        else
          $("#rb-radiator-info").css('display','block');
      }
    );
      
  };
  
  function rbAddToBasket() {
    
    $('#shopping-status').fadeOut("Fast", function() {
      $('#shopping-status').fadeIn("Fast");  
    });
    
    var jumpby = $('#btn-add').offset().top - $('#shopping-status').offset().top;
    
    $('#btn-add').animate({
      marginTop: '-=' + jumpby
    }, 400, function() {
      // Animation complete.
    });
    
   // $('#shopping-status').css('background-image', 'none');
   // $('#shopping-status').css('background-color', '#6A0013');      
     
    
    
        
    
    $('#btn-add').animate({
      marginTop: '+=' + jumpby
    }, 400, function() {
      // Animation complete.
      
    });
   
    
    /*
    $('#btn-add').fadeOut("Slow");
    $('#btn-add').fadeIn("Slow");
    */
  
    $.post('ajax.asp?cmd=custom&options=addtobasket', 
      $('form[name="frmRadiatorBuilder"]').serialize(),
      function(data) {
        $("#rb-build-info").html(data);
      }
    );
    
    $.post('ajax.asp?cmd=custom&options=shoppingstatus', 
      $('form[name="frmRadiatorBuilder"]').serialize(),
      function(data) {
        $("#shopping-status").html(data);
      }
    );    
    
  }
  
  
</script> 


<%

  Dim LErrorMessage
  LErrorMessage = ""
%>
<div class="heading"><%=RB_SHORT_TITLE%></div>
<div id="other-heading">
<h1>Choose your <%=RB_TITLE%></h1>
</div>
<div id="other-pages2" style="padding-left: 0px; padding-right: 0px">

<form action="" method="post" name="frmRadiatorBuilder">

<%
  ShowRadiatorBuilderSection RB_PRODUCT_TYPE_RADIATOR, "StyleOrder, SortOrder, BTURating DESC", "1. Select Radiator", "width: 260px", "29"
%>  
  <div style="width: 235px; float: left">
<%
  ShowRadiatorBuilderPaintFinish "2. Select Paint Finish", "width: 223px", "48"
  
  ShowRadiatorBuilderSection RB_PRODUCT_TYPE_WALL_STAY, "SortOrder", "3. Select Wall Stay", "width: 223px", "50"
%>

    <div id="rb-radiator-info" class="rb-section" style="width: 223px; display: none">
    </div>

  </div>
<%  
  ShowRadiatorBuilderSection RB_PRODUCT_TYPE_VALVE_SET, "SortOrder", "4. Select Valve Set", "width: 296px", "29"
  
  ShowRadiatorBuilderSection RB_PRODUCT_TYPE_PIPE_SHROUDS, "SortOrder", "5. Select Pipe Shrouds", "width: 296px", "29" ' (SS,6/2/13)
  
  ShowRadiatorBuilderYourBuild "6. Your " & RB_TITLE, "width: 296px; float: right" ' (SS,6/2/13) changed from 5 to 6
%>     
      
</form>

</div> <!-- end #other-pages2 -->
<%
End Sub

Function GetRadiatorBuilderSQL(AProductType, ASortOrder)
  ' all products that contain product type attribute value of "Radiator"
  ' a crosstab query, that list

  Dim LSQL
  ' StdPrice, SalePrice, Discount, VATBand are used by GetPricingFromProductRecord and GetProductPrice
  ' (SS,25/4/12) added [MAX(IF(pa.AttributeID = 17, True, False)) AS ExcludeFromRadiatorBuilder "]  and [AND NOT ExcludeFromRadiatorBuilder] to exclude Rads to Go
  LSQL = "SELECT p.ProductID, ProductCode, StdPrice, SalePrice, Discount, VATBand, NumInStock, SortOrder, " &_
    "MAX(IF(pa.AttributeID = 1, pa.AttributeValue, '')) AS ProductType, " &_
    "MAX(IF(pa.AttributeID = 2, CONVERT(pa.AttributeValue, UNSIGNED), 0)) AS BTURating, " &_
    "MAX(IF(pa.AttributeID = 3, pa.AttributeValue, '')) AS Sections, " &_
    "MAX(IF(pa.AttributeID = 4, pa.AttributeValue, '')) AS Columns, " &_
    "MAX(IF(pa.AttributeID = 5, pa.AttributeValue, '')) AS Height, " &_
    "MAX(IF(pa.AttributeID = 6, pa.AttributeValue, '')) AS Length, " &_
    "MAX(IF(pa.AttributeID = 7, pa.AttributeValue, '')) AS Depth, " &_
    "MAX(IF(pa.AttributeID = 8, pa.AttributeValue, '')) AS ShortName, " &_
    "MAX(IF(pa.AttributeID = 11, pa.AttributeValue, '')) AS Style, " &_
    "MAX(IF(pa.AttributeID = 11, IF(pa.AttributeValue = 'Victorian', 1, IF(pa.AttributeValue = 'Art Nouveau', 2, 3)), 0)) AS StyleOrder, " &_
    "MAX(IF(pa.AttributeID = 12, pa.AttributeValue, '')) AS WallStaysRecommended, " &_
    "MAX(IF(pa.AttributeID = 17, True, False)) AS ExcludeFromRadiatorBuilder " &_
    "FROM products p " &_
    "INNER JOIN product_attributes pa ON pa.ProductID = p.ProductID " &_
    "WHERE ProductDisabled = False " &_
    "GROUP BY ProductID " &_
    "HAVING ProductType = '" & AProductType & "' AND NOT ExcludeFromRadiatorBuilder " &_
    "ORDER BY " & ASortOrder
  GetRadiatorBuilderSQL = LSQL
End Function

Sub ShowRadiatorBuilderSection(AProductType, ASortOrder, AHeading, ASectionStyle, AImageWidth)
%>
  <div class="rb-section" style="<%=ASectionStyle%>">  
    <div class="rb-heading"><%=AHeading%></div>
<%
  ' list all radiators in a table, with radio button, columns include short name, btu, height, width, columns, ribs

  OpenQuery(GetRadiatorBuilderSQL(AProductType, ASortOrder))
  
%>
    <table class="rb-table">
<%
If AProductType = RB_PRODUCT_TYPE_RADIATOR Then
' (SS,6/2/13) added <th>&nbsp;</th>
%>
      <tr>
      <th>&nbsp;</th>
      <th style="height: 100%">Style</th>
      <th>Height</th>  
      <th>BTU</th>
      <th>Price</th>
      <th></th>
      </tr>
<%
End If
%>
  
<%
  Dim LInStock, LProductID, LProductCode, LStyle, LShortName, LColumns, LSections, LHeight, LCaption
  
  Do While Not EndOfQuery
    GetPricingFromProductRecord(False)
    LInStock = InStock(GetQueryValue("NumInStock"))
    LProductID = GetQueryValue("ProductID") 
    LProductCode = GetQueryValue("ProductCode")        
    LStyle = GetQueryValue("Style") 
    LShortName = GetQueryValue("ShortName")
    LColumns = GetQueryValue("Columns")
    LSections = GetQueryValue("Sections")    
    LHeight = GetQueryValue("Height")
  ' (SS,6/2/13) added extra cell for the radio without label for tidier list where text wraps
%>
      <tr<%=IIf(LInStock, "", " class=""rb-table-ns""")%>>
 
        <td width="0%">
     <!--   <div class="rb-info"> -->
        <input type="radio" name="<%=AProductType%>" id="productid<%=LProductID%>" value="<%=LProductID%>" />
        </td>
<% 
    If LShortName = "" Then 
      LShortName = LStyle
    End If
%>    
        <td width="100%" style="font-size: 12px">
        <label for="productid<%=LProductID%>" class="rb-label"><%=LShortName%></label>
<!--
        <%=GetProductImgSrc(LProductCode, "t", "", "", "", "")%>

        </div> -->
        </td>
<%
    LCaption = LShortName

If AProductType = RB_PRODUCT_TYPE_RADIATOR Then
  LCaption = LShortName & " " & LHeight & "mm " & GetQueryValue("BTURating") & " BTU"
%>
        <td><%=LHeight%>mm</td>
        <td><%=GetQueryValue("BTURating")%></td>    
<%
ElseIf AProductType = RB_PRODUCT_TYPE_VALVE_SET Then
  LCaption = LShortName & " " & LStyle
%>
        <td><%=LStyle%></td>
<%
End If
' 
%>    
        <td align="right"><%=CorrectCurrency(GetProductPrice)%></td>
        <td style="padding: 0px"><a href="<%=GetProductLink(LProductCode)%>"%><div class="rb-image" alt="<%=LCaption%>"><%=GetProductImgSrc(LProductCode, "s", "", "", AImageWidth, "")%></div></a></td>
               
      </tr>
<% 
    NextQueryRecord
  Loop
  CloseQuery
%>
    </table>
    
  </div> 
<%
End Sub

Sub ShowRadiatorBuilderPaintFinish(AHeading, ASectionStyle, AHeight)
%>
  <div class="rb-section" style="<%=ASectionStyle%>"> 
    <div class="rb-heading"><%=AHeading%></div>    
      <table class="rb-table">    
<%
  ' (SS,10/7/12) replaced "Old English White/Cream" with "White/Cream" and added "Linen White"
  Dim LPaintFinishes, i, LPaintFinish
  LPaintFinishes = Split("Black Primer only,Linen White,Satin Black,Gun Metal Grey/Anthracite,White/Cream,Antique Bronze", ",") 
 
  For i = 0 To UBound(LPaintFinishes)
    LPaintFinish = LPaintFinishes(i)
    ' (SS,6/2/13) added extra cell for radio control for tidier wrapped text
%>
      <tr>
        <td width="0%">
        <input type="radio" name="Paint Finish" id="paintfinish<%=i%>" value="<%=LPaintFinish%>" />
        </td>
        <td width="100%" style="font-size: 12px">
        <label for="paintfinish<%=i%>" class="rb-label"><%=LPaintFinish%></label>   
        </td>
        <td style="padding: 0px"><div class="rb-image" alt="<%=LPaintFinish%>"><img src="images/radiator-builder/<%=CleanStrForFileName(LPaintFinish)%>-small.png" height="<%=AHeight%>"></div></td>
      </tr>
<%
  Next
%>  
    </table>
  </div>
<%  
End Sub 

Sub ShowRadiatorBuilderYourBuild(AHeading, ASectionStyle)
%>
  <div class="rb-section" style="<%=ASectionStyle%>">      
    <div class="rb-heading"><%=AHeading%></div>    
    <div id="rb-selections">
    </div>    
  </div>
  
  <div id="rb-hover-image">
  </div>
<%  
End Sub 

%>