snip_review - UltraTrains

<script type="text/javascript" language="JavaScript">
  <!-- Check to see if the stylesheet is loaded -->
  var ucStyleSheetPresent = false;
  for (var i = 0; i < document.styleSheets.length; i++) {
    if ("http://secure.ultracart.com/checkout/checkout2.css" == document.styleSheets[i].href) {
      ucStyleSheetPresent = true;
    }
    if ("https://secure.ultracart.com/checkout/checkout2.css" == document.styleSheets[i].href) {
      ucStyleSheetPresent = true;
    }
  }
  if (!ucStyleSheetPresent) {
    document.write('<link rel="stylesheet" type="text/css" href="$baseUrl/review.css">');
  }

  <!-- Check to see if jQuery is loaded -->
  if (typeof jQuery == 'undefined') {
    document.write('<scr'
    + 'ipt type=\"text/javascript\" language=\"JavaScript\" src=\"https://secure.ultracart.com/js/jquery-1.4.2.min.js\"></scr'
    + 'ipt>');
  }

  function ucGoToByScroll(id) {
    $('html,body').animate({scrollTop: $("#" + id).offset().top}, 'slow');
  }

  <!-- Make an instance of jQuery that won't clobber mooTools, etc. -->
  var $jucr = jQuery.noConflict();

  function ucReviewCategoryAnswersOpen(categoryIndex) {
    // Close all the other popups
  #foreach($reviewCategory in $item.getReviewFilter().getCategories())
      #set($categoryIndex = $velocityCount - 1)
    ucReviewCategoryAnswersClose($categoryIndex);
   #end

    //get the position of the placeholder element
    var pos = $jucr("#ucReviewCategoryName" + categoryIndex).offset();
    var height = $jucr("#ucReviewCategoryName" + categoryIndex).height();
    //show the menu directly over the placeholder
    $jucr("#ucReviewCategoryAnswers" + categoryIndex).css({ "left": (pos.left) + "px", "top": (pos.top + height) + "px" });
    $jucr("#ucReviewCategoryAnswers" + categoryIndex).show();
  }

  function ucReviewCategoryAnswersClose(categoryIndex) {
    $jucr('#ucReviewCategoryAnswers' + categoryIndex).hide();
  }

  function ucReviewVote(merchantId, reviewOid, url) {
  #if ($cart.isLoggedIn()) {
      if (typeof jQuery == 'undefined') {
        window.location = url;
      } else {
        jQuery.getScript(url + '&json=true');
      }
    }
#else
    window.location = url;
#end
  }
</script>

#if (!$item)
#set($item = $group.getItem($itemId))
#end

$item.getMerchantItemID()<br><br>

<script type="text/javascript" language="JavaScript">
var summary = $item.getReviewSummaryAsJson();
var allReviews = $item.getReviewsAsJson();
var reviews = allReviews;
var filter = $item.getReviewFilterAsJson();

var currentPage = 1;
var totalPages = Math.ceil(reviews.length / 10);

function ucToggleReviewFilterAnswer(cb, filter, categoryIndex, categoryAnswerIndex) {
  filter.categories[categoryIndex].answers[categoryAnswerIndex].selected = cb.checked;
  ucUpdateReviews()
}

function ucRemoveReviewFilterAnswer(filter, categoryIndex, categoryAnswerIndex) {
  // Update the data structure
  filter.categories[categoryIndex].answers[categoryAnswerIndex].selected = false;

  // Uncheck the box on the screen
  $jucr('#ucReviewFilterCheck' + categoryIndex + '_' + categoryAnswerIndex).attr('checked', false);

  // Update the reviews
  ucUpdateReviews()
}

function ucRemoveReviewFilterAnswers() {
  // Uncheck everything
  for (var i = 0; i < filter.categories.length; i++) {
    var category = filter.categories[i];

    for (var j = 0; j < category.answers.length; j++) {
      var answer = category.answers[j];
      if (answer.selected) {
        answer.selected = false;
        $jucr('#ucReviewFilterCheck' + i + '_' + j).attr('checked', false);
      }
    }
  }

  // Update the reviews
  ucUpdateReviews()
}

