var Network = function(networkDivId, networkWidth, networkHeight, cellWidth, cellHeight){
	 
	this.networkWidth = networkWidth - 2;
	this.networkHeight = networkHeight - 2;
	this.cellWidth = cellWidth;
	this.cellHeight = cellHeight;
	this.walkPathList = [];
	
	d3.select("#" + networkDivId)
		.append("svg")
		.attr("id", "network")
		.attr("width",networkWidth)
		.attr("height",networkHeight);
	
};

Network.prototype.loadImage = function(width, height, imagePath){
	d3.select("#network").append("image")
		.attr("xlink:href", imagePath);
};

Network.prototype.getNetwork = function(networkWidth, networkHeight, cellWidth, cellHeight){
  
	var data = new Array();
	var xpos = 1;
	var ypos = 1;
	
	// iterate for rows	
	for (var row = 0; row < networkHeight / cellHeight; row++) {
		data.push( new Array() );
		
		// iterate for cells/columns inside rows
		for (var column = 0; column < networkWidth / cellWidth; column++) {
			data[row].push({
				x: xpos,
				y: ypos,
				width: cellWidth,
				height: cellHeight,
				row : row,
				column : column
				
			})
			// increment the x position. I.e. move it over by 50 (width variable)
			xpos += cellWidth;
		}
		// reset the x position after a row is complete
		xpos = 1;
		// increment the y position for the next row. Move it down 50 (height variable)
		ypos += cellHeight;	
	}
	
	return data;
	
};

Network.prototype.drawNetwork = function(networkWidth, networkHeight, cellWidth, cellHeight){
	
	var gridData = this.getNetwork(networkWidth, networkHeight, cellWidth, cellHeight);	
	
	var row = d3.select("#network").selectAll(".row")
		.data(gridData)
		.enter().append("g")
		.attr("class", "row");
		
	var column = row.selectAll(".square")
		.data(function(d) { return d; })
		.enter().append("rect")
		.attr("class","square")
		.attr("x", function(d) { return d.x; })
		.attr("y", function(d) { return d.y; })
		.attr("width", function(d) { return d.width; })
		.attr("height", function(d) { return d.height; })
		.attr("row", function(d) { return d.row; })
		.attr("column", function(d) { return d.column; })
		.attr("centerX", function(d) { 								// 셀의 중심점 X
			var x = ((d.width * d.column) + (d.width * (d.column + 1))) / 2;
			return x;
		})
		.attr("centerY", function(d) { 								// 셀의 중심점 Y
			var y = ((d.height * d.row) + (d.height * (d.row + 1))) / 2;
			return y;
		})
		.style("fill", "white")
		.style("opacity", 1)
		.style("stroke", "#222");
};

Network.prototype.drawObject = function(objectNo, polygonNo, points, x, y) {
	
	var polygon = d3.select("#network").append('polygon')
	.attr('class', 'objects')
  	.attr('points', points)
  	.attr('objectNo', objectNo)
  	.attr('polygonNo', polygonNo)
  	.attr('objectType', '01')
  	.attr('x', x)
  	.attr('y', y)
  	.attr("transform", function(){
  		return "translate(" + x + "," + y + ")";
  	})
  	.attr("walkerable", "false")
  	.style("fill", "black")
	.style("opacity", "0.3");
	
};


