/**
 * imageListView(jQuery) -> undefined
 * - ul (jQuery): A jQuery instance with an artist UL as its first element.
 *
 * Makes all images in an image list resize to the largest possible size for the
 * current viewport size.
**/
function imageListView(ul) {
  if (ul && ul[0]) {
    var el = ul[0];

    ul.find('img').each(function(i, img) {
      var ratio = img.width / img.height;
      $(img).attr('data-ratio', ratio);
    });

    var resize = function() {
      var height = el.parentNode.offsetHeight;

      ul.find('img').each(function(i, img) {
        var ratio = $(img).attr('data-ratio');

        img.height = height - $(img).next().height() - 10 - img.offsetTop;
        img.width = ratio * img.height;
      });
    };

    resize();

    $(window).resize(resize);
  }
}

/**
 * fullScreenImage(src)
**/
function fullScreenImage(parent, src) {
  if (!src) throw new Error("You must provide an image source.");

  function element(parent, tag, atts) {
    var el = document.createElement(tag);
    for (var at in atts) {
      el.setAttribute(at, atts[at]);
    }
    if (parent) parent.appendChild(el);
    return el;
  }

  var iWidth, iHeight;
  var wrapper = element(parent, "div", {
    "style": "z-index: 0; position:absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden;"
  });
  var img = element(wrapper, "img", {
    style: "visibility: hidden; position: absolute;"
  });

  function size() {
    var width =   parent.offsetWidth,
        height =  parent.offsetHeight, // TODO: subtract borderTopWidth and borderBottomWidth
        rx =      width / iWidth,
        ry =      height / iHeight,
        scale =   rx > ry ? rx : ry;

    img.width = parseInt(iWidth * scale, 10);
    img.height = parseInt(iHeight * scale, 10);

    var deltaX = Math.round((img.width - width) / 2);
    var deltaY = Math.round((img.height - height) / 2);

    img.style.left = (deltaX > 0) ? '-' + deltaX + 'px' : 0;
    img.style.top = (deltaY > 0) ? '-' + deltaY + 'px' : 0;
  }

  img.onload = function() {
    iWidth = img.clientWidth;
    iHeight = img.clientHeight;
    size();
    img.style.visibility = "visible";
    $(window).resize(size);
  };

  img.src = src;
}


$(function() {
  // When backgroundSize is not supported...
  if ('backgroundSize' in document.body.style === false) {

    // Grab the backgroundImage from the element...
    var primaryUrl = $('#primary').css('backgroundImage');
    if (primaryUrl) {
      // Unset the element's backgroundImage...
      $('#primary').css('backgroundImage', 'none');
      primaryUrl = primaryUrl.replace(/^url\(/,'').replace(/\)/,'');

      // Insert the backgroundImage as in Image that dynamically resizes.
      fullScreenImage(document.getElementById('primary'), primaryUrl);
    }

    // Do the same thing that we just did for the primary image.
    var secondaryUrl = $('#secondary').css('backgroundImage');
    if (secondaryUrl) {
      $('#secondary').css('backgroundImage', 'none');
      secondaryUrl = secondaryUrl.replace(/^url\(/,'').replace(/\)/,'');
      fullScreenImage(document.getElementById('secondary'), secondaryUrl);
    }
  }

  // On page load...
  imageListView($('ul.artist-work'));
});