jQuery(function($) {
  var jqzoom_options = {
    position: "right",
    zoomWidth: 330,
    zoomHeight: 330,
    title: false,
    lensReset: true,
    showPreload: false
  };
  $("#painting").each(function() {
    $(this).prepend($('<div class="paintingtop" />')).addClass("bg");
    $(".image", $(this)).after($('<div class="paintingzoom" />'));
    $(".image", $(this)).after($('<div class="paintingbottom" />'));
  });
  $(".magnify").jqzoom(jqzoom_options);
  if ($("#thumbnails img.thumbnail").length && $("#painting").length) {
    $("#thumbnails img.thumbnail").click(function() {
      var thumbnail = $(this);
      // replace the image
      $("#painting .image img").attr("src", $(this).attr("data-image")).attr("alt", $(this).attr("data-title"));
      $("#painting .image a").attr("href", $(this).attr("data-image-large")).attr("title", $(this).attr("data-title"));
      // resize the container, image and link
      $("#painting").css({ 'width': $(this).attr("data-width")+'px' });
      $("#painting .image").css({ 'width': $(this).attr("data-width")+'px' });
      $("#painting .image img").css({ 'width': $(this).attr("data-width")+'px', 'height': $(this).attr("data-height")+'px' });
      $("#painting .image a").css({ 'width': $(this).attr("data-width")+'px', 'height': $(this).attr("data-height")+'px' });
      
      $("#painting .paintingtop").css({"width":"100%"});
      $("#painting .paintingbottom").css({"width":"100%"});
      $("#painting .paintingzoom").css({"right":"-62px"});
      
      // replace the details
      $("#painting .painting-details").empty();
      $("#painting .painting-title").html($(this).attr("data-title"));
      if ($(thumbnail).attr("data-media")) {
        $("#painting .painting-details").append($("<li/>").html($(thumbnail).attr("data-media")));
      }
      if ($(thumbnail).attr("data-size")) {
        $("#painting .painting-details").append($("<li/>").html($(thumbnail).attr("data-size")));
      }
      // add the price
      // buy/sold
      price_li = $("<li/>").addClass("price");
      sold = $(thumbnail).attr("data-sold");
      bs_div = $("<div/>");
      if (sold) {
        bs_div.addClass("sold");
      } else {
        if ($(thumbnail).attr("data-price")) { price_li.html($(thumbnail).attr("data-price")); }
        bs_div.addClass("buy").html($("<a/>").attr("href", $(thumbnail).attr("data-buyhref")).html("BUY"));
      }
      price_li.append(bs_div);
      
      $("#painting .painting-details").append(price_li);
    });
  }
});