Network.prototype.intersectObject = function(){
	
  var exits = [];
  
	d3.select("#network").selectAll(".objects").each(function(){
		
		var object = d3.select(this);
		var objectType = object.attr("objectType");
		
		var points = object.attr("points").split(" ");
		var x = object.attr("x");
		var y = object.attr("y");
		
		var polygon = [];
		
		for(var i=0; i<points.length; i++){
			var p = points[i].split(",");
			polygon.push([Number(p[0]), Number(p[1])]);
		}
		
		d3.select("#network").selectAll(".square").each(function(){
			var square = d3.select(this).node();
			
			var self = d3.select(this);
			
			var column = d3.select(this).attr("column");
			var row = d3.select(this).attr("row");
			
			var left = square.getBoundingClientRect().left + 50;
			var right = square.getBoundingClientRect().right + 50;
			var top = square.getBoundingClientRect().top + 50;
			var bottom = square.getBoundingClientRect().bottom + 50;
			
			var vertexList = [];
			
			vertexList.push([left, top]);
			vertexList.push([right, top]);
			vertexList.push([right, bottom]);
			vertexList.push([left, bottom]);
			
			for(var i=0; i<vertexList.length; i++){
				var vertex = vertexList[i];
				var contain = d3.polygonContains(polygon, [vertex[0], vertex[1]]);
				if(contain){
          
          if(objectType == '01'){
						self.style("fill","green")
						.style("opacity", 0)
						.attr("walkerable", "false");
					}else{
						self.style("fill","blue")
						.style("opacity", 0)
						.attr("walkerable", "true")
            .attr("exit", "true")
						.attr("row", row)
						.attr("column", column);
						
						exits.push([Number(row), Number(column)]);
					}
          
					break;
				}
			}
			
		});
		
		
	});
	
  return exits;
};

//출구 Drawing
Network.prototype.drawExit = function(objectNo, polygonNo, points, x, y) {
	
	var polygon = d3.select("#network").append('polygon')
	.attr('class', 'objects')
  	.attr('points', points)
  	.attr('objectNo', objectNo)
  	.attr('polygonNo', polygonNo)
  	.attr('objectType', '02')
  	.attr('x', x)
  	.attr('y', y)
  	.attr("transform", function(){
  		return "translate(" + x + "," + y + ")";
  	})
  	.attr("walkerable", "true")
  	.attr("exit", "true")
  	.style("fill","red")
	.style("opacity", .5);
};

// 보행자 생성
Network.prototype.createWalkers = function(walkerCnt, walkerType) {
	
	// 중복된 위치 여부
	function hasWalker(walkers, x, y){
	    var has = false;

	    for(var z=0; z<walkers.length; z++){
	    		if(walkers[z][0] == x && walkers[z][1] == y){
				has = true;
				break;
			}
		}
	    
	    return has;
	};
	
	// 장애물(객체) 위치 여부
	function isBlock(x, y){
	    	
		var block = false;
		
		d3.select("#network").selectAll(".square[walkerable='false']").each(function(){
    	var row = d3.select(this).attr("row");
	    var column = d3.select(this).attr("column");
	    		
	    if(column == x && row == y){
	    	block = true;
	    	return false;
			}
	  });
	    
	  d3.select("#network").selectAll(".square[exit='true']").each(function(){
        	 		
	    var row = d3.select(this).attr("row");
	    var column = d3.select(this).attr("column");
	    		
	    if(column == x && row == y){
	    	block = true;
	    	return false;
			}
	  });
	    	
		return block;
		
	};
	
	var walkers = [];
	
	for(var i=0; i<walkerCnt; i++){
		var x = Math.floor(Math.random() * networkWidth/cellWidth);
		var	y = Math.floor(Math.random() * networkHeight/cellHeight);
		
		var has = hasWalker(walkers, x, y);
		var block = isBlock(x, y);
		
		while(has || block){
			x = Math.floor(Math.random() * networkWidth/cellWidth);
			y = Math.floor(Math.random() * networkHeight/cellHeight);
			has = hasWalker(walkers, x, y);
			block = isBlock(x, y);
		}
		
		var walker = [x,y,walkerType];
		walkers.push(walker);
	}
	
	return walkers;
  
};

