---
layout: page
tabs: [description, downloads, videos, special-offers]
special-offers:
  format: letter
  orientation: portrait
  unit: in
  width: 8
  height: 9.1
  margin: 0.25
  dpi: 300
---
<script src="/node_modules/jspdf/dist/jspdf.min.js"></script>
{% assign url-size = page.url | size | minus: 2 %}
{% assign i18n-id = page.url | slice: 1,url-size | replace: '/', '-' | remove_first: collection.label | remove_first: '-' %}
{% assign i18n-title = site.data.i18n.catalog[collection.label][site.lang][i18n-id].title %}
{% if page.i18n[site.lang].description %}
  {% assign i18n-description = page.i18n[site.lang].description %}
{% else %}
  {% assign i18n-description = site.data.i18n.catalog[collection.label][site.lang][i18n-id].desc %}
{% endif %}
<div class="container">
  <div class="row">
    <div id="product-images" class="col-xs-12 col-sm-12 col-md-4">
      <div class="product-images">
        <ul id="lightSlider">
          {% if page.resources.product-images.quantity %}
            {% assign images-count = page.resources.product-images.quantity %}
          {% else %}
            {% assign images-count = 1 %}
          {% endif %}
          {% for product-image in (1..images-count) %}
            {% assign page-categories-size = page.categories | size %}
            {% if page-categories-size >= 1 %}
              {% assign page-categories = page.categories | join: "/" | append: "/" %}
            {% endif %}
            {% if forloop.index == 1 %}
              {% assign image-num = '' %}
            {% elsif forloop.index < 10 %}
              {% assign image-num = forloop.index | prepend: "_0" %}
            {% else %}
              {% assign image-num = forloop.index | prepend: "_" %}
            {% endif %}
            {% capture product-image-url %}
              {{ site.amazon-s3 }}/assets/img/catalog/thumbnails/{{ page.collection }}/{{ page-categories }}{% if page.resources.product-images.model %}{{ page.resources.product-images.model | downcase }}{% else %}{{ page.title | downcase  }}{% endif %}{{ image-num | append: ".png" }}
            {% endcapture %}
            <li data-thumb="{{ product-image-url }}">
              <img src="{{ product-image-url }}" class="img-center" alt="{% if i18n-title %}{{ i18n-title }}{% else %}{{ page.title }}{% endif %}" />
            </li>
          {% endfor %}
        </ul>
      </div>
    </div>
    <div id="product-generals" class="col-xs-12 col-sm-12 col-md-8">
        <h3 id="{{ i18n-id }}" class="product-description">{% if i18n-description %}{{ i18n-description }}{% else %}{{ page.description }}{% endif %}</h3>
        <p id="{{ i18n-id }}" class="product-model">{{ site.data.i18n.common.product-layout[site.lang].model }}: <strong>{% if i18n-title %}{{ i18n-title }}{% else %}{{ page.title }}{% endif %}</strong></p>
        <p id="{{ i18n-id }}" class="product-brand">{{ site.data.i18n.common.product-layout[site.lang].brand }}: <strong>{{ page.brand }}</strong></p>
        <p id="{{ i18n-id }}" class="product-commercial {% unless page.commercial %}{{ 'hide' }}{% endunless %}">{{ site.data.i18n.common.product-layout[site.lang].commercial }}: <strong>{{ page.commercial }}</strong></p>
        <div id="{{ i18n-id }}" class="product-price"><span class="label label-primary">{% if page.price %}{{ page.price | prepend: '$ ' }}{% endif %}{% assign price-size = page.price | downcase | split: '.' | last | size %}{% if price-size == 1 %}{{ "0" }}{% endif %}{% if page.currency %}{{ page.currency | prepend: ' ' }}{% endif %}</span></div>
    </div>
  </div>
  <div class="row">

    <ul class="nav nav-tabs nav-justified">
      {% for tab in layout.tabs %}
        <li role="presentation" {% if forloop.first == true %}class="active"{% endif %}{% if site.original and tab == 'special-offers' %}class="hide"{% endif %}><a data-toggle="tab" href="#{{ tab| downcase | replace: ' ', '-' }}">{{ site.data.i18n.common.product-layout[site.lang][tab] }}</a></li>
      {% endfor %}
    </ul>

    <div class="tab-content">
      {% for tab in layout.tabs %}
        <div id="{{ tab | downcase | replace: ' ', '-' }}" class="tab-pane fade {% if forloop.first == true %}in active{% endif %}">
          <div class="container">
            {% case forloop.index %}

            {% when 1 %}
              <p>
                {% for resource in page.resources.spec-sheets.catalog %}
                  <img src="{{ site.amazon-s3 }}{{ resource }}" alt="{{ page.title }}" class="img-center">
                {% endfor %}
              </p>
              {{ content }}

            {% when 2 %}
              {% if  page.resources.downloads %}
                {% for resource in page.resources.downloads %}
                  {% assign i18n-resource-text = page.i18n[site.lang].resources.downloads[forloop.index0].text %}
                  <p>
                    <a class="btn btn-primary btn-sm" href="{{ site.amazon-s3 }}{{ resource.link }}">
                      <strong><span class="glyphicon glyphicon-download-alt"></span> {{ site.data.i18n.common.product-layout[site.lang].download }}</strong>
                    </a>
                    <span class="product-downloads">
                    {% if i18n-resource-text %}{{ i18n-resource-text }}{% else %}{{ resource.text }}{% endif %}
                    </span>
                  </p>
                {% endfor %}
              {% else %}
                <p>{{ site.data.i18n.common.product-layout[site.lang].downloads-empty }}</p>
              {% endif %}

            {% when 3 %}
              {% if page.resources.videos %}
                {% assign ids = page.resources.videos | split: ", " %}
                {% for id in ids %}
                  <div class="col-xs-12 col-sm-12 col-md-6">
                    <iframe
                      id="ytplayer"
                      type="text/html"
                      width="100%"
                      height="350"
                      src="https://www.youtube.com/embed/{{ id }}?rel=0&modestbranding=1"
                      frameborder="0"
                      gesture="media"
                      allow="encrypted-media"
                      allowfullscreen>
                    </iframe>
                  </div>
                {% endfor %}
              {% else %}
                <p>{{ site.data.i18n.common.product-layout[site.lang].videos-empty }}</p>
              {% endif %}

            {% else %}
              {% if page.resources.special-offers.quantity > 0 %}
                {% unless site.original %}
                  <p>
                    {% for resource in (1..page.resources.special-offers.quantity) %}
                      {% assign page-categories-size = page.categories | size %}
                      {% if page-categories-size >= 1 %}
                        {% assign page-categories = page.categories | join: "/" | append: "/" %}
                      {% endif %}
                      {% if forloop.index == 1 %}
                        {% assign image-num = '' %}
                      {% elsif forloop.index < 10 %}
                        {% assign image-num = forloop.index | prepend: "_0" %}
                      {% else %}
                        {% assign image-num = forloop.index | prepend: "_" %}
                      {% endif %}
                      <div class="marketing-theme content-right">
                        <a class="btn btn-primary btn-sm" onclick="specialOffersPDF();">
                          <strong><span class="glyphicon glyphicon-download-alt"></span> {{ site.data.i18n.common.product-layout[site.lang].download }}</strong>
                        </a>
                      </div>
                      <div id="special-offers-{{ forloop.index }}">
                        <img id="special-offers-promo{{ forloop.index }}" src="/img/special-offers/{{ page.collection }}/{{ page-categories }}{% if page.resources.special-offers.model %}{{ page.resources.special-offers.model | downcase }}{% else %}{{ page.title | downcase  }}{% endif %}{{ image-num | append: '.png' }}" alt="{{ page.title }}" title="{{ page.title }}">
                        <img id="special-offers-data{{ forloop.index }}" src="/img/special-offers/customers/{{ site.domain | replace:'.',' ' | truncatewords: 1,"" }}.png" alt="{{ page.title }}" title="{{ page.title }}">
                        <canvas id="special-offers-promoCanvas{{ forloop.index }}" class="hide" width="{{ layout.special-offers.width | times: layout.special-offers.dpi }}" height="{{ layout.special-offers.height | times: layout.special-offers.dpi }}"></canvas>
                        <canvas id="special-offers-dataCanvas{{ forloop.index }}" class="hide" width="{{ layout.special-offers.width | times: layout.special-offers.dpi }}" height="{{ layout.special-offers.height | minus: 10.5 | times: layout.special-offers.dpi | times: -1 }}"></canvas>
                      </div>
                      <script>
                        function specialOffersPDF(){
                          var doc = new jsPDF({
                            orientation: '{{ layout.special-offers.orientation }}',
                            unit: '{{ layout.special-offers.unit }}',
                            format: '{{ layout.special-offers.format }}'
                          })
                          var promo = document.getElementById("special-offers-promo{{ forloop.index }}");
                          var promoCanvas = document.getElementById("special-offers-promoCanvas{{ forloop.index }}");
                          var data = document.getElementById("special-offers-data{{ forloop.index }}");
                          var dataCanvas = document.getElementById("special-offers-dataCanvas{{ forloop.index }}");
                          promoCanvas.getContext("2d").drawImage(promo, 0, 0);
                          dataCanvas.getContext("2d").drawImage(data, 0, 0);
                          doc.addImage(promoCanvas.toDataURL(), 'PNG', {{ layout.special-offers.margin }}, {{ layout.special-offers.margin }}, {{ layout.special-offers.width }}, {{ layout.special-offers.height }},'promoImg','FAST')
                          doc.addImage(dataCanvas.toDataURL(), 'PNG', {{ layout.special-offers.margin }}, {{ layout.special-offers.margin }} + {{ layout.special-offers.height }}, {{ layout.special-offers.width }}, {{ 11 | minus: layout.special-offers.margin | minus: layout.special-offers.margin }} - {{ layout.special-offers.height }},'dataImg','FAST')
                          doc.save('{{ page.title }}.pdf')
                        }
                      </script>
                    {% endfor %}
                  </p>
                {% endunless %}
              {% else %}
                <p>{{ site.data.i18n.common.product-layout[site.lang].special-offers-empty }}</p>
              {% endif %}

            {% endcase %}

          </div>
        </div>
      {% endfor %}
    </div>

  </div>
</div> <!-- /container -->
<script src="/js/sliders/lightslider.js"></script>
<script src="/assets/js/bootstrap/nav-tabs.js"></script>