
//image filter carosel
$('#myCarousel').carousel({
    interval: 10000
  })
  
  $('.carousel .item').each(function(){
    var next = $(this).next();
    if (!next.length) {
      next = $(this).siblings(':first');
    }
    next.children(':first-child').clone().appendTo($(this));
    
    if (next.next().length>0) {
      next.next().children(':first-child').clone().appendTo($(this));
    }
    else {
        $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
    }
  });


$('#upload_btn').on({
    'dragover dragenter': function(e) {
        e.preventDefault();
        e.stopPropagation();
    },
    'drop': function(e) {
        $('.child_menu').hide(300);
		$('#textProperty').css('display', 'none');
		$('#drawingProperty').css('display', 'none');
		$('#shapesProperty').css('display', 'none');
		$('#StyleTextProperty').css('display', 'none');
		$('#imageProperty').css('display', 'block');
    

		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);
							//alert(data);
							var imgObj = new Image();
							imgObj.src = data;
							//alert(imgObj.src);
							//imgObj.src = "image.jpg";
							//alert(imgObj.src);
							imgObj.onload = function () {
							  
					           // var id = canvas.getObjects().length;
					           var id = globleVariableForAll;globleVariableForAll++;
								var image = new fabric.Image(imgObj);
								image.id = globleVariableForAll;
								image.set({
									left: 150,
									top: 50,
									padding: 10,
									cornersize: 10,
									position:'absolute',
									src:"imag.jpg",
									layersActivatedKayId: id,
								});//alert(image.src);						
								
								canvas.add(image);
								canvas.setActiveObject(image);
								canvas.renderAll();
				
								
								// $("#containerLayers").prepend('<input id="checkBox" onclick="checkBox(this,'+ id +')" type="checkbox"><li id="'+ id +'" class="ui-state-default actived" style=" margin-top: -19px; margin-left: 12px; " ><img src="'+ imgObj.src + '" style="width:30px;height:20px;margin-left:10px;margin-top:-5px;" /><span class="ui-icon ui-icon-arrow-2-n-s"></span> image item ' + id + '</li>');
								$("#containerLayers").prepend('<div class="row" id="layer'+id+'" style="background:#8080804a;padding:4px;" > <div class="col-md-2 col-sm-2 col-xs-2" > <input id="checkBox" onclick="checkBox(this,'+ id +')" type="checkbox" checked > </div> <div class="col-md-8 col-sm-8 col-xs-8" > <li id="'+ id +'" class="ui-state-default actived" style="  "><img src="'+ imgObj.src + '" style="width:25px;height:auto;margin-left:10px;margin-top:-5px;" /><span class="ui-icon ui-icon-arrow-2-n-s"></span> Image item ' + id + '</li> </div> <div class="col-md-2 col-sm-2 col-xs-2" > <i class="fa fa-trash" aria-hidden="true" onclick="DeleteLayers('+id+')" style="text-align: center;" ></i> </div></div>');
								$("#"+id).click(function(evt){
									if($(this).hasClass("actived")){
									// remove active state of all layers and objects
									$("li").removeClass("actived");
									canvas.deactivateAll();
									canvas.renderAll();            
									}
									else{
									  // remove active state of all layers and objects
									  $("li").removeClass("actived");
									  canvas.deactivateAll();
									  canvas.renderAll();
									  // activate layer and object      
									  $(this).addClass("actived");
									  var obj = canvas.item(id);
									  canvas.setActiveObject(obj);					  
									  canvas.renderAll();
									}        
									});  
									$("li").removeClass("actived");
                        			$("#"+id).addClass("actived");
                        		    canvas.deactivateAll();
                        		    canvas.renderAll();
							}
						// setTimeout(function(){ 
							
						//     document.getElementById("myNav1").style.width = "0%";
						//     document.getElementById("myBar").style.width = "0%";
							
						// }, 2000);
						}					
					});
			});
		}
	   else
	   { 
        //console.log(e.originalEvent instanceof DragEvent);
        var dataTransfer =  e.originalEvent.dataTransfer;
        if( dataTransfer && dataTransfer.files.length) {
            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;
				//alert(imgObj.src);
				//imgObj.src = "image.jpg";
				//alert(imgObj.src);
				imgObj.onload = function () {
				
		          //  var id = canvas.getObjects().length;
		          var id = globleVariableForAll;globleVariableForAll++;
					var image = new fabric.Image(imgObj);
					image.id = globleVariableForAll;
					image.set({
						left: 150,
						top: 50,
						padding: 10,
						cornersize: 10,
						position:'absolute',
						src:"imag.jpg",
						layersActivatedKayId: id,
					});//alert(image.src);



					canvas.add(image);
					canvas.setActiveObject(image);
					canvas.renderAll();
					
					
					//$("#containerLayers").prepend('<input id="checkBox" onclick="checkBox('+ id +')" type="checkbox"><li id="'+ id +'" class="ui-state-default actived" style=" margin-top: -19px; margin-left: 12px; " ><img src="'+ imgObj.src + '" style="width:30px;height:20px;margin-left:10px;margin-top:-5px;" /><span class="ui-icon ui-icon-arrow-2-n-s"></span> image item ' + id + '</li>');
					$("#containerLayers").prepend('<div class="row" id="layer'+id+'" style="background:#8080804a;padding:4px;" > <div class="col-md-2 col-sm-2 col-xs-2" > <input id="checkBox" onclick="checkBox(this,'+ id +')" type="checkbox" checked > </div> <div class="col-md-8 col-sm-8 col-xs-8" > <li id="'+ id +'" class="ui-state-default actived" style="  "><img src="'+ imgObj.src + '" style="width:25px;height:auto;margin-left:10px;margin-top:-5px;" /><span class="ui-icon ui-icon-arrow-2-n-s"></span> Image item ' + id + '</li> </div> <div class="col-md-2 col-sm-2 col-xs-2" > <i class="fa fa-trash" aria-hidden="true" onclick="DeleteLayers('+id+')" style="text-align: center;" ></i> </div></div>');
					$("#"+id).click(function(evt){
						if($(this).hasClass("actived")){
						// remove active state of all layers and objects
						$("li").removeClass("actived");
						canvas.deactivateAll();
						canvas.renderAll();            
						}
						else{
						  // remove active state of all layers and objects
						  $("li").removeClass("actived");
						  canvas.deactivateAll();
						  canvas.renderAll();
						  // activate layer and object      
						  $(this).addClass("actived");
						  var obj = canvas.item(id);
						  canvas.setActiveObject(obj);					  
						  canvas.renderAll();
						}        
						});
						$("li").removeClass("actived");
            			$("#"+id).addClass("actived");
            		    canvas.deactivateAll();
            		    canvas.renderAll();
					
				}
				
              }, this, file, $("#fileList"));
              reader.readAsDataURL(file);
            });
		}
	}
    }
});