// 시뮬레이션 시작
Network.prototype.ready = function(walkers, exits) {
	
	var network = this.getCurrentNetworkData();
	
	var	column = Math.ceil(this.networkWidth / this.cellWidth);
	var	row = Math.ceil(this.networkHeight / this.cellHeight);
	
	var finder = new PF.AStarFinder({
		allowDiagonal: true
		, dontCrossCorners: true
	});
	
	var maxLength = 0;
	
	for(var i=0; i<walkers.length; i++){
		
		var startColumn = walkers[i][0];
		var startRow = walkers[i][1];
		var walkerType = walkers[i][2];
		var pathList = [];
		
		for(var j=0; j<exits.length; j++){
			var endColumn = exits[j][1];
			var endRow = exits[j][0];
			
			var grid = new PF.Grid(column, row, network);
			
			var path = finder.findPath(startColumn, startRow, endColumn, endRow, grid);
			
			pathList.push(path);
		}
		
		var shortest = pathList[0];
		
		for(var k=1; k<pathList.length; k++){
			if(pathList[k].length < shortest.length){
				shortest = pathList[k];
			}
		}
		
		if(shortest == null){
			continue;
		}
		
		if(maxLength < shortest.length){
			maxLength = shortest.length;
		} 
		
    	var walkPath = this.getWalkerablePath(shortest);
    	var walker = this.drawWalker(walkPath, i, walkerType);
    	var linePath = this.drawWalkPathLine(walkPath, i);
		
		var p = linePath.node().getPointAtLength(0);
		walker.attr("transform", "translate(" + p.x + "," + p.y + ")");
		walker.attr("walkPath", walkPath);
		walker.attr("sourcePath", shortest);
		walker.attr("linePath", linePath);
		
		this.walkPathList.push({
			"walker" : walker
			, "shortest" : shortest
			, "linePath" : linePath
		});
		
	}
	
	
	
	this.drawController(maxLength, this.walkPathList);
	
  /*	
  for(var i=0; i<this.walkPathList.length; i++){
		this.playWalker(this.walkPathList[i].walker, this.walkPathList[i].shortest, this.walkPathList[i].linePath);
    
	}
  */
  
};

//현재 네트워크 데이터 조회
Network.prototype.getCurrentNetworkData = function(){
	var data = [];
	var selector = ".row";
	
	d3.select("#network").selectAll(selector)
	.each(function(d,i){
		var rowData = [];
		var column = d3.select(this).selectAll(".square")
		.each(function(d,j){
			rowData.push(d3.select(this).attr("walkerable") == "false" ? 1 : 0);
		});
		data.push(rowData);
	});
	
	return data;
  
};

// 보행자 Drawing
Network.prototype.drawWalker = function(sourcePath, index, walkerType){
	
	var walkerGroup = d3.select("#network").append("g")
				.attr("class", "walker")
				.attr("currentT", 0)
				.attr("lastT", 0)
				.attr("id", "walker"+index)
				.attr("idx", index)
				.attr("speed", function(d){
					return walkerType == 'normal' ? 500 : 2000;
				});
  
	var walker = walkerGroup.append("circle")
				.attr("r", 5)
				.attr("stroke", "steelblue")
				.attr("stroke-width", 1)
				.attr("fill", "none");
	
	var arc = d3.symbol().type(d3.symbolTriangle);
	
	walkerGroup.append("path")
	.attr("d", arc)
	.attr("fill", "steelblue")
	.attr("transform", "scale(0.75)");
	
	return walkerGroup;

};

//네트워크 데이터 조회
Network.prototype.getWalkerablePath = function(path){
	var data = [];
	
	var walkPath = [];
	
	var selector = ".row";
	
	for(var z=0; z<path.length; z++){
		d3.select("#network").selectAll(selector)
		.each(function(d,i){
			var rowData = [];
			var column = d3.select(this).selectAll(".square")
			.each(function(dd,j){
				// 알고리즘에서 계산된 경로에 해당하는 셀 추가
				if(path[z][0] == d3.select(this).attr("column") && path[z][1] == d3.select(this).attr("row")){
					walkPath.push(d3.select(this));
				}
				
			});
			data.push(rowData);
		});
	}
	
	return walkPath;
};