function ucUpdateReviews() {

  reviews = new Array();

  var passCount = 0;
  for (var i = 0; i < allReviews.length; i++) {
    var review = allReviews[i];

    var pass = true;

    for (var j = 0; j < filter.categories.length; j++) {
      var category = filter.categories[j];
      var passCategory = false;
      var somethingSelected = false;

      for (var k = 0; k < category.answers.length; k++) {
        var answer = category.answers[k];
        if (answer.selected) {
          somethingSelected = true;
          for (var x = 0; x < answer.reviewOids.length; x++) {
            if (answer.reviewOids[x] == review.reviewOid) {
              passCategory = true;
              break;
            }
          }
        }
      }

      if (somethingSelected && !passCategory) {
        pass = false;
        break;
      }
    }

    if (pass) {
      passCount++;
      reviews[reviews.length] = review;
    }
  }

  // Handle sorting
  var sortOrder = $jucr('#ucReviewSortOrderId').val();

  if (sortOrder == "Date - Newest First") {
    reviews.sort(function(a, b) {
      return -1 * (a.sortOrderDate - b.sortOrderDate);
    });
  }
  if (sortOrder == "Date - Oldest First") {
    reviews.sort(function(a, b) {
      return a.sortOrderDate - b.sortOrderDate;
    });
  }
  if (sortOrder == "Rating - High to Low") {
    reviews.sort(function(a, b) {
      return -1 * (a.sortOrderRating - b.sortOrderRating);
    });
  }
  if (sortOrder == "Rating - Low to High") {
    reviews.sort(function(a, b) {
      return a.sortOrderRating - b.sortOrderRating;
    });
  }
  if (sortOrder == "Helpfulness - High to Low") {
    reviews.sort(function(a, b) {
      return -1 * (a.sortOrderHelpfulness - b.sortOrderHelpfulness);
    });
  }
  if (sortOrder == "Helpfulness - Low to High") {
    reviews.sort(function(a, b) {
      return a.sortOrderHelpfulness - b.sortOrderHelpfulness;
    });
  }
  if (sortOrder == "Length - Long to Short") {
    reviews.sort(function(a, b) {
      return -1 * (a.sortOrderLength - b.sortOrderLength);
    });
  }
  if (sortOrder == "Length - Short to Long") {
    reviews.sort(function(a, b) {
      return a.sortOrderLength - b.sortOrderLength;
    });
  }
  if (sortOrder == "Expert Reviews First") {
    reviews.sort(function(a, b) {
      return a.sortOrderExpert - b.sortOrderExpert;
    });
  }
  if (sortOrder == "Top Contributors First") {
    reviews.sort(function(a, b) {
      return a.sortOrderReviewerRank - b.sortOrderReviewerRank;
    });
  }

  // Make sure the paging is correct
  totalPages = Math.ceil(reviews.length / 10);
  if (currentPage < 1) {
    currentPage = 1;
  }
  if (currentPage > totalPages) {
    currentPage = 1;
  }

  // Now fetch a section of the reviews for this page;
  var pageReviews = new Array();
  for (var i = (currentPage - 1) * 10; i < currentPage * 10; i++) {
    if (i >= reviews.length) {
      break;
    }
    pageReviews[pageReviews.length] = reviews[i];
  }

  // Update the displayed reviews
  var html = "";
  for (var i = 0; i < pageReviews.length; i++) {
    var review = pageReviews[i];
    if (review.divHtml == null) {
      continue;
    }
    html = html + review.divHtml;
  }
  document.getElementById("ucReviewsId").innerHTML = html;

  // Update the paging section
  var pagingSection = document.getElementById('ucReviewPagingId');
  if (pagingSection != null) {
    html = "";
    if (currentPage > 1) {
      html += "<a href=\"javascript:ucReviewChangePage(" + (currentPage - 1) + ")\">prev</a>&nbsp;";
    }

    var start = currentPage - 5;
    if (start < 0) {
      start = 1;
    }
    var end = currentPage + 5;
    if (end - start < 10) {
      end = 10;
    }
    if (end > totalPages) {
      end = totalPages;
    }
    for (var i = start; i <= end; i++) {
      if (i == currentPage) {
        html += "<b>";
      }
      html += "<a href=\"javascript:ucReviewChangePage(" + i + ")\">" + i + "</a>&nbsp;";
      if (i == currentPage) {
        html += "</b>";
      }
    }

    if (currentPage < totalPages) {
      html += "<a href=\"javascript:ucReviewChangePage(" + (currentPage + 1) + ")\">next</a>";
    }

    pagingSection.innerHTML = html;
  }

  // Update the filter selection text
  html = "Results: " + reviews.length + " reviews with ";
  var filterActive = false;

  for (var j = 0; j < filter.categories.length; j++) {
    var category = filter.categories[j];
    var selectedAnswers = new Array();
    var selectedAnswerIndexes = new Array();

    for (var k = 0; k < category.answers.length; k++) {
      if (category.answers[k].selected) {
        selectedAnswers[selectedAnswers.length] = category.answers[k].answer;
        selectedAnswerIndexes[selectedAnswerIndexes.length] = k;
      }
    } // for category answer

    if (selectedAnswers.length > 0) {
      if (filterActive) {
        html = html + ", ";
      }
      filterActive = true;

      html = html + category.name + ": ";
      for (var x = 0; x < selectedAnswers.length; x++) {
        if (x > 0) {
          html = html + ", ";
        }
        html = html + "<a href=\"javascript:ucRemoveReviewFilterAnswer(filter, " + j + ", " 
            + selectedAnswerIndexes[x] + ")\">" + selectedAnswers[x] + "</a>";
      } // for selectedAnswers
    } // if selectedAnswers

  } // for categories

  html = html + " (<a href=\"javascript:ucRemoveReviewFilterAnswers();\">remove all filters</a>)";

  if (!filterActive) {
    html = "Click on the Filters above to refine results";
  }

  document.getElementById('ucReviewSelectedFiltersId').innerHTML = html;
}

