// function SetFonts(fonts) { 
//     for (var i = 0; i < fonts.items.length; i++) {      
//      $('#styleFont')
//          .append($("<option></option>")
//          .attr("value", fonts.items[i].family)
//          .text(fonts.items[i].family));
//     }    
// }
// var script = document.createElement('script');
// script.src = 'https://www.googleapis.com/webfonts/v1/webfonts?key=API_KEY&callback=SetFonts';
// document.body.appendChild(script);

fabric.Object.prototype.transparentCorners = true;

var canvas = this.__canvas = new fabric.Canvas('canvas');

function Addtext() { 
    $('#drawingProperty').css('display', 'none');
    $('#imageProperty').css('display', 'none');
    $('#shapesProperty').css('display', 'none');
    $('#StyleTextProperty').css('display', 'none');
    $('#textProperty').css('display', 'block');
    

// var id = canvas.getObjects().length;
var id = globleVariableForAll;globleVariableForAll++;
canvas.add(new fabric.IText('Tap and Type', { 
      left: 50,
      top: 100,
      fontFamily: 'Aclonica',
      fill: '#333',
      underline: false,
      fontWeight: 'normal',
	  fontSize: 50,
	  layersActivatedKayId: id
}));


		$("#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/Fast_text.png" style="width:25px;height:auto;margin-left:10px;margin-top:-5px;" /><span class="ui-icon ui-icon-arrow-2-n-s"></span> Text 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();
}

$("#FontColorPic").change(function(){
    canvas.getActiveObject().setFill(this.value);
    canvas.renderAll();
}); 


$(document).ready(function() {
    $('input:radio[name=alignment]').change(function() {
        if (this.value == 'center') {
            canvas.getActiveObject().set('textAlign',this.value);
            canvas.renderAll();
        }
        else if (this.value == 'justify') {
            canvas.getActiveObject().set('textAlign',this.value);
            canvas.renderAll();
        }
        else if (this.value == 'left') {
            canvas.getActiveObject().set('textAlign',this.value);
            canvas.renderAll();
        }
        else if (this.value == 'right') {
            canvas.getActiveObject().set('textAlign',this.value);
            canvas.renderAll();
        }
    });
});

radios5 = document.getElementsByName("fonttype");  // wijzig naar button
for(var i = 0, max = radios5.length; i < max; i++) {
    radios5[i].onclick = function() {
        
        if(document.getElementById(this.id).checked == true) {
            if(this.id == "text-cmd-bold") {
                canvas.getActiveObject().set("fontWeight", "bold");
                canvas.renderAll();
            }
            if(this.id == "text-cmd-italic") {
                canvas.getActiveObject().set("fontStyle", "italic");
                canvas.renderAll();
            }
            if(this.id == "text-cmd-underline") {
                canvas.getActiveObject().set("underline", "true");
                canvas.renderAll();
            }
            if(this.id == "text-cmd-linethrough") {
                canvas.getActiveObject().set("linethrough", "true");
                canvas.renderAll();
            }
            if(this.id == "text-cmd-overline") {
                canvas.getActiveObject().set("overline", "true");
                canvas.renderAll();
            }
            
            
            
        } else { 
            if(this.id == "text-cmd-bold") {
                canvas.getActiveObject().set("fontWeight", "normal");
                canvas.renderAll();
            }
            if(this.id == "text-cmd-italic") {
                canvas.getActiveObject().set("fontStyle", "");
                canvas.renderAll();
            }  
            if(this.id == "text-cmd-underline") {
                canvas.getActiveObject().set("underline", "");
                canvas.renderAll();
            }
            if(this.id == "text-cmd-linethrough") {
                canvas.getActiveObject().set("linethrough", "");
                canvas.renderAll();
            }  
            if(this.id == "text-cmd-overline") {
                canvas.getActiveObject().set("overline", "");
                canvas.renderAll();
            }
        }
        
        
        canvas.renderAll();
    }
}

$('#myRange').on("change mousemove", function() {
    //$(this).next().html($(this).val());
    canvas.getActiveObject().setFontSize($(this).val());
    canvas.renderAll();
});

$(document).ready(function() {
$(function(){
    $('#font').fontselect().change(function(){
    
      // replace + signs with spaces for css fontFamily
      var font = $(this).val().replace(/\+/g, ' ');
      
      // split font into family and weight
      font = font.split(':');
      //alert(font[0]);
      // set family on paragraphs 
      //$('p').css('font-family', font[0]);
    //   canvas.getActiveObject().setFontFamily(font[0]);
    //   canvas.renderAll();
      canvas.getActiveObject().set("fontFamily", font[0]);
      canvas.renderAll();
    });
  });
});



