// JavaScript Document
var canvas = new fabric.Canvas('shirtcanvas');
var canvast = new fabric.Canvas('trousercanvas');

var cans = $('#shirtcanvas').parent('.canvas-container');
var cant = $('#trousercanvas').parent('.canvas-container');
cant.css('display','none');

document.getElementById('backlogosb').style.display="none";


$('#showFront').click(function() {
	cans.css('display','block');
	cant.css('display','none');
	canvas.calcOffset();
	canvast.calcOffset();
	$('#showFront').addClass('active');
    $('#showBack').removeClass('active');
	//updateControls();
	document.getElementById('frontlogosb').style.display="block";
	document.getElementById('backlogosb').style.display="none";
	});

$('#showBack').click(function() {
	cans.css('display','none');
	cant.css('display','block');
	canvas.calcOffset();
	canvast.calcOffset();
	$('#showFront').removeClass('active');
    $('#showBack').addClass('active');
	//updateControls();
	document.getElementById('frontlogosb').style.display="none";
	document.getElementById('backlogosb').style.display="block";
	});


$('html').keyup(function(e){
if(e.which == 46) {
if(cans.css('display')=="block") {
var obd = canvas.getActiveObject();
canvas.remove(obd);
}
else if(cant.css('display')=="block") {
var obd = canvast.getActiveObject();
canvast.remove(obd);
} 
}
});






