jquery integration as plugin

diff --git a/player/index.html b/player/index.html
index 99b6d31..589493c 100644
--- a/player/index.html
+++ b/player/index.html

@@ -1,6 +1,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
 <meta charset="UTF-8">
 <head>
+    <!-- <script src="extras/jquery-2.1.4.min.js"></script> -->
     <!-- build:js bodymovin.js -->
     <script src="js/main.js"></script>
     <script src="js/3rd_party/transformation-matrix.js"></script>
@@ -36,6 +37,14 @@
     <!-- endbuild -->
 </head>
 <body style="background-color:#666; margin: 0px;height: 100%; font-family: sans-serif;font-size: 10px">
-<div style="width:700px;height:300px;background-color:#000;display:inline-block" class="bodymovin" data-bm-path="exports/letter_i" data-bm-type="canvas" data-bm-loop="true" data-bm-prerender="true"></div>
+<div style="width:700px;height:300px;background-color:#000;display:inline-block" class="bodymovers bodymover1" data-bm-path="exports/letter_i" data-bm-type="canvas" data-bm-loop="true" data-bm-prerender="true"></div>
+<div style="width:100px;height:50px;background-color:#000;display:inline-block" class="bodymovers bodymover2" data-bm-path="exports/letter_i" data-bm-type="canvas" data-bm-loop="true" data-bm-prerender="true"></div>
+<script>
+    /*$('.bodymovers').bodymovin('registerAnimation',{
+        animType: 'canvas',
+        loop: true,
+        path: 'exports/letter_i'
+    });*/
+</script>
 </body>
 </html>

diff --git a/player/js/module.js b/player/js/module.js
index 59158fd..a91f4cf 100644
--- a/player/js/module.js
+++ b/player/js/module.js

@@ -73,4 +73,65 @@
 
     var readyStateCheckInterval = setInterval(checkReady, 100);
 
+    if(window.jQuery && jQuery.fn){
+
+        var initializePlugin = (function(){
+            var animationMap = [];
+
+            var iterateElements = function(elements,params){
+                elements.each(function(){
+                    params.wrapper = this;
+                    animationMap.push({
+                        elem : this,
+                        anim: bodymovin.loadAnimation(params)
+                    });
+                });
+                /*this.each(function() {
+                 // Do something to each element here.
+                 });*/
+            };
+
+            var performAction = function(elements,action,params){
+                var i, len = animationMap.length;
+                elements.each(function(){
+                    i = 0;
+                    while(i<len){
+                        if(animationMap[i].elem == this){
+                            animationMap[i].anim[action].apply(animationMap[i].anim,params);
+                            break;
+                        }
+                        i+=1;
+                    }
+                })
+            };
+
+            jQuery.fn.bodymovin = function(action,params){
+                switch(action){
+                    case 'pause':
+                    case 'play':
+                    case 'togglePause':
+                    case 'setSpeed':
+                    case 'setDirection':
+                    case 'moveFrame':
+                    case 'stop':
+                    case 'resize':
+                    case 'goToAndStop':
+                    case 'gotoAndStop':
+                        performAction(this,action,Array.prototype.slice.call(arguments,1));
+                        break;
+                    case 'registerAnimation':
+                    case 'loadAnimation':
+                        iterateElements(this,params);
+                        break;
+                    case 'setSubframeRendering':
+                        setSubframeRendering(params);
+                        break;
+                    case 'start':
+                        start();
+                        break;
+                }
+            }
+        }());
+    }
+
 }(window));
\ No newline at end of file