function ucReviewChangePage(p, suppressScroll) {
  currentPage = p;
  ucUpdateReviews();
  $('#ucReviewsHeaderTextId').html("Reviews - Page " + currentPage + " of " + totalPages);
  if (!suppressScroll) {
    ucGoToByScroll('ucReviewsHeaderTableId');
  }
}

function ucUpdateReviewHtml(reviewOid) {
  var divTag = document.getElementById("ucReview" + reviewOid);
  if (divTag == null) {
    return;
  }

  for (var i = 0; i < allReviews.length; i++) {
    var review = allReviews[i];
    if (review.reviewOid == reviewOid) {
      review.divHtml = divTag.innerHTML;
      return;
    }
  }
}
</script>

<table width="500">
<tr>
<td>

#if (!$item.hasApprovedReview())

<table class="ucReview" width="100%">
  <tr>
    <td class="ucColorSubHeader">$item.getDescription() - Summary</td>
  </tr>
  <tr>
    <td valign="top">
      <div class="ucWriteTheFirstReviewButton">
        <a href="https://$checkoutHostName$item.getReviewUrl()">
          <img src="https://$checkoutHostName/checkout/images/spacer.gif" 
               class="ucWriteTheFirstReviewButtonOverlay" 
               border="0">
          
        </a>
      </div>
    </td>
  </tr>
</table>

#else

