
$( "#ShapeMod" ).click(function() {
    $('#textProperty').css('display', 'none');
    $('#imageProperty').css('display', 'none');
    $('#drawingProperty').css('display', 'none');
    $('#StyleTextProperty').css('display', 'none');
    $('#shapesProperty').css('display', 'block');
});

    var trapezoid = [ {x:-100,y:-50},{x:100,y:-50},{x:150,y:50},{x:-150,y:50} ];
    var emerald = [ 	{x:850,y:75},
                    {x:958,y:137.5},
                    {x:958,y:262.5},
                    {x:850,y:325},
                    {x:742,y:262.5},
                    {x:742,y:137.5},
                    ];
    var star4 = [
        {x:0,y:0},
    {x:100,y:50},
    {x:200,y:0},
    {x:150,y:100},
    {x:200,y:200},
    {x:100,y:150},
    {x:0,y:200},
    {x:50,y:100},
    {x:0,y:0}
    ];
    var star5 = [ 	{x:350,y:75},
                {x:380,y:160},
                {x:470,y:160},
                {x:400,y:215},
                {x:423,y:301},
                {x:350,y:250},
                {x:277,y:301},
                {x:303,y:215},
                {x:231,y:161},
                {x:321,y:161},];
    var shape = new Array(trapezoid,emerald,star4,star5);

$( "#rectangle" ).click(function() {
    $('.child_menu').hide(300);
    //alert(canvas.getActiveObject().get('type'));
    // var id = canvas.getObjects().length;
    var id = globleVariableForAll;globleVariableForAll++;
    var rec = new fabric.Rect({
        top: 10,
        left: 10,
        width: 75,
        height: 100,
        fill: '',
        stroke: 'blue',
        strokeWidth: 2,
        layersActivatedKayId: id
    });
    canvas.add(rec);
    canvas.renderAll();
    
    
	//$("#containerLayers").prepend('<input id="checkBox" onclick="checkBox(this)" type="checkbox"><li id="'+ id +'" class="ui-state-default actived" style=" margin-top: -19px; margin-left: 12px; " ><img src="assets/shapes.png" style="width:30px;height:20px;margin-left:5px;" /><span class="ui-icon ui-icon-arrow-2-n-s"></span> text 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="assets/shapes.png" style="width:25px;height:auto;margin-left:10px;margin-top:-5px;" /><span class="ui-icon ui-icon-arrow-2-n-s"></span> Shapes 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();
});

$( "#circle1" ).click(function() {
    $('.child_menu').hide(300);
    // var id = canvas.getObjects().length;
    var id = globleVariableForAll;globleVariableForAll++;
    var cir = new fabric.Circle({
        top: 10,
        left: 100,
        radius: 50,
        fill: '',
        stroke: 'red',
        strokeWidth: 2,
        layersActivatedKayId: id
    });
    canvas.add(cir);
    canvas.renderAll();
    
    
	//$("#containerLayers").prepend('<input id="checkBox" onclick="checkBox(this)" type="checkbox"><li id="'+ id +'" class="ui-state-default actived" style=" margin-top: -19px; margin-left: 12px; " ><img src="assets/shapes.png" style="width:30px;height:20px;margin-left:5px;" /><span class="ui-icon ui-icon-arrow-2-n-s"></span> text 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="assets/shapes.png" style="width:25px;height:auto;margin-left:10px;margin-top:-5px;" /><span class="ui-icon ui-icon-arrow-2-n-s"></span> Shapes 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();
});

