$(document).ready(function() {
  /*
  $("#divId img").on({
    mouseover: function() {
      $(this).css({ cursor: "hand", borderColor: "orange" });
    },
    mouseout: function() {
      $(this).css({ cursor: "default", borderColor: "grey" });
    },

    click: function() {
      var imageURL = $(this).attr("src");
      $("#mainImage")
        .slideUp(800, function() {
          $(this).attr("src", imageURL);
        })
        .slideDown(800);
    }
  });
  */

  //The problem with the image gallery that we created beloww is that we are binding event handlers (mouseover, mouseout & click) to every image element. This means if you have 500 image elements, then there will be 1500 event handlers (mouseover, mouseout & click) in the memory and this may negatively affect the performance of your application.

  //A better way of doing the same from a performance standpoint is shown below. In this example, the event handlers are attached to the div element and not to the individual img elements. So, even if you have 500 img elements, there are only 3 event handlers in memory.

  //So how does this work
  //1. When you click on an img element, the event gets bubbled up to its parent (div) as the img element does not have an event handler
  //2. The bubbled event is handled by the the parent (div) element, as it has a click event handler.
  $("#divId").on(
    {
      mouseover: function() {
        $(this).css({
          cursor: "hand",
          "border-Color": "red"
        });
      },
      mouseout: function() {
        $(this).css({
          cursor: "default",
          "border-Color": "grey"
        });
      },
      click: function() {
        var imageURL = $(this).attr("src");
        var effect = $("#selectImgEffect").val();
        var duration = $("#selectImgDuration").val() * 1000;

        if (effect == "Slide") {
          $("#mainImage")
            .slideUp(duration, function() {
              $(this).attr("src", imageURL);
            })
            .slideDown(duration);
        } else {
          $("#mainImage")
            .fadeOut(duration, function() {
              $(this).attr("src", imageURL);
            })
            .fadeIn(duration);
        }
      }
    },
    "img"
  );

  var mainImageElement = $("#mainImage");
  var height = parseInt(mainImageElement.attr("height"));
  var width = parseInt(mainImageElement.attr("width"));

  $("#btnEnlarge").click(function() {
    height += 100;
    width += 100;
    mainImageElement.animate({ height: height, width: width });
  });

  $("#btnShrink").click(function() {
    height -= 100;
    width -= 100;
    mainImageElement.animate({ height: height, width: width });
  });
});