#set ($reviewSummary = $item.getReviewSummary())
<table class="ucReview" width="100%">
  <tr>
    <td class="ucColorSubHeader">$item.getDescription() - Summary</td>
  </tr>
  <tr>
    <td>$reviewSummary.getOverallAsStars()</td>
    <td rowspan="2" valign="top">
      <div class="ucWriteAReviewButton">
        <a href="https://$checkoutHostName$item.getReviewUrl()">
          <img src="https://$checkoutHostName/checkout/images/spacer.gif" class="ucWriteAReviewButtonOverlay" border="0">
        </a>
      </div>
    </td>
  </tr>
  #if ($reviewSummary.getRatings().size() > 0)
  <tr>
    <td>
      <table>
        #foreach ($rating in $reviewSummary.getRatings())
        <tr>
          <td class="ucFormTextBold">$rating.getName()
          <td>
          <td>$rating.getScoreAsRectangles()</td>
          <td class="ucFormText"><b>$rating.getScore()</b> out of <b>$reviewSummary.getMaxScore()</b></td>
        <tr>
          #end
      </table>
    </td>
  </tr>
  #end
  <tr>
    <td class="ucFormText"><b>$reviewSummary.getRecommendCount()</b> out of <b>$item.getReviews().size()</b>
      ($reviewSummary.getRecommendPercentage()) customers would recommend this product to a friend.
    </td>
  </tr>
</table>

<!-- Popup div tags for filters -->
#foreach ($reviewCategory in $item.getReviewFilter().getCategories())
#set ($categoryIndex = $velocityCount - 1)
<div style="position: absolute; display: none; background:white; z-index: 9000; border: 1px solid #999999; padding-left: 10px; padding-right: 10px;" 
     id="ucReviewCategoryAnswers$categoryIndex">
  
  <div style="text-align: right;"><a href="javascript:ucReviewCategoryAnswersClose($categoryIndex)">Close</a></div>
  #foreach ($reviewCategoryAnswer in $reviewCategory.getAnswers())
  #set ($categoryAnswerIndex = $velocityCount - 1)

  #if($reviewCategoryAnswer.getReviewOids().size() > 0)
  <input type="checkbox" onclick="ucToggleReviewFilterAnswer(this, filter, $categoryIndex, $categoryAnswerIndex)" 
         id="ucReviewFilterCheck${categoryIndex}_$categoryAnswerIndex">
  $reviewCategoryAnswer.getAnswer()<br>
  #else
  <span style="color: #6D6D6D;">
    <input type="checkbox" onclick="ucToggleReviewFilterAnswer(this, filter, $categoryIndex, $categoryAnswerIndex)" 
           id="ucReviewFilterCheck${categoryIndex}_$categoryAnswerIndex" disabled> $reviewCategoryAnswer.getAnswer()
  </span><br>
  #end
  #end
</div>
#end

<table width="100%" class="ucReviewFilterTable" cellpadding=0 cellspacing=0>
  <tr>
    <td class="ucReviewFilterHeader">&nbsp;Filters
    </td>
  </tr>
  #foreach ($reviewCategory in $item.getReviewFilter().getCategories())
  #set ($categoryIndex = $velocityCount - 1)
  <tr>
    <td valign="top" class="ucFormText">
      <div id="ucReviewCategoryName$categoryIndex" 
           class="ucReviewFilterName" onclick="ucReviewCategoryAnswersOpen($categoryIndex);">
        $reviewCategory.getName()
      </div>
    </td>
  </tr>
  #end
  <tr>
    <td class="ucReviewFilterFooter" id="ucReviewSelectedFiltersId">Click on the Filters above to refine results</td>
  </tr>
</table>

<div class="ucReviewsHeaderTable">
  <table width="100%" cellpadding=0 cellspacing=0>
    <tr>
      <td class="ucReviewsHeaderText" id="ucReviewsHeaderTextId">Reviews
        <script type="text/javascript">
          if (totalPages > 1) {
            document.write(" - Page " + currentPage + " of " + totalPages);
          }
        </script>
      </td>
      <td class="ucFormText" align="right">
        <select id="ucReviewSortOrderId" class="ucFormField" onchange="ucReviewChangePage(1, true);">
          <option checked>Choose a sort order</option>
          <option>Featured Reviews First</option>
          <option>Expert Reviews First</option>
          <option>Top Contributors First</option>
          <option>Date - Newest First</option>
          <option>Date - Oldest First</option>
          <option>Rating - High to Low</option>
          <option>Rating - Low to High</option>
          <option>Helpfulness - High to Low</option>
          <option>Helpfulness - Low to High</option>
          <option>Length - Long to Short</option>
          <option>Length - Short to Long</option>
        </select>
      </td>
    </tr>
  </table>
