anchor.diff:      <hr>
       <h6>Current showcase</h6>
       <div style="text-align: left">
  -      <% GroupShowcase.all.where(:screen => 1).each do |groupShowcase| %>
  +      <% GroupShowcase.all.where(:screen => 0).each do |groupShowcase| %>
   
             <h6><%= groupShowcase.name_identity %></h6>
             <div class="showcase-container">
  -
  -            <video autobuffer="autobuffer" preload="auto" style="width:100%;height:100%;" controls="controls" width="100%" height="100%" poster="<%= groupShowcase.showcases.first.video_show.video.url(:preview) %>">
  -              <source type="video/mp4" src="<%= groupShowcase.showcases.first.video_show.video.url(:mp4video) %>"/>
  -            </video>
  +            <% groupShowcase.showcases.all.each do |sh| %>
  +                <% if !sh.video_show.blank? %>
  +                    <video autobuffer="autobuffer" preload="auto" style="width:100%;" controls="controls" width="100%" height="100%" poster="<%= sh.video_show.video.url(:preview) %>">
  +                      <source type="video/mp4" src="<%= sh.video_show.video.url(:mp4video) %>"/>
  +                    </video>
  +                <% elsif !sh.image_show.blank? %>
  +                    <img class="image_showcase_ad" src="<%= sh.image_show.image.url(:medium) %>">
  +                <% elsif !sh.product_id.blank? %>
  +                    <a href="/admin/product/<%= sh.product_id %>"><img class="image_showcase_ad" src="<%= get_product(sh.product_id)['images'][0]['segments']['domain'] %>w200/h200/<%= item['images'][0]['segments']['suffix'] %>"></a>
  +                <% end %>
  +            <% end %>
   
             </div>
  -          <a id="<%= (groupShowcase.id).to_s+'btn' %>" class="showcase" href="#">Add to showcase</a>
  -
  -          <!-- The Modal -->
  -          <div id="<%= (groupShowcase.id).to_s+'modal' %>" class="modal">
  -
  -            <!-- Modal content -->
  -            <div class="modal-content">
  -              <span class="close">&times;</span>
  -              <form method="post" action="<%= showcases_path %>" enctype="multipart/form-data">
  -                <input class="hidden" value="<%= groupShowcase.screen %>>" name="screen">
  -                <input class="hidden" value="1" name="active">
  -                <select name="content_type" id="content-type">
  -                  <option value="0">Video</option>
  -                  <option value="1">Image</option>
  -                  <option value="2">Product</option>
  -                </select>
  -                <div id="video_f" class="">
  -                  <label for="image_f">Upload video</label>
  -                  <input type="file" name="video">
  -                  <label>Url</label>
  -                  <input style="width: 100%" type="text" name="url_association">
  -                </div>
  -                <div id="image_f" class="hidden">
  -                  <label for="image_f">Upload image</label>
  -                  <input type="file" name="image">
  -                  <label>Url</label>
  -                  <input style="width: 100%" type="text" name="url_association">
  -                </div>
  -
  -                <div id="product_f" class="hidden">
  -                  <label for="product_f">Product id</label>
  -                  <input style="width: 100%" type="text" name="product_id">
  -                </div>
  -
  -                <input class="hidden" name="group_showcase_id" type="text" value="<%= groupShowcase.id %>">
  -
  -                <script>
  -                    var content_type = document.getElementById('content-type');
  -                    content_type.addEventListener("change", function () {
  -                        switch (content_type.value) {
  -                            case "0":
  -                                document.getElementById('video_f').className = ' ';
  -                                document.getElementById('image_f').className = 'hidden';
  -                                document.getElementById('product_f').className = 'hidden';
  -                                break;
  -                            case "1":
  -                                document.getElementById('video_f').className = 'hidden';
  -                                document.getElementById('image_f').className = ' ';
  -                                document.getElementById('product_f').className = 'hidden';
  -                                break;
  -                            case "2":
  -                                document.getElementById('video_f').className = 'hidden';
  -                                document.getElementById('image_f').className = 'hidden';
  -                                document.getElementById('product_f').className = ' ';
  -                                break;
  -
  -                        }
  -                    });
  -                </script>
  -                <div>
  -                  <button type="submit">SUBMIT</button>
  -                </div>
  -              </form>
  -            </div>
  -
  -          </div>
  -
  -          <script>
  +          <a class="showcase" onclick="openModal('<%= groupShowcase.id %>')" href="#">Add to showcase</a>
  +
  +
  +      <% end %>
  +
  +      <!-- The Modal -->
  +      <div id="modal" class="modal">
  +
  +      </div>
  +
  +      <script>
  +          function openModal(id) {
  +
                 // Get the modal
  -              var modal = document.getElementById('<%= (groupShowcase.id).to_s+'modal' %>');
  -
  -              // Get the button that opens the modal
  -              var btn = document.getElementById("<%= (groupShowcase.id).to_s+'btn' %>");
  +              var modal = document.getElementById('modal');
  +
  +              var html = '<div class="modal-content">'
  +                  + '<span class="close">&times;</span>'
  +                  + '<form method="post" action="<%= showcases_path %>" enctype="multipart/form-data">'
  +                  + '<input class="hidden" value="1" name="active">'
  +                  + '<input class="hidden" value="1" name="screen">'
  +                  + '<select name="content_type" id="content-type">'
  +                  + '<option value="0">Video</option>'
  +                  + '<option value="1">Image</option>'
  +                  + '<option value="2">Product</option>'
  +                  + '</select>'
  +                  + '<div id="video_f" class="">'
  +                  + '<label for="image_f">Upload video</label>'
  +                  + '<input type="file" name="video">'
  +                  + '<label>Url</label>'
  +                  + '<input style="width: 100%" type="text" name="url_association">'
  +                  + '</div>'
  +                  + '<div id="image_f" class="hidden">'
  +                  + '<label for="image_f">Upload image</label>'
  +                  + '<input type="file" name="image">'
  +                  + '<label>Url</label>'
  +                  + '<input style="width: 100%" type="text" name="url_association">'
  +                  + '</div>'
  +
  +                  + '<div id="product_f" class="hidden">'
  +                  + '<label for="product_f">Product id</label>'
  +                  + '<input style="width: 100%" type="text" name="product_id">'
  +                  + '</div>'
  +
  +                  + '<input class="hidden" name="group_showcase_id" type="text" value="' + id + '">'
  +
  +                  + '<div>'
  +                  + '<button type="submit">SUBMIT</button>'
  +                  + '</div>'
  +                  + '</form>'
  +                  + '</div>';
  +
  +              modal.innerHTML = html;
  +              modal.style.display = "block";
   
                 // Get the <span> element that closes the modal
                 var span = document.getElementsByClassName("close")[0];
  -
  -              // When the user clicks on the button, open the modal
  -              btn.onclick = function () {
  -                  modal.style.display = "block";
  -              };
   
                 // When the user clicks on <span> (x), close the modal
                 span.onclick = function () {
  
positive.code:                   + '<span class="close">&times;</span>'
                    + '<form method="post" action="<%= showcases_path %>" enctype="multipart/form-data">'
                    + '<input class="hidden" value="1" name="active">'
                    + '<select name="content_type" id="content-type">'
                    + '<option value="0">Video</option>'
                    + '<option value="1">Image</option>'
  
negative.code:                   if (event.target === modal) {
                        modal.style.display = "none";
                    }
                };
  
                var content_type = document.getElementById('content-type');
                content_type.addEventListener("change", function () {
                    switch (content_type.value) {
                        case "0":
                            document.getElementById('video_f').className = ' ';
                            document.getElementById('image_f').className = 'hidden';
                            document.getElementById('product_f').className = 'hidden';
                            break;
                        case "1":
                            document.getElementById('video_f').className = 'hidden';
                            document.getElementById('image_f').className = ' ';
                            document.getElementById('product_f').className = 'hidden';
                            break;
                        case "2":
                            document.getElementById('video_f').className = 'hidden';
                            document.getElementById('image_f').className = 'hidden';
                            document.getElementById('product_f').className = ' ';
                            break;
  
                    }
                });
  
            }
        </script>
      </div>
  
    </div>
  