// logodrop file click display start
window.onload = function() 
{
    var fileInput = document.getElementById('upload_btn');
    //var output = document.getElementById('output');
    //var buff = document.getElementById('buff');
            
    fileInput.addEventListener('change', function(e) 
    {
        var file = fileInput.files[0];
        var imageType = /image.*/;
        if (file.type.match(imageType)) 
        {
            var reader = new FileReader();
            reader.onload = function(e) 
            {
              //output.innerHTML = "";
              var img = new Image();
              img.src = reader.result;
                //   output.appendChild(img);
                //   buff.innerHTML = reader.result;
            
                var imgObj = new Image();
			
				imgObj.src = reader.result;
            
                imgObj.onload = function () {
				
		          //  var id = canvas.getObjects().length;
		          var id = globleVariableForAll;globleVariableForAll++;
					var image = new fabric.Image(imgObj);
					image.id = globleVariableForAll;
					image.set({
						left: 150,
						top: 50,
						padding: 10,
						cornersize: 10,
						position:'absolute',
						src:"imag.jpg",
						layersActivatedKayId: id,
					});//alert(image.src);



					canvas.add(image);
					canvas.setActiveObject(image);
					canvas.renderAll();
					
					
					//$("#containerLayers").prepend('<input id="checkBox" onclick="checkBox('+ id +')" type="checkbox"><li id="'+ id +'" class="ui-state-default actived" style=" margin-top: -19px; margin-left: 12px; " ><img src="'+ imgObj.src + '" style="width:30px;height:20px;margin-left:10px;margin-top:-5px;" /><span class="ui-icon ui-icon-arrow-2-n-s"></span> image item ' + id + '</li>');
					$("#containerLayers").prepend('<div class="row" id="layer'+id+'" style="background:#8080804a;padding:4px;" > <div class="col-md-2 col-sm-2 col-xs-2" > <input id="checkBox" onclick="checkBox(this,'+ id +')" type="checkbox" checked > </div> <div class="col-md-8 col-sm-8 col-xs-8" > <li id="'+ id +'" class="ui-state-default actived" style="  "><img src="'+ imgObj.src + '" style="width:25px;height:auto;margin-left:10px;margin-top:-5px;" /><span class="ui-icon ui-icon-arrow-2-n-s"></span> Image item ' + id + '</li> </div> <div class="col-md-2 col-sm-2 col-xs-2" > <i class="fa fa-trash" aria-hidden="true" onclick="DeleteLayers('+id+')" style="text-align: center;" ></i> </div></div>');
					$("#"+id).click(function(evt){
						if($(this).hasClass("actived")){
						// remove active state of all layers and objects
						$("li").removeClass("actived");
						canvas.deactivateAll();
						canvas.renderAll();            
						}
						else{
						  // remove active state of all layers and objects
						  $("li").removeClass("actived");
						  canvas.deactivateAll();
						  canvas.renderAll();
						  // activate layer and object      
						  $(this).addClass("actived");
						  var obj = canvas.item(id);
						  canvas.setActiveObject(obj);					  
						  canvas.renderAll();
						}        
						});
						$("li").removeClass("actived");
            			$("#"+id).addClass("actived");
            		    canvas.deactivateAll();
            		    canvas.renderAll();
					
				}
                
            }
            reader.readAsDataURL(file);             
        }
    else 
        {
          alert("File not supported!");
        }
    });
}
// logodrop file click display end