</div>
<div id="ucReviewsId">
  #foreach($review in $item.getReviews())
  #if ($velocityCount <= 10)
  <div id="ucReview$review.reviewOid">
    #else
    <div id="ucReview$review.reviewOid" style="display:none;">
      #end
      <div class="ucReview">
        <table width="100%">
          <tr>
            <td align="right" class="ucFormText" valign="middle"><img src="/checkout/images/rolodex.gif">
              $review.getReviewerNickname() from $review.getReviewerLocation()
              #if ($review.getReviewerRank())
              (Rank: $review.getReviewerRank())
              #end
            </td>
          </tr>
          <tr>
            <td>$review.getOverallAsStars()</td>
          </tr>
          <tr>
            <td class="ucColorSubHeader">$review.getTitle()</td>
          </tr>
          <tr>
            <td class="ucFormText">$review.getDate()</td>
          </tr>
          #if ($review.getRatings().size() > 0)
          <tr>
            <td>
              <table class="ucReviewRatings" width="100%">
                <tr>
                  <td>
                    <table>
                      #foreach ($rating in $review.getRatings())
                      <tr>
                        <td class="ucFormTextBold">$rating.getName()
                        <td>
                        <td>$rating.getScoreAsRectangles()</td>
                        <td class="ucFormText">$rating.getScore() out of $reviewSummary.getMaxScore()</td>
                      <tr>
                        #end
                    </table>
                </tr>
                </td>
              </table>
            </td>
          </tr>
          #end
          <tr>
            <td class="ucFormText"><br>$review.getReview()<br></td>
          </tr>
          #if ($review.getReviewerQuestions().size() > 0)
          <tr>
            <td>
              <table class="ucReviewerQuestions" width="100%">
                <tr>
                  <td>
                    <table>
                      #foreach ($question in $review.getReviewerQuestions())
                      <tr>
                        <td class="ucFormTextBold">$question.getQuestion()</td>
                        <td class="ucFormText">$question.getAnswer() out of $question.getAnswer()</td>
                      <tr>
                        #end
                    </table>
                </tr>
                </td>
              </table>
            </td>
          </tr>
          #end
          <tr>
            <td class="ucFormText">Was this review helpful?&nbsp;&nbsp;
              <a href="javascript:ucReviewVote('DEMO', $review.getReviewOid(), 'https://$checkoutHostName$review.getHelpfulYesUrl()')" 
                 style="color: #3A9400;">
                <img src="/checkout/images/reviewCheckYes.gif" border="0">Yes ($review.getHelpfulYesVotes())</a>&nbsp;&nbsp;
              <a href="javascript:ucReviewVote('DEMO', $review.getReviewOid(), 'https://$checkoutHostName$review.getHelpfulNoUrl()')" 
                 style="color: #CC0000;">
                <img src="/checkout/images/reviewXNo.gif" border="0">No ($review.getHelpfulNoVotes())</a>
            </td>
          </tr>
        </table>
      </div>
    </div>
    <script type="text/javascript" language="javascript">
      ucUpdateReviewHtml($review.reviewOid);
    </script>
    #end
  </div>

  #if ($item.getReviews().size() > 10)
  <!-- Paging -->
  <table width="100%" class="ucReview">
    <tr>
      <td class="ucFormText" id="ucReviewPagingId" align="center">
      </td>
    </tr>
  </table>

  <script type="text/javascript" language="Javascript">
    ucUpdateReviews();
  </script>

  #end

  #end

</td>
</tr>
</table>