(function ($) {
  Drupal.behaviors.imgchangeonhover = {
    attach: function (context, settings) {

      /*
      * Exchanges an image with another having a _hover suffix in img.change-on-hover
      * images while hovering.
      * Reference: http://stackoverflow.com/questions/540349/change-the-image-source-using-jquery
      */
      $('img.change-on-hover').each(function() {
        var t = $(this);
        var src = t.attr('src'); // initial src
        var baseName = src.substring(0, src.lastIndexOf('.')); // let's get file name without extension
        t.hover(function() {
            $(this).attr('src', baseName + '_hover.' + /[^.]+$/.exec(src)); //last part is for extension
        }, function() {
            $(this).attr('src', baseName + '.' + /[^.]+$/.exec(src)); //removing '-over' from the name
        });
      });

      /* Fade-in effect for images. */
      $('img.fade-in').each(function() {
        $(this).fadeIn(800);  // ms
      });

      /* Slide-in effect for images. */
      $('img.slide-in').each(function() {
        $(this).slideDown(800);  // ms
      });

    }
  };
})(jQuery);;