Foreach (#1), automatic wrapping, feedback message, feature flags0.5.0

* added feedback message; $.each(...) functionality; restructuring wrapping; feature flags

* wrapper should have flexible height

* strength bar width should be limited

* Updated with changes for pull request

Reverted version to 0.5.0.  Reverted URL.  Fixed foreach.  Added 'use
strict'.  Granularized javascript.  Warn if no visualizations enabled.

* changing version to 0.5.0 in css

4 files changed, 212 insertions, 120 deletions

diff --git a/README.md b/README.md
index 394ca3b..c81314d 100644
--- a/README.md
+++ b/README.md
@@ -6,25 +6,26 @@ Combine jQuery and zxcvbn to create a password strength meter.
 How to use
 ----------
 
-Add the following wrapper to your document - preferably near the
-password field.
+As of 0.5.0, the wrapper will be automatically added beneath the target input field
 
-```HTML
-<div class="strengthify-wrapper"></div>
-```
-
-Add `jquery` (tested with 1.10.0), bootstrap's `tooltip.js`, `jquery.strengthify.js` and
+Add `jquery` (tested with 1.10.0), `jquery.strengthify.js` and
 `strengthify.css` to your document.
 
+If using the message option, include bootstrap.
+
+If using the titles option, include bootstrap's `tooltip.js`,
+
 ```HTML
 <script src="jquery-1.10.0.min.js"></script>
 <script src="tooltip.js"></script>
 <script src="jquery.strengthify.js"></script>
+<link rel="stylesheet" href="bootstrap.min.css" type="text/css">
 <link rel="stylesheet" href="strengthify.css" type="text/css">
 ```
 
 Because [zxcvbn](https://github.com/lowe/zxcvbn) is really
-heavyweight, it will be loaded asynchronously from `zxcvbn/zxcvbn.js`. This can however be configured with an optional parameter.
+heavyweight, it will be loaded asynchronously from `zxcvbn/zxcvbn.js`. 
+This can however be configured with an optional parameter.
 
 Then call `.strengthify` on the password input field.
 
@@ -41,6 +42,13 @@ Configuration
 The path and the title of the different strength categories can
 be configured with the first parameter of `.strengthify`.
 
+
+<dl>
+<dt>drawTitles</dt><dd> pop-up text (above)</dd>
+<dt>drawMessage</dt><dd> detailed message beneath input</dd>
+<dt>drawBars</dt><dd> password strength color progression bars beneath input</dd>
+</dl>
+
 Default:
 
 ```JSON
@@ -52,10 +60,12 @@ Default:
     "So-so",
     "Good",
     "Perfect"
-  ]
+  ],
+  "drawTitles": false,
+  "drawMessage": false,
+  "drawBars": true
 }
 ```
-
 Overwrite example:
 
 ```JavaScript
@@ -66,6 +76,16 @@ Versions
 --------
 
 <dl>
+  <dt>0.5.0</dt>
+  <dd> fairly substantial changes:
+    <ul>
+        <li>added feedback message</li>
+        <li> $.each(...) functionality</li>
+        <li> restructuring wrapping</li>
+        <li> feature flags</li>
+    </ul>
+     "strengthify-wrapper" added automatically beneath target input
+  </dd>
   <dt>0.4.1</dt>
   <dd>hotfix for missing ;</dd>
   <dt>0.4</dt>
diff --git a/bower.json b/bower.json
index b986b9a..ca9d686 100644
--- a/bower.json
+++ b/bower.json
@@ -1,8 +1,9 @@
 {
   "name": "strengthify",
-  "version": "0.4.2",
+  "version": "0.5.0",
   "homepage": "https://github.com/MorrisJobke/strengthify",
   "authors": [
+    "Eve Ragins <eve.ragins@eve-corp.com",
     "Morris Jobke <hey@morrisjobke.de>"
   ],
   "description": "Combine jQuery and zxcvbn to create a password strength meter.",
diff --git a/jquery.strengthify.js b/jquery.strengthify.js
index 26d06a5..c61e97d 100644
--- a/jquery.strengthify.js
+++ b/jquery.strengthify.js
@@ -2,8 +2,10 @@
  * Strengthify - show the weakness of a password (uses zxcvbn for this)
  * https://github.com/MorrisJobke/strengthify
  *
- * Version: 0.4.2
- * Author: Morris Jobke (github.com/MorrisJobke)
+ * Version: 0.5.0
+ * Author: Morris Jobke (github.com/MorrisJobke) - original
+ *         Eve Ragins @ Eve Corp (github.com/eve-corp)
+ *
  *
  * License:
  *
@@ -30,108 +32,169 @@
  */
 
 /* global jQuery */
-(function ($) {
-	$.fn.strengthify = function(paramOptions) {
-		var me = this,
-			defaults = {
-				zxcvbn: 'zxcvbn/zxcvbn.js',
-				titles: [
-					'Weakest',
-					'Weak',
-					'So-so',
-					'Good',
-					'Perfect'
-				]
-			},
-			options = $.extend(defaults, paramOptions),
-			drawStrengthify = function() {
-				var password = $(me).val(),
-					// hide strengthigy if no input is provided
-					opacity = (password === '') ? 0 : 1,
-					// calculate result
-					result = zxcvbn(password),
-					css = '',
-					// cache jQuery selections
-					$container = $('.strengthify-container'),
-					$wrapper = $('.strengthify-wrapper');
-
-				$wrapper.children().css(
-					'opacity',
-					opacity
-				).css(
-					'-ms-filter',
-					'"progid:DXImageTransform.Microsoft.Alpha(Opacity=' + opacity * 100 + ')"'
-				);
-
-				// style strengthify bar
-				// possible scores: 0-4
-				switch(result.score) {
-					case 0:
-					case 1:
-						css = 'password-bad';
-						break;
-					case 2:
-						css = 'password-medium';
-						break;
-					case 3:
-					case 4:
-						css = 'password-good';
-						break;
-				}
-
-				$container
-					.attr('class', css + ' strengthify-container')
-					// possible scores: 0-4
-					.css(
-						'width',
-						// if score is '0' it will be changed to '1' to
-						// not hide strengthify if the password is extremely weak
-						((result.score === 0 ? 1 : result.score) * 25) + '%'
-					);
-
-				// set a title for the wrapper
-				$wrapper.attr(
-					'title',
-					options.titles[result.score]
-				).tooltip({
-					placement: 'bottom',
-					trigger: 'manual',
-				}).tooltip(
-					'show'
-				);
-
-				if(opacity === 0) {
-					$wrapper.tooltip(
-						'hide'
-					);
-				}
-
-				// reset state for empty string password
-				if(password === '') {
-					$container.css('width', 0);
-				}
-
-			};
-
-		// add elements
-		$('.strengthify-wrapper')
-			.append('<div class="strengthify-bg" />')
-			.append('<div class="strengthify-container" />')
-			.append('<div class="strengthify-separator" style="left: 25%" />')
-			.append('<div class="strengthify-separator" style="left: 50%" />')
-			.append('<div class="strengthify-separator" style="left: 75%" />');
-
-		me.parents().on('scroll', drawStrengthify);
-
-		$.ajax({
-			cache: true,
-			dataType: 'script',
-			url: options.zxcvbn
-		}).done(function() {
-			me.bind('keyup input change', drawStrengthify);
-		});
-
-		return me;
-	};
-
-}(jQuery));
+(function($) {
+    $.fn.strengthify = function(paramOptions) {
+        "use strict";
+
+        var defaults = {
+            zxcvbn: 'zxcvbn/zxcvbn.js',
+            titles: [
+                'Weakest',
+                'Weak',
+                'So-so',
+                'Good',
+                'Perfect'
+            ],
+            drawTitles: false,
+            drawMessage: false,
+            drawBars: true
+        };
+
+        return this.each(function() {
+            var options = $.extend(defaults, paramOptions);
+
+            if (!options.drawTitles
+                && !options.drawMessage
+                && !options.drawBars)
+                console.warn("expect at least one of 'drawTitles', 'drawMessage', or 'drawBars' to be true");
+
+            function getWrapperFor(id) {
+                return $('div[data-strengthifyFor="' + id + '"]');
+            };
+
+            function drawStrengthify() {
+                var password = $(this).val(),
+                    elemId = $(this).attr('id'),
+                    // hide strengthify if no input is provided
+                    opacity = (password === '') ? 0 : 1,
+                    // calculate result
+                    result = zxcvbn(password),
+                    // setup some vars for later
+                    css = '',
+                    bsLevel = '',
+                    message = '',
+                    // cache jQuery selections
+                    $wrapper = getWrapperFor(elemId),
+                    $container = $wrapper.find('.strengthify-container'),
+                    $message = $wrapper.find('[data-strengthifyMessage]');
+
+
+                $wrapper.children()
+                    .css('opacity', opacity)
+                    .css('-ms-filter',
+                    '"progid:DXImageTransform.Microsoft.Alpha(Opacity=' + opacity * 100 + ')"'
+                    );
+
+                // style strengthify bar
+                // possible scores: 0-4
+                switch (result.score) {
+                    case 0:
+                    case 1:
+                        css = 'password-bad';
+                        bsLevel = 'danger';
+                        message = result.feedback ? result.feedback.suggestions.join('<br/>') : "";
+                        break;
+                    case 2:
+                        bsLevel = 'warning';
+                        message = result.feedback ? result.feedback.suggestions.join('<br/>') : "";
+                        css = 'password-medium';
+                        break;
+                    case 3:
+                        css = 'password-good';
+                        bsLevel = 'info';
+                        message = "Getting better.";
+                    case 4:
+                        css = 'password-good';
+                        bsLevel = 'success';
+                        message = "Looks good.";
+                        break;
+                }
+
+                if ($message) {
+                    $message.removeAttr('class');
+                    $message.addClass('bg-' + bsLevel);
+
+                    // reset state for empty string password
+                    if (password === '') {
+                        message = '';
+                    }
+                    $message.html(message);
+                }
+                if ($container) {
+                    $container
+                        .attr('class', css + ' strengthify-container')
+                        // possible scores: 0-4
+                        .css(
+                        'width',
+                        // if score is '0' it will be changed to '1' to
+                        // not hide strengthify if the password is extremely weak
+                        ((result.score === 0 ? 1 : result.score) * 25) + '%'
+                        );
+
+                    // reset state for empty string password
+                    if (password === '') {
+                        $container.css('width', 0);
+                    }
+                }
+
+                if (options.drawTitles) {
+                    // set a title for the wrapper
+                    $wrapper.attr(
+                        'title',
+                        options.titles[result.score]
+                    ).tooltip({
+                        placement: 'bottom',
+                        trigger: 'manual',
+                    }).tooltip(
+                        'fixTitle'
+                    ).tooltip(
+                        'show'
+                        );
+
+                    if (opacity === 0) {
+                        $wrapper.tooltip(
+                            'hide'
+                        );
+                    }
+                }
+            };
+
+            function init() {
+                var $elem = $(this),
+                    elemId = $elem.attr('id');
+                var drawSelf = drawStrengthify.bind(this);
+
+                // add elements
+                $elem.after('<div class="strengthify-wrapper" data-strengthifyFor="' + $elem.attr('id') + '"></div>');
+
+                if (options.drawBars) {
+                    getWrapperFor(elemId)
+                        .append('<div class="strengthify-bg" />')
+                        .append('<div class="strengthify-container" />')
+                        .append('<div class="strengthify-separator" style="left: 25%" />')
+                        .append('<div class="strengthify-separator" style="left: 50%" />')
+                        .append('<div class="strengthify-separator" style="left: 75%" />');
+                }
+
+                if (options.drawMessage) {
+                    getWrapperFor(elemId).append('<div data-strengthifyMessage></div>');
+                }
+
+                $elem.parent().on('scroll', drawSelf);
+
+                $.ajax({
+                    cache: true,
+                    dataType: 'script',
+                    url: options.zxcvbn
+                }).done(function() {
+                    $elem.bind('keyup input change', drawSelf);
+                });
+            };
+
+            init.call(this);
+
+            //return me;
+        });
+    };
+
+} (jQuery));
diff --git a/strengthify.css b/strengthify.css
index 5555cbd..0c686e5 100644
--- a/strengthify.css
+++ b/strengthify.css
@@ -1,11 +1,15 @@
 /**
  * Strengthify - show the weakness of a password (uses zxcvbn for this)
  * https://github.com/MorrisJobke/strengthify
- * Version: 0.4.2
+ * Version: 0.5.0
  * License: The MIT License (MIT)
  * Copyright (c) 2013 Morris Jobke <morris.jobke@gmail.com>
  */
 
+.strengthify-wrapper {
+    position: relative;
+}
+
 .strengthify-wrapper > * {
 	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 	filter: alpha(opacity=0);
@@ -15,7 +19,7 @@
 	transition:all .5s ease-in-out;
 }
 
-.strengthify-bg, .strengthify-container, .strengthify-wrapper, .strengthify-separator {
+.strengthify-bg, .strengthify-container, .strengthify-separator {
 	height: 3px;
 }
 
@@ -46,3 +50,7 @@
 .password-good {
 	background-color: #3C3;
 }
+
+div[data-strengthifyMessage] {
+    padding: 3px 8px;
+}