$(document).ready(function() {

	var acritveObjected = null;
	canvas.on('object:selected', function(e) {
		acritveObjected = canvas.getActiveObject();
		//canvas.add(w);
		canvas.renderAll();
	});

	$( "#original" ).click(function() { //alert
		canvas.getActiveObject().filters=[];
		canvas.getActiveObject().applyFilters();
		canvas.add(canvas.getActiveObject());
		//$(acritveObjected).css("-webkit-filter", "blur(100px)");
	});

// 	$(document).ready(function() {
	$( "#removeWhite" ).click(function() { 
		var filter = new fabric.Image.filters.RemoveWhite({
			threshold: 40,
			distance: 140
		  });
		  acritveObjected.filters.push(filter);
		  acritveObjected.applyFilters(canvas.renderAll.bind(canvas));
		  canvas.add(acritveObjected);
	});

// 	});

// 	$(document).ready(function() {
	$( "#grayscale" ).click(function() { 
		var filter = new fabric.Image.filters.Grayscale()
		canvas.getActiveObject().filters.push(filter);
		canvas.getActiveObject().applyFilters(canvas.renderAll.bind(canvas))
	});

// });

// $(document).ready(function() {

	$( "#sepia" ).click(function() {
		var filter = new fabric.Image.filters.Sepia();
		canvas.getActiveObject().filters.push(filter);
		canvas.getActiveObject().applyFilters(canvas.renderAll.bind(canvas));
	});
// });

// $(document).ready(function() {
	$( "#invert" ).click(function() {
		var filter = new fabric.Image.filters.Invert();
		canvas.getActiveObject().filters.push(filter);
		canvas.getActiveObject().applyFilters(canvas.renderAll.bind(canvas))
	 });
// 	});

// 	$(document).ready(function() {
	 $( "#noise" ).click(function() {
		canvas.getActiveObject().filters=[];
		acritveObjected.filters.push(new fabric.Image.filters.Noise({noise: 700}));
		acritveObjected.applyFilters(canvas.renderAll.bind(canvas));
		canvas.add(acritveObjected);
	 });
// 	});

// 	$(document).ready(function() {
	 $( "#sepia2" ).click(function() {
		canvas.getActiveObject().filters=[];
		var filter = new fabric.Image.filters.Sepia2();
		canvas.getActiveObject().filters.push(filter);
		canvas.getActiveObject().applyFilters(canvas.renderAll.bind(canvas));
	 });
// 	});

// 	$(document).ready(function() {
		$( "#brightImage" ).click(function() {
			canvas.getActiveObject().filters=[];
		var filter = new fabric.Image.filters.Brightness({
			brightness: 140
		  });
		  canvas.getActiveObject().filters.push(filter);
		  canvas.getActiveObject().applyFilters();		
	});
// });

// $(document).ready(function() {
	 $( "#pixelate" ).click(function() {
		var filter = new fabric.Image.filters.Pixelate({blocksize: 8});
		acritveObjected.applyFilters(canvas.renderAll.bind(canvas));
		canvas.add(acritveObjected);
	 });	
// });
});

