3 files changed, 37 insertions, 14 deletions

diff --git a/app/views/layouts/admin.html.erb b/app/views/layouts/admin.html.erb
index 5ae363f..8bbc0d5 100644
--- a/app/views/layouts/admin.html.erb
+++ b/app/views/layouts/admin.html.erb
@@ -13,6 +13,7 @@
     <link rel="stylesheet" href="/stylesheets/admin.css">
     <script src="/javascripts/admin_search.js"></script>
     <script src="/javascripts/admin_interface.js"></script>
+    <script src="/javascripts/related_assets.js"></script>
     <script>
       var ADMIN_SEARCH_URL = "<%= admin_search_path %>";
       var ADMIN_MENU_SEARCH_URL = "<%= admin_menu_search_path %>";
diff --git a/app/views/nodes/edit.html.erb b/app/views/nodes/edit.html.erb
index 1ac05e0..e0e51d8 100644
--- a/app/views/nodes/edit.html.erb
+++ b/app/views/nodes/edit.html.erb
@@ -76,24 +76,35 @@
 
       <div class="node_description">Images</div>
       <div class="node_content">
-        <ul id="image_box" rel="<%= @page.id %>">
-          <% @page.assets.images.each do |image| %>
-            <li rel="images_<%= image.id %>">
-              <%= image_tag(image.upload.url(:thumb)) %>
-            </li>
-          <% end %>
-        </ul>
-        <div class="clear_left right">
-          <a id="image_browser_toggle" class="unselected" href="#">image browser</a>
-        </div>
-        <div id="image_browser">
-          <ul>
-            <% Asset.images.each do |image| %>
-            <li rel="images_<%= image.id %>"><%= image_tag(image.upload.url(:thumb)) %></li>
+        <div id="related_assets"
+             data-search-url="<%= search_node_related_assets_path(@node) %>"
+             data-create-url="<%= node_related_assets_path(@node) %>">
+          <ul id="related_asset_list" class="thumbnail_list">
+            <% @page.related_assets.includes(:asset).each do |related| %>
+              <li data-url="<%= node_related_asset_path(@node, related) %>">
+                <span class="related_asset_handle"><%= icon("grip-vertical", library: "tabler", "aria-hidden": true) %></span>
+                <%= image_tag related.asset.upload.url(:thumb) %>
+                <button type="button" class="related_asset_remove" aria-label="Remove image">
+                  <%= icon("x", library: "tabler", "aria-hidden": true) %>
+                </button>
+              </li>
             <% end %>
           </ul>
+          <%= text_field_tag nil, nil, id: "related_asset_search_term", placeholder: "Search images to attach…", autocomplete: "off" %>
+          <div id="related_asset_search_results" class="search_results"></div>
         </div>
       </div>
+
+      <template id="related_asset_template">
+        <li>
+          <span class="related_asset_handle"><%= icon("grip-vertical", library: "tabler", "aria-hidden": true) %></span>
+          <img src="">
+          <button type="button" class="related_asset_remove" aria-label="Remove image">
+            <%= icon("x", library: "tabler", "aria-hidden": true) %>
+          </button>
+        </li>
+      </template>
+
     </div>
   </details>
 
diff --git a/app/views/nodes/show.html.erb b/app/views/nodes/show.html.erb
index 280e492..8ea03cd 100644
--- a/app/views/nodes/show.html.erb
+++ b/app/views/nodes/show.html.erb
@@ -152,6 +152,17 @@
     <div class="node_description">Tags</div>
     <div class="node_content node_info_group"><%= @page.tag_list %></div>
 
+    <% if @page.assets.images.any? %>
+      <div class="node_description">Images</div>
+      <div class="node_content node_info_group">
+        <ul class="thumbnail_list">
+          <% @page.assets.images.each do |asset| %>
+            <li><%= link_to image_tag(asset.upload.url(:thumb)), asset_path(asset) %></li>
+          <% end %>
+        </ul>
+      </div>
+    <% end %>
+
     <div class="node_description">Events</div>
     <div class="node_content node_info_group">
       <ul>