/*
 * Copyright 2012 LinkedIn Corp.
 * 
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not
 * use this file except in compliance with the License. You may obtain a copy of
 * the License at
 * 
 * http://www.apache.org/licenses/LICENSE-2.0
 * 
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations under
 * the License.
 */

/*
 * SVG graph view.
 */

$.namespace('azkaban');

azkaban.SvgGraphView = Backbone.View.extend({
	events: {
	},

	initialize: function(settings) {
		this.model.bind('change:selected', this.changeSelected, this);
		this.model.bind('centerNode', this.centerNode, this);
		this.model.bind('change:graph', this.render, this);
		this.model.bind('resetPanZoom', this.resetPanZoom, this);
		this.model.bind('change:update', this.handleStatusUpdate, this);
		this.model.bind('change:disabled', this.handleDisabledChange, this);
		this.model.bind('change:updateAll', this.handleUpdateAllStatus, this);
		this.model.bind('expandFlow', this.expandFlow, this);
		this.model.bind('collapseFlow', this.collapseFlow, this);

		this.graphMargin = settings.graphMargin ? settings.graphMargin : 25;
		this.svgns = "http://www.w3.org/2000/svg";
		this.xlinksn = "http://www.w3.org/1999/xlink";
		
		var graphDiv = this.el[0];
		var svg = $(this.el).find('svg')[0];
		if (!svg) {
			svg = this.el;
		}

		this.svgGraph = svg;
		$(this.svgGraph).svg();
		this.svg = $(svg).svg('get');

		$(this.svgGraph).empty();
		
		// Create mainG node
		var gNode = document.createElementNS(this.svgns, 'g');
		gNode.setAttribute("class", "main graph");
		svg.appendChild(gNode);
		this.mainG = gNode;
		
		if (settings.rightClick) {
			this.rightClick = settings.rightClick;
		}

		$(svg).svgNavigate();
		
		var self = this;
		if (self.rightClick && self.rightClick.graph) {
			$(svg).on("contextmenu", function(evt) {
				console.log("graph click");
				var currentTarget = evt.currentTarget;
				
				self.rightClick.graph(evt, self.model, currentTarget.data);
				return false;
			});
		}

		this.tooltipcontainer = settings.tooltipcontainer ? settings.tooltipcontainer : "body";
		if (settings.render) {
			this.render();
		}
	},

	render: function() {
		console.log("graph render");
		$(this.mainG).empty();
		
		this.graphBounds = this.renderGraph(this.model.get("data"), this.mainG);
		this.resetPanZoom(0);
	},

	renderGraph: function(data, g) {
		g.data = data;
		var nodes = data.nodes;
		var edges = data.edges;
		var nodeMap = data.nodeMap;

		// Create a g node for edges, so that they're forced in the back.
		var edgeG = this.svg.group(g);
		if (nodes.length == 0) {
			console.log("No results");
			return;
		};

		// Assign labels
		for (var i = 0; i < nodes.length; ++i) {
			nodes[i].label = nodes[i].id;
		}
		
		var self = this;
		for (var i = 0; i < nodes.length; ++i) {
			this.drawNode(this, nodes[i], g);
			$(nodes[i].gNode).click(function(evt) {
				var selected = self.model.get("selected");
				if (selected == evt.currentTarget.data) {
					self.model.unset("selected");
				}
				else {
					self.model.set({"selected":evt.currentTarget.data});
				}
				
				evt.stopPropagation();
				evt.cancelBubble = true;
			});
		}

		// layout
		layoutGraph(nodes, edges, 10);
		var bounds = this.calculateBounds(nodes);
		this.moveNodes(nodes);
		
		for (var i = 0; i < edges.length; ++i) {
			edges[i].toNode = nodeMap[edges[i].to];
			edges[i].fromNode = nodeMap[edges[i].from];
			this.drawEdge(this, edges[i], edgeG);
		}
		
		this.model.set({"flowId":data.flowId, "edges": edges});
		
		var margin = this.graphMargin;
		bounds.minX = bounds.minX ? bounds.minX - margin : -margin;
		bounds.minY = bounds.minY ? bounds.minY - margin : -margin;
		bounds.maxX = bounds.maxX ? bounds.maxX + margin : margin;
		bounds.maxY = bounds.maxY ? bounds.maxY + margin : margin;
		
		this.assignInitialStatus(this, data);

		if (self.rightClick) {
			if (self.rightClick.node) {
				// Proper children selectors don't work properly on svg
				for (var i = 0; i < nodes.length; ++i) {
					$(nodes[i].gNode).on("contextmenu", function(evt) {
						console.log("node click");
						var currentTarget = evt.currentTarget;
						self.rightClick.node(evt, self.model, currentTarget.data);
						return false;
					});
				}
			}
			if (this.rightClick.graph) {
				$(g).on("contextmenu", function(evt) {
					console.log("graph click");
					var currentTarget = evt.currentTarget;
				
					self.rightClick.graph(evt, self.model, currentTarget.data);
					return false;
				});
			}
		};
		
		$(".node").each(function(d,i) {
			$(this).tooltip({
				container: self.tooltipcontainer, 
				delay: {
					show: 500, 
					hide: 100
				}
			});
		});

		return bounds;
	},

	handleDisabledChange: function(evt) {
		this.changeDisabled(this.model.get('data'));
	},

	changeDisabled: function(data) {
		for (var i = 0; i < data.nodes.length; ++i) {
			var node = data.nodes[i];
			if (node.disabled) {
				if (node.gNode) {
					addClass(node.gNode, "nodeDisabled");
					$(node.gNode).attr("title", "DISABLED (" + node.type + ")").tooltip('fixTitle');
				}
			}
			else {
				if (node.gNode) {
					removeClass(node.gNode, "nodeDisabled");
					$(node.gNode).attr("title", node.status + " (" + node.type + ")").tooltip('fixTitle');
				}
				if (node.type=='flow') {
					this.changeDisabled(node);
				}
			}
		}
	},

	assignInitialStatus: function(evt, data) {
		for (var i = 0; i < data.nodes.length; ++i) {
			var updateNode = data.nodes[i];
			var g = updateNode.gNode;
			var initialStatus = updateNode.status ? updateNode.status : "READY";
			
			addClass(g, initialStatus);
			var title = initialStatus + " (" + updateNode.type + ")";
			
			if (updateNode.disabled) {
				addClass(g, "nodeDisabled");
				title = "DISABLED (" + updateNode.type + ")";
			}
			$(g).attr("title", title);
		}
	},

	changeSelected: function(self) {
		console.log("change selected");
		var selected = this.model.get("selected");
		var previous = this.model.previous("selected");
		
		if (previous) {
			// Unset previous
			removeClass(previous.gNode, "selected");
		}
		
		if (selected) {
			this.propagateExpansion(selected);
			var g = selected.gNode;
			addClass(g, "selected");
			
			console.log(this.model.get("autoPanZoom"));
			if (this.model.get("autoPanZoom")) {
				this.centerNode(selected);
			}
		}
	},

	propagateExpansion: function(node) {
		if (node.parent.type) {
			this.propagateExpansion(node.parent);
			this.expandFlow(node.parent);
		}
	},

	handleStatusUpdate: function(evt) {
		var updateData = this.model.get("update");
		var data = this.model.get("data");
		this.updateStatusChanges(updateData, data);
	},

	updateStatusChanges: function(updateData, data) {
		// Assumes all changes have been applied.
		if (updateData.nodes) {
			var nodeMap = data.nodeMap;
			for (var i = 0; i < updateData.nodes.length; ++i) {
				var node = updateData.nodes[i];
				var nodeToUpdate = nodeMap[node.id];
				
				var g = nodeToUpdate.gNode;
				if (g) {
					this.handleRemoveAllStatus(g);
					addClass(g, nodeToUpdate.status);
					
					var title = nodeToUpdate.status + " (" + nodeToUpdate.type + ")";
					if (nodeToUpdate.disabled) {
						addClass(g, "nodeDisabled");
						title = "DISABLED (" + nodeToUpdate.type + ")";
					}
					$(g).attr("title", title).tooltip('fixTitle');
					
					if (node.nodes) {
						this.updateStatusChanges(node, nodeToUpdate);
					}
				}
			}
		}
	},

  handleRemoveAllStatus: function(gNode) {
		for (var j = 0; j < statusList.length; ++j) {
			var status = statusList[j];
			removeClass(gNode, status);
		}
	},

  handleRightClick: function(self) {
		if (this.rightClick) {
			var callbacks = this.rightClick;
			var currentTarget = self.currentTarget;
			if (callbacks.node && currentTarget.jobid) {
				callbacks.node(self, this.model, currentTarget.nodeobj);
			}
			else if (callbacks.edge && 
					(currentTarget.nodeName == "polyline" || 
					 currentTarget.nodeName == "line")) {
				callbacks.edge(self, this.model);
			}
			else if (callbacks.graph) {
				callbacks.graph(self, this.model);
			}
			return false;
		}
		return true;
	},

	drawEdge: function(self, edge, g) {
		var svg = this.svg;
		var svgns = self.svgns;
		
		var startNode = edge.fromNode;
		var endNode = edge.toNode;
		
		var startPointY = startNode.y + startNode.height/2;
		var endPointY = endNode.y - endNode.height/2;

		if (edge.guides) {
			// Create guide array
			var pointArray = new Array();
			pointArray.push([startNode.x, startPointY]);
			for (var i = 0; i < edge.guides.length; ++i ) {
				var edgeGuidePoint = edge.guides[i];
				pointArray.push([edgeGuidePoint.x, edgeGuidePoint.y]);
			}
			pointArray.push([endNode.x, endPointY]);
		
			edge.line = svg.polyline(g, pointArray, {class:"edge", fill:"none"});
			edge.line.data = edge;
			edge.oldpoints = pointArray;
		}
		else { 
			edge.line = svg.line(g, startNode.x, startPointY, endNode.x, endPointY, {class:"edge"});
			edge.line.data = edge;
		}
	},

	drawNode: function(self, node, g) {
		if (node.type == 'flow') {
			this.drawFlowNode(self, node, g);
		}
		else {
			this.drawBoxNode(self, node, g);
		}
	},

	moveNodes: function(nodes) {
		var svg = this.svg;
		for (var i = 0; i < nodes.length; ++i) {
			var node = nodes[i];
			var gNode = node.gNode;
			
			svg.change(gNode, {"transform": translateStr(node.x, node.y)});
		}
	},

	expandFlow: function(node) {
		var svg = this.svg;
		var gnode = node.gNode;
		node.expanded = true;

		var innerG = gnode.innerG;
		var borderRect = innerG.borderRect;
		var labelG = innerG.labelG;
		
		var bbox;
		if (!innerG.expandedFlow) {
			var topmargin= 30, bottommargin=5;
			var hmargin = 10;
		
			var expandedFlow = svg.group(innerG, "", {class: "expandedGraph"});
			this.renderGraph(node, expandedFlow);
			innerG.expandedFlow = expandedFlow;
			removeClass(innerG, "collapsed");
			addClass(innerG, "expanded");
			node.expandedWidth = node.width;
			node.expandedHeight = node.height;
		}
		else {
			$(innerG.expandedFlow).show();
			removeClass(innerG, "collapsed");
			addClass(innerG, "expanded");
			node.width = node.expandedWidth;
			node.height = node.expandedHeight;		
		}
		
		this.relayoutFlow(node);
		
		var bounds = this.calculateBounds(this.model.get("data").nodes);

		var margin = this.graphMargin;
		bounds.minX = bounds.minX ? bounds.minX - margin : -margin;
		bounds.minY = bounds.minY ? bounds.minY - margin : -margin;
		bounds.maxX = bounds.maxX ? bounds.maxX + margin : margin;
		bounds.maxY = bounds.maxY ? bounds.maxY + margin : margin;
		this.graphBounds = bounds;
	},

	collapseFlow: function(node) {
		console.log("Collapsing flow");
		var svg = this.svg;
		var gnode = node.gNode;
		node.expanded = false;
	
		var innerG = gnode.innerG;
		var borderRect = innerG.borderRect;
		var labelG = innerG.labelG;

		removeClass(innerG, "expanded");
		addClass(innerG, "collapsed");

		node.height = node.collapsedHeight;
		node.width = node.collapsedWidth;

		$(innerG.expandedFlow).hide();
		this.relayoutFlow(node);

		var bounds = this.calculateBounds(this.model.get("data").nodes);

		var margin = this.graphMargin;
		bounds.minX = bounds.minX ? bounds.minX - margin : -margin;
		bounds.minY = bounds.minY ? bounds.minY - margin : -margin;
		bounds.maxX = bounds.maxX ? bounds.maxX + margin : margin;
		bounds.maxY = bounds.maxY ? bounds.maxY + margin : margin;
		this.graphBounds = bounds;
	},

	relayoutFlow: function(node) {
		if (node.expanded) {
			this.layoutExpandedFlowNode(node);
		}

		var parent = node.parent;
		if (parent) {
			layoutGraph(parent.nodes, parent.edges, 10);
			this.relayoutFlow(parent);
			// Move all points again.
			this.moveNodeEdges(parent.nodes, parent.edges);
			this.animateExpandedFlowNode(node, 250);
		}
	},

	moveNodeEdges: function(nodes, edges) {
		var svg = this.svg;
		for (var i = 0; i < nodes.length; ++i) {
			var node = nodes[i];
			var gNode = node.gNode;
			
			$(gNode).animate({"svgTransform": translateStr(node.x, node.y)}, 250);
		}
			
		for (var j = 0; j < edges.length; ++j) {
			var edge = edges[j];
			var startNode = edge.fromNode;
			var endNode = edge.toNode;
			var line = edge.line;
				
			var startPointY = startNode.y + startNode.height/2;
			var endPointY = endNode.y - endNode.height/2;
			
			if (edge.guides) {
				// Create guide array
				var pointArray = new Array();
				pointArray.push([startNode.x, startPointY]);
				for (var i = 0; i < edge.guides.length; ++i ) {
					var edgeGuidePoint = edge.guides[i];
					pointArray.push([edgeGuidePoint.x, edgeGuidePoint.y]);
				}
				pointArray.push([endNode.x, endPointY]);
				
				animatePolylineEdge(svg, edge, pointArray, 250);
				edge.oldpoints = pointArray;
			}
			else {
				$(line).animate({
					svgX1: startNode.x, 
					svgY1: startPointY, 
					svgX2: endNode.x, 
					svgY2: endPointY
				});
			}
		}
	},

	calculateBounds: function(nodes) {
		var bounds = {};
		var node = nodes[0];
		bounds.minX = node.x - 10;
		bounds.minY = node.y - 10;
		bounds.maxX = node.x + 10;
		bounds.maxY = node.y + 10;

		for (var i = 0; i < nodes.length; ++i) {
			node = nodes[i];
			var centerX = node.width/2;
			var centerY = node.height/2;

			var minX = node.x - centerX;
			var minY = node.y - centerY;
			var maxX = node.x + centerX;
			var maxY = node.y + centerY; 
			
			bounds.minX = Math.min(bounds.minX, minX);
			bounds.minY = Math.min(bounds.minY, minY);
			bounds.maxX = Math.max(bounds.maxX, maxX);
			bounds.maxY = Math.max(bounds.maxY, maxY);
		}
		bounds.width = bounds.maxX - bounds.minX;
		bounds.height = bounds.maxY - bounds.minY;
		
		return bounds;
	},

	drawBoxNode: function(self, node, g) {
		var svg = this.svg;
		var horizontalMargin = 8;
		var verticalMargin = 2;
		
		var nodeG = svg.group(g, "", {class:"node jobnode"});
		
		var innerG = svg.group(nodeG, "", {class:"nodebox"});
		var borderRect = svg.rect(innerG, 0, 0, 10, 10, 3, 3, {class: "border"});
		var jobNameText = svg.text(innerG, horizontalMargin, 16, node.label);
		nodeG.innerG = innerG;
		innerG.borderRect = borderRect;		

		var labelBBox = jobNameText.getBBox();
		var totalWidth = labelBBox.width + 2*horizontalMargin;
		var totalHeight = labelBBox.height + 2*verticalMargin;
		svg.change(borderRect, {width: totalWidth, height: totalHeight});
		svg.change(jobNameText, {y: (totalHeight + labelBBox.height)/2 - 3});
		svg.change(innerG, {transform: translateStr(-totalWidth/2, -totalHeight/2)});
		
		node.width=totalWidth;
		node.height=totalHeight;
		
		node.gNode = nodeG;
		nodeG.data = node;
	},

	drawFlowNode: function(self, node, g) {
		var svg = this.svg;
		
		// Base flow node
		var nodeG = svg.group(g, "", {"class": "node flownode"});
		
		// Create all the elements
		var innerG = svg.group(nodeG, "", {class: "nodebox collapsed"});
		var borderRect = svg.rect(innerG, 0, 0, 10, 10, 3, 3, {class: "flowborder"});
		
		// Create label
		var labelG = svg.group(innerG);
		var iconHeight = 20;
		var iconWidth = 21;
		var textOffset = iconWidth + 4;
		var jobNameText = svg.text(labelG, textOffset, 1, node.label);
		var flowIdText = svg.text(labelG, textOffset, 11, node.flowId, {"font-size": 8})
		var tempLabelG = labelG.getBBox();
		var iconImage = svg.image(
				labelG, 0, -iconHeight/2, iconWidth, iconHeight, 
				contextURL + "/images/graph-icon.png", {}); 

		// Assign key values to make searching quicker
		node.gNode=nodeG;
		nodeG.data=node;

		// Do this because jquery svg selectors don't work
		nodeG.innerG = innerG;
		innerG.borderRect = borderRect;
		innerG.labelG = labelG;

		// Layout everything in the node
		this.layoutFlowNode(self, node);
	},

	layoutFlowNode: function(self, node) {
		var svg = this.svg;
		var horizontalMargin = 8;
		var verticalMargin = 2;

		var gNode = node.gNode;
		var innerG = gNode.innerG;
		var borderRect = innerG.borderRect;
		var labelG = innerG.labelG;

		var labelBBox = labelG.getBBox();
		var totalWidth = labelBBox.width + 2*horizontalMargin;
		var totalHeight = labelBBox.height + 2*verticalMargin;

		svg.change(labelG, {transform: translateStr(horizontalMargin, labelBBox.height/2 + verticalMargin)});
		svg.change(innerG, {transform: translateStr(-totalWidth/2, -totalHeight/2)});
		svg.change(borderRect, {width: totalWidth, height: totalHeight});

		node.height = totalHeight;
		node.width = totalWidth;
		node.collapsedHeight = totalHeight;
		node.collapsedWidth = totalWidth;
	},

	layoutExpandedFlowNode: function(node) {
		var svg = this.svg;
		var topmargin= 30, bottommargin=5;
		var hmargin = 10;
		
		var gNode = node.gNode;
		var innerG = gNode.innerG;
		var borderRect = innerG.borderRect;
		var labelG = innerG.labelG;
		var expandedFlow = innerG.expandedFlow;
		
		var bound = this.calculateBounds(node.nodes);
		
		node.height = bound.height + topmargin + bottommargin;
		node.width = bound.width + hmargin*2;
		svg.change(expandedFlow, {transform: translateStr(-bound.minX + hmargin, -bound.minY + topmargin)});
		//$(innerG).animate({svgTransform: translateStr(-node.width/2, -node.height/2)}, 50);
		//$(borderRect).animate({svgWidth: node.width, svgHeight: node.height}, 50);
	},

	animateExpandedFlowNode: function(node, time) {
		var gNode = node.gNode;
		var innerG = gNode.innerG;
		var borderRect = innerG.borderRect;

		$(innerG).animate({svgTransform: translateStr(-node.width/2, -node.height/2)}, time);
		$(borderRect).animate({svgWidth: node.width, svgHeight: node.height}, time);
		$(borderRect).animate({svgFill: 'white'}, time);
	},

	resetPanZoom: function(duration) {
		var bounds = this.graphBounds;
		var param = {
			x: bounds.minX, 
			y: bounds.minY, 
			width: (bounds.maxX - bounds.minX), 
			height: (bounds.maxY - bounds.minY), duration: duration
		};

		this.panZoom(param);
	},

	centerNode: function(node) {
		// The magic of affine transformation. 
		// Multiply the inverse root matrix with the current matrix to get the node 
		// position.
		// Rather do this than to traverse backwards through the scene graph.
		var ctm = node.gNode.getCTM();
		var transform = node.gNode.getTransformToElement();
		var globalCTM = this.mainG.getCTM().inverse();
		var otherTransform = globalCTM.multiply(ctm);
		// Also a beauty of affine transformation. The translate is always the 
		// left most column of the matrix.
		var x = otherTransform.e - node.width/2;
		var y = otherTransform.f - node.height/2;

		this.panZoom({x: x, y: y, width: node.width, height: node.height});
	},

	globalNodePosition: function(gNode) {
		if (node.parent) {
		
			var parentPos = this.globalNodePosition(node.parent);
			return {x: parentPos.x + node.x, y: parentPos.y + node.y};
		}
		else {
			return {x: node.x, y: node.y};		
		}
	},

	panZoom: function(params) {
		params.maxScale = 2;
		$(this.svgGraph).svgNavigate("transformToBox", params);
	}
});
