$(document).on('dragover', function(e) {
    //e.target.style.width = "100%";
    //$("#myNav1").width("100%");
    e.preventDefault();return false;

});
var demoImage = 0;
$("#demoInput").on('drop', function(e) {
    //document.getElementById("myNav1").style.width = "0%";
     if(typeof $(e.originalEvent.dataTransfer.getData('text/html')).filter('img').attr('src') != 'undefined'){
        e.preventDefault();
        e.originalEvent.dataTransfer.items[0].getAsString(function(url){
        //alert(url);
        var code = url;
        $.ajax({
				type: "POST",
				url: "saveImage.php",
				data: {code:code},
				
				success: function(data){
					//$('#result').html(data);
					$('#canvascolor').append( '<input  class="canvasborder" type="image" src="'+data+'" onclick="changeIt(this.src)" style="width:50px;height:50px;border:2px solid black;margin-right:2px;margin-top:5px;">' );
				    
				}					
			});
        });
     }
     else
     {
        $('#canvascolor').append( '<input id="x'+demoImage+'" type="image" value="" src="" onclick="changeIt(this.src)" style="border:2px solid black;margin-right:2px;margin-top:5px;" ></input>' ); 
        
		var dataTransfer =  e.originalEvent.dataTransfer;
            e.preventDefault();
            e.stopPropagation();
            
            $.each( dataTransfer.files, function(i, file) { 
              var reader = new FileReader();
              reader.onload = $.proxy(function(file, $fileList, event) {
				
				var imgObj = new Image();
			
				imgObj.src = event.target.result;
				
				$("#x"+demoImage)
                    .attr('src', imgObj.src)
                    .width(50)
                    .height(50);
                    demoImage ++;
				
              }, this, file, $("#fileList"));
              reader.readAsDataURL(file);
            });
        
		}
     
    
});

function changeIt(x){
canvas.setBackgroundImage(x, canvas.renderAll.bind(canvas), {
    backgroundImageOpacity: 0.5,
    backgroundImageStretch: false
});
}

