{% extends 'base.html' %}{% comment %}PRODUCTS DETAILS {% endcomment %}
{% load thumbnail %}
{% block page-seo %}
        <title>
               	{{ product.title }} | Gordini Canada
        </title>
       <meta name="description" content="{{ product_categories.0.seo_description_ca }}">
{% endblock %}
{%block body-id%}product-details{% endblock %}

{% block shop-menu %}
	{% include 'shared/shop-menu.html' %}
{% endblock %}


{% block content %}
<!--MAIN-->
	
	<div id="main" role="main">
		<aside>
			{% thumbnail product.image.image "247x400" as im %}
				<div style="background-color: white;width:247px;margin:0 auto;">
					<img id="main-picture" src="{{ im.url }}"  alt="{{ image.product_name }}" width="{{ im.width }}" height="{{ im.height }}">
				</div>
			{% empty %}
				<img src="/static/img/image_not_available.gif"  alt="Not available" width="247" height="250">
			{% endthumbnail %}
			<p class="caption">{{ product.color_name }}</p>
			{% if colors %}
				<div class="wrapper">
					<ul class="colors-list">
					{%  for color in colors %}
						<li class="{% cycle 'thumbnail clearfix' 'thumbnail clearfix' 'thumbnail clearfix' 'thumbnail clearfix' 'thumbnail clearfix' 'thumbnail last' %}">
								<div class="color-wrapper" href="/{{ request.REGION_CODE }}/">
									{% thumbnail color.image "64x64" as im %}
										{% thumbnail color.image "247x400" as color_im %}
									    <img class="color-pictures" src="{{ im.url }}"  alt="{{ product.color.name }}" data-raw="{{ color_im.url }}" width="{{ im.width }}" height="{{ im.height }}">
					   			    	{% endthumbnail %}
					   			    {% empty %}
				                        <img src="/static/img/image_not_available.gif"  alt="Picture not available" width="64" height="64">
									{% endthumbnail %}
								</div>
								<p class="caption">{{ color.name }}</p>
						</li>
					{%  endfor %}
					</ul>
	   			</div>
	   		{% endif %}
		</aside>
	  <!--Main Content Region-->
		<div class="region" role="region"><!--For clarity, region could have an id-->
			<article role="article">

			<h2 class="sub-title">
			{% for collection in collections %}
				{{ collection.name }} 
			{% endfor %}
	  		</h2> 
		   <h1>{{ product.title}}</h1>
		   <p class="sku">Style # : {{ product.style_number }}</p>
		   <h2>Suggested Retail Price</h2>
		   <p>${{ product.price }}</p>		   
			{% if product.shell_fabric %}
				<h2>Shell fabric</h2>
				<p>{{ product.shell_fabric }}</p>
			{% endif %}
			{% if product.insulation %}
				<h2>Insulation</h2>
				<p>{{ product.insulation }}</p>
			{% endif %}
			{% if product.features %}
				<h2>Features</h2>
				<p>{{ product.features }}</p>
			{% endif %}
			{% if product.content %}
				<h2>Contents</h2>
				<p>{{ product.content }}</p>
			{% endif %}
			{% if technologies %}
				<h2>Technology</h2>
					<div class="wrapper">
						<table cellspacing="0" cellpadding="0" border="0" class="techno-img-wrapper">
						<tr>
						{%  for technology in technologies %}
						<td>
							{% thumbnail technology.image "64" as im %}
							    <img src="{{ im.url }}"  alt="{{ technology.technologie_name }}" width="{{ im.width }}" height="{{ im.height }}">
							{% endthumbnail %}
						</td>	
						{% endfor %}
						</tr>
						</table>
					</div><br />
					<p class="clearfix">
						<a href="/{{ request.REGION_CODE }}/technology/">More details about our technology</a><span></span>
					</p>
			{% endif %}
			
			{% if sizes %}
				<h2>Size</h2>
				<p><span id="size">
					{% for size in sizes %}
						{{ size.name }}
					{% endfor %}
					</span>
<!--Size charts detector -->
			{% if product_categories.0.display_sizechart %}
					<a href="/static/html/gordini_sizechart.html" rel="prettyPopin">View size chart</a><span></span>
			{% endif %}
				</p>
			{% endif %}
		 	</article>
		</div>
	  <!--End Main Content Region-->	  	
	</div>
<!--END MAIN-->
{% endblock content %}
{% block page-scripts %}
<script type="text/javascript" src="/static/js/jquery.qtip-1.0.0-rc3.min.js"></script>
<script>
	(function () {
		"use strict";

		// Tips Class
		// Scope: Private, only this file can reference this class
		// Usage: tipsClass.init();
		var tipsClass = {
			init : function () {
				$("a[rel^='prettyPopin']:eq(0)").prettyPopin({width:488,followScroll:true});
				
				$('.techno-img-wrapper img').qtip({
				   content: $(this).attr('alt'),
					 position: {
					      corner: {
					         target: 'topRight',
					         tooltip: 'bottomMiddle'
					      }
					 },
				   show: 'mouseover',
				   hide: 'mouseout'
				});
			}
		};

		// RollOver Class
		// Scope: Private, only this file can reference this class
		// Usage: rollOverClass.init();
		var rollOverClass = {
			init : function () {
				var src = $('img#main-picture').attr('src'); // Main picture
				var isRollover = false;

				// #1 Change main picture for color picture
				$('.color-wrapper').mouseover(function() {
					isRollover = true;
					$('img#main-picture').attr('src',$(this).find('img').attr('data-raw'));
				});

				// #2 Change color picture for main picture
				$('.color-wrapper').mouseout(function() {
					isRollover = false;
					setTimeout(function() {
						if(!isRollover) {
							$('img#main-picture').attr('src',src);
						}
					}, 1000); 
				});
			}
		};

		tipsClass.init();
		rollOverClass.init();
	}());
</script>	
{% endblock %}