/**
класс objMeasurement
формирование канввы для измерения
объектов канвы и вся логика измерений
==============================================================================================
второй, закоментированный -- кустарный
функции класса: 
build() - сборка всех функций для построения изолиний
calculation() - расчет всех переменных
check() - проверка посчитанных данных
addPicture() - добавление изображения для работы
makeWorkPlace() - отрисовка всего
==============================================================================================
(c) Mychko Eduard, 2015, Moscow, Russia, eduard.mychko@gmail.com
==============================================================================================
*/
 
var objMeasurement = {
	/*--------------------------------------------------------------переменные--------------------------------------------------------------*/
	'canvas' : '#content-measurement-canvas', /* DIV канва для SVG */
 	'boxWidth' : 0,  /* ширина канвы */
	'boxHeight' : 0, /* высота канвы */
	'svg' : false, /* канва, по умолчанию ее нет */
	'arrElemToolbar' : [ /*массив панели инструментов*/
				['R',AVG.lang[AVG.language]['big_rad']],
				['Ur',AVG.lang[AVG.language]['umbilic_rad']],
				['U',AVG.lang[AVG.language]['umbilic']],
				['r2',AVG.lang[AVG.language]['little_rad']],
				['a1',AVG.lang[AVG.language]['left_side_ust']],
				['a2',AVG.lang[AVG.language]['right_side_ust']]
			],
	'filename' : 'non_image', /* изображение по умолчанию */
	 
	
	resize: function(){
		objD3.resizeSvg(this.canvas,this.svg);
	
	},
	
	/*--------------------------------------------------------------сборка--------------------------------------------------------------*/
	build: function(){
		$("#content-measurement-canvas").html(""); /*очищаем поле ПРАВИЛЬНО ЛИ? мне кажется неправильно...*/
		this.boxWidth = objD3.svgsize(this.canvas,'width'); /* задаем ширину канвы */
		this.boxHeight =  objD3.svgsize(this.canvas,'height'); /* задаем высота канвы */
		this.svg = objD3.generateSvg(this.canvas,this.boxWidth,this.boxHeight,[0,0,0,0]);
		
		objD3.remove(this.svg,"*"); /* очищаем канву */ 
		objD3.makeGrid(this.svg,this.boxWidth,this.boxHeight,5,0);
		setTimeout(function(){
			objMeasurement.addPicture(objMeasurement.filename);
			 
		},10);
		
		
		$('body').on('click', '#content-measurement-btn-calc-canvas', function(){
 			if (objMeasurement.filename=="non_image"){
				objHelpers.popup(AVG.lang[AVG.language]['error_calculation_non_img'],"error");
			}else{
				if(d3.select("#marker_R").attr('y')==5){
					objHelpers.popup(AVG.lang[AVG.language]['error_calculation_non_markers'],"warning");
				}else{
					var param = objMeasurement.calculation(objMeasurement.filename);
					objMeasurement.check(param);
				}
			} 
		});	
		 
		
	},
	
	/*--------------------------------------------------------------расчет всех переменных--------------------------------------------------------------*/ 
	calculation: function(){

		var m = []; /*маркеры*/
		/*перебираем массив маркеров, высчитываем координаты и собираем новый массив m*/
		for (var index = 0; index < this.arrElemToolbar.length; ++index) {
			var idElem = this.arrElemToolbar[index][0];
			m[this.arrElemToolbar[index][0]] = [];
			
			var x = d3.select("#marker_"+idElem).attr("x");  
			var y = d3.select("#marker_"+idElem).attr("y");  
			var width = d3.select("#marker_"+idElem).attr("width");  
			var height = d3.select("#marker_"+idElem).attr("height"); 
			
			/*собираем массив с учетом нижнего края маркера и его середины*/
			m[this.arrElemToolbar[index][0]]["x"] = Number(x) + (Number(width)/2);
			m[this.arrElemToolbar[index][0]]["y"] = Number(y) + Number(height);
		}
	
		/*параметры которые нужно посчитать*/
		var param = [
			['b',m['R'],m['Ur']],
			['c',m['Ur'],m['U']],
			['e',m['U'],m['r2']],
			['d',m['R'],m['U']],
			['a',m['a1'],m['a2']],
		];
		
		var parametrs = [];
		/*вычисление длин отрезков параметров*/
		for (var indexP = 0; indexP < param.length; ++indexP) {
			parametrs[param[indexP][0]] =  objHelpers.get_lenght_vector(param[indexP][1],param[indexP][2]);
		}
		
		/*вычисляем главные параметры W,D,S*/ 
		var result = [];
		
		result['file'] = this.filename;
		
		var a = this.filename.split('/');  
		var filename=  a[a.length-1];
		result['name'] = 'figure_'+filename;
		
		
		var D = parametrs['c']/parametrs['d'];
		result['D'] = objHelpers.floorN(D,2);
		 

		var W = (parametrs['d']/parametrs['e']);	
		W = Math.pow(W, 2);	
		result['W'] = objHelpers.floorN(W,2);
		 
		
		var S = parametrs['b']/parametrs['a'];
		result['S'] = objHelpers.floorN(S,2);
		 
		
		return result;
	},
	
	/*проверка посчитанных данных var text = "W ="+param['W']+"; D = "+param['D']+"; S = "+param['S']; --------------------------------------------------------------*/
	check: function(param){
		if (param['W']<1 || param['W']>4){
			var text = "W ="+param['W'];
			objHelpers.popup(text+" "+AVG.lang[AVG.language]['error_calculation'],"error");
		}
		if (param['D']<0 || param['D']>0.7){
			var text = "D ="+param['D'];
			objHelpers.popup(text+" "+AVG.lang[AVG.language]['error_calculation'],"error");
		}
		if ((param['D']>=0 && param['D']<=0.7) && (param['W']>=1 && param['W']<=4)){
			var text = "W ="+param['W']+"; D = "+param['D']+"; S = "+param['S']; 
			objHelpers.popup_2(text+" "+AVG.lang[AVG.language]['true_calculation'],"success","center","objTablemeasur",param);
			
		}
		
	},

	/*----------------------------------------------добавление изображения для работы----------------------------------------*/
	addPicture: function(filename){
		objD3.remove(this.svg,".draggable"); /* очищаем канву */ 
	
		var container = this.svg.append("g");
	
		if (filename=="non_image"){
			var img_width = 1;
			var imgs = container.append("line")
				  .style("stroke", "rgb(255, 116, 0)")
				  .attr("class", "draggable")
				  .style("stroke-width", "1")
				  .attr("x1", 0)
				  .attr("y1", 0)
				  .attr("x2", 1)
				  .attr("y2", 1);
 
			
		} else {
			var img_width = 300;
			var imgs = container.append("image")
	        .attr("xlink:href", filename)
	        .attr("x", "60")
	        .attr("y", "60")
	        .attr("width", img_width)
	        .attr("class", "draggable")
	        .attr("height", img_width);
		} 
	
		
		
		
		//console.log(filename);
		this.filename = filename;
		
		this.makeWorkPlace();
		
		return false;
	},
	
 	
	/*-----------------------------------------------создание рабочей области--------------------------------------------------------------*/
	makeWorkPlace: function(){
		
		objD3.remove(this.svg,".markers");   
		objD3.remove(this.svg,".line-between-markers");   
		objD3.remove(this.svg,".orange_circle_1");   
		objD3.remove(this.svg,".orange_circle_2");   
		
		var svg = this.svg;
		  
		
		var zoom = d3.behavior.zoom()
			.scaleExtent([1, 10])
			.on("zoom", zoomed);
		
		var fake = d3.behavior.zoom();
		
		this.svg.call(zoom);
		
		 
		
		function zoomed() {
			   d3.select(".draggable").attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
			   $(objMeasurement.canvas).css('background','rgb(160, 160, 160)');
		}
		
		var container = this.svg.append("g");
	
	
		/*--------------------------------------------------------*/
		/*--------------------------МАРКЕРЫ-----------------------*/
		  
		
		
		/*линия между двумя маркерами для центровки*/
	    var line = container.append("line")
	      .style("stroke", "rgb(255, 116, 0)")
	      .attr("class", "line-between-markers")
	      .style("stroke-width", "2")
	      .attr("x1", 340)
	      .attr("y1", 30)
	      .attr("x2", 420)
	      .attr("y2", 30);
	    
	    container.append("g")
	        .attr("transform", "translate(" + 340 + "," + 30 + ")")
	        .attr("class", "orange_circle_1")
	        .call(onDragDrop(dragmove, dropHandler))
	        .attr("stroke", "rgb(255, 116, 0)")
	        .attr("stroke-width", "1")
	        .append("circle").attr({
	          r: 8,
	        })
	        .style("fill", "rgb(255, 116, 0)");

	    container.append("g")
	        .attr("transform", "translate(" + 420 + "," + 30 + ")")
	        .attr("class", "orange_circle_2")
		        .call(onDragDrop(dragmove, dropHandler))
	        .attr("stroke", "rgb(255, 116, 0)")
	        .attr("stroke-width", "1")
	        .append("circle").attr({
	          r: 8,
	        })
	        .style("fill", "rgb(255, 116, 0)");
			
		/*----------------пробегаемся циклом по массив и создаем маркеры----------------*/
		for (var index = 0; index < this.arrElemToolbar.length; ++index) {
			container.append("image")
			        .attr("xlink:href", "../img/"+this.arrElemToolbar[index][0]+".png")
			        .attr("x", (index*50)+10)
			        .attr("y", 5)
			        .attr("width", "35")
			        .attr("height", "52")
			        .attr("id", "marker_"+this.arrElemToolbar[index][0])
			        .attr("class","markers tooltip")
			        .attr("tooltip",this.arrElemToolbar[index][1])
			        .call(onDragDrop(dragmove, dropHandler));
		}	
			
		/*--------------------------------------------------------*/
		/*----------------------END МАРКЕРЫ-----------------------*/
		/*--------------------------------------------------------*/
		
		 
		/*--------------------------------------------------------*/
		/*----------------движение объектов-----------------------*/
		/*--------------------------------------------------------*/
		function onDragDrop(dragHandler, dropHandler) {
		        var drag = d3.behavior.drag();
		        drag.on("drag", dragHandler)
		         	.on('dragstart', startdropHandler)
		        	.on("dragend", dropHandler);
		        return drag;
		}
        
        /*----------------что происходит при окончания движения движении-----------------------*/
	    function dropHandler(d) {
		    svg.call(zoom); /*включаем зум у главной картинки*/
	    }

		/*----------------что происходит при движении-----------------------*/
		function dragmove(d) {
		 	var x = d3.event.x;
		    var y = d3.event.y; 
		     /*----------------движение картинки и маркеров-----------------------*/
		    d3.select(this)
		      .attr("x", d.x = (x-(this.getBBox().width/2)))
		      .attr("y", d.y = (y-(this.getBBox().height/2)));
          
		    /*----------------движение двух маркеров с общей линией----------------*/
	        if(d3.select(this).attr("class") == "orange_circle_1") {
	             line.attr("x1", x);
	             line.attr("y1", y);
	             d3.select(this).attr("transform", "translate(" + x + "," + y + ")");
	        } else if (d3.select(this).attr("class") == "orange_circle_2") {
	             line.attr("x2", x);
	             line.attr("y2", y);
	             d3.select(this).attr("transform", "translate(" + x + "," + y + ")");
	        } else{
	         	  
	        }
		}
 		    
		/*----------------что происходит при начале движения объектов*/
		function startdropHandler(d) {
		  	svg.call(fake);  /*отключаем зум у главной картинки*/ 
			$(objMeasurement.canvas).css('background','rgb(245, 245, 245)');			
		}
		/*--------------------------------------------------------*/
		/*------------END движение объектов-----------------------*/
		/*--------------------------------------------------------*/
			
			 
		return false;
	},
	
	
	
	
	
	
	
 

	
};