function loadBaseShirts() {

color1 = new fabric.Path('M600 0l-50 0 0 9.17 50 0 0 -9.17zm-550 590.83l-50 0 0 9.17 50 0 0 -9.17z');color2 = new fabric.Path('M600 0l-50 0 0 9.17 50 0 0 -9.17zm-550 590.83l-50 0 0 9.17 50 0 0 -9.17z');color3 = new fabric.Path('M600 0l-50 0 0 9.17 50 0 0 -9.17zm-550 590.83l-50 0 0 9.17 50 0 0 -9.17z');logo1 = new fabric.Path('M0.91 1.09c0,0.01 -0.01,0.01 -0.01,0.01 0,0 0,0.01 -0.01,0.01l-0.03 0.03c-0.01,0 -0.02,0.01 -0.02,0.01l-0.1 0.1c0,0 0,0 -0.01,0 -0.01,0.02 -0.03,0.03 -0.04,0.04l-0.03 0.03c-0.01,0.01 -0.02,0.01 -0.02,0.02 -0.01,-0.01 -0.06,-0.07 -0.07,-0.08 -0.03,-0.03 -0.07,-0.08 -0.1,-0.11 -0.01,-0.01 -0.01,-0.02 -0.02,-0.02 0,-0.01 -0.01,-0.01 -0.01,-0.02 -0.03,-0.03 -0.05,-0.05 -0.07,-0.08 -0.03,-0.02 -0.08,-0.09 -0.11,-0.11 -0.07,-0.05 -0.14,-0.05 -0.22,-0.02 -0.01,0.01 -0.03,0.03 -0.04,0.03 0,0.01 0.05,0.07 0.06,0.07l0.07 0.08c0,0 0,0 0.01,0.01 0,0 0.01,0.01 0.01,0.01 0.01,0.01 0.02,0.02 0.02,0.03l0.04 0.04c0.05,0.05 0.1,0.1 0.14,0.16 0,0 0.01,0 0.01,0.01l0.09 0.1c0.01,0.01 0.02,0.02 0.02,0.03 0.01,0.01 0.02,0.01 0.03,0.02 0.04,0.03 0.09,0.06 0.16,0.05 0.05,0 0.09,-0.03 0.13,-0.06 0.02,-0.02 0.04,-0.04 0.07,-0.06l0.07 -0.07c0.02,-0.02 0.13,-0.11 0.13,-0.12 0.01,0 0.01,-0.01 0.02,-0.01 0.06,-0.1 0.05,-0.19 -0.02,-0.27l-0.15 -0.17c-0.01,-0.01 -0.02,-0.02 -0.03,-0.03 0,0 -0.01,-0.01 -0.01,-0.01l-0.09 -0.1c-0.02,-0.02 -0.03,-0.04 -0.05,-0.06 -0.02,-0.02 -0.03,-0.04 -0.05,-0.05 -0.01,-0.02 -0.1,-0.11 -0.1,-0.12 -0.02,0.01 -0.05,0.07 -0.06,0.09 -0.02,0.06 -0.01,0.12 0.02,0.17 0.01,0.03 0.04,0.06 0.06,0.08 0.04,0.04 0.07,0.08 0.1,0.12l0.19 0.2c0.01,0.01 0.02,0.02 0.02,0.02zm-0.35 0.04c0,-0.01 0.01,-0.01 0.02,-0.02 0.04,-0.06 0.06,-0.12 0.04,-0.19 -0.02,-0.07 -0.05,-0.09 -0.09,-0.13l-0.03 -0.04c-0.01,0 -0.01,-0.01 -0.02,-0.02 -0.03,-0.02 -0.06,-0.06 -0.09,-0.09l-0.1 -0.11c-0.01,-0.01 -0.07,-0.07 -0.07,-0.08 0.01,0 0.01,-0.01 0.02,-0.01 0,-0.01 0,-0.01 0.01,-0.01l0.04 -0.04c0.01,-0.01 0.02,-0.02 0.03,-0.03 0.01,0 0.01,-0.01 0.02,-0.01l0.12 -0.11c0,-0.01 0.02,-0.03 0.03,-0.03l0.08 0.09c0.03,0.03 0.05,0.05 0.07,0.08l0.16 0.17c0.04,0.04 0.06,0.07 0.11,0.09 0.07,0.03 0.12,0.02 0.18,-0.01 0.01,0 0.03,-0.02 0.04,-0.03 0,0 -0.02,-0.02 -0.02,-0.02l-0.15 -0.17c-0.01,-0.01 -0.02,-0.02 -0.03,-0.03l-0.05 -0.05c-0.01,-0.01 -0.02,-0.02 -0.03,-0.03 0,-0.01 -0.01,-0.02 -0.02,-0.03 -0.03,-0.04 -0.07,-0.07 -0.1,-0.11l-0.05 -0.05c-0.03,-0.03 -0.03,-0.04 -0.06,-0.06 -0.03,-0.03 -0.09,-0.06 -0.16,-0.05 -0.03,0.01 -0.05,0.02 -0.07,0.03 -0.03,0.01 -0.04,0.03 -0.06,0.05 -0.03,0.02 -0.06,0.05 -0.09,0.07 -0.01,0.01 -0.01,0.02 -0.02,0.03 -0.02,0.01 -0.04,0.03 -0.06,0.05 -0.01,0.01 -0.09,0.08 -0.1,0.09 -0.01,0.02 -0.03,0.05 -0.04,0.09 -0.02,0.06 0,0.12 0.03,0.16 0.02,0.03 0.03,0.04 0.05,0.06l0.15 0.17c0.01,0 0.02,0.02 0.03,0.02 0.01,0.01 0.02,0.02 0.02,0.03l0.08 0.08c0.01,0.01 0.02,0.02 0.03,0.03l0.05 0.06c0.01,0.01 0.09,0.11 0.1,0.11z>');logo2 = new fabric.Path('M0.91 1.09c0,0.01 -0.01,0.01 -0.01,0.01 0,0 0,0.01 -0.01,0.01l-0.03 0.03c-0.01,0 -0.02,0.01 -0.02,0.01l-0.1 0.1c0,0 0,0 -0.01,0 -0.01,0.02 -0.03,0.03 -0.04,0.04l-0.03 0.03c-0.01,0.01 -0.02,0.01 -0.02,0.02 -0.01,-0.01 -0.06,-0.07 -0.07,-0.08 -0.03,-0.03 -0.07,-0.08 -0.1,-0.11 -0.01,-0.01 -0.01,-0.02 -0.02,-0.02 0,-0.01 -0.01,-0.01 -0.01,-0.02 -0.03,-0.03 -0.05,-0.05 -0.07,-0.08 -0.03,-0.02 -0.08,-0.09 -0.11,-0.11 -0.07,-0.05 -0.14,-0.05 -0.22,-0.02 -0.01,0.01 -0.03,0.03 -0.04,0.03 0,0.01 0.05,0.07 0.06,0.07l0.07 0.08c0,0 0,0 0.01,0.01 0,0 0.01,0.01 0.01,0.01 0.01,0.01 0.02,0.02 0.02,0.03l0.04 0.04c0.05,0.05 0.1,0.1 0.14,0.16 0,0 0.01,0 0.01,0.01l0.09 0.1c0.01,0.01 0.02,0.02 0.02,0.03 0.01,0.01 0.02,0.01 0.03,0.02 0.04,0.03 0.09,0.06 0.16,0.05 0.05,0 0.09,-0.03 0.13,-0.06 0.02,-0.02 0.04,-0.04 0.07,-0.06l0.07 -0.07c0.02,-0.02 0.13,-0.11 0.13,-0.12 0.01,0 0.01,-0.01 0.02,-0.01 0.06,-0.1 0.05,-0.19 -0.02,-0.27l-0.15 -0.17c-0.01,-0.01 -0.02,-0.02 -0.03,-0.03 0,0 -0.01,-0.01 -0.01,-0.01l-0.09 -0.1c-0.02,-0.02 -0.03,-0.04 -0.05,-0.06 -0.02,-0.02 -0.03,-0.04 -0.05,-0.05 -0.01,-0.02 -0.1,-0.11 -0.1,-0.12 -0.02,0.01 -0.05,0.07 -0.06,0.09 -0.02,0.06 -0.01,0.12 0.02,0.17 0.01,0.03 0.04,0.06 0.06,0.08 0.04,0.04 0.07,0.08 0.1,0.12l0.19 0.2c0.01,0.01 0.02,0.02 0.02,0.02zm-0.35 0.04c0,-0.01 0.01,-0.01 0.02,-0.02 0.04,-0.06 0.06,-0.12 0.04,-0.19 -0.02,-0.07 -0.05,-0.09 -0.09,-0.13l-0.03 -0.04c-0.01,0 -0.01,-0.01 -0.02,-0.02 -0.03,-0.02 -0.06,-0.06 -0.09,-0.09l-0.1 -0.11c-0.01,-0.01 -0.07,-0.07 -0.07,-0.08 0.01,0 0.01,-0.01 0.02,-0.01 0,-0.01 0,-0.01 0.01,-0.01l0.04 -0.04c0.01,-0.01 0.02,-0.02 0.03,-0.03 0.01,0 0.01,-0.01 0.02,-0.01l0.12 -0.11c0,-0.01 0.02,-0.03 0.03,-0.03l0.08 0.09c0.03,0.03 0.05,0.05 0.07,0.08l0.16 0.17c0.04,0.04 0.06,0.07 0.11,0.09 0.07,0.03 0.12,0.02 0.18,-0.01 0.01,0 0.03,-0.02 0.04,-0.03 0,0 -0.02,-0.02 -0.02,-0.02l-0.15 -0.17c-0.01,-0.01 -0.02,-0.02 -0.03,-0.03l-0.05 -0.05c-0.01,-0.01 -0.02,-0.02 -0.03,-0.03 0,-0.01 -0.01,-0.02 -0.02,-0.03 -0.03,-0.04 -0.07,-0.07 -0.1,-0.11l-0.05 -0.05c-0.03,-0.03 -0.03,-0.04 -0.06,-0.06 -0.03,-0.03 -0.09,-0.06 -0.16,-0.05 -0.03,0.01 -0.05,0.02 -0.07,0.03 -0.03,0.01 -0.04,0.03 -0.06,0.05 -0.03,0.02 -0.06,0.05 -0.09,0.07 -0.01,0.01 -0.01,0.02 -0.02,0.03 -0.02,0.01 -0.04,0.03 -0.06,0.05 -0.01,0.01 -0.09,0.08 -0.1,0.09 -0.01,0.02 -0.03,0.05 -0.04,0.09 -0.02,0.06 0,0.12 0.03,0.16 0.02,0.03 0.03,0.04 0.05,0.06l0.15 0.17c0.01,0 0.02,0.02 0.03,0.02 0.01,0.01 0.02,0.02 0.02,0.03l0.08 0.08c0.01,0.01 0.02,0.02 0.03,0.03l0.05 0.06c0.01,0.01 0.09,0.11 0.1,0.11z>');color4 = new fabric.Path('M600 0l-50 0 0 9.17 50 0 0 -9.17zm-550 590.83l-50 0 0 9.17 50 0 0 -9.17z');color5 = new fabric.Path('M600 0l-50 0 0 9.17 50 0 0 -9.17zm-550 590.83l-50 0 0 9.17 50 0 0 -9.17z');color6 = new fabric.Path('M600 0l-50 0 0 9.17 50 0 0 -9.17zm-550 590.83l-50 0 0 9.17 50 0 0 -9.17z');


var cl1='#96989A';
$('#spncl1').css('background-color', cl1);



var cl2='#6C2B2D';
$('#spncl2').css('background-color', cl2);



var cl3='#282829';
$('#spncl3').css('background-color', cl3);


canvas.add(color1.set({ scaleX: 1, scaleY: 1, flipY: false, originX: "center", originY: "center", fill: cl1 }));canvas.add(color2.set({ scaleX: 1, scaleY: 1, flipY: false, originX: "center", originY: "center", fill: cl2 }));canvas.add(color3.set({ scaleX: 1, scaleY: 1, flipY: false, originX: "center", originY: "center", fill: cl3 }));canvas.add(logo1.set({ left: 120, top: 100, scaleX: 15, scaleY: 15, flipY: false, strokeWidth: 0.03, stroke: '#191919', fill: '#FFFFFF' }));canvas.add(logo2.set({ left: 510, top: 170, scaleX: 15, scaleY: 15, flipY: false, strokeWidth: 0.03, stroke: '#191919', fill: '#FFFFFF' }));canvast.add(color4.set({ scaleX: 1, scaleY: 1, flipY: false, originX: "center", originY: "center", fill: cl1 }));canvast.add(color5.set({ scaleX: 1, scaleY: 1, flipY: false, originX: "center", originY: "center", fill: cl2 }));canvast.add(color6.set({ scaleX: 1, scaleY: 1, flipY: false, originX: "center", originY: "center", fill: cl3 }));color1.selectable=false;color2.selectable=false;color3.selectable=false;logo1.selectable=false;logo2.selectable=false;color4.selectable=false;color5.selectable=false;color6.selectable=false;
var dbplnumber = "3";
var dbteam = "TEAM";
var dbplayer = "PLAYER";

var dbbtag = "btag.svg";

var dbfront3d = "../virtual3d_images/diamond_front_136.virtual";
var dbback3d = "../virtual3d_images/diamond_back_136.virtual";


var dbtagleft = "247";
var dbtagtop = "415";
var dbtagsize = "45";

 	fabric.Image.fromURL(dbbtag, function(oImgj) {
	oImgj.set({left:dbtagleft, top:dbtagtop});
	oImgj.scaleToWidth(dbtagsize);
 	canvas.add(oImgj);
 	oImgj.selectable = false;
 	});


/* mask load */



 	fabric.Image.fromURL(dbfront3d, function(oImgj) {
	oImgj.set({left:300, top:300});
	oImgj.scaleToWidth(600);
 	canvas.add(oImgj);
 	oImgj.selectable = false;
 	});

	fabric.Image.fromURL(dbback3d, function(oImgj) {
 	oImgj.set({left:300, top:300});
 	oImgj.scaleToWidth(600)
	canvast.add(oImgj);
	oImgj.selectable = false;
 	});


                var ldbfrontsvg = "../virtual_complex_svg/diamond_front_136.svg";
				var ldbbacksvg = "../virtual_complex_svg/diamond_back_136.svg";
			 	lfrontimg = fabric.Image.fromURL(ldbfrontsvg, function(loImgjsvg) {

				loImgjsvg.set({left:300, top:300});
				loImgjsvg.scaleToWidth(600);
			 	canvas.add(loImgjsvg);
			 	canvas.sendToBack(loImgjsvg);
			 	loImgjsvg.selectable = false;
			 	});
			 	lbackimg = fabric.Image.fromURL(ldbbacksvg, function(loImgjsvg) {
				loImgjsvg.set({left:300, top:300});
				loImgjsvg.scaleToWidth(600);
			 	canvast.add(loImgjsvg);
			 	canvast.sendToBack(loImgjsvg);
			 	loImgjsvg.selectable = false;
			 	});



	/* Color Change in SVG */
783,788

//loadImage();

				
	 	

		//var frontimg="asdfa";
		//var backimg="asdfa";
		

		$("#color1").on("click", "li", function (event) {

		event.preventDefault();
		$('#box').prop('checked', true);
		var col = $(this).children('span').css('background-color');
		var newcol = new fabric.Color(col).toHex();
		

		var origcolor = new fabric.Color($(".origcolor_1").css('background-color')).toHex();
	      $(".origcolor_1").css('background-color',col).val('#'+newcol);
	      var objects = canvas.getObjects();
					

            $.ajax({
                method: "POST",
                url: "virtual_designer/update_svg.php",
                data: { origcolor: '#'+origcolor, newcolor: '#'+newcol, classname: '.fil0', filename: 'b3cd58d3547e6ff6370f31060b827b6c_diamond_front_136.svg' , filenameb: 'b3cd58d3547e6ff6370f31060b827b6c_diamond_back_136.svg' }
                })
                .done(function( msg ) {
                var d = new Date();
				var time = d.getTime();
				//if(frontimg!=="")
				//{
					//console.log("in if");
					var objects = canvas.getObjects();
					for(i=0; i < objects.length; i++)
					{
						//console.log(objects[i]);
						canvas.remove(objects[i]);
						break;
					}
					//return false;
					var objects = canvast.getObjects();
					for(i=0; i < objects.length; i++)
					{
						//console.log(objects[i]);
						canvast.remove(objects[i]);
						break;
					}
					//return false;
					//canvas.remove(frontimg);
					//canvast.remove(backimg);
				//}


                var dbfrontsvg = "../virtual_complex_svg/b3cd58d3547e6ff6370f31060b827b6c_diamond_front_136.svg?time="+time;
				var dbbacksvg = "../virtual_complex_svg/b3cd58d3547e6ff6370f31060b827b6c_diamond_back_136.svg?time="+time;
			 	//frontimg = 
		 		fabric.Image.fromURL(dbfrontsvg, function(oImgjsvg) {
				oImgjsvg.set({left:300, top:300});
				oImgjsvg.scaleToWidth(600);
			 	canvas.add(oImgjsvg);
			 	canvas.sendToBack(oImgjsvg);
			 	oImgjsvg.selectable = false;
			 	});
			 	//backimg = 
			 	fabric.Image.fromURL(dbbacksvg, function(oImgjsvg) {
				oImgjsvg.set({left:300, top:300});
				oImgjsvg.scaleToWidth(600);
			 	canvast.add(oImgjsvg);
			 	canvast.sendToBack(oImgjsvg);
			 	oImgjsvg.selectable = false;
			 	});

                });
       


	
	
	$('#ctitle').html($(this).attr('title'));
	
	color1.set('fill', col);color4.set('fill', col);	
	$('#newcolor').css('background-color',  newcol);
	var color1atr = $(this).attr('title');
	$('#color1val').val(color1atr);
	//$(this).closest('.panel').children('.panel-heading').children('.picker').css('background-color', col);
	$('#newcolor1').css('background-color', col);
	canvas.renderAll();
	canvast.renderAll();
});

784,789

//loadImage();

				
	 	

		//var frontimg="asdfa";
		//var backimg="asdfa";
		

		$("#color2").on("click", "li", function (event) {

		event.preventDefault();
		$('#box').prop('checked', true);
		var col = $(this).children('span').css('background-color');
		var newcol = new fabric.Color(col).toHex();
		

		var origcolor = new fabric.Color($(".origcolor_2").css('background-color')).toHex();
	      $(".origcolor_2").css('background-color',col).val('#'+newcol);
	      var objects = canvas.getObjects();
					

            $.ajax({
                method: "POST",
                url: "virtual_designer/update_svg.php",
                data: { origcolor: '#'+origcolor, newcolor: '#'+newcol, classname: '.fil1', filename: 'b3cd58d3547e6ff6370f31060b827b6c_diamond_front_136.svg' , filenameb: 'b3cd58d3547e6ff6370f31060b827b6c_diamond_back_136.svg' }
                })
                .done(function( msg ) {
                var d = new Date();
				var time = d.getTime();
				//if(frontimg!=="")
				//{
					//console.log("in if");
					var objects = canvas.getObjects();
					for(i=0; i < objects.length; i++)
					{
						//console.log(objects[i]);
						canvas.remove(objects[i]);
						break;
					}
					//return false;
					var objects = canvast.getObjects();
					for(i=0; i < objects.length; i++)
					{
						//console.log(objects[i]);
						canvast.remove(objects[i]);
						break;
					}
					//return false;
					//canvas.remove(frontimg);
					//canvast.remove(backimg);
				//}


                var dbfrontsvg = "../virtual_complex_svg/b3cd58d3547e6ff6370f31060b827b6c_diamond_front_136.svg?time="+time;
				var dbbacksvg = "../virtual_complex_svg/b3cd58d3547e6ff6370f31060b827b6c_diamond_back_136.svg?time="+time;
			 	//frontimg = 
		 		fabric.Image.fromURL(dbfrontsvg, function(oImgjsvg) {
				oImgjsvg.set({left:300, top:300});
				oImgjsvg.scaleToWidth(600);
			 	canvas.add(oImgjsvg);
			 	canvas.sendToBack(oImgjsvg);
			 	oImgjsvg.selectable = false;
			 	});
			 	//backimg = 
			 	fabric.Image.fromURL(dbbacksvg, function(oImgjsvg) {
				oImgjsvg.set({left:300, top:300});
				oImgjsvg.scaleToWidth(600);
			 	canvast.add(oImgjsvg);
			 	canvast.sendToBack(oImgjsvg);
			 	oImgjsvg.selectable = false;
			 	});

                });
       


	
	
	$('#ctitle').html($(this).attr('title'));
	
	color2.set('fill', col);color5.set('fill', col);	
	$('#newcolor').css('background-color',  newcol);
	var color2atr = $(this).attr('title');
	$('#color2val').val(color2atr);
	//$(this).closest('.panel').children('.panel-heading').children('.picker').css('background-color', col);
	$('#newcolor2').css('background-color', col);
	canvas.renderAll();
	canvast.renderAll();
});

785,790

//loadImage();

				
	 	

		//var frontimg="asdfa";
		//var backimg="asdfa";
		

		$("#color3").on("click", "li", function (event) {

		event.preventDefault();
		$('#box').prop('checked', true);
		var col = $(this).children('span').css('background-color');
		var newcol = new fabric.Color(col).toHex();
		

		var origcolor = new fabric.Color($(".origcolor_3").css('background-color')).toHex();
	      $(".origcolor_3").css('background-color',col).val('#'+newcol);
	      var objects = canvas.getObjects();
					

            $.ajax({
                method: "POST",
                url: "virtual_designer/update_svg.php",
                data: { origcolor: '#'+origcolor, newcolor: '#'+newcol, classname: '.fil2', filename: 'b3cd58d3547e6ff6370f31060b827b6c_diamond_front_136.svg' , filenameb: 'b3cd58d3547e6ff6370f31060b827b6c_diamond_back_136.svg' }
                })
                .done(function( msg ) {
                var d = new Date();
				var time = d.getTime();
				//if(frontimg!=="")
				//{
					//console.log("in if");
					var objects = canvas.getObjects();
					for(i=0; i < objects.length; i++)
					{
						//console.log(objects[i]);
						canvas.remove(objects[i]);
						break;
					}
					//return false;
					var objects = canvast.getObjects();
					for(i=0; i < objects.length; i++)
					{
						//console.log(objects[i]);
						canvast.remove(objects[i]);
						break;
					}
					//return false;
					//canvas.remove(frontimg);
					//canvast.remove(backimg);
				//}


                var dbfrontsvg = "../virtual_complex_svg/b3cd58d3547e6ff6370f31060b827b6c_diamond_front_136.svg?time="+time;
				var dbbacksvg = "../virtual_complex_svg/b3cd58d3547e6ff6370f31060b827b6c_diamond_back_136.svg?time="+time;
			 	//frontimg = 
		 		fabric.Image.fromURL(dbfrontsvg, function(oImgjsvg) {
				oImgjsvg.set({left:300, top:300});
				oImgjsvg.scaleToWidth(600);
			 	canvas.add(oImgjsvg);
			 	canvas.sendToBack(oImgjsvg);
			 	oImgjsvg.selectable = false;
			 	});
			 	//backimg = 
			 	fabric.Image.fromURL(dbbacksvg, function(oImgjsvg) {
				oImgjsvg.set({left:300, top:300});
				oImgjsvg.scaleToWidth(600);
			 	canvast.add(oImgjsvg);
			 	canvast.sendToBack(oImgjsvg);
			 	oImgjsvg.selectable = false;
			 	});

                });
       


	
	
	$('#ctitle').html($(this).attr('title'));
	
	color3.set('fill', col);color6.set('fill', col);	
	$('#newcolor').css('background-color',  newcol);
	var color3atr = $(this).attr('title');
	$('#color3val').val(color3atr);
	//$(this).closest('.panel').children('.panel-heading').children('.picker').css('background-color', col);
	$('#newcolor3').css('background-color', col);
	canvas.renderAll();
	canvast.renderAll();
});



/*Front Text start*/
/*Front Team text start*/

var teamfrontTControl = document.getElementById('teamfront')
function updateControls() {  
teamfrontTControl.value = teamfront.getText();
}
teamfrontTControl.onkeyup = function () {
	var teamfrontText = document.getElementById('teamfront').value;
	var nLength = teamfrontText.length;
	teamfrontText = " "+teamfrontText;
	
	$('#teamfrontval').val(teamfrontText);
	teamfront1.setText(teamfrontText)
	canvas.renderAll()
	updateControls()
}
	
var dbteamfont = "45";
var dbteamstroke = "1";
var dbteamleft = "180";
var dbteamtop = "155";

  var teamfront = $('#teamfront').val();
  var nLen = teamfront.length;
  teamfront = " "+teamfront;

	teamfront1 = new fabric.Text(teamfront, {
	fontSize: dbteamfont,
	left: dbteamleft,
	top: dbteamtop,
	fill: $('#front_sold_color').val(),
  	fontFamily: $('#name_ffamily').val(),
  	stroke: $('#front_outline_color').val(),
  	strokeWidth: dbteamstroke
	});
canvas.add(teamfront1);
teamfront1.selectable=true;
teamfront1.on('selected', function() {
	$('#scufontfamily').val(this.get("fontFamily"));
});

var dbnm1font = "60";
var dbnm1stroke = "1";
var dbnm1left = "240";
var dbnm1top = "210";
var dbnm1angle = "0";


playernumber3 = new fabric.Text(dbplnumber, {
	fontSize: dbnm1font,
	left: dbnm1left,
	top: dbnm1top,
	fill: $('#front_sold_color').val(),
  	fontFamily: $('#number_ffamily').val(),
  	stroke: $('#front_outline_color').val(),
  	strokeWidth: dbnm1stroke,
  	angle: dbnm1angle
});

var dbnm2font = "60";
var dbnm2stroke = "0.3";
var dbnm2left = "0";
var dbnm2top = "0";
var dbnm2angle = "0";

playernumber4 = new fabric.Text(dbplnumber, {
	fontSize: dbnm2font,
	left: dbnm2left,
	top: dbnm2top,
	fill: $('#front_sold_color').val(),
  	fontFamily: $('#number_ffamily').val(),
  	stroke: $('#front_outline_color').val(),
  	strokeWidth: dbnm2stroke,
  	angle: dbnm2angle

});
canvas.add(playernumber3);canvas.add(playernumber4);playernumber3.selectable=true;
playernumber4.selectable=true;
playernumber3.on('selected', function() {
	$('#scufontfamily').val((this.get("fontFamily")));
});
playernumber4.on('selected', function() {
	$('#scufontfamily').val((this.get("fontFamily")));
});



/*Front Team text end*/

var playernumberTControl = document.getElementById('playernumber')
function updateControls() {  
playernumberTControl.value = playernumber.getText();
}
playernumberTControl.onkeyup = function () {
	var playernumberText = document.getElementById('playernumber').value;
	var nLength = playernumberText.length;
	playernumberText = " "+playernumberText;
	
	$('#playernumberval').val(playernumberText);
	playernumber.setText(playernumberText)
	canvas.renderAll()
	canvast.renderAll()
	updateControls()
}
	
var dbplayerfont = "30";
var dbplayerstroke = "1";
var dbplayerleft = "175";
var dbplayertop = "120";

  var PlayerName = $('#playernumber').val();
  var nLen = PlayerName.length;
  PlayerName = " "+PlayerName;

	playernumber = new fabric.Text(PlayerName, {
		fontSize: dbplayerfont,
		left: dbplayerleft,
		top: dbplayertop,
		fontFamily: $('#name_ffamily').val(),
		fontWeight: 'normal',
		fill: $('#front_sold_color').val(),
		stroke: $('#front_outline_color').val(),
		strokeWidth: dbplayerstroke
	  });

canvast.add(playernumber);playernumber.selectable=true;
playernumber.on('selected', function() {
	$('#scufontfamily').val((this.get("fontFamily")));
});


/*Front text EnD*/

var playernumber2TControl = document.getElementById('playernumber2')
function updateControls() {  
playernumber2TControl.value = playernumber2.getText();
}
playernumber2TControl.onkeyup = function () {
	var playernumber2Text = document.getElementById('playernumber2').value
	$('#playernumber2val').val(playernumber2Text);
	playernumber2.set({text: playernumber2Text})
	playernumber3.set({text: playernumber2Text})
	playernumber4.set({text: playernumber2Text})
	playernumber5.set({text: playernumber2Text})

	canvast.renderAll()
	canvas.renderAll()
	updateControls()
}

var dbnm3font = "150";
var dbnm3stroke = "2";
var dbnm3left = "170";
var dbnm3top = "210";
var dbnm3angle = "0";

playernumber5 = new fabric.Text(dbplnumber, {
	fontSize: dbnm3font,
	left: dbnm3left,
	top: dbnm3top,
	fill: $('#front_sold_color').val(),
  	fontFamily: $('#number_ffamily').val(),
  	stroke: $('#front_outline_color').val(),
  	strokeWidth: dbnm3stroke,
  	angle: dbnm3angle
});

canvast.add(playernumber5);playernumber5.selectable=true
playernumber5.on('selected', function() {
	$('#scufontfamily').val((this.get("fontFamily")));
});

var dbnm4font = "60";
var dbnm4stroke = "0.3";
var dbnm4left = "220";
var dbnm4top = "520";
var dbnm4angle = "0";


playernumber2 = new fabric.Text(dbplnumber, {
	fontSize: dbnm4font,
	left: dbnm4left,
	top: dbnm4top,
	fill: $('#front_sold_color').val(),
  	fontFamily: $('#number_ffamily').val(),
  	stroke: $('#front_outline_color').val(),
  	strokeWidth: dbnm4stroke,
  	angle: dbnm4angle
});
canvast.add(playernumber2);playernumber2.selectable=true;
playernumber2.on('selected', function() {
	$('#scufontfamily').val((this.get("fontFamily")));
});



	
$('#down').click(function(){
	$('#down').addClass('tsactive');
	$('#straight').removeClass('tsactive');
	$('#up').removeClass('tsactive');
	canvast.remove(playernumber);
	PlayerName = $('#playernumber').val();
	
	playernumber = new fabric.CurvedText(PlayerName,{
        width: 100,
        height: 50,
        left: dbplayerleft,
        top: dbplayertop,
        textAlign: 'center',        
        fontFamily:  $('#scufontfamily').val(), 
        fontWeight: 'normal',
	    fill: $('#front_sold_color').val(),
	    stroke: $('#front_outline_color').val(),
		radius: 100,
        fontSize: dbplayerfont,
        spacing: 7,
        reverse: true,
        angle: -5,
        
        
    });
	canvast.add(playernumber);
	playernumber.selectable=true
	canvast.renderAll()
	updateControls();
	playernumber.on('selected', function() {
		$('#scufontfamily').val((this.get("fontFamily")));
	});
});

$('#up').click(function(){
	$('#up').addClass('tsactive');
	$('#straight').removeClass('tsactive');
	$('#down').removeClass('tsactive');
	canvast.remove(playernumber);
	PlayerName = $('#playernumber').val();
	playernumber = new fabric.CurvedText(PlayerName,{
        width: 100,
        height: 50,
        left: dbplayerleft,
        top: dbplayertop,
        fontFamily:  $('#scufontfamily').val(),
	    fontWeight: 'normal',
		fill: $('#front_sold_color').val(),
		stroke: $('#front_outline_color').val(),
		radius: 100,
        fontSize: dbplayerfont,
        spacing: 7,
        textAlign: 'center',
        reverse: false,
        angle: 7,
        
    });
	canvast.add(playernumber);
	playernumber.selectable=true
	canvast.renderAll()
	updateControls();
	playernumber.on('selected', function() {
		$('#scufontfamily').val((this.get("fontFamily")));
	});
});

$('#straight').click(function(){
	$('#straight').addClass('tsactive');
	$('#up').removeClass('tsactive');
	$('#down').removeClass('tsactive');
	canvast.remove(playernumber);
	PlayerName = $('#playernumber').val();
	playernumber = new fabric.Text(PlayerName, {
	    fontSize: dbplayerfont,
	    left: dbplayerleft,
	    top: dbplayertop,
	    fontFamily:  $('#scufontfamily').val(),
	    fontWeight: 'normal',
		
		fill: $('#front_sold_color').val(),
		stroke: $('#front_outline_color').val(),
	});
	canvast.add(playernumber);
	playernumber.selectable=true
	canvast.renderAll()
	updateControls();
	playernumber.on('selected', function() {
		$('#scufontfamily').val((this.get("fontFamily")));
	});
});



$('#scufontcolor li').click(function() {
	var col = $(this).data('color');
	$('#front_sold_color').val(col);
	if($('#showFront').hasClass('active'))
	{
		try {
			var selText = canvas.getActiveObject().getText();
			if(isNaN(selText))
			{
				canvas.getActiveObject().setFill(col);
    			canvas.renderAll();
			}
			else{
				setNumberFillColor(col)
			}
		}
		catch(err)
		{
		}
		
	}
	if($('#showBack').hasClass('active'))
	{
		try {
			var selText = canvast.getActiveObject().getText();
			if(isNaN(selText))
			{
				canvast.getActiveObject().setFill(col);
    			canvast.renderAll();
			}
			else{
				setNumberFillColor(col)
			}
		}
		catch(err)
		{
		}
		
	}
	backtcolor_change(col);
});

function setNumberFillColor(col){
	canvas.setActiveObject(playernumber3);
	canvas.getActiveObject().setFill(col);
	canvas.setActiveObject(playernumber4);
	canvas.getActiveObject().setFill(col);
	canvas.renderAll();
	canvast.setActiveObject(playernumber2);
	canvast.getActiveObject().setFill(col);
	canvast.setActiveObject(playernumber5);
	canvast.getActiveObject().setFill(col);
	canvast.renderAll();
}

function setNumberStrokeColor(col){
	canvas.setActiveObject(playernumber3);
	canvas.getActiveObject().setStroke(col);
	canvas.setActiveObject(playernumber4);
	canvas.getActiveObject().setStroke(col);
	canvas.renderAll();
	canvast.setActiveObject(playernumber2);
	canvast.getActiveObject().setStroke(col);
	canvast.setActiveObject(playernumber5);
	canvast.getActiveObject().setStroke(col);
	canvast.renderAll();
}

function backtcolor_change(selected_color) {
	$('#scufontcolor li').each(function (indx, ele) {
		if($(ele).data('color') == selected_color) {
			$(ele).children('span').addClass('selected');
		} else {
			$(ele).children('span').removeClass('selected');
		}
	});
}


$('#scufontocolor li').click(function() {
	var col = $(this).data('color');
	$('#front_outline_color').val(col);
	if($('#showFront').hasClass('active'))
	{
		try {
			var selText = canvas.getActiveObject().getText();
			if(isNaN(selText))
			{
				canvas.getActiveObject().setStroke(col);
    			canvas.renderAll();
			}
			else{
				setNumberStrokeColor(col)
			}
		}
		catch(err)
		{
		}
		
	}
	if($('#showBack').hasClass('active'))
	{
		try {
			var selText = canvast.getActiveObject().getText();
			if(isNaN(selText))
			{
				canvast.getActiveObject().setStroke(col);
    			canvast.renderAll();
			}
			else{
				setNumberStrokeColor(col)
			}
		}
		catch(err)
		{
		}
		
	}
	backtocolor_change(col);
});
function backtocolor_change(selected_color) {
	$('#scufontocolor li').each(function (indx, ele) {
		if($(ele).data('color') == selected_color) {
			$(ele).children('span').addClass('selected');
		} else {
			$(ele).children('span').removeClass('selected');
		}
	});
}
function setNumberFontFamily(strFontFamily)
{
	canvas.setActiveObject(playernumber3);
	canvas.getActiveObject().setFontFamily(strFontFamily);
	canvas.setActiveObject(playernumber4);
	canvas.getActiveObject().setFontFamily(strFontFamily);
	canvas.renderAll();
	canvast.setActiveObject(playernumber2);
	canvast.getActiveObject().setFontFamily(strFontFamily);
	canvast.setActiveObject(playernumber5);
	canvast.getActiveObject().setFontFamily(strFontFamily);
	canvast.renderAll();
}
  
    document.getElementById('scufontfamily').onchange = function() {
		if($('#showFront').hasClass('active'))
		{
			try {
				var selText = canvas.getActiveObject().getText();
				if(isNaN(selText))
				{
					canvas.getActiveObject().setFontFamily(this.value);
					canvas.renderAll();
				}
				else{
					setNumberFontFamily(this.value);
				}
			}
			catch(err)
			{
			}
			
		}
		if($('#showBack').hasClass('active'))
		{
			try {
				var selText = canvast.getActiveObject().getText();
				if(isNaN(selText))
				{
					canvast.getActiveObject().setFontFamily(this.value);
					canvast.renderAll();
				}
				else{
					setNumberFontFamily(this.value);
				}
			}
			catch(err)
			{
			}
			
		}

	};
    
function loadImage()
        {
                var dbfrontsvg = "../virtual_complex_svg/diamond_front_136.svg";
				var dbbacksvg = "../virtual_complex_svg/diamond_back_136.svg";
			 	frontimg = fabric.Image.fromURL(dbfrontsvg, function(oImgjsvg) {

				oImgjsvg.set({left:300, top:300});
				oImgjsvg.scaleToWidth(600);
			 	canvas.add(oImgjsvg);
			 	canvas.sendToBack(oImgjsvg);
			 	oImgjsvg.selectable = false;
			 	});
			 	backimg = fabric.Image.fromURL(dbbacksvg, function(oImgjsvg) {
				oImgjsvg.set({left:300, top:300});
				oImgjsvg.scaleToWidth(600);
			 	canvast.add(oImgjsvg);
			 	canvast.sendToBack(oImgjsvg);
			 	oImgjsvg.selectable = false;
			 	});

        }

       
        
/******************************END***************************/
function hidesuccess()
{
     document.getElementById('logosucess').style.display = "none";
}
document.getElementById('frontlogos').onchange = function handleImage(e) {
	var reader = new FileReader();
    reader.onload = function (event) { 
    document.getElementById('logosucess').style.display = "inline";
        var imgObj = new Image();
        imgObj.src = event.target.result;
        imgObj.onload = function () {
			logo = new fabric.Image(imgObj);
			logo.set({left: 160,top: 80});
			logo.scaleToWidth(100);
            canvas.add(logo);
            canvas.setActiveObject(logo);
            logo.selectable=true
            setTimeout(hidesuccess, 5000);
		}
    }
    reader.readAsDataURL(e.target.files[0]);
	document.getElementById('frontlogos');
}
canvas.renderAll();


document.getElementById('backlogos').onchange = function handleImage(e) {
   var reader = new FileReader();
    reader.onload = function (event) { 
    document.getElementById('logosucess').style.display = "inline";
        var imgObj = new Image();
        imgObj.src = event.target.result;
        imgObj.onload = function () {
			logo = new fabric.Image(imgObj);
			logo.set({left: 160,top: 80});
			logo.scaleToWidth(100);
            canvast.add(logo);            
            canvast.setActiveObject(logo);
            logo.selectable=true
            setTimeout(hidesuccess, 5000);
            
        }
    }
    reader.readAsDataURL(e.target.files[0]);
	document.getElementById('backlogos');
}
canvast.renderAll();


$(window).load(function(){
	setTimeout(function(){ $( "#showFront" ).trigger( "click" ); }, 1500);
	$('#playernumber2').val(dbplnumber);	
	$('#teamfront').val(dbteam);
	$('#playernumber').val(dbplayer);


    $x = $('#name_ffamily').val();
    $('#teamfront').css("font-family",$x);
    $('#playernumber').css("font-family",$x);

	$y = $('#number_ffamily').val();
    $('#playernumber2').css("font-family",$y);

	$v  = $('#name_ffamily').val();
	$('#scufontfamily').css("font-family",$v);
	var dbnff  = $('#name_ffamily').val();
    $("#scufontfamily > [value=" + dbnff + "]").attr("selected", "true");
})


$('#scufontfamily').change(function() {
    $('#teamfront').css("font-family", $(this).val());
    $('#playernumber').css("font-family", $(this).val());
    $('#scufontfamily').css("font-family", $(this).val());
});



	
}
loadBaseShirts();
canvas.calcOffset();