var pathWay = [];
//DONT REMOVE LINE BELOW
var lineWidth = 1414;
var lineStart = 80;
var lineDistance = 160;

var defs = d3.select('svg').append('defs');
var path = g.append('path')
    		.attr('stroke','blue')
            .attr('stroke-width',5)
            .attr('fill','red');

var curves_array = [];
var curve = '';
var d = [];
var drawing = false;

d3.select('svg').on('click',function(){
  var point = {x:d3.event.pageX ,y:d3.event.pageY-75}
   d.push(point);
  if((!drawing && curve == '') || drawing == true){
    drawing = true;
  	createCircle(point,'red');
	draw2(point)
  }

});
function createCircle(pointD,color){
  if(!color){
    color = '#000000'
  }
  var circleHandler = g.append('circle')
    .attr('r',5)
    .attr('stroke',color)
    .attr('stroke-width',2)
    .attr('fill','white')
    .attr('cx',pointD.x)
    .attr('cy',pointD.y)
    .on('mouseover',function(){  d3.select(this).attr('fill',"#B6B623")})
    .on('mouseout',function(){ d3.select(this).attr('fill',"#FFFFFF")  });
    if(drawing){
      circleHandler.on('click',function(){
      	 curve+= 'Z';
         draw2();
         drawing = false;
      })
    }

}

var draw2 = function(point){
   if(point != undefined){
    var n_point1 = {x:point.x-50 ,y:point.y}
    var n_point2 = {x:point.x+50 ,y:point.y}

	if(curve == '')
       curve += 'M '+point.x+','+point.y;
      else{
        var q_move = 0
   		var q_point1 = {x:point.x-q_move ,y:point.y-q_move}
        curve += ' Q '+(q_point1.x)+','+(q_point1.y)+', '+point.x+','+point.y;

        //createLine(point.x,q_point1.x,point.y,q_point1.y)
        var previous_element = d[d.length-2]
        //createLine(previous_element.x,q_point1.x,previous_element.y,q_point1.y)
        createCircle(q_point1,'green',2)
      }
     createCircle(point)
     }
	 path.attr('d',curve)

  }


// -------- Adding Helper Lines -----------------------

function createLine(x,x1,y,y1){
	g.append('line')
      .attr("x1",x)
      .attr("y1",y)
      .attr("x2",x1)
      .attr("y2",y1)
      .style("stroke-width", 3)
      .style("stroke", "black")
}


var pattern = defs.append('pattern')
    .attr('id','pattern1')
    .attr('pattermTransform','')
    .attr('height',40)
    .attr('width',40)
    .attr('patternUnits','userSpaceOnUse')

var line = pattern.append('line')
      .attr('x1',0)
  	  .attr('x2',40)
      .attr('y1',0)
      .attr('y2',0)
  	  .attr('fill',"#4D8891")
      .style("stroke-width", 2)
      .style("stroke", "steelblue")

var line = pattern.append('line')
      .attr('x1',0)
  	  .attr('x2',0)
      .attr('y1',0)
      .attr('y2',40)
  	  .attr('fill',"#4D8891")
      .style("stroke-width", 2)
      .style("stroke", "steelblue")

d3.select('svg').append('rect')
        .attr('height',779)
      .attr('width',1442)
  	  .attr('fill','url(#pattern1)')
//---------------------- Button- and Add-to-editor-logic ----------------
var addText = function(){
   var text = d3.select('#pathWay')
   var textValue = tribView.code_editor.getLine(0);
   var search = /var pathWay = \[(.*)\]/;
   var result = search.exec(textValue);
    if(textValue == 'var pathWay = [];'){
         add = '[1,2]';
    }else{
         add = ',[1,2]';
    }
    var modify = result[1]+add;
  	var finalString = 'var pathWay = ['+(modify)+'];';
  	//console.log('String',finalString);
	var test = text.text(finalString);
  	test = test.text();
    tribView.code_editor.setLine(0,test);


}


function createButton(name,callback){

    	var buttonGroup = g.append('g')
			.on('click', function(d,i){
            	callback(this)
            })
            .on('mousedown',function(){
            	 d3.select(this).select('#buttonBG')
		           .attr('fill','url(#g3201)')
                   .attr('stroke-width',3)
                   .attr('stroke','url(#g3202)')
            })
			.on('mouseover',function(){
            	  d3.select(this).select('#buttonBG')
					.attr('fill','url(#g3203)')
                    .attr('stroke-width',3)
                    .attr('stroke','url(#g3204)')
            })
            .on('mouseout',function(){
            	  d3.select(this).select('#buttonBG')
                  .attr('fill','url(#g3203)')
                  .attr('stroke','url(#g3202)')
                   .attr('stroke-width',3)
            })

        var rect = buttonGroup.append('rect')
            .attr('width',122)
            .attr('height',45)
            .attr('fill',"#922F2F")
            .attr('rx',10)
            .attr('ry',10)
            .attr('id','buttonBG')
            .attr('height',45)
            .attr('fill','url(#g3203)')
			.attr('stroke','url(#g3202)')
            .attr('stroke-width',3)



         var text = buttonGroup.append('text')
              .attr('id','pathWay')
	          .attr('font-size',10)
              .attr('fill',"#FFFFFF")
              .style('text-shadow','1px 1px 2px'+"#000000")
              .text(name)
              .attr('transform','translate('+[10,rect.attr('width')/4.5]+')')
         var textLength =  text.node().getBBox().width;
    	 rect.attr('width',textLength+20)
		return buttonGroup;
}


function addGradient(color1,color2,stopPX,id){
	var gradient = defs.append('linearGradient')
      .attr('id',id)
      .attr('gradientUnits','userSpaceOnUse')
      .attr('x1','0%')
      .attr('x2','0%')
      .attr('y1','0%')
      .attr('y2',stopPX)
    gradient.append('stop')
    	.attr('stop-color',color1)
	    .attr('offset','0')
     gradient.append('stop')
    	.attr('stop-color',color2)
	    .attr('offset','1')
}
// ---------------------------------------------------
var y1 = lineStart
var xheight = createLine(1,lineWidth,y1,y1)

var y2 = y1+ lineDistance
var baseline = createLine(1,lineWidth,y2,y2)

var y3 = y2 + lineDistance
var descentline = createLine(1,lineWidth,y3,y3)
// ---------------------------------------------------
addGradient("#363636", "#5B6B65", 46, 'g3201')
addGradient("#5B6B65", "#363636", 46, 'g3202')
addGradient("#FFF368", "#418041", 46, 'g3203')
addGradient("#0085FF", "#1073A2", 46, 'g3204')


var button1 = createButton('Add path', addText)
    .attr('transform','translate('+[32,9]+')')

var removeText = function(elem){
 var text = tribView.code_editor.setLine(0,'var pathWay = []; ')
}
var button2 = createButton('Remove path', removeText)
  .attr('transform','translate('+[126,9]+')')