Get bookmarklet mostly setup

pinry/static/js/bookmarklet.js

@@ -0,0 +1,54 @@
+if (!jQuery) {
+    var head = document.getElementsByTagName('head')[0];
+    var script = document.createElement('script');
+    script.src = '//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js';
+    head.appendChild(script);
+}
+
+$(document).ready(function() { 
+    function createPage() {
+        var documentHeight = $(document).height();
+
+        $('body').append('<div class="pinry-images"></div>');
+        $('.pinry-images').css({
+            'position': 'absolute',
+            'z-index': '9001',
+            'background': 'rgba(255, 255, 255, 0.7)',
+            'top': '0',
+            'left': '0',
+            'right': '0',
+            'height': documentHeight
+        });
+    }
+
+    function template(imageUrl) {
+        var wrapper = document.createElement('div');
+        wrapper.class = 'pinry-image-wrapper';
+        image = document.createElement('img');
+        image.src = imageUrl;
+        image = $(image).css({
+            'max-width': '200px',
+        });
+        wrapper = $(wrapper);
+        wrapper.append(image);
+        wrapper.css({
+            'display': 'inline-block',
+            'padding': '15px',
+            'cursor': 'pointer'
+        });
+        wrapper.click(function() {
+            alert('Added');
+            $('.pinry-images').remove();
+        });
+        return wrapper;
+    }
+
+    createPage();
+
+    var images = $('body').find('img');
+    for (var i=0; i < images.length; i++) {
+        var image = images.eq(i);
+        var imageHtml = template(image.attr('src'));
+        $('.pinry-images').append(imageHtml);
+    }
+});

pinry/static/js/pinry.js

@@ -1,6 +1,13 @@
 $(window).load(function() {
 
     /**
+     * Setup our bookmarklet href
+     */
+    var bookmarkletUrl = 'http://'+document.location.hostname+'/static/js/bookmarklet.js';
+    var bookmarklet = "javascript:void((function(d){var s=d.createElement('script');s.src='"+bookmarkletUrl+"?'+Math.random()*9001;d.body.appendChild(s)})(document));";
+    $('.bookmarklet-link').attr('href', bookmarklet);
+
+    /**
      * tileLayout will simply tile/retile the block/pin container when run. This
      * was put into a function in order to adjust frequently on screen size 
      * changes.

pinry/templates/core/base.html

@@ -23,6 +23,7 @@
 
                 <ul class="nav pull-right">
                     {% if user.is_authenticated %}
+                        <li><a href="#" class="bookmarklet-link">Bookmarklet</a></li>
                         <li><a href="#new-pin" data-toggle="modal">New Pin</a></li>
                         <li><a href="{% url 'core:logout' %}">Logout</a></li>
                     {% else %}

pinry/templates/pins/bookmarklet.html

@@ -0,0 +1,7 @@
+{% extends 'core/base.html' %}
+
+{% block title %}Bookmarket{% endblock %}
+
+{% block yield %}
+    Test
+{% endblock %}