jQuery(document).ready(function() {

  var zIndexHigher = 550;
  var zIndexLower = 0;

  jQuery('#product-images .slide img').mouseenter(function() {

    zIndexHigher += 1;

    jQuery(this).css("z-index", zIndexHigher);
    jQuery(this).css("border", "1px solid black");

    var top = -27;
    var left = -40;

    var parent = jQuery(jQuery(this).parent()).parent();
    var index = jQuery(parent).find('img').index(jQuery(this));

    if (index < 4) {
      top = 0;
    }
    if (index > 7) {
      top *= 2;
    }
    if (index % 4 == 0) {
      left = 0;
    }
    if (index % 4 == 3) {
      left *= 2;
    }

    jQuery(this).animate({
      width: 287,
      height: 194,
      top: top,
      left: left
    }, 150);
  });

  jQuery('#product-images .slide img').mouseleave(function() {

    zIndexLower += 1;

    jQuery(this).animate({
      width: 207,
      height: 140,
      top: 0,
      left: 0

    }, 150, function() {

      jQuery(this).css("z-index", zIndexLower);
      jQuery(this).css("border", "none");
    });
  });

});