<%= form_for :vehicle_listing_images, :html => { :multipart => true } do |f| %>
  <%= hidden_field_tag :listing_id, @listing_id %>
  <div id="file_upload_area">
  </div>
<% end %>

<div id="image-container">
  <button id="primary_photo" class="btn right"><strong>Select Primary photo</strong></button>
  <input type="hidden" name="vehicle_listing[primary_photo_id]" value="<%= @listing.primary_photo_id %>" id="primary_photo_id" />
  <ul id="images">
    <% unless @images.blank? %>
      <% @images.each do |image| %>
      <li>
        <a class="image_link" href="<%= image.vehicle.url %>">
          <img class="<%= 'primary_photo' if @listing.primary_photo_id == image.id %>" src="<%= image.vehicle.url(:thumb) %>" />
        </a>
        <a href="<%= vehicle_listing_image_path(image) %>" class="remove_image">Remove</a>
      </li>
      <% end %>
    <% end %>
  </ul>
</div>
<%= stylesheet_link_tag "jquery.plupload.queue"%>
  <script type="text/javascript" src="//bp.yahooapis.com/2.4.21/browserplus-min.js"></script>
  <script type="text/javascript">
    // Convert divs to queue widgets when the DOM is ready
    <% if !current_user.blank? %>
      <% if current_user.is_dealer? || current_user.admin? %>
        var image_limit = "10";
      <% else %>
        var image_limit = "<%= @product.product_vehicle_listing_detail.photos %>";
      <% end %>
    <% else %>
      var image_limit = "<%= @product.product_vehicle_listing_detail.photos %>";
    <% end %>
    var image_count = 0;
    $(function() {
      //RoR - capture authenticity token
      var atoken = $("input[name=authenticity_token]").val();
      $("#file_upload_area").pluploadQueue({
        // General settings
        runtimes : 'html5,gears,browserplus,html4',
        url : "<%= vehicle_listing_images_path %>",
        max_file_size : '10mb',
        chunk_size : '1mb',
        unique_names : true,
        multiple_queues : true,
        //RoR - make sure form is multipart
        multipart: true,
        //RoR - make sure to send authenticity token and any other parameters that are on the plain html form
        multipart_params : {"[listing_id]" : "<%= @listing.id %>", "[cart_id]" : "<%= @cart.id %>", authenticity_token : atoken},

        // Specify what files to browse for
        filters : [
          {title : "Image files", extensions : "jpg,gif,png"},
          {title : "Zip files", extensions : "zip"}
        ],
        init: {
          BeforeUpload: function(up, file) {
          if (image_count >= image_limit) {
              up.stop();
              alert('Sorry, you may only upload a maximum of ' + image_limit + ' images');
              $(".plupload_upload_status").fadeOut(800, function(){
                $(".plupload_buttons").fadeIn(800);
              });
            }
          },
          FileUploaded: function(up, file, response) {
            image_count++
            data = jQuery.parseJSON(response.response);
            jQuery('#images').append('<li><a class="image_link" href="' + data.image_link + '">'
            + '<img src="' + data.image + '" /></a>'
            + '<input type="hidden" class="image_id" value="' + data.image_id + '" name="image_id" />'
            + '<a href="/vehicle_listing_images/' + data.image_id + '" class="remove_image">Remove</a></li>');
          }
        },
      });



      // Client side form validation
      $('form').submit(function(e) {
        var uploader = $('#file_upload').pluploadQueue();

        // Validate number of uploaded files
        if (uploader.total.uploaded == 0) {
          // Files in queue upload them first
          if (uploader.files.length > 0) {
            // When all files are uploaded submit form
            uploader.bind('UploadProgress', function() {
              if (uploader.total.uploaded == uploader.files.length)
                $('form').submit();
            });

            uploader.start();
          } else
            alert('You must at least upload one file.');

          e.preventDefault();
        }
      });
      jQuery('.remove_image').live('click', function(event) {
        event.preventDefault();
        var image = this;
        if (confirm('Are you sure you want to delete this image?')) {
          jQuery.post(this.href, { _method: 'delete' }, function(data) {
            if (data.status == 'success') {
              jQuery(image).parent().fadeOut('slow', function() {
                jQuery(this).remove();
                image_count--
              });
            } else {
              alert('We were unable to Delete the image, please try again');
            }
          }, 'json');
        }
      });

      jQuery('.image_link').live('click', function(event) {
        event.preventDefault();
        if (!$(this).hasClass('primary_hover')) {
          jQuery.colorbox({ href: this.href });
        }
      });
    });
  </script>