$( "#triangle" ).click(function() {
    $('.child_menu').hide(300);
    // var id = canvas.getObjects().length;
    var id = globleVariableForAll;globleVariableForAll++;
    var tri = new fabric.Triangle({
        top: 10,
        left: 200,
        width: 200, 
        height: 100,
        fill: '',
        stroke: 'green',
        strokeWidth: 2,
        layersActivatedKayId: id
    });
    canvas.add(tri);
    canvas.renderAll();
    
    
	//$("#containerLayers").prepend('<input id="checkBox" onclick="checkBox(this)" type="checkbox"><li id="'+ id +'" class="ui-state-default actived" style=" margin-top: -19px; margin-left: 12px; " ><img src="assets/shapes.png" style="width:30px;height:20px;margin-left:5px;" /><span class="ui-icon ui-icon-arrow-2-n-s"></span> text 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="assets/shapes.png" style="width:25px;height:auto;margin-left:10px;margin-top:-5px;" /><span class="ui-icon ui-icon-arrow-2-n-s"></span> Shapes 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();
    
});

$( "#circle2" ).click(function() {
    $('.child_menu').hide(300);
    // var id = canvas.getObjects().length;
    var id = globleVariableForAll;globleVariableForAll++;
    var eli = new fabric.Ellipse({
        top: 150,
        left: 10,
    /* Try same values rx, ry => circle */
        rx: 75,
        ry: 50,
        fill: '',
        stroke: 'yellow',
        strokeWidth: 4,
        layersActivatedKayId: id
    });
    canvas.add(eli);
    canvas.renderAll();
    
    
	//$("#containerLayers").prepend('<input id="checkBox" onclick="checkBox(this)" type="checkbox"><li id="'+ id +'" class="ui-state-default actived" style=" margin-top: -19px; margin-left: 12px; " ><img src="assets/shapes.png" style="width:30px;height:20px;margin-left:5px;" /><span class="ui-icon ui-icon-arrow-2-n-s"></span> text 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-8col-sm-8 col-xs-8" > <li id="'+ id +'" class="ui-state-default actived" style="  "><img src="assets/shapes.png" style="width:25px;height:auto;margin-left:10px;margin-top:-5px;" /><span class="ui-icon ui-icon-arrow-2-n-s"></span> Shapes 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();
    
});

$( "#hexagon" ).click(function() {
    $('.child_menu').hide(300);
    // var id = canvas.getObjects().length;
    var id = globleVariableForAll;globleVariableForAll++;
    var polyg = new fabric.Polygon(shape[1], {
        top: 180,
        left: 200,
        fill: '',
        stroke: 'black',
        strokeWidth: 2,
        layersActivatedKayId: id
    });
    canvas.add(polyg);
    canvas.renderAll();
    
    
	//$("#containerLayers").prepend('<input id="checkBox" onclick="checkBox(this)" type="checkbox"><li id="'+ id +'" class="ui-state-default actived" style=" margin-top: -19px; margin-left: 12px; " ><img src="assets/shapes.png" style="width:30px;height:20px;margin-left:5px;" /><span class="ui-icon ui-icon-arrow-2-n-s"></span> text 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="assets/shapes.png" style="width:25px;height:auto;margin-left:10px;margin-top:-5px;" /><span class="ui-icon ui-icon-arrow-2-n-s"></span> Shapes 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();
    
});

$("#shape_background").change(function(){
	var shape_background = document.getElementById("shape_background").value;
	canvas.getActiveObject().set('fill', shape_background);
	canvas.add(canvas.getActiveObject());
});

$("#shape_border").change(function(){
	var shape_border = document.getElementById("shape_border").value;
	canvas.getActiveObject().set('stroke', shape_border);
	canvas.add(canvas.getActiveObject());
});

$('#S_B_remove').on('change', function(){
	var shape_background = document.getElementById("shape_background").value;
   if (this.checked)
			{
				canvas.getActiveObject().set('fill', null);
				canvas.add(canvas.getActiveObject());
			}
			else
			{
				canvas.getActiveObject().set('fill', shape_background);
				canvas.add(canvas.getActiveObject());
			}
});
$('#S_border_remove').on('change', function(){
	var shape_border = document.getElementById("shape_border").value;
   if (this.checked)
			{
				canvas.getActiveObject().set('stroke', null);
				canvas.add(canvas.getActiveObject());
			}
			else
			{
				canvas.getActiveObject().set('stroke', shape_border);
				canvas.add(canvas.getActiveObject());
			}
});


