var preview_box = $("#sample")
$('.patterns').click(function(){
  $('.patterns').css({'border-color':'gray','-moz-box-shadow': 'none','-webkit-box-shadow':'none','box-shadow': 'none'});
  $(this).css({'border-color':'#EE0000','-moz-box-shadow': '0px 0px 9px 3px firebrick','-webkit-box-shadow':'0px 0px 9px 3px firebrick','box-shadow': '0px 0px 9px 3px firebrick'})
  var dither = $(this).css("background-image");
  preview_box.css("background-image", dither);
  });
$(".image_input").clicked = false; 
$(".image_input").click(function(){
  if(! $(this).clicked){
    $(this).attr("value", "");
    $(this).clicked = true;
  }
  })

function showResult(src){
  img = document.createElement("img");
  img.src = src;
  document.body.appendChild(img);
}
$("#submit").click(function(){
    var unique_id = Math.uuid(5,10).toString + "_imdither";

  if (! $(".uploadError").hasClass("dontshowme") ){
    $(".uploadError").addClass("dontshowme")  
  }
  
  var image_url = $(".image_input").val()
  if (! image_url || image_url == "Enter an image url here"){
    uploadError = $(".uploadError")
    uploadError.html("you didn't provide an image url")
    uploadError.removeClass("dontshowme")
    return false;
  }
  $.ajax({
    type: "POST",
    url: "process",
    data: { 
      url: image_url,
      unique_id: unique_id    
    }
  }).done(function( data ) {
    console.log( "Data Saved: " + data );
    showResult(data);
  });
})