@using System.Drawing
@using System.Linq
@using MrCMS.Helpers
@model MrCMS.Web.Apps.Ecommerce.Entities.Products.ProductVariant

<div class="grey-border text-center product-image-box">
    @Html.RenderImage(Model.DisplayImageUrl, new Size { Width = 400, Height = 400 }, Model.Name, Model.Name, new { @class = "img-responsive center-block", itemprop = "image" })    
    @if (Model.CanShowEtag)
    {
        @RenderImage(Model.ETag.Image, attributes: new { @class = "img-responsive e-tag-image" })
    }
    <div class="clearfix"></div>

    <div class="row">
        <div class="col-sm-12">
            <div id="product-image-thumbnails">
                <ul class="thumbnails">
                    @foreach (var item in Model.Images.Skip(1))
                    {
                        <li>
                            <a href="@item.FileUrl" rel="prettyPhoto[product]">
                                @Html.RenderImage(item.FileUrl, new Size {Width = 77,Height=77}, Model.Name, Model.Name, new { @class = "img-responsive" })
                            </a>
                        </li>
                    }
                </ul>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
</div>
@{
    Html.IncludeScript("~/Apps/Ecommerce/Content/Scripts/jquery.prettyPhoto.js");
    Html.IncludeScript("~/Apps/Ecommerce/Content/Scripts/custom/product-gallery.js");
}
