diff --git a/jquery-plugin-patterns/amd-commonjs/pluginCore.js b/jquery-plugin-patterns/amd-commonjs/pluginCore.js
index d4835a8..54ef44b 100644
--- a/jquery-plugin-patterns/amd-commonjs/pluginCore.js
+++ b/jquery-plugin-patterns/amd-commonjs/pluginCore.js
@@ -1,4 +1,4 @@
-// Module/Plugin core
+// Module/Plugin core
 // Note: the wrapper code you see around the module is what enables
 // us to support multiple module formats and specifications by
 // mapping the arguments defined to what a specific format expects
@@ -7,41 +7,76 @@
 //
 // Note that dependencies can just as easily be declared if required
 // and should work as demonstrated earlier with the AMD module examples.
-
-(function ( name, definition ){
-  var theModule = definition(),
-      // this is considered "safe":
-      hasDefine = typeof define === 'function' && define.amd,
-      // hasDefine = typeof define === 'function',
-      hasExports = typeof module !== 'undefined' && module.exports;
-
-  if ( hasDefine ){ // AMD Module
-    define(theModule);
-  } else if ( hasExports ) { // Node.js Module
-    module.exports = theModule;
-  } else { // Assign to common namespaces or simply the global object (window)
-    (this.jQuery || this.ender || this.$ || this)[name] = theModule;
-  }
-})( 'core', function () {
-    var module = this;
-    module.plugins = [];
-    module.highlightColor = "yellow";
-    module.errorColor = "red";
-
-  // define the core module here and return the public API
-
-  // This is the highlight method used by the core highlightAll()
-  // method and all of the plugins highlighting elements different
-  // colors
-  module.highlight = function(el,strColor){
-    if(this.jQuery){
-      jQuery(el).css('background', strColor);
+(function(name, definition) {
+    var theModule = definition(), // this is considered "safe":
+        hasDefine = typeof define === 'function' && define.amd, // hasDefine = typeof define === 'function',
+        hasExports = typeof module !== 'undefined' && module.exports;
+    if (hasDefine) { // AMD Module
+        define(theModule);
+    } else if (hasExports) { // Node.js Module
+        module.exports = theModule;
+    } else { // Assign to common namespaces or simply the global object (window)
+        (this.jQuery || this.ender || this.$ || this)[name] = theModule;
+        console.log((window.jQuery)[name]);
     }
-  }
-  return {
-      highlightAll:function(){
-        module.highlight('div', module.highlightColor);
-      }
-  };
-
-});
\ No newline at end of file
+})('app', function() {
+
+    var core = this;
+
+    var defaults = { // default settings
+        name: '123'
+    };
+
+    var opts = {}; // extend options
+
+    var $document = $(document),
+        $window = $(window),
+        $html = $('html');
+
+    core.plugins = [];
+
+    var base = {
+        eventnames: {
+            scroll: 'myScroll',
+            resize: 'myResize'
+        },
+        scrollTop: 0,
+        highlightColor: 'yellow',
+        errorColor: 'red'
+    };
+
+    core.base = base; // set public base
+
+    // private
+    var setHandler = function(){
+        var _onScroll = function(){
+            base.scrollTop = $document.scrollTop();
+            $document.trigger(base.eventnames.scroll);
+        };
+        $document.on('scroll resize', _onScroll);
+    };
+
+    // define the core base here and return the public API
+    core.init = function(options) {
+        opts = $.extend({}, defaults, options);
+        console.log(opts);
+        setHandler();
+    };
+
+    // This is the highlight method used by the core highlightAll()
+    // method and all of the plugins highlighting elements different
+    // colors
+    core.highlight = function(el, strColor) {
+        $(el).css('background', strColor);
+    };
+
+    return {
+        init: function(options) {
+            core.init(options);
+        },
+        highlight: function() {
+            core.highlight(el, strColor);
+        }
+    };
+
+});
diff --git a/jquery-plugin-patterns/amd-commonjs/pluginExtension.js b/jquery-plugin-patterns/amd-commonjs/pluginExtension.js
index 590e6b4..2c930c1 100644
--- a/jquery-plugin-patterns/amd-commonjs/pluginExtension.js
+++ b/jquery-plugin-patterns/amd-commonjs/pluginExtension.js
@@ -1,16 +1,13 @@
-// Extension to module core
-
-(function ( name, definition ) {
+// Extension to module core
+(function(name, definition) {
     var theModule = definition(),
         hasDefine = typeof define === 'function',
         hasExports = typeof module !== 'undefined' && module.exports;
-
-    if ( hasDefine ) { // AMD Module
+    if (hasDefine) { // AMD Module
         define(theModule);
-    } else if ( hasExports ) { // Node.js Module
+    } else if (hasExports) { // Node.js Module
         module.exports = theModule;
     } else { // Assign to common namespaces or simply the global object (window)
-
         // account for for flat-file/global module extensions
         var obj = null;
         var namespaces = name.split(".");
@@ -24,21 +21,54 @@
             }
             obj = scope[packageName];
         }
-
     }
-})('core.plugin', function () {
+})('app.inview', function() {
+
+    var base = this.base;
+
+    var $document = $(document),
+        $window = $(window),
+        $html = $('html');
+
+    var onLoad = function(){
+
+    };
+    var onScroll = function(){
+        console.log(base);
+    };
+    var onResize = function(){
+
+    };
+    var init = function(){
+        $document.on(base.eventnames.load, onLoad);
+        $document.on(base.eventnames.scroll, onScroll);
+        $document.on(base.eventnames.resize, onResize);
+    };
+
+    init();
+
+    var test = function(){
+        console.log('test');
+    };
+
+
+
+    // console.log(base);
 
     // Define your module here and return the public API.
     // This code could be easily adapted with the core to
     // allow for methods that overwrite and extend core functionality
     // in order to expand the highlight method to do more if you wish.
     return {
-        setGreen: function ( el ) {
+        test: function(){
+            test();
+        },
+        setGreen: function(el) {
             highlight(el, 'green');
         },
-        setRed: function ( el ) {
-            highlight(el, errorColor);
+        setRed: function(el) {
+            highlight(el, base.errorColor);
         }
     };
 
-});
\ No newline at end of file
+});
diff --git a/jquery-plugin-patterns/amd-commonjs/usage.html b/jquery-plugin-patterns/amd-commonjs/usage.html
index 92fd88d..e7b12e4 100644
--- a/jquery-plugin-patterns/amd-commonjs/usage.html
+++ b/jquery-plugin-patterns/amd-commonjs/usage.html
@@ -5,42 +5,60 @@
 		<meta charset="utf-8">
 	</head>
 	<body>
-		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
-		<script src="pluginCore.js"></script>
-		<script src="pluginExtension.js"></script>
 
-		<script type="text/javascript">
+	<div class="test">
+		test
+	</div>
+	<div class="test" style="height: 120vh;">
+		test
+	</div>
 
-		$(function(){
+	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+	<script src="pluginCore.js"></script>
+	<script src="pluginExtension.js"></script>
 
-		    // Our plugin 'core' is exposed under a core namespace in
-		    // this example, which we first cache
-		    var core = $.core;
+	<script type="text/javascript">
 
-		    // Then use use some of the built-in core functionality to
-		    // highlight all divs in the page yellow
-		    core.highlightAll();
+	$(function(){
 
-		    // Access the plugins (extensions) loaded into the 'plugin'
-		    // namespace of our core module:
+	    // Our plugin 'core' is exposed under a core namespace in
+	    // this example, which we first cache
+	    var myApp = $.app;
 
-		    // Set the first div in the page to have a green background.
-		    core.plugin.setGreen("div:first");
-		    // Here we're making use of the core's 'highlight' method
-		    // under the hood from a plugin loaded in after it
+	    // Then use use some of the built-in core functionality to
+	    // highlight all divs in the page yellow
+	    myApp.init({
+			opt: 1
+		});
+
+	    // Access the plugins (extensions) loaded into the 'plugin'
+	    // namespace of our core module:
+
+	    // Set the first div in the page to have a green background.
+	    myApp.inview.setGreen('div:first');
+	    // Here we're making use of the core's 'highlight' method
+	    // under the hood from a plugin loaded in after it
+
+	    // Set the last div to the 'errorColor' property defined in
+	    // our core module/plugin. If you review the code further down,
+	    // you'll see how easy it is to consume properties and methods
+	    // between the core and other plugins
 
-		    // Set the last div to the 'errorColor' property defined in
-		    // our core module/plugin. If you review the code further down,
-		    // you'll see how easy it is to consume properties and methods
-		    // between the core and other plugins
-		    core.plugin.setRed('div:last');
+
+
+		var myApp2 = $.app;
+		myApp2.init({
+			opt: 2
 		});
+		myApp2.inview.setRed('div:last');
+		myApp2.inview.test();
+	});
+
+	</script>
 
-		</script>
-		
-		<script>
-		// References
-		// http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/
-		</script>
+	<script>
+	// References
+	// http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/
+	</script>
 	</body>
-</html>
\ No newline at end of file
+</html>
diff --git a/jquery-plugin-patterns/highly-configurable-mutable.custom.html b/jquery-plugin-patterns/highly-configurable-mutable.custom.html
new file mode 100644
index 0000000..0a0d6ef
--- /dev/null
+++ b/jquery-plugin-patterns/highly-configurable-mutable.custom.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+<head>
+<title>JavaScript Patterns</title>
+<meta charset="utf-8">
+<!--[if (gte IE 6)&(lte IE 8)]> <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script> <![endif]-->
+<!--[if (gt IE 8)|!(IE)]> <!--> <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <!--<![endif]-->
+<script>
+window.jQuery || document.write('<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"><\/script>');
+</script>
+</head>
+<body>
+<div id="app" data-plugin-options='{ "foo": "123" }' style="min-height: 200vh;"></div>
+<script src="highly-configurable-mutable.custom.js"></script>
+</body>
+</html>
diff --git a/jquery-plugin-patterns/highly-configurable-mutable.custom.js b/jquery-plugin-patterns/highly-configurable-mutable.custom.js
new file mode 100644
index 0000000..532af15
--- /dev/null
+++ b/jquery-plugin-patterns/highly-configurable-mutable.custom.js
@@ -0,0 +1,169 @@
+/*
+ * 글로벌 함수 선언
+ */
+;(function(global) {
+
+    global.hyphenate = function(_value) { // camelCase to hypen pattern, hyphenate(key)
+        var cache = {};
+        var replacer = function(_match) {
+            return '-' + _match[0].toLowerCase();
+        };
+        return cache[_value] || (cache[_value] = _value.replace(/([A-Z])/g, replacer));
+    }
+
+    global.round = function(n) { // 소숫점 4자리
+        return Math.round(n * 10000) / 10000;
+    }
+
+    global.random = function() { // 0~1000 난수
+        return Math.floor(Math.random() * 1000)
+    }
+
+    global.setUniqueId = function(_str) { // Unique Id 생성하기, 특수문자 제거 또는 난수 생성
+        return (typeof _str == 'string') ? _str.toLowerCase().replace(/[^a-z0-9)]/gi, '') : Math.floor(Math.random() * 1000)
+    };
+
+    global.extend = function(_source, _props) { // object 병합
+        var _key;
+        for (_key in _props) {
+            if (_props.hasOwnProperty(_key)) {
+                _source[_key] = _props[_key];
+            }
+        }
+        return _source;
+    };
+
+})(this);
+
+/*
+ * 'Highly configurable' mutable plugin boilerplate
+ * Author: @markdalgleish
+ * Further changes, comments: @addyosmani
+ * Licensed under the MIT license
+ */
+
+// Note that with this pattern, as per Alex Sexton's, the plugin logic
+// hasn't been nested in a jQuery plugin. Instead, we just use
+// jQuery for its instantiation.
+
+;(function($, window, document, undefined) {
+
+    'use strict';
+
+    var root = (function(g) { // global 셋업
+        return g;
+    })(this);
+
+    var Plugin = function(element, options) { // plugin constructor 생성
+
+        var base = { // base 선언
+            el: element,
+            $el: $(element),
+            appId: '',
+            scrollTop: 0
+        };
+
+        base.appId = setUniqueId(base.$el.attr('id')) + random(); // set unit app id
+
+        var $document = $(document), // dom 캐쉬
+            $window = $(window),
+            $html = $('html'),
+            $body = $('body'),
+            __this = this;
+
+        var metadata = base.$el.attr('data-plugin-options'); // option 에 취합하기 위한 metadata 생성, // <body id="app" data-plugin-options='{ "foo": "123" }'>
+        metadata = (metadata !== undefined) ? $.parseJSON(metadata) : {};
+
+        var defaults = { // default 셋팅
+            onScroll: noop,
+            namespace: '.app'
+        };
+
+        var opts = {}; // option 셋업
+
+        var timer = { // 타이머 셋업
+            scroll: null // 스크롤 타이머
+        };
+
+        // common functions
+
+        function noop() {}; // noop
+
+        function callFunc(_func){ // call function
+            if (typeof _func !== 'function') return false;
+            _func.call(null, base);
+        };
+
+        var handler = {
+            scroll: function(){
+                var onScroll = function () {
+                    base.scrollTop = $window.scrollTop();
+                    callFunc(opts.onScroll);
+                };
+                if (timer.scroll !== null) { // 타이머 해제
+                    clearTimeout(timer.scroll);
+                    timer.scroll = null;
+                }
+                timer.scroll = setTimeout(onScroll, 10);
+            },
+            init: function(){
+                $document.on('scroll' + opts.namespace, this.scroll); // set handler
+            },
+            destroy: function(){
+                $document.off('scroll' + opts.namespace, this.scroll); // set handler
+            }
+        };
+
+        function refresh() { // refresh
+            console.log('refresh');
+        };
+
+        function init() {
+            opts = $.extend({}, defaults, options, metadata); // option 셋업
+            handler.init(); // 핸들러 등록
+        };
+
+        init();
+
+        return {
+            init: init,
+            refresh: refresh
+        }
+
+    };
+
+    $.fn.plugin = function(options) { // jquery 플러그인 생성
+        return this.each(function() {
+            new Plugin(this, options);
+        });
+    };
+
+    window.Plugin = Plugin; // set global func
+
+})(jQuery, window, document);
+
+
+$(function() {
+
+    $('#app').plugin({
+        message: 'Goodbye World! 111',
+        onScroll: function(base) {
+            console.log(base);
+            base.$el.append($('<div>' + base.scrollTop + '</div>'));
+        }
+    });
+
+    var myApp = new Plugin(document.getElementById('app'), {
+        message: 'Goodbye World! 222'
+    });
+
+    var myApp2 = new Plugin(document.getElementById('app'), {
+        message: 'Goodbye World! 333'
+    }).refresh();
+
+});
+// References
+/*
+Creating Highly Configurable jQuery Plugins (by Mark Dalgleish) - http://goo.gl/1VwfP http://goo.gl/bg63
+Essential jQuery Plugin Patterns (by Addy Osmani) - http://goo.gl/oE0ge
+*/
diff --git a/jquery-plugin-patterns/highly-configurable-mutable.html b/jquery-plugin-patterns/highly-configurable-mutable.html
index 8e15cb0..b39238f 100644
--- a/jquery-plugin-patterns/highly-configurable-mutable.html
+++ b/jquery-plugin-patterns/highly-configurable-mutable.html
@@ -4,83 +4,12 @@
 		<title>JavaScript Patterns</title>
 		<meta charset="utf-8">
 	</head>
-	<body>
+	<body id="app" data-plugin-options='{ "foo": "123" }'>
+		<!--[if (gte IE 6)&(lte IE 8)]> <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script> <![endif]-->
+		<!--[if (gt IE 8)|!(IE)]> <!--> <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <!--<![endif]-->
 		<script>
-		/*
-		 * 'Highly configurable' mutable plugin boilerplate
-		 * Author: @markdalgleish
-		 * Further changes, comments: @addyosmani
-		 * Licensed under the MIT license
-		 */
-
-		// Note that with this pattern, as per Alex Sexton's, the plugin logic
-		// hasn't been nested in a jQuery plugin. Instead, we just use
-		// jQuery for its instantiation.
-
-		;(function( $, window, document, undefined ){
-
-		  // our plugin constructor
-		  var Plugin = function( elem, options ){
-		      this.elem = elem;
-		      this.$elem = $(elem);
-		      this.options = options;
-
-		      // This next line takes advantage of HTML5 data attributes
-		      // to support customization of the plugin on a per-element
-		      // basis. For example,
-		      // <div class=item' data-plugin-options='{"message":"Goodbye World!"}'></div>
-		      this.metadata = this.$elem.data( 'plugin-options' );
-		    };
-
-		  // the plugin prototype
-		  Plugin.prototype = {
-		    defaults: {
-		      message: 'Hello world!'
-		    },
-
-		    init: function() {
-		      // Introduce defaults that can be extended either
-		      // globally or using an object literal.
-		      this.config = $.extend({}, this.defaults, this.options,
-		      this.metadata);
-
-		      // Sample usage:
-		      // Set the message per instance:
-		      // $('#elem').plugin({ message: 'Goodbye World!'});
-		      // or
-		      // var p = new Plugin(document.getElementById('elem'),
-		      // { message: 'Goodbye World!'}).init()
-		      // or, set the global default message:
-		      // Plugin.defaults.message = 'Goodbye World!'
-
-		      this.sampleMethod();
-		      return this;
-		    },
-
-		    sampleMethod: function() {
-		      // eg. show the currently configured message
-		      // console.log(this.config.message);
-		    }
-		  }
-
-		  Plugin.defaults = Plugin.prototype.defaults;
-
-		  $.fn.plugin = function(options) {
-		    return this.each(function() {
-		      new Plugin(this, options).init();
-		    });
-		  };
-
-		  //optional: window.Plugin = Plugin;
-
-		})( jQuery, window , document );
-
-
-		// References
-		/*
-		Creating Highly Configurable jQuery Plugins (by Mark Dalgleish) - http://goo.gl/1VwfP http://goo.gl/bg63
-		Essential jQuery Plugin Patterns (by Addy Osmani) - http://goo.gl/oE0ge
-		*/
+		window.jQuery || document.write('<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"><\/script>');
 		</script>
+		<script src="highly-configurable-mutable.js"></script>
 	</body>
-</html>
\ No newline at end of file
+</html>
diff --git a/jquery-plugin-patterns/highly-configurable-mutable.js b/jquery-plugin-patterns/highly-configurable-mutable.js
new file mode 100644
index 0000000..62c6960
--- /dev/null
+++ b/jquery-plugin-patterns/highly-configurable-mutable.js
@@ -0,0 +1,107 @@
+/*
+ * 'Highly configurable' mutable plugin boilerplate
+ * Author: @markdalgleish
+ * Further changes, comments: @addyosmani
+ * Licensed under the MIT license
+ */
+
+// Note that with this pattern, as per Alex Sexton's, the plugin logic
+// hasn't been nested in a jQuery plugin. Instead, we just use
+// jQuery for its instantiation.
+
+;(function($, window, document, undefined) {
+
+    'use strict';
+
+    var Plugin = function(elem, options) { // our plugin constructor
+
+        var base = this;
+
+        base.elem = elem;
+        base.$elem = $(elem);
+        base.options = options;
+
+        // This next line takes advantage of HTML5 data attributes
+        // to support customization of the plugin on a per-element
+        // basis. For example,
+        // <div class=item' data-plugin-options='{"message":"Goodbye World!"}'></div>
+
+        base.metadata = base.$elem.attr('data-plugin-options'); // metadata
+
+    };
+
+    // the plugin prototype
+    Plugin.prototype = {
+
+        defaults: {
+            message: 'Hello world!'
+        },
+
+        build: function() {
+            // eg. show the currently configured message
+            console.log(this.config.message);
+        },
+
+        init: function() {
+
+            var metadata = $.parseJSON(this.metadata);
+
+
+            // console.info(JSON.parse(this.metadata));
+
+            // Introduce defaults that can be extended either
+            // globally or using an object literal.
+            this.config = $.extend({}, this.defaults, this.options, metadata);
+
+            console.log(this.config);
+
+            // Sample usage:
+            // Set the message per instance:
+            // $('#elem').plugin({ message: 'Goodbye World!'});
+
+            // or
+
+            // var p = new Plugin(document.getElementById('elem'),
+            // { message: 'Goodbye World!'}).init()
+            // or, set the global default message:
+            // Plugin.defaults.message = 'Goodbye World!'
+
+            this.build();
+
+            return this;
+        }
+    }
+
+    Plugin.defaults = Plugin.prototype.defaults;
+
+    $.fn.plugin = function(options) {
+        return this.each(function() {
+            new Plugin(this, options).init();
+        });
+    };
+
+    window.Plugin = Plugin; // set global func
+
+})(jQuery, window, document);
+
+
+$(function(){
+
+    $('#app').plugin({
+        message: 'Goodbye World! 111'
+    });
+
+    var myApp = new Plugin(document.getElementById('app'), {
+        message: 'Goodbye World! 222'
+    }).init();
+
+    var myApp2 = new Plugin(document.getElementById('app'), {
+        message: 'Goodbye World! 333'
+    }).init();
+
+});
+// References
+/*
+Creating Highly Configurable jQuery Plugins (by Mark Dalgleish) - http://goo.gl/1VwfP http://goo.gl/bg63
+Essential jQuery Plugin Patterns (by Addy Osmani) - http://goo.gl/oE0ge
+*/
diff --git a/jquery-plugin-patterns/jquery-mobile-ui-widget-factory.html b/jquery-plugin-patterns/jquery-mobile-ui-widget-factory.html
deleted file mode 100644
index 20995a7..0000000
--- a/jquery-plugin-patterns/jquery-mobile-ui-widget-factory.html
+++ /dev/null
@@ -1,130 +0,0 @@
-<!doctype html>
-<html lang="en">
-	<head>
-		<title>JavaScript Patterns</title>
-		<meta charset="utf-8">
-	</head>
-	<body>
-		<script>
-		/*!
-		 * (jQuery mobile) jQuery UI Widget-factory plugin boilerplate (for 1.8/9+)
-		 * Author: @scottjehl
-		 * Further changes: @addyosmani
-		 * Licensed under the MIT license
-		 */
-
-		;(function ( $, window, document, undefined ) {
-
-		    //define a widget under a namespace of your choice
-		    //here 'mobile' has been used in the first parameter
-		    $.widget( "mobile.widgetName", $.mobile.widget, {
-
-		        //Options to be used as defaults
-		        options: {
-		            foo: true,
-		            bar: false
-		        },
-
-		        _create: function() {
-		            // _create will automatically run the first time this
-		            // widget is called. Put the initial widget set-up code
-		            // here, then you can access the element on which
-		            // the widget was called via this.element
-		            // The options defined above can be accessed via
-		            // this.options
-
-		            //var m = this.element,
-		            //p = m.parents(":jqmData(role='page')"),
-		            //c = p.find(":jqmData(role='content')")
-		        },
-
-		        // Private methods/props start with underscores
-		        _dosomething: function(){ ... },
-
-		        // Public methods like these below can can be called
-		                // externally:
-		        // $("#myelem").foo( "enable", arguments );
-
-		        enable: function() { ... },
-
-		        // Destroy an instantiated plugin and clean up modifications
-		        // the widget has made to the DOM
-		        destroy: function () {
-		            //this.element.removeStuff();
-		            // For UI 1.8, destroy must be invoked from the
-		            // base widget
-		            $.Widget.prototype.destroy.call(this);
-		            // For UI 1.9, define _destroy instead and don't
-		            // worry about calling the base widget
-		        },
-
-		        methodB: function ( event ) {
-		            //_trigger dispatches callbacks the plugin user can
-		            // subscribe to
-		            //signature: _trigger( "callbackName" , [eventObject],
-		            //  [uiObject] )
-		            // eg. this._trigger( "hover", e /*where e.type ==
-		            // "mouseenter"*/, { hovered: $(e.target)});
-		            this._trigger('methodA', event, {
-		                key: value
-		            });
-		        },
-
-		        methodA: function ( event ) {
-		            this._trigger('dataChanged', event, {
-		                key: value
-		            });
-		        },
-
-		        //Respond to any changes the user makes to the option method
-		        _setOption: function ( key, value ) {
-		            switch (key) {
-		            case "someValue":
-		                //this.options.someValue = doSomethingWith( value );
-		                break;
-		            default:
-		                //this.options[ key ] = value;
-		                break;
-		            }
-
-		            // For UI 1.8, _setOption must be manually invoked from
-		            // the base widget
-		            $.Widget.prototype._setOption.apply(this, arguments);
-		            // For UI 1.9 the _super method can be used instead
-		            // this._super( "_setOption", key, value );
-		        }
-		    });
-
-		})( jQuery, window, document );
-
-		//usage: $("#myelem").foo( options );
-
-		/* Some additional notes - delete this section before using the boilerplate.
-
-		 We can also self-init this widget whenever a new page in jQuery Mobile is created. jQuery Mobile's "page" plugin dispatches a "create" event when a jQuery Mobile page (found via data-role=page attr) is first initialized.
-
-		We can listen for that event (called "pagecreate" ) and run our plugin automatically whenever a new page is created.
-
-		$(document).bind("pagecreate", function (e) {
-		    // In here, e.target refers to the page that was created
-		    // (it's the target of the pagecreate event)
-		    // So, we can simply find elements on this page that match a
-		    // selector of our choosing, and call our plugin on them.
-		    // Here's how we'd call our "foo" plugin on any element with a
-		    // data-role attribute of "foo":
-		    $(e.target).find("[data-role='foo']").foo(options);
-
-		    // Or, better yet, let's write the selector accounting for the configurable
-		    // data-attribute namespace
-		    $(e.target).find(":jqmData(role='foo')").foo(options);
-		});
-
-		That's it. Now you can simply reference the script containing your widget and pagecreate binding in a page running jQuery Mobile site, and it will automatically run like any other jQM plugin.
-		*/
-
-
-		// References
-		// http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/
-		</script>
-	</body>
-</html>
\ No newline at end of file
diff --git a/jquery-plugin-patterns/ui-widget-factory-bridge.html b/jquery-plugin-patterns/ui-widget-factory-bridge.html
deleted file mode 100644
index 7f1e862..0000000
--- a/jquery-plugin-patterns/ui-widget-factory-bridge.html
+++ /dev/null
@@ -1,110 +0,0 @@
-<!doctype html>
-<html lang="en">
-	<head>
-		<title>JavaScript Patterns</title>
-		<meta charset="utf-8">
-	</head>
-	<body>
-		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
-		<script>
-		/*!
-		 * jQuery UI Widget factory "bridge" plugin boilerplate
-		 * Author: @erichynds
-		 * Further changes, additional comments: @addyosmani
-		 * Licensed under the MIT license
-		 */
-
-		// a "widgetName" object constructor
-		// required: this must accept two arguments,
-		// options: an object of configuration options
-		// element: the DOM element the instance was created on
-		var widgetName = function( options, element ){
-		  this.name = "myWidgetName";
-		  this.options = options;
-		  this.element = element;
-		  this._init();
-		}
-
-		// the "widgetName" prototype
-		widgetName.prototype = {
-
-		    // _create will automatically run the first time this
-		    // widget is called
-		    _create: function(){
-		        // creation code
-		    },
-
-		    // required: initialization logic for the plugin goes into _init
-		    // This fires when your instance is first created and when
-		    // attempting to initialize the widget again (by the bridge)
-		    // after it has already been initialized.
-		    _init: function(){
-		        // init code
-		    },
-
-		    // required: objects to be used with the bridge must contain an
-		    // 'option'. Post-initialization, the logic for changing options
-		    // goes here.
-		    option: function( key, value ){
-
-		        // optional: get/change options post initialization
-		        // ignore if you don't require them.
-
-		        // signature: $('#foo').bar({ cool:false });
-		        if( $.isPlainObject( key ) ){
-		            this.options = $.extend( true, this.options, key );
-
-		        // signature: $('#foo').option('cool'); - getter
-		        } else if ( key && typeof value === "undefined" ){
-		            return this.options[ key ];
-
-		        // signature: $('#foo').bar('option', 'baz', false);
-		        } else {
-		            this.options[ key ] = value;
-		        }
-
-		        // required: option must return the current instance.
-		        // When re-initializing an instance on elements, option
-		        // is called first and is then chained to the _init method.
-		        return this;
-		    },
-
-		    // notice no underscore is used for public methods
-		    publicFunction: function(){
-		        console.log('public function');
-		    },
-
-		    // underscores are used for private methods
-		    _privateFunction: function(){
-		        console.log('private function');
-		    }
-		};
-
-		// usage:
-
-		// connect the widget obj to jQuery's API under the "foo" namespace
-		// $.widget.bridge("foo", widgetName);
-
-		// create an instance of the widget for use
-		// var instance = $("#elem").foo({
-		//     baz: true
-		// });
-
-		// your widget instance exists in the elem's data
-		// instance.data("foo").element; // => #elem element
-
-		// bridge allows you to call public methods...
-		// instance.foo("publicFunction"); // => "public method"
-
-		// bridge prevents calls to internal methods
-		// instance.foo("_privateFunction"); // => #elem element
-
-
-		// References
-		/*
-		Using $.widget.bridge Outside of the Widget Factory (by Eric Hynds) - http://goo.gl/UfPKn
-		Essential jQuery Plugin Patterns (by Addy Osmani) - http://goo.gl/oE0ge
-		*/
-		</script>
-	</body>
-</html>
\ No newline at end of file
diff --git a/jquery-plugin-patterns/ui-widget-factory-mobile.html b/jquery-plugin-patterns/ui-widget-factory-mobile.html
deleted file mode 100644
index 6b08ebd..0000000
--- a/jquery-plugin-patterns/ui-widget-factory-mobile.html
+++ /dev/null
@@ -1,113 +0,0 @@
-<!doctype html>
-<html lang="en">
-	<head>
-		<title>JavaScript Patterns</title>
-		<meta charset="utf-8">
-	</head>
-	<body>
-		<script>
-		/*!
-		 * jQuery UI Widget + RequireJS module boilerplate (for 1.8/9+)
-		 * Authors: @jrburke, @addyosmani
-		 * Licensed under the MIT license
-		 */
-
-		// Note from James:
-		//
-		// This assumes you are using the RequireJS+jQuery file, and
-		// that the following files are all in the same directory:
-		//
-		// - require-jquery.js
-		// - jquery-ui.custom.min.js (custom jQuery UI build with widget factory)
-		// - templates/
-		//    - asset.html
-		// - ao.myWidget.js 
-
-		// Then you can construct the widget like so: 
-
-		//ao.myWidget.js file:
-		define("ao.myWidget", ["jquery", "text!templates/asset.html", "jquery-ui.custom.min","jquery.tmpl"], function ($, assetHtml) {
-
-		    // define your widget under a namespace of your choice
-		    // 'ao' is used here as a demonstration
-		    $.widget( "ao.myWidget", { 
-
-		        // Options to be used as defaults
-		        options: {}, 
-
-		        // Set up widget (e.g. create element, apply theming,
-		        // bind events, etc.)
-		        _create: function () {
-
-		            // _create will automatically run the first time
-		            // this widget is called. Put the initial widget
-		            // set-up code here, then you can access the element
-		            // on which the widget was called via this.element.
-		            // The options defined above can be accessed via
-		            // this.options
-
-		            //this.element.addStuff();
-		            //this.element.addStuff();
-		            //this.element.tmpl(assetHtml).appendTo(this.content);
-		        },
-
-		        // Destroy an instantiated plugin and clean up modifications
-		        // that the widget has made to the DOM
-		        destroy: function () {
-		            //t his.element.removeStuff();
-		            // For UI 1.8, destroy must be invoked from the base
-		            // widget
-		            $.Widget.prototype.destroy.call( this );
-		            // For UI 1.9, define _destroy instead and don't worry
-		            // about calling the base widget
-		        },
-
-		        methodB: function ( event ) {
-		            // _trigger dispatches callbacks the plugin user can
-		            // subscribe to
-		            //signature: _trigger( "callbackName" , [eventObject],
-		            // [uiObject] )
-		            this._trigger('methodA', event, {
-		                key: value
-		            });
-		        },
-
-		        methodA: function ( event ) {
-		            this._trigger('dataChanged', event, {
-		                key: value
-		            });
-		        },
-
-		        //Respond to any changes the user makes to the option method
-		        _setOption: function ( key, value ) {
-		            switch (key) {
-		            case "someValue":
-		                //this.options.someValue = doSomethingWith( value );
-		                break;
-		            default:
-		                //this.options[ key ] = value;
-		                break;
-		            }
-
-		            // For UI 1.8, _setOption must be manually invoked from
-		            // the base widget
-		            $.Widget.prototype._setOption.apply( this, arguments );
-		            // For UI 1.9 the _super method can be used instead
-		            //this._super( "_setOption", key, value );
-		        }
-
-		        //somewhere assetHtml would be used for templating, depending
-		        // on your choice.
-		    });
-		}); 
-
-		// If you are going to use the RequireJS optimizer to combine files
-		// together, you can leave off the "ao.myWidget" argument to define:
-		// define(["jquery", "text!templates/asset.html", "jquery-ui.custom.min"], …
-
-
-		// References
-		// http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/
-		</script>
-	</body>
-</html>
\ No newline at end of file
diff --git a/jquery-plugin-patterns/ui-widget-factory.html b/jquery-plugin-patterns/ui-widget-factory.html
deleted file mode 100644
index 24ec815..0000000
--- a/jquery-plugin-patterns/ui-widget-factory.html
+++ /dev/null
@@ -1,108 +0,0 @@
-<!doctype html>
-<html lang="en">
-	<head>
-		<title>JavaScript Patterns</title>
-		<meta charset="utf-8">
-	</head>
-	<body>
-		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
-		<script>
-		/*!
-		 * jQuery UI Widget-factory plugin boilerplate (for 1.8/9+)
-		 * Author: @addyosmani
-		 * Further changes: @peolanha
-		 * Licensed under the MIT license
-		 */
-
-		;(function ( $, window, document, undefined ) {
-
-		    // define your widget under a namespace of your choice
-		    //  with additional parameters e.g.
-		    // $.widget( "namespace.widgetname", (optional) - an
-		    // existing widget prototype to inherit from, an object
-		    // literal to become the widget's prototype ); 
-
-		    $.widget( "namespace.widgetname" , {
-
-		        //Options to be used as defaults
-		        options: {
-		            someValue: null
-		        },
-
-		        //Setup widget (eg. element creation, apply theming
-		        // , bind events etc.)
-		        _create: function () {
-
-		            // _create will automatically run the first time
-		            // this widget is called. Put the initial widget
-		            // setup code here, then you can access the element
-		            // on which the widget was called via this.element.
-		            // The options defined above can be accessed
-		            // via this.options this.element.addStuff();
-		        },
-
-		        // Destroy an instantiated plugin and clean up
-		        // modifications the widget has made to the DOM
-		        destroy: function () {
-
-		            // this.element.removeStuff();
-		            // For UI 1.8, destroy must be invoked from the
-		            // base widget
-		            $.Widget.prototype.destroy.call(this);
-		            // For UI 1.9, define _destroy instead and don't
-		            // worry about
-		            // calling the base widget
-		        },
-
-		        methodB: function ( event ) {
-		            //_trigger dispatches callbacks the plugin user
-		            // can subscribe to
-		            // signature: _trigger( "callbackName" , [eventObject],
-		            // [uiObject] )
-		            // eg. this._trigger( "hover", e /*where e.type ==
-		            // "mouseenter"*/, { hovered: $(e.target)});
-		            this._trigger('methodA', event, {
-		                key: value
-		            });
-		        },
-
-		        methodA: function ( event ) {
-		            this._trigger('dataChanged', event, {
-		                key: value
-		            });
-		        },
-
-		        // Respond to any changes the user makes to the
-		        // option method
-		        _setOption: function ( key, value ) {
-		            switch (key) {
-		            case "someValue":
-		                //this.options.someValue = doSomethingWith( value );
-		                break;
-		            default:
-		                //this.options[ key ] = value;
-		                break;
-		            }
-
-		            // For UI 1.8, _setOption must be manually invoked
-		            // from the base widget
-		            $.Widget.prototype._setOption.apply( this, arguments );
-		            // For UI 1.9 the _super method can be used instead
-		            // this._super( "_setOption", key, value );
-		        }
-		    });
-
-		})( jQuery, window, document );
-
-
-		// References
-		/*
-		The jQuery UI Widget Factory (by Adam J. Sontag) - http://goo.gl/DLKEt
-		Introduction to Stateful Plugins and the Widget Factory (by Doug Neiner) - http://goo.gl/eTGhP
-		Widget Factory (by Scott González) - http://goo.gl/5qFQG
-		Understanding jQuery UI widgets: A tutorial (by Hacking at 0300) - http://goo.gl/rBhaF
-		Essential jQuery Plugin Patterns (by Addy Osmani) - http://goo.gl/oE0ge
-		*/
-		</script>
-	</body>
-</html>
\ No newline at end of file
diff --git a/jquery-plugin-patterns/ui-widget-requirejs-module.html b/jquery-plugin-patterns/ui-widget-requirejs-module.html
deleted file mode 100644
index 59b39dc..0000000
--- a/jquery-plugin-patterns/ui-widget-requirejs-module.html
+++ /dev/null
@@ -1,119 +0,0 @@
-<!doctype html>
-<html lang="en">
-	<head>
-		<title>JavaScript Patterns</title>
-		<meta charset="utf-8">
-	</head>
-	<body>
-		<script>
-		/*!
-		 * jQuery UI Widget + RequireJS module boilerplate (for 1.8/9+)
-		 * Authors: @jrburke, @addyosmani
-		 * Licensed under the MIT license
-		 */
-
-		// Note from James:
-		//
-		// This assumes you are using the RequireJS+jQuery file, and
-		// that the following files are all in the same directory:
-		//
-		// - require-jquery.js
-		// - jquery-ui.custom.min.js (custom jQuery UI build with widget factory)
-		// - templates/
-		//    - asset.html
-		// - ao.myWidget.js 
-
-		// Then you can construct the widget like so: 
-
-		//ao.myWidget.js file:
-		define("ao.myWidget", ["jquery", "text!templates/asset.html", "jquery-ui.custom.min","jquery.tmpl"], function ($, assetHtml) {
-
-		    // define your widget under a namespace of your choice
-		    // 'ao' is used here as a demonstration
-		    $.widget( "ao.myWidget", { 
-
-		        // Options to be used as defaults
-		        options: {}, 
-
-		        // Set up widget (e.g. create element, apply theming,
-		        // bind events, etc.)
-		        _create: function () {
-
-		            // _create will automatically run the first time
-		            // this widget is called. Put the initial widget
-		            // set-up code here, then you can access the element
-		            // on which the widget was called via this.element.
-		            // The options defined above can be accessed via
-		            // this.options
-
-		            //this.element.addStuff();
-		            //this.element.addStuff();
-		            //this.element.tmpl(assetHtml).appendTo(this.content);
-		        },
-
-		        // Destroy an instantiated plugin and clean up modifications
-		        // that the widget has made to the DOM
-		        destroy: function () {
-		            //t his.element.removeStuff();
-		            // For UI 1.8, destroy must be invoked from the base
-		            // widget
-		            $.Widget.prototype.destroy.call( this );
-		            // For UI 1.9, define _destroy instead and don't worry
-		            // about calling the base widget
-		        },
-
-		        methodB: function ( event ) {
-		            // _trigger dispatches callbacks the plugin user can
-		            // subscribe to
-		            //signature: _trigger( "callbackName" , [eventObject],
-		            // [uiObject] )
-		            this._trigger('methodA', event, {
-		                key: value
-		            });
-		        },
-
-		        methodA: function ( event ) {
-		            this._trigger('dataChanged', event, {
-		                key: value
-		            });
-		        },
-
-		        //Respond to any changes the user makes to the option method
-		        _setOption: function ( key, value ) {
-		            switch (key) {
-		            case "someValue":
-		                //this.options.someValue = doSomethingWith( value );
-		                break;
-		            default:
-		                //this.options[ key ] = value;
-		                break;
-		            }
-
-		            // For UI 1.8, _setOption must be manually invoked from
-		            // the base widget
-		            $.Widget.prototype._setOption.apply( this, arguments );
-		            // For UI 1.9 the _super method can be used instead
-		            //this._super( "_setOption", key, value );
-		        }
-
-		        //somewhere assetHtml would be used for templating, depending
-		        // on your choice.
-		    });
-		}); 
-
-		// If you are going to use the RequireJS optimizer to combine files
-		// together, you can leave off the "ao.myWidget" argument to define:
-		// define(["jquery", "text!templates/asset.html", "jquery-ui.custom.min"], …
-
-
-		// References
-		/*
-		Using RequireJS with jQuery (by Rebecca Murphey) - http://goo.gl/jpX31
-		Fast Modular Code With jQuery and RequireJS (by James Burke) - http://goo.gl/BMEYQ
-		jQuery’s Best Friends (by Alex Sexton) - http://jquerysbestfriends.com/
-		Managing Dependencies With RequireJS (by Ruslan Matveev) - http://goo.gl/zRRT9
-		Essential jQuery Plugin Patterns (by Addy Osmani) - http://goo.gl/oE0ge
-		*/
-		</script>
-	</body>
-</html>
\ No newline at end of file