<script>
console.log('its rendering!')
  function timeNow(objectID) {
    var seconds = new Date().getTime() / 1000;
    document.getElementById("featured_number_" + objectID).value = Math.round(seconds);
  }

  function sink(objectID) {
    var seconds = new Date().getTime() / 1080;
    document.getElementById("featured_number_" + objectID).value = Math.round(seconds);
  }

  function submitForms() {
    var form = $(this);
    var valuesToSubmit = $(this).serialize();
    $.ajax({
      type: "POST",
      url: $(this).attr('action'), //sumbits it to the given url of the form
      data: valuesToSubmit,
      // dataType: "JSON" // you want a difference between normal and ajax-calls, and json is standard
    }).success(function (json) {
      console.log("success")
      form.parents(".row, .single-internal-listing").addClass("highlighted-bg")
      form.parents(".row, .single-internal-listing").addClass("highlighted-border")
      setTimeout(function () {
        form.parents(".row, .single-internal-listing").removeClass("highlighted-bg")
      }, 350)
    });
    return false; // prevents normal behaviour
  }

  $('.row').on("submit", "form", submitForms)
  $('.buffering-area-for-single-listing').on("submit", "form", submitForms)

  $(".toggle-buffering-butt").click(function (e) {
    e.preventDefault()
    console.log($(this).closest(".single-internal-article, .buffer-area").find(".buffering-area-for-single-article, .buffering-area-for-single-listing").toggle());
  })

  imageUploadButt = document.getElementById('image-upload-button')
  imageUpload = document.getElementById('image-upload')
  imageUploadSubmit = document.getElementById('image-upload-submit')

  if (imageUploadButt && imageUpload && imageUploadSubmit) {
    imageUploadButt.onclick = function (e) {
      e.preventDefault();
      document.getElementById('image-upload').click();
    }
    imageUpload.onchange = function (e) {
      var image = document.getElementById('image-upload').files;
      if (image.length > 0) {
        document.getElementById('image-upload-file-label').style = 'color:#888888';
        document.getElementById('image-upload-file-label').innerHTML = "Uploading...";
        document.getElementById('uploaded-image').style = 'display:none';
        document.getElementById('image-upload-submit').value = "uploading";
        setTimeout(function () {
          document.getElementById('image-upload-submit').click(function () {
          });
        }, 50)
      }
    }
    imageUploadSubmit.onclick = function (e) {
      e.preventDefault();
      var image = document.getElementById('image-upload').files;
      if (image.length > 0) {
        var ajaxReq = createAjaxReq();
        ajaxReq.onreadystatechange = uploadImageCb.bind(this, ajaxReq);
        ajaxReq.open('POST', '/image_uploads', true);
        ajaxReq.send(generateUploadFormdata(image));
      }
    }
  }

  function generateUploadFormdata(image) {
    var token = document.getElementsByName('authenticity_token')[0].value;
    var formData = new FormData();
    formData.append('authenticity_token', token);
    formData.append('image', image[0]);
    return formData;
  }

  function uploadImageCb(ajaxReq) {
    if (ajaxReq.status === 200 && ajaxReq.readyState === XMLHttpRequest.DONE) {
      var address = document.getElementById('uploaded-image');
      address.value = JSON.parse(ajaxReq.response).link;
      address.style.display = "inline-block";
      address.style.width = "90%";
      address.select();
      var uploadedMessage = '';
      document.getElementById('image-upload-file-label').innerHTML = uploadedMessage;
      document.getElementById('image-upload-file-label').style.color = '#00c673';
      document.getElementById('image-upload-submit').style.display = 'none';
    }
  }

  function createAjaxReq() {
    if (window.XMLHttpRequest) {
      return new XMLHttpRequest();
    } else {
      return new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
</script>
