diff --git a/scripts/ripples.js b/scripts/ripples.js
index 44bfc60a..d9ea87a6 100644
--- a/scripts/ripples.js
+++ b/scripts/ripples.js
@@ -1,167 +1,329 @@
 /* Copyright 2014+, Federico Zivolo, LICENSE at https://github.com/FezVrasta/bootstrap-material-design/blob/master/LICENSE.md */
 /* globals jQuery, navigator */
 
-(function($) {
+(function($, window, document, undefined) {
+  
+  "use strict";
 
-  // Detect if the browser supports transitions
-  $.support.transition = (function(){
-    var thisBody = document.body || document.documentElement,
-        thisStyle = thisBody.style,
-        support = (
-          thisStyle.transition !== undefined ||
-          thisStyle.WebkitTransition !== undefined ||
-          thisStyle.MozTransition !== undefined ||
-          thisStyle.MsTransition !== undefined ||
-          thisStyle.OTransition !== undefined
-        );
-    return support;
-  })();
-
-  $.ripples = function(options) {
-
-    // Default options
-    var defaultOptions = {
-      "target": ".btn:not(.btn-link), .card-image, .navbar a:not(.withoutripple), .nav-tabs a:not(.withoutripple), .withripple"
-    };
+  /**
+   * Define the name of the plugin
+   */
+  var ripples = "ripples";
 
 
-    function isTouch() {
-      return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
-    }
+  /**
+   * Get an instance of the plugin
+   */
+  var self = null;
 
 
-    // Fade out the ripple and then destroy it
-    function rippleOut(ripple) {
-
-      // Unbind events from ripple
-      ripple.off();
-
-      // Start the out animation
-      if ($.support.transition) {
-        ripple.addClass("ripple-out");
-      } else {
-        ripple.animate({
-          "opacity": 0
-        }, 100, function() {
-          ripple.trigger("transitionend");
-        });
-      }
-
-      // This function is called when the transition "out" ends
-      ripple.on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
-        ripple.remove();
-      });
-
-    }
-
-    // Apply custom options
-    options = $.extend(defaultOptions, options);
+  /**
+   * Define the defaults of the plugin
+   */
+  var defaults = {};
 
 
-    $(document)
-    .on("mousedown touchstart", options.target, function(e) {
-      if (isTouch() && e.type == "mousedown") {
+  /**
+   * Create the main plugin function
+   */
+  function Ripples(element, options) {
+    self = this;
+
+    this.element = $(element);
+
+    this.options = $.extend({}, defaults, options);
+
+    this._defaults = defaults;
+    this._name = ripples;
+
+    this.init();
+  }
+
+
+  /**
+   * Initialize the plugin
+   */
+  Ripples.prototype.init = function() {
+    var $element  = this.element;
+
+    $element.on("mousedown touchstart", function(event) {
+      /**
+       * Verify if the user is just touching on a device and return if so
+       */
+      if(self.isTouch() && event.type === "mousedown") {
         return false;
       }
 
-      var element = $(this);
 
-      // If the ripple wrapper does not exists, create it
-      if (!$(this).find(".ripple-wrapper").length) {
-        $(this).append("<div class=ripple-wrapper></div>");
+      /**
+       * Verify if the current element already has a ripple wrapper element and
+       * creates if it doesn"t
+       */
+      if(!($element.find(".ripple-wrapper").length)) {
+        $element.append("<div class=\"ripple-wrapper\"></div>");
       }
 
-      var wrapper = $(this).find(".ripple-wrapper");
+
+      /**
+       * Find the ripple wrapper 
+       */
+      var $wrapper = $element.find(".ripple-wrapper");
 
 
-      var wrapperOffset = wrapper.offset(),
-          relX,
-          relY;
-      if (!isTouch()) {
-        // Get the mouse position relative to the ripple wrapper
-        relX = e.pageX - wrapperOffset.left;
-        relY = e.pageY - wrapperOffset.top;
-      } else {
-        // Make sure the user is using only one finger and then get the touch position relative to the ripple wrapper
-        e = e.originalEvent;
-        if (e.touches.length === 1) {
-          relX = e.touches[0].pageX - wrapperOffset.left;
-          relY = e.touches[0].pageY - wrapperOffset.top;
-        } else {
-          return;
-        }
+      /**
+       * Get relY and relX positions
+       */
+      var relY = self.getRelY(event);
+      var relX = self.getRelX(event);
+
+
+      /**
+       * If relY and/or relX are false, return the event
+       */
+      if(!relY && !relX) {
+        return;
       }
 
-      // Meet the new ripple
-      var ripple = $("<div></div>");
 
-      // Add to it the ripple class
-      ripple.addClass("ripple");
-
-      // Position it in the right place
-      ripple.css({"left": relX, "top": relY});
-
-      // Set the background color of the ripple
-      ripple.css({"background-color": ($(this).data("ripple-color")) ? $(this).data("ripple-color") : window.getComputedStyle($(this)[0]).color});
-
-      // Spawn it
-      wrapper.append(ripple);
-
-      // Make sure the ripple has the styles applied (ugly hack but it works)
-      (function() { return window.getComputedStyle(ripple[0]).opacity; })();
-
-      // Set the new size
-      var size = (Math.max($(this).outerWidth(), $(this).outerHeight()) / ripple.outerWidth()) * 2.5;
+      /**
+       * Get the ripple color
+       */
+      var rippleColor = self.getRippleColor();
 
 
-      // Decide if use CSS transitions or jQuery transitions
-      if ($.support.transition) {
-        // Start the transition
-        ripple.css({
-          "-ms-transform": "scale(" + size + ")",
-          "-moz-transform": "scale(" + size + ")",
-          "-webkit-transform": "scale(" + size + ")",
-          "transform": "scale(" + size + ")"
+      /**
+       * Create the ripple element
+       */
+      var $ripple = $("<div></div>");
+
+      $ripple
+        .addClass("ripple")
+        .css({
+          "left": relX,
+          "top": relY,
+          "background-color": rippleColor
         });
-        ripple.addClass("ripple-on");
-        ripple.data("animating", "on");
-        ripple.data("mousedown", "on");
-      } else {
-        // Start the transition
-        ripple.animate({
-          "width": Math.max($(this).outerWidth(), $(this).outerHeight()) * 2,
-          "height": Math.max($(this).outerWidth(), $(this).outerHeight()) * 2,
-          "margin-left": Math.max($(this).outerWidth(), $(this).outerHeight()) * -1,
-          "margin-top": Math.max($(this).outerWidth(), $(this).outerHeight()) * -1,
-          "opacity": 0.2
-        }, 500, function() {
-          ripple.trigger("transitionend");
-        });
-      }
 
-      // This function is called when the transition "on" ends
+
+      /**
+       * Append the ripple to the wrapper
+       */
+      $wrapper.append($ripple);
+
+
+      /**
+       * Make sure the ripple has the styles applied (ugly hack but it works)
+       */
+      (function() { return window.getComputedStyle($ripple[0]).opacity; })();
+
+
+      /**
+       * Turn on the ripple animation
+       */
+      self.rippleOn($ripple);
+
+
+      /**
+       * Call the rippleEnd function when the transition "on" ends
+       */
       setTimeout(function() {
-        ripple.data("animating", "off");
-        if (ripple.data("mousedown") == "off") {
-          rippleOut(ripple);
-        }
+        self.rippleEnd($ripple);
       }, 500);
 
-      // On mouseup or on mouseleave, set the mousedown flag to "off" and try to destroy the ripple
-      element.on("mouseup mouseleave touchend", function() {
-        ripple.data("mousedown", "off");
-        // If the transition "on" is finished then we can destroy the ripple with transition "out"
-        if (ripple.data("animating") == "off") {
-          rippleOut(ripple);
+
+      /**
+       * Detect when the user leaves the element
+       */
+      $element.on("mouseup mouseleave touchend", function() {
+        $ripple.data("mousedown", "off");
+
+        if($ripple.data("animating") === "off") {
+          self.rippleOut($ripple);
         }
       });
 
     });
-
   };
 
-  $.fn.ripples = function() {
-    $.ripples({"target": $(this)});
+
+  /**
+   * Get the new size based on the element height/width and the ripple width
+   */
+  Ripples.prototype.getNewSize = function($ripple) {
+    var $element = this.element;
+
+    return (Math.max($element.outerWidth(), $element.outerHeight()) / $ripple.outerWidth()) * 2.5;
   };
 
-})(jQuery);
+
+  /**
+   * Get the relX
+   */
+  Ripples.prototype.getRelX = function(event) {
+    var $element = this.element;
+    var wrapperOffset = $element.find(".ripple-wrapper").offset();
+
+    if(!self.isTouch()) {
+      /**
+       * Get the mouse position relative to the ripple wrapper
+       */
+      return event.pageX - wrapperOffset.left;
+    } else {
+      /**
+       * Make sure the user is using only one finger and then get the touch 
+       * position relative to the ripple wrapper
+       */
+      event = event.originalEvent;
+
+      if(event.touches.length !== 1) {
+        return event.touches[0].pageX - wrapperOffset.left;
+      } 
+
+      return false;
+    }
+  };
+
+
+  /**
+   * Get the relY
+   */
+  Ripples.prototype.getRelY = function(event) {
+    var $element = this.element;
+    var wrapperOffset = $element.find(".ripple-wrapper").offset();
+
+    if(!self.isTouch()) {
+      /**
+       * Get the mouse position relative to the ripple wrapper
+       */
+      return event.pageY - wrapperOffset.top;
+    } else {
+      /**
+       * Make sure the user is using only one finger and then get the touch 
+       * position relative to the ripple wrapper
+       */
+      event = event.originalEvent;
+
+      if(event.touches.length !== 1) {
+        return event.touches[0].pageY - wrapperOffset.top;
+      } 
+
+      return false;
+    }
+  };
+
+
+  /**
+   * Get the ripple color
+   */
+  Ripples.prototype.getRippleColor = function() {
+    var $element = this.element;
+
+    var color = $element.data("ripple-color") ? $element.data("ripple-color") : window.getComputedStyle($element[0]).color;
+
+    return color;
+  };
+
+
+  /**
+   * Verify if the client browser has transistion support
+   */
+  Ripples.prototype.hasTransitionSupport = function() {
+    var thisBody  = document.body || document.documentElement;
+    var thisStyle = thisBody.style;
+
+    var support = (
+      thisStyle.transition !== undefined || 
+      thisStyle.WebkitTransition !== undefined || 
+      thisStyle.MozTransition !== undefined || 
+      thisStyle.MsTransition !== undefined || 
+      thisStyle.OTransition !== undefined
+    );
+
+    return support;
+  };
+
+
+  /**
+   * Verify if the client is using a mobile device
+   */
+  Ripples.prototype.isTouch = function() {
+    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+  };
+
+
+  /**
+   * End the animation of the ripple
+   */
+  Ripples.prototype.rippleEnd = function($ripple) {
+    $ripple.data("animating", "off");
+
+    if($ripple.data("mousedown") === "off") {
+      self.rippleOut($ripple);
+    }
+  };
+
+
+  /**
+   * Turn off the ripple effect
+   */
+  Ripples.prototype.rippleOut = function($ripple) {
+    $ripple.off();
+
+    if(self.hasTransitionSupport()) {
+      $ripple.addClass("ripple-out");
+    } else {
+      $ripple.animate({"opacity": 0}, 100, function() {
+        $ripple.trigger("transitionend");
+      });
+    }
+
+    $ripple.on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function() {
+      $ripple.remove();
+    });
+  };
+
+
+  /**
+   * Turn on the ripple effect
+   */
+  Ripples.prototype.rippleOn = function($ripple) {
+    var size = self.getNewSize($ripple);
+    var $element = this.element;
+
+    if(self.hasTransitionSupport()) {
+      $ripple
+        .css({
+          "-ms-transform": "scale(" + size + ")",
+          "-moz-transform": "scale(" + size + ")",
+          "-webkit-transform": "scale(" + size + ")",
+          "transform": "scale(" + size + ")"
+        })
+        .addClass("ripple-on")
+        .data("animating", "on")
+        .data("mousedown", "on");
+    } else {
+      $ripple.animate({
+        "width": Math.max($element.outerWidth(), $element.outerHeight()) * 2,
+        "height": Math.max($element.outerWidth(), $element.outerHeight()) * 2,
+        "margin-left": Math.max($element.outerWidth(), $element.outerHeight()) * (-1),
+        "margin-top": Math.max($element.outerWidth(), $element.outerHeight()) * (-1),
+        "opacity": 0.2
+      }, 500, function() {
+        $ripple.trigger("transitionend");
+      });
+    }
+  };
+
+
+  /**
+   * Create the jquery plugin function 
+   */
+  $.fn.ripples = function(options) {
+    return this.each(function() {
+      if(!$.data(this, "plugin_" + ripples)) {
+        $.data(this, "plugin_" + ripples, new Ripples(this, options));
+      }
+    });
+  };
+
+})(jQuery, window, document);