dynamic home view with customization
diff --git a/planetstack/templates/admin/dashboard/customize.html b/planetstack/templates/admin/dashboard/customize.html
new file mode 100644
index 0000000..3f1d2c6
--- /dev/null
+++ b/planetstack/templates/admin/dashboard/customize.html
@@ -0,0 +1,85 @@
+<form>
+    <div class="customize_row">

+    <div class="customize_column">

+    <div>Available Dashboard Views</div>

+    <select name="selectfrom" id="select-from" multiple size="5">

+        {% for cp in unusedDashboards %}

+           <option value="{{ cp }}">{{ cp }}</option>
+        {% endfor %}

+    </select>

+    </div>

+    <div class="customize_column">

+    <br>

+    <div class="btn btn-success" id="btn-add">Add &raquo;</div><br><br>

+    <div class="btn btn-success" id="btn-remove">&laquo; Remove</div>

+    </div>

+    <div class="customize_column">

+    <div>Selected Dashboard Views</div>

+    <select name="selectto" id="select-to" multiple size="5">

+        {% for cp in dashboards %}

+           <option value="{{ cp }}">{{ cp }}</option>
+        {% endfor %}

+    </select>

+    <br>

+    <div class="btn btn-high btn-info" id="btn-save">Save</div>

+    </div>

+    <div class="customize_column">

+    <br>

+    <div class="btn btn-success" id="btn-up">Up</div><br><br>

+    <div class="btn btn-success" id="btn-down">Down</div>

+    </div>

+    </div>

+</form>

+
+<script>
+$(document).ready(function() {
+    $('#btn-add').click(function(){

+        $('#select-from option:selected').each( function() {

+                $('#select-to').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");

+            $(this).remove();

+        });

+    });

+    $('#btn-remove').click(function(){

+        $('#select-to option:selected').each( function() {

+            $('#select-from').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");

+            $(this).remove();

+        });

+    });

+    $('#btn-up').bind('click', function() {

+        $('#select-to option:selected').each( function() {

+            var newPos = $('#select-to option').index(this) - 1;

+            if (newPos > -1) {

+                $('#select-to option').eq(newPos).before("<option value='"+$(this).val()+"' selected='selected'>"+$(this).text()+"</option>");

+                $(this).remove();

+            }

+        });

+    });

+    $('#btn-down').bind('click', function() {

+        var countOptions = $('#select-to option').size();

+        $('#select-to option:selected').each( function() {

+            var newPos = $('#select-to option').index(this) + 1;

+            if (newPos < countOptions) {

+                $('#select-to option').eq(newPos).after("<option value='"+$(this).val()+"' selected='selected'>"+$(this).text()+"</option>");

+                $(this).remove();

+            }

+        });

+    });

+    $('#btn-save').bind('click', function() {

+         var items=[];

+         $("#select-to option").each(function() { items.push($(this).val()); });

+         $.ajax({

+                url: '/customize/',
+                dataType: 'json',
+                data: {
+                        dashboards: items.join(","),
+  		        csrfmiddlewaretoken: "{{ csrf_token }}" // < here
+                },
+                type: 'POST',
+                complete: function () {
+                        location.reload();
+                }
+        });

+    });
+});
+</script>
+