// 보행 경로 Drawing
Network.prototype.drawWalkPathLine = function(walkPath, idx){
	
	var lineData = [];
	
	for(var i=0; i<walkPath.length; i++){
		var x = walkPath[i].attr("centerX");
		var y = walkPath[i].attr("centerY");
			
		lineData.push({ "x": x, "y": y});
	}
	
	var lineFunction = d3.line()
						.x(function(d) { return d.x; })
						.y(function(d) { return d.y; })
						//.curve(d3.curveNatural);
						//.curve(d3.curveCardinal);
						.curve(d3.curveBasis);
						
	var linePath = d3.select("#network").append("path")
						.attr("id", "path" + idx)
						.attr("d", lineFunction(lineData))
						.attr("stroke", "purple")
						.attr("stroke-width", .5)
						//.attr("display", "none")
						.attr("fill", "none");
  
	return linePath;
	
};

// 보행 경로 Drawing
Network.prototype.drawWalkPathLine2 = function(walkPath, idx){
	
	d3.select("#network").select("path[id='path" + idx + "']").remove();
		
	var lineData = [];
	
	for(var i=0; i<walkPath.length-1; i++){
		var x = ((this.cellWidth * walkPath[i][0]) + (this.cellWidth * (walkPath[i][0] + 1))) / 2;
		var y = ((this.cellHeight * walkPath[i][1]) + (this.cellHeight * (walkPath[i][1] + 1))) / 2;
			
		lineData.push({ "x": x, "y": y});
	}
	
	var lineFunction = d3.line()
						.x(function(d) { return d.x; })
						.y(function(d) { return d.y; })
						//.curve(d3.curveNatural);
						//.curve(d3.curveCardinal);
						//.curve(d3.curveLinear);
						.curve(d3.curveBasis);
						
	var linePath = d3.select("#network").append("path")
						.attr("id", "path" + idx)
						.attr("d", lineFunction(lineData))
						.attr("stroke", "purple")
						.attr("stroke-width", .5)
						//.attr("display", "none")
						.attr("fill", "none");
  
	return linePath;
	
};

// 보행
Network.prototype.playWalker = function(walker, sourcePath, linePath){
	
	var self = this;
	
	d3.select("#network").selectAll(".walker")
		.style("visibility", "visible");
	
	function transition(){
		
		var duration = sourcePath.length * walker.attr("speed");
		var lastT = walker.attr("lastT");
		
		var t = d3.transition()
		.ease(d3.easeLinear)  
		.duration(duration - (duration * lastT))
		.on("start", function(d){
			d3.selectAll("path").style("display", "block");
		});
		
		walker.transition(t)
		.attrTween("transform", translateAlong(linePath.node()))
		.attr("node", linePath.node())
		.on("end", function(d){
			d3.select(this).remove();
		});
		
		var totalLength = linePath.node().getTotalLength();
		
		linePath
			.transition(t)
			.attrTween("stroke-dasharray",function(){
				return d3.interpolateString("0," + totalLength, totalLength + "," + totalLength);
	    		});
		
		
	}
	
	transition();
	
	function translateAlong(path) {
		var l = path.getTotalLength();
		return function(d, i, a) {
			return function(t) {
				
				t += walker.attr("lastT");
				var p = path.getPointAtLength(t * l);
				walker.attr("currentT", t);
				
				if(collide(walker)){
					walker.select('path').style("fill", "red");
				}else{
					walker.select('path').style("fill", "steelblue");
				}
				
				var pos = t * l;
				
				function pointAtLength(l) {
					var xy = path.getPointAtLength(l);
					return [xy.x, xy.y];
				}
				
				// Approximate tangent
				function angleAtLength(l) {
					var a = pointAtLength(Math.max(l - 0.01,0)), // this could be slightly negative
						b = pointAtLength(l + 0.01); // browsers cap at total length

					return Math.atan2(b[1] - a[1], b[0] - a[0]) * 180 / Math.PI;
				}
				
				return "translate(" + p.x + "," + p.y + ") rotate( " + (angleAtLength(pos) - 25) + ")";
			};
		};
	}
	
	
	
	// 충돌 여부
	function collide(node){
		
		var nodeId = node.attr("id");
		
		var t = node.attr("transform");
		var trans = t.substring(t.indexOf("(")+1, t.indexOf(")")).split(",");
		
	  	var x1 = Number(trans[0]),
	      	x2 = Number(trans[0]) + Number(node.select('circle').attr("r")),
	      	y1 = Number(trans[1]),
	      	y2 = Number(trans[1]) + Number(node.select('circle').attr("r"));
	      
	  	var colliding = false;
	  
	  	d3.select("#network").selectAll(".walker:not(#" + nodeId + ")").each(function(d,i){
  			var t = d3.select(this).attr("transform");
  			var ntrans = t.substring(t.indexOf("(")+1, t.indexOf(")")).split(",");
			
  			var nx1 = Number(ntrans[0]),
  		      	nx2 = Number(ntrans[0]) + Number(d3.select(this).attr("r")),
  		      	ny1 = Number(ntrans[1]),
  		      	ny2 = Number(ntrans[1]) + Number(d3.select(this).attr("r"));
	  		
  			if(!(x1 >= nx2 || x2 <= nx1 || y1 >= ny2 || y2 <= ny1)){
  				colliding = true;
  				return;
  			}
	  	});
	  
	  	return colliding;
	  
	}
	
};

