smtlaissezfaire/product_show.mustache Secret

## product_show.mustache
<!doctype html>
<head>
  <meta charset="utf-8">
  <title>Title</title>
  <link rel="stylesheet" type="text/css" href="base.css" />
  <link rel="stylesheet" type="text/css" href="non-retina.css" media="only screen and (-webkit-min-device-pixel-ratio: 1)" />
  <link rel="stylesheet" type="text/css" href="retina.css" media="only screen and (-webkit-min-device-pixel-ratio: 2)" />
</head>

<body class="product">
  <div id="container">
    <section class="gallery">
      <img src="{{ image_url }}" class="product" />
      <a href="ideeli://productGallery"><img src="./magnifying-glass@2x.png" class="magnify" /></a>

      {{# soldOut }}
        <img src="./sold-out@2x.png" class="sold_out" />
      {{/ soldOut }}
    </section>

    <section class="meta">
      <p class="timer">Ends in <span id="end_time"></span></p>

      <hgroup>
        <h1>{{ title }}</h1>

        <h3>
          {{ colorName }}
        </h3>
      </hgroup>

      <p class="price">{{ price }} <span class="discount">{{ discounted_price }}</span></p>

      <aside class="return">
        <p>Expected to ship around {{ shipment_date }}.</p>
        <a href="ideeli://eligibleForReturn">Eligible for return.</a>
      </aside>
    </section>

    <section class="size_selector">
      <span class="button back"></span>
      <span class="button forward"></span>
      <ul id="sizes_slider">
        {{{ sizesHtml }}}
      </ul>
    </section>

    <section class="details">
      <h2>DETAILS</h2>
      <a href="ideeli://sizeChart" class="size_chart">Size Chart</a>

      <section class="details_copy">
        {{{ bodyHtml }}}
      </section>
    </section>
  </div>

  <script type="text/javascript" src="application.js"></script>
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript" charset="utf-8">
    window.onload = function() {
      var seed = Ideeli.Counter.parseSeconds({{ endsInSeconds }});
      Ideeli.Counter.countDownTo(seed, "end_time");
    };

    $(document).ready(function() {

      var $slider = $("#sizes_slider");
      var $lastSliderChild = $("#sizes_slider li:last");
      var slideWidth = 220;
      var sliderContentWidth = $lastSliderChild.position()["left"] + $lastSliderChild.outerWidth();
      var sliderCount = Math.floor(sliderContentWidth / slideWidth);
      var currentSlide = 0;

      $('.size_selector .button').click(function() {
        if ($(this).hasClass("forward")) {
          currentSlide = (currentSlide < sliderCount) ? currentSlide + 1 : sliderCount;
        } else {
          currentSlide = (currentSlide > 0) ? currentSlide - 1 : 0;
        }
        $slider.animate({"left": (40 - currentSlide * slideWidth)}, 200);
      });

      $("#sizes_slider li").click(function() {
        $(this).siblings('.active').removeClass("active")
        $(this).toggleClass("active");
      });

    });
  </script>
</body>
</html>
	<!doctype html>
	<head>
	<meta charset="utf-8">
	<title>Title</title>
	<link rel="stylesheet" type="text/css" href="base.css" />
	<link rel="stylesheet" type="text/css" href="non-retina.css" media="only screen and (-webkit-min-device-pixel-ratio: 1)" />
	<link rel="stylesheet" type="text/css" href="retina.css" media="only screen and (-webkit-min-device-pixel-ratio: 2)" />
	</head>

	<body class="product">
	<div id="container">
	<section class="gallery">
	<img src="{{ image_url }}" class="product" />
	<a href="ideeli://productGallery"><img src="./magnifying-glass@2x.png" class="magnify" /></a>

	{{# soldOut }}
	<img src="./sold-out@2x.png" class="sold_out" />
	{{/ soldOut }}
	</section>

	<section class="meta">
	<p class="timer">Ends in <span id="end_time"></span></p>

	<hgroup>
	<h1>{{ title }}</h1>

	<h3>
	{{ colorName }}
	</h3>
	</hgroup>

	<p class="price">{{ price }} <span class="discount">{{ discounted_price }}</span></p>

	<aside class="return">
	<p>Expected to ship around {{ shipment_date }}.</p>
	<a href="ideeli://eligibleForReturn">Eligible for return.</a>
	</aside>
	</section>

	<section class="size_selector">
	<span class="button back"></span>
	<span class="button forward"></span>
	<ul id="sizes_slider">
	{{{ sizesHtml }}}
	</ul>
	</section>

	<section class="details">
	<h2>DETAILS</h2>
	<a href="ideeli://sizeChart" class="size_chart">Size Chart</a>

	<section class="details_copy">
	{{{ bodyHtml }}}
	</section>
	</section>
	</div>

	<script type="text/javascript" src="application.js"></script>
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" charset="utf-8">
	window.onload = function() {
	var seed = Ideeli.Counter.parseSeconds({{ endsInSeconds }});
	Ideeli.Counter.countDownTo(seed, "end_time");
	};

	$(document).ready(function() {

	var $slider = $("#sizes_slider");
	var $lastSliderChild = $("#sizes_slider li:last");
	var slideWidth = 220;
	var sliderContentWidth = $lastSliderChild.position()["left"] + $lastSliderChild.outerWidth();
	var sliderCount = Math.floor(sliderContentWidth / slideWidth);
	var currentSlide = 0;

	$('.size_selector .button').click(function() {
	if ($(this).hasClass("forward")) {
	currentSlide = (currentSlide < sliderCount) ? currentSlide + 1 : sliderCount;
	} else {
	currentSlide = (currentSlide > 0) ? currentSlide - 1 : 0;
	}
	$slider.animate({"left": (40 - currentSlide * slideWidth)}, 200);
	});

	$("#sizes_slider li").click(function() {
	$(this).siblings('.active').removeClass("active")
	$(this).toggleClass("active");
	});

	});
	</script>
	</body>
	</html>