function ClipArt(src) {
	$('.child_menu').hide(300);
	$('#textProperty').css('display', 'none');
	$('#drawingProperty').css('display', 'none');
	$('#shapesProperty').css('display', 'none');
	$('#imageProperty').css('display', 'block');
	fabric.Image.fromURL(src, function(oImg) {
	    
	   // var id = canvas.getObjects().length;
	   var id = globleVariableForAll;globleVariableForAll++;
	    
	    oImg.id = globleVariableForAll;
		oImg.scale(0.5).set('flipX', true);
		oImg.scaleToWidth(200);
        oImg.scaleToHeight(200);
        oImg.set('layersActivatedKayId', id);
		canvas.add(oImg);
		
		//$("#containerLayers").prepend('<input id="checkBox" onclick="checkBox(this,'+ id +')" type="checkbox"><li id="'+ id +'" class="ui-state-default actived" style=" margin-top: -19px; margin-left: 12px; "><img src="'+ src + '" style="width:30px;height:20px;margin-left:10px;margin-top:-5px;" /><span class="ui-icon ui-icon-arrow-2-n-s"></span> image item ' + id + '</li>');
		$("#containerLayers").prepend('<div class="row" id="layer'+id+'" style="background:#8080804a;padding:4px;" > <div class="col-md-2 col-sm-2 col-xs-2" > <input id="checkBox" onclick="checkBox(this,'+ id +')" type="checkbox" checked > </div> <div class="col-md-8 col-sm-8 col-xs-8" > <li id="'+ id +'" class="ui-state-default actived" style="  "><img src="'+ src + '" style="width:25px;height:auto;margin-left:10px;margin-top:-5px;" /><span class="ui-icon ui-icon-arrow-2-n-s"></span> Image item ' + id + '</li> </div> <div class="col-md-2 col-sm-2 col-xs-2" > <i class="fa fa-trash" aria-hidden="true" onclick="DeleteLayers('+id+')" style="text-align: center;" ></i> </div></div>');
		$("#"+id).click(function(evt){
			if($(this).hasClass("actived")){
			// remove active state of all layers and objects
			$("li").removeClass("actived");
			canvas.deactivateAll();
			canvas.renderAll();            
			}
			else{
			  // remove active state of all layers and objects
			  $("li").removeClass("actived");
			  canvas.deactivateAll();
			  canvas.renderAll();
			  // activate layer and object      
			  $(this).addClass("actived");
			  var obj = canvas.item(id);
			  canvas.setActiveObject(obj);					  
			  canvas.renderAll();
			}        
			});
			$("li").removeClass("actived");
			$("#"+id).addClass("actived");
		    canvas.deactivateAll();
		    canvas.renderAll();
	  });
}