Network.prototype.drawController = function(maxLength){
	
	var self = this;
	
	d3.select("#controller").selectAll("*").remove();
	
	var svg = d3.select("#controller"),
	    margin = {right: 30, left: 30},
	    width =+ svg.attr("width") - margin.left - margin.right - 40,
	    height =+ svg.attr("height");
	
	var play = svg.append("g")
	  	.attr("class", "play")
	  	.attr("id", "player")
	  	.attr("maxLength", maxLength);
	
	play.append("circle")
		.attr("r", 15)
	    .attr("transform", "translate(" + margin.left + "," + height / 2 + ")");
	
	play.append("path")
		.attr("d", "M-22,-30l60,30l-60,30z")
	    .attr("transform", "translate(" + margin.left + "," + height / 2 + ") scale(.2)");
	
	play.append("rect")
		.attr("width", 60)
	    .attr("height", height)
	    .on("click", function() {
	    	self.play();
	    });
	
	var x = d3.scaleLinear()
	    .domain([0, maxLength])
	    .range([0, width])
	    .clamp(true);
	
	var slider = svg.append("g")
	    .attr("class", "slider")
	    .attr("transform", "translate(" + (margin.left + 40) + "," + height / 2 + ")");
	
	slider.append("line")
	    .attr("class", "track")
	    .attr("x1", x.range()[0])
	    .attr("x2", x.range()[1])
	    .select(function() { 
	    	return this.parentNode.appendChild(this.cloneNode(true)); 
		})
	    .attr("class", "track-inset")
	    .select(function() { 
	    	return this.parentNode.appendChild(this.cloneNode(true)); 
		})
	    .attr("class", "track-overlay")
	    .call(
	    	d3.drag().on("start.interrupt", function() { 
	    		slider.interrupt(); 
	    	})
	    	.on("start drag", function() {
	    		self.seeking(x.invert(d3.event.x), x, maxLength); 
	    	})
	    );
	    	
		// 눈금 단위 표시
		slider.insert("g", ".track-overlay")
	    		.attr("class", "ticks")
	    		.attr("transform", "translate(0, 18)")
	    		.selectAll("text")
	    		.data(x.ticks(maxLength))
	    		.enter()
	    			.append("text")
	    			.attr("x", x)
	    			.attr("text-anchor", "middle")
	    			.text(function(d) {
		    				if(d == 0){
		    				return "Start"
		    			}else if(d == maxLength){
		    				return "Finish"
		    			}else{
		    				return d % 2 == 1 ? d + "'" : "";
		    			}
		    		});
		
		// 눈금바 표시 
		slider.insert("g", ".track-overlay")
			.attr("class", "ticks-bar")
			.attr("transform", "translate(0, -8)")
			.selectAll("line")
			.data(x.ticks(maxLength))
			.enter()
				.append("line")
				.attr("x1", x)
				.attr("y1", 0)
				.attr("x2", x)
				.attr("y2", 15)
				.attr("stroke-width", function(d){
					if(d == 0){
		    				return 0
		    			}else if(d == maxLength){
		    				return 0
		    			}else{
		    				return 0.5;
		    			}
				})
	            .attr("stroke", "gray");
		
		
	var handle = slider.insert("circle", ".track-overlay")
		.attr("class", "handle")
	    .attr("r", 9);
	
};

