Move resume keywords into a popover

css/style.sass

@@ -22,6 +22,9 @@ a
 #main-container
   background-color: $content-background
 
+.popover
+  max-width: 100%
+
 article.post
   div.meta
     font-size: 80%
@@ -352,40 +355,17 @@ body
     font-size: 50%
     color: #7f7f7f
     font-weight: normal
+    text-decoration: none
 
   #keywords-button:hover
     background-color: #4d4d4d
     color: #ffffff
     cursor: pointer
 
-  #keywords
-    position: absolute
-    top: 100px
-    left: 100px
-    font-size: 75%
-    background-color: #4d4d4d
-    color: #ffffff
-    text-align: justify
-    width: 50%
-    padding: .5em
-    border: 1px solid #f18137
-    z-index: 200
-    display: none
-
   .keyword-first-letter
     font-weight: bold
     color: #f18137
 
-  #keywords-close
-    width: 24px
-    height: 24px
-    background-image: url('../images/close.png')
-    z-index: 210
-    position: absolute
-    display: block
-    top: -13px
-    right: -13px
-
   .i
     font-style: italic
 

resume/index.html

@@ -2,8 +2,7 @@
 layout: default
 title: Resume
 ---
-<h3>Resume <span id="keywords-button">[ want some keywords only? click
-this! ]</span></h3>
+<h3>Resume <a id="keywords-button" data-toggle="popover" data-placement="bottom" role="button" tabindex="0" data-trigger="focus">[ want some keywords only? click this! ]</a></h3>
 
 <div itemscope itemtype="http://schema.org/Person">
     <p>
@@ -229,22 +228,17 @@ this! ]</span></h3>
 <div id="keywords"><span id="keywords-close"></span><span id="keywords-list"></span></div>
 
 <script type="text/javascript">
-Array.prototype.unique = function() {
-    var unique = [];
+    var keywords = null;
 
-    for (var i = 0; i < this.length; i++) {
-        if (unique.indexOf(this[i]) == -1) {
-            unique.push(this[i]);
-        }
-    }
+    $(function() {
+        $('[data-toggle="popover"]').popover({
+            'html': true,
+            'content': function(){
+                if (keywords == null) {
+                    keyword_tags = $('.keyword');
+                    keywords = new Array();
 
-    return unique;
-};
-
-keyword_tags = $('.keyword');
-keywords = new Array();
-
-for (i = 0; i < keyword_tags.length; i++) {
+                    for (i = 0; i < keyword_tags.length; i++) {
                         tag = keyword_tags[i];
 
                         if ($(tag).attr('title')) {
@@ -263,20 +257,12 @@ for (i = 0; i < keyword_tags.length; i++) {
                         kw = '<span class="keyword-first-letter">' + first_letter + '</span>' + remainder;
 
                         keywords.push(kw);
+                    }
+                }
 
-}
-
-$('#keywords-list').html(keywords.unique().sort(function(a, b) { if (a.toLowerCase() < b.toLowerCase()) return -1; else if (a.toLowerCase() > b.toLowerCase()) return 1; else return 0; }).join(', '));
-
-$('#keywords-button').click(function(e) {
-    $('#keywords').css({
-        top: e.pageY + 10,
-        left: e.pageX - 2
+                keywords = $.grep(keywords, function(el, index){return index === $.inArray(el, keywords);});
+                return keywords.sort(function(a, b) { if (a.toLowerCase() < b.toLowerCase()) return -1; else if (a.toLowerCase() > b.toLowerCase()) return 1; else return 0; }).join(', ');
+            }
+        });
     });
-    $('#keywords').fadeIn();
-});
-
-$('#keywords-close').click(function() {
-    $('#keywords').fadeOut();
-});
 </script>