RED.view = (function() {

var space_width = 5000,

space_height = 5000,

lineCurveScale = 0.75,

scaleFactor = 1,

node_width = 100,

node_height = 30;

var touchLongPressTimeout = 1000,

startTouchDistance = 0,

startTouchCenter = [],

moveTouchCenter = [],

touchStartTime = 0;

var workspaceScrollPositions = {};

var gridSize = 20;

var snapGrid = false;

var activeSpliceLink;

var spliceActive = false;

var spliceTimer;

var activeSubflow = null;

var activeNodes = [];

var activeLinks = [];

var activeFlowLinks = [];

var selected_link = null,

mousedown_link = null,

mousedown_node = null,

mousedown_port_type = null,

mousedown_port_index = 0,

mouseup_node = null,

mouse_offset = [0,0],

mouse_position = null,

mouse_mode = 0,

moving_set = [],

lasso = null,

showStatus = false,

lastClickNode = null,

dblClickPrimed = null,

clickTime = 0,

clickElapsed = 0;

var clipboard = "";

var status_colours = {

"red": "#c00",

"green": "#5a8",

"yellow": "#F9DF31",

"blue": "#53A3F3",

"grey": "#d3d3d3"

}

var outer = d3.select("#chart")

.append("svg:svg")

.attr("width", space_width)

.attr("height", space_height)

.attr("pointer-events", "all")

.style("cursor","crosshair")

.on("mousedown", function() {

focusView();

});

var vis = outer

.append("svg:g")

.on("dblclick.zoom", null)

.append("svg:g")

.on("mousemove", canvasMouseMove)

.on("mousedown", canvasMouseDown)

.on("mouseup", canvasMouseUp)

.on("touchend", function() {

clearTimeout(touchStartTime);

touchStartTime = null;

if (RED.touch.radialMenu.active()) {

return;

}

if (lasso) {

outer_background.attr("fill","#fff");

}

canvasMouseUp.call(this);

})

.on("touchcancel", canvasMouseUp)

.on("touchstart", function() {

var touch0;

if (d3.event.touches.length>1) {

clearTimeout(touchStartTime);

touchStartTime = null;

d3.event.preventDefault();

touch0 = d3.event.touches.item(0);

var touch1 = d3.event.touches.item(1);

var a = touch0["pageY"]-touch1["pageY"];

var b = touch0["pageX"]-touch1["pageX"];

var offset = $("#chart").offset();

var scrollPos = [$("#chart").scrollLeft(),$("#chart").scrollTop()];

startTouchCenter = [

(touch1["pageX"]+(b/2)-offset.left+scrollPos[0])/scaleFactor,

(touch1["pageY"]+(a/2)-offset.top+scrollPos[1])/scaleFactor

];

moveTouchCenter = [

touch1["pageX"]+(b/2),

touch1["pageY"]+(a/2)

]

startTouchDistance = Math.sqrt((a*a)+(b*b));

} else {

var obj = d3.select(document.body);

touch0 = d3.event.touches.item(0);

var pos = [touch0.pageX,touch0.pageY];

startTouchCenter = [touch0.pageX,touch0.pageY];

startTouchDistance = 0;

var point = d3.touches(this)[0];

touchStartTime = setTimeout(function() {

touchStartTime = null;

showTouchMenu(obj,pos);

//lasso = vis.append("rect")

// .attr("ox",point[0])

// .attr("oy",point[1])

// .attr("rx",2)

// .attr("ry",2)

// .attr("x",point[0])

// .attr("y",point[1])

// .attr("width",0)

// .attr("height",0)

// .attr("class","lasso");

//outer_background.attr("fill","#e3e3f3");

},touchLongPressTimeout);

}

})

.on("touchmove", function(){

if (RED.touch.radialMenu.active()) {

d3.event.preventDefault();

return;

}

var touch0;

if (d3.event.touches.length<2) {

if (touchStartTime) {

touch0 = d3.event.touches.item(0);

var dx = (touch0.pageX-startTouchCenter[0]);

var dy = (touch0.pageY-startTouchCenter[1]);

var d = Math.abs(dx*dx+dy*dy);

if (d > 64) {

clearTimeout(touchStartTime);

touchStartTime = null;

}

} else if (lasso) {

d3.event.preventDefault();

}

canvasMouseMove.call(this);

} else {

touch0 = d3.event.touches.item(0);

var touch1 = d3.event.touches.item(1);

var a = touch0["pageY"]-touch1["pageY"];

var b = touch0["pageX"]-touch1["pageX"];

var offset = $("#chart").offset();

var scrollPos = [$("#chart").scrollLeft(),$("#chart").scrollTop()];

var moveTouchDistance = Math.sqrt((a*a)+(b*b));

var touchCenter = [

touch1["pageX"]+(b/2),

touch1["pageY"]+(a/2)

];

if (!isNaN(moveTouchDistance)) {

oldScaleFactor = scaleFactor;

scaleFactor = Math.min(2,Math.max(0.3, scaleFactor + (Math.floor(((moveTouchDistance*100)-(startTouchDistance*100)))/10000)));

var deltaTouchCenter = [ // Try to pan whilst zooming - not 100%

startTouchCenter[0]*(scaleFactor-oldScaleFactor),//-(touchCenter[0]-moveTouchCenter[0]),

startTouchCenter[1]*(scaleFactor-oldScaleFactor) //-(touchCenter[1]-moveTouchCenter[1])

];

startTouchDistance = moveTouchDistance;

moveTouchCenter = touchCenter;

$("#chart").scrollLeft(scrollPos[0]+deltaTouchCenter[0]);

$("#chart").scrollTop(scrollPos[1]+deltaTouchCenter[1]);

redraw();

}

}

});

var outer_background = vis.append("svg:rect")

.attr("width", space_width)

.attr("height", space_height)

.attr("fill","#fff");

var gridScale = d3.scale.linear().range([0,space_width]).domain([0,space_width]);

var grid = vis.append("g");

grid.selectAll("line.horizontal").data(gridScale.ticks(space_width/gridSize)).enter()

.append("line")

.attr(

{

"class":"horizontal",

"x1" : 0,

"x2" : space_width,

"y1" : function(d){ return gridScale(d);},

"y2" : function(d){ return gridScale(d);},

"fill" : "none",

"shape-rendering" : "crispEdges",

"stroke" : "#eee",

"stroke-width" : "1px"

});

grid.selectAll("line.vertical").data(gridScale.ticks(space_width/gridSize)).enter()

.append("line")

.attr(

{

"class":"vertical",

"y1" : 0,

"y2" : space_width,

"x1" : function(d){ return gridScale(d);},

"x2" : function(d){ return gridScale(d);},

"fill" : "none",

"shape-rendering" : "crispEdges",

"stroke" : "#eee",

"stroke-width" : "1px"

});

grid.style("visibility","hidden");

var dragGroup = vis.append("g");

var drag_lines = [];

function showDragLines(nodes) {

}

function hideDragLines() {

}

function updateActiveNodes() {

}

function init() {

}

function canvasMouseDown() {

}

function canvasMouseMove() {