// 시뮬레이션 seeking
Network.prototype.seeking = function(sliderCurrentT, x, sliderMaxLength) {
	
	var handle = d3.select("#controller").select(".handle");
	handle.attr("cx", x(sliderCurrentT));
	
	for(var i=0; i<this.walkPathList.length; i++){
	
		var walker = this.walkPathList[i].walker;
		
		var sourcePath = this.walkPathList[i].shortest;
		var linePath = this.walkPathList[i].linePath;
		var speed = walker.attr("speed");
		
		if(sourcePath.length == 0){	// 왜 생길까
			continue;
		}
		
		var walkerCurrentT = sliderCurrentT / sourcePath.length;
		
		walker.transition()
		.ease(d3.easeLinear)  
		.duration(function(d){
			return sourcePath.length * walker.attr("speed");
		})
		.attrTween("transform", translateAlong(linePath.node(), walkerCurrentT))
		.attr("node", linePath.node());
		//.on("end", function(d){
		//	d3.select(this).style("visibility", "hidden"); 
		//});
		
		function translateAlong(path, time) {
			var l = path.getTotalLength();
			return function(d, i, a) {
				return function(t) {
					var p = path.getPointAtLength(time * l);
					
					/*
					if(collide(walker)){
				        walker.style("fill", "red");
					}else{
						walker.style("fill", "steelblue");
					}
					*/
					
					var pos = time * l;
					
					function pointAtLength(l) {
						var xy = path.getPointAtLength(l);
						return [xy.x, xy.y];
					}
				
					// Approximate tangent
					function angleAtLength(l) {
						var a = pointAtLength(Math.max(l - 0.01,0)), // this could be slightly negative
							b = pointAtLength(l + 0.01); // browsers cap at total length

						return Math.atan2(b[1] - a[1], b[0] - a[0]) * 180 / Math.PI;
					}
				
					return "translate(" + p.x + "," + p.y + ") rotate( " + (angleAtLength(pos) - 25) + ")";
				};
			};
		}
		
		
	}

	
};

Network.prototype.play = function(){
	
	var self = this;
	
	var maxLength = d3.select("#controller").select("#player").attr("maxLength");
	
	var x = d3.scaleLinear()
    .domain([0, maxLength])
    .range([0, 900]) // <svg id="controller" width="1000" height="50"></svg>
    .clamp(true);
	
	d3.select("#controller").select(".slider").transition() 
	.ease(d3.easeLinear)  
    .duration(maxLength * 1000)
    .tween("seeking", function() {
    		var i = d3.interpolate(0, maxLength);
    		return function(t) { 
    			self.seeking(i(t), x, maxLength); 
    		};
    });
    
    /*
	for(var i=0; i<this.walkPathList.length; i++){
		this.playWalker(this.walkPathList[i].walker, this.walkPathList[i].shortest, this.walkPathList[i].linePath);
	}
	*/
};