var SELECTED_GRAPH_NODE = "";

function createSocialNetworkGraphKey() {
	var tb1 = new Element("div", {'id':'graphkeydivtoolbar','class':'toolbarrow', 'style':'width:100%;margin-top:5px;'});

	var key = new Element("div", {'id':'key','style':'float:left;'});
	var text = "";
	text += '<div style="float:left;margin-right:5px;"><span style="padding:3px;background: #E9157F; color: black; font-weight:bold;">The most connected</span></div>';
	text += '<div style="float:left;margin-right:5px;"><span style="padding:3px;background:#F8C7D9; color: black; font-weight:bold;">Highly connected</span></div>';
	text += '<div style="float:left;margin-right:5px;"><span style="padding:3px;background: #C6ECFE; color: black; font-weight:bold;">Moderately connected</span></div>';
	text += '<div style="float:left;margin-right:5px;"><span style="padding:3px;background: #E4E2E2; color: black; font-weight:bold;">Slightly connected</span></div>';
	text += '<div style="float:left;"><span style="border: 3px solid yellow; color: black; font-weight:bold">Selected item</span></div>';

	key.insert(text);
	tb1.insert(key);

	var count = new Element("div", {'id':'graphConnectionCount','style':'float:left;margin-left-25px;'});
	tb1.insert(count);

	return tb1;
}

/**
 * Create the basic graph toolbar for all network graphs
 */
function createBasicGraphToolbar(forcedirectedGraph, contentarea) {

	var tb2 = new Element("div", {'id':'graphmaintoolbar','class':'toolbarrow', 'style':'padding-top:5px;display:block;'});

	var button = new Element("button", {'id':'expandbutton','style':'margin-left:8px;padding:3px;','title':'Resize the Map'});
	var icon = new Element("img", {'id':'expandicon', 'src':"https://cohere.open.ac.uk/images/enlarge2.gif", 'border':'0', 'title':'Resize the Map'});
	button.insert(icon);
	tb2.insert(button);

	var link = new Element("a", {'id':'expandlink', 'title':'Resize the Map', 'style':'cursor:pointer;margin-left:5px;'});
	link.insert('<span id="linkbuttonsvn">Enlarge Map</span>');

	var handler = function() {
		if ($('header').style.display == "none") {
			$('linkbuttonsvn').update('Enlarge Map');
			$('expandicon').src="https://cohere.open.ac.uk/images/enlarge2.gif";
			reduceMap(contentarea, forcedirectedGraph);
		} else {
			$('linkbuttonsvn').update('Reduce Map');
			$('expandicon').src="https://cohere.open.ac.uk/images/reduce.gif";
			enlargeMap(contentarea, forcedirectedGraph);
		}
	};
	Event.observe(link,"click", handler);
	Event.observe(button,"click", handler);
	tb2.insert(link);

	var zoomOut = new Element("button", {'style':'margin-left: 30px;padding:3px;', 'title':'Zoom in'});
	var zoomOuticon = new Element("img", {'src':"https://cohere.open.ac.uk/images/magminus.png", 'border':'0'});
	zoomOut.insert(zoomOuticon);
	var zoomOuthandler = function() {
		zoomFD(forcedirectedGraph, 5.0);
	};
	Event.observe(zoomOut,"click", zoomOuthandler);
	tb2.insert(zoomOut);

	var zoomIn = new Element("button", {'style':'margin-left: 10px;padding:3px;', 'title':'Zoom out'});
	var zoomInicon = new Element("img", {'src':"https://cohere.open.ac.uk/images/magplus.png", 'border':'0'});
	zoomIn.insert(zoomInicon);
	var zoomInhandler = function() {
		zoomFD(forcedirectedGraph, -5.0);
	};
	Event.observe(zoomIn,"click", zoomInhandler);
	tb2.insert(zoomIn);

	var zoom1to1 = new Element("button", {'style':'margin-left: 10px;padding:3px;', 'title':'Zoom this network graph to 100% and center on the Focal item'});
	var zoom1to1icon = new Element("img", {'src':"https://cohere.open.ac.uk/images/zoomfull.png", 'border':'0'});
	zoom1to1.insert(zoom1to1icon);
	var zoom1to1handler = function() {
		zoomFDFull(forcedirectedGraph);
	};
	Event.observe(zoom1to1,"click", zoom1to1handler);
	tb2.insert(zoom1to1);

	var zoomFit = new Element("button", {'style':'margin-left: 10px;padding:3px;', 'title':'Scale graph down if required and move to make it all fit in the visible area'});
	var zoomFiticon = new Element("img", {'src':"https://cohere.open.ac.uk/images/zoomfit.png", 'border':'0'});
	zoomFit.insert(zoomFiticon);
	var zoomFithandler = function() {
		zoomFDFit(forcedirectedGraph);
	};
	Event.observe(zoomFit,"click", zoomFithandler);
	tb2.insert(zoomFit);

	var printButton = new Element("button", {'style':'margin-left: 10px;padding:3px;', 'title':'Print this network graph'});
	var printButtonicon = new Element("img", {'src':"https://cohere.open.ac.uk/images/printer.png", 'border':'0'});
	printButton.insert(printButtonicon);
	var printButtonhandler = function() {
		printCanvas(forcedirectedGraph);
	};
	Event.observe(printButton,"click", printButtonhandler);
	tb2.insert(printButton);

	return tb2;
}

/**
 * Create the graph toolbar for Social network graphs
 */
function createSocialGraphToolbar(forcedirectedGraph,contentarea) {

	var tb2 = createBasicGraphToolbar(forcedirectedGraph,contentarea);

	var sp = new Element("div", {'style':'float:left; margin-right: 10px;'});
	var link = new Element("a", {'href':'#conn-list', 'onkeypress':'enterKeyPressed(event)'});
	var img = new Element("img", {'title':'View the connections list'});
	img.src = URL_ROOT+'images/toolbars/connection.png';
	sp.insert(link);
	link.insert(img);
	Event.observe(sp,'click', stpConnList);

	tb2.insert(sp);

	var button3 = new Element("button", {'id':'viewdetailbutton','style':'margin-left: 30px;padding:3px;margin-bottom:5px;','title':'Open the home page of the currently selected person'});
	var icon3 = new Element("img", {'id':'viewdetailicon', 'src':"https://cohere.open.ac.uk/images/profile_sm.png", 'border':'0'});
	button3.insert(icon3);
	tb2.insert(button3);
	var view3 = new Element("a", {'id':'viewdetaillink', 'title':"Open the home page of the currently selected person", 'style':'margin-left:5px;cursor:pointer;'});
	view3.insert('<span id="viewbuttons">Explore Selected Person</span>');
	var handler3 = function() {
		var node = getSelectFDNode(forcedirectedGraph);
		if (node != null && node != "") {
			var userid = node.getData('oriuser').userid;
			if (userid != "") {
				viewUserHome(userid);
			} else {
				alert("Please make sure you have made a selection in the map.");
			}
		}
	};
	Event.observe(button3,"click", handler3);
	Event.observe(view3,"click", handler3);
	tb2.insert(view3);

	var button2 = new Element("button", {'id':'viewdetailbutton','style':'margin-left: 30px;padding:3px;','title':'Show all connections for the selected link'});
	var icon2 = new Element("img", {'id':'viewdetailicon', 'src':"https://cohere.open.ac.uk/images/connection.png", 'border':'0'});
	button2.insert(icon2);
	tb2.insert(button2);

	var view = new Element("a", {'id':'viewdetaillink', 'title':"Show all connections for the selected link", 'style':'margin-left:5px;cursor:pointer;'});
	view.insert('<span id="viewbuttons">Explore Selected Link</span>');
	var handler2 = function() {
		var adj = getSelectFDLink(forcedirectedGraph);
		var connectionids = adj.getData('connections');
		if (connectionids != "") {
			showMultiConnections(connectionids);
		} else {
			alert("Please make sure you have made a selection in the map.");
		}
	};
	Event.observe(button2,"click", handler2);
	Event.observe(view,"click", handler2);
	tb2.insert(view);

	return tb2;
}

/**
 * Create the graph toolbar for Node network graphs
 */
function createGraphToolbar(forcedirectedGraph,contentarea) {

	var tb2 = createBasicGraphToolbar(forcedirectedGraph,contentarea);

	var sp = new Element("div", {'style':'float:left; margin-right: 10px;'});
	var link = new Element("a", {'href':'#conn-list', 'onkeypress':'enterKeyPressed(event)'});
	var img = new Element("img", {'title':'View the connections list'});
	img.src = URL_ROOT+'images/toolbars/connection.png';
	sp.insert(link);
	link.insert(img);
	Event.observe(sp,'click', stpConnList);
	tb2.insert(sp);

	var button2 = new Element("button", {'id':'viewdetailbutton','style':'margin-left: 30px;padding:3px;','title':'Open the full details page for the currently selected item'});
	var icon2 = new Element("img", {'id':'viewdetailicon', 'src':"https://cohere.open.ac.uk/images/lightbulb-16.png", 'border':'0'});
	button2.insert(icon2);
	tb2.insert(button2);

	var view = new Element("a", {'id':'viewdetaillink', 'title':"Open the full details page for the currently selected item", 'style':'margin-left:5px;cursor:pointer;'});
	view.insert('<span id="viewbuttons">Explore Selected Item</span>');
	var handler2 = function() {
		var node = getSelectFDNode(forcedirectedGraph);
		if (node != null && node != "") {
			var nodeid = node.id;
			var nodetype = node.getData('nodetype');
			var width = getWindowWidth();
			var height = getWindowHeight()-20;
			viewNodeDetails(nodeid, nodetype, width, height);
		} else {
			alert("Please make sure you have made a selection in the map.");
		}
	};
	Event.observe(button2,"click", handler2);
	Event.observe(view,"click", handler2);
	tb2.insert(view);

	var button3 = new Element("button", {'id':'viewdetailbutton','style':'margin-left: 30px;padding:3px;margin-bottom:5px;','title':'Open the Author home page for the currently selected item'});
	var icon3 = new Element("img", {'id':'viewdetailicon', 'src':"https://cohere.open.ac.uk/images/profile_sm.png", 'border':'0'});
	button3.insert(icon3);
	tb2.insert(button3);
	var view3 = new Element("a", {'id':'viewdetaillink', 'title':"Open the Author home page for the currently selected item", 'style':'margin-left:5px;cursor:pointer;'});
	view3.insert('<span id="viewbuttons">Explore Author of Selected Item</span>');
	var handler3 = function() {
		var node = getSelectFDNode(forcedirectedGraph);
		if (node != null && node != "") {
			var userid = node.getData('oriuser').userid;
			if (userid != "") {
				viewUserHome(userid);
			} else {
				alert("Please make sure you have made a selection in the map.");
			}
		}
	};
	Event.observe(button3,"click", handler3);
	Event.observe(view3,"click", handler3);
	tb2.insert(view3);

	return tb2;
}

/**
 * Create the graph toolbar for network search graphs
 */
function createSearchGraphToolbar(forcedirectedGraph,contentarea) {

	var tb2 = createBasicGraphToolbar(forcedirectedGraph,contentarea);

	var tb3 = new Element("span", {'id':'graphsearchtoolbar','class':'toolbarrow'});

	
	
	
	tb2.insertBefore(tb3, tb2.firstChild);

	var button2 = new Element("button", {'id':'viewdetailbutton','style':'margin-left: 30px;padding:3px;','title':'Open the full details page for the currently selected item'});
	var icon2 = new Element("img", {'id':'viewdetailicon', 'src':"https://cohere.open.ac.uk/images/lightbulb-16.png", 'border':'0'});
	button2.insert(icon2);
	tb2.insert(button2);

	var view = new Element("a", {'id':'viewdetaillink', 'title':"Open the full details page for the currently selected item", 'style':'margin-left:5px;cursor:pointer;'});
	view.insert('<span id="viewbuttons">Explore Selected Item</span>');
	var handler2 = function() {
		var node = getSelectFDNode(forcedirectedGraph);
		if (node != null && node != "") {
			var nodeid = node.id;
			var nodetype = node.getData('nodetype');
			var width = getWindowWidth();
			var height = getWindowHeight()-20;
			viewNodeDetails(nodeid, nodetype, width, height);
		} else {
			alert("Please make sure you have made a selection in the map.");
		}
	};
	Event.observe(button2,"click", handler2);
	Event.observe(view,"click", handler2);
	tb2.insert(view);

	var button3 = new Element("button", {'id':'viewdetailbutton','style':'margin-left: 30px;padding:3px;margin-bottom:5px;','title':'Open the Author home page for the currently selected item'});
	var icon3 = new Element("img", {'id':'viewdetailicon', 'src':"https://cohere.open.ac.uk/images/profile_sm.png", 'border':'0'});
	button3.insert(icon3);
	tb2.insert(button3);
	var view3 = new Element("a", {'id':'viewdetaillink', 'title':"Open the Author home page for the currently selected item", 'style':'margin-left:5px;cursor:pointer;'});
	view3.insert('<span id="viewbuttons">Explore Author of Selected Item</span>');
	var handler3 = function() {
		var node = getSelectFDNode(forcedirectedGraph);
		if (node != null && node != "") {
			var userid = node.getData('oriuser').userid;
			if (userid != "") {
				viewUserHome(userid);
			} else {
				alert("Please make sure you have made a selection in the map.");
			}
		}
	};
	Event.observe(button3,"click", handler3);
	Event.observe(view3,"click", handler3);
	tb2.insert(view3);

	return tb2;
}

/**
 * Calulate the width and height of the visible graph area
 * depending if it is reduced or enlarged at present.
 */
function resizeFDGraph(graphview, contentarea, withInner){
	if ($('header')&& $('header').style.display == "none") {
		var width = $(contentarea).offsetWidth - 35;
		var height = getWindowHeight();
		//alert(height);

		if ($('graphkeydivtoolbar')) {
			height -= $('graphkeydivtoolbar').offsetHeight;
		}
		if ($('graphmaintoolbar')) {
			height -= $('graphmaintoolbar').offsetHeight;
		}
		//if ($('nodearealineartitle')) {
		//	height -= $('nodearealineartitle').offsetHeight;
		//}
		height -= 20;

		//alert(height);

		$(graphview.config.injectInto+'-outer').style.width = width+"px";
		$(graphview.config.injectInto+'-outer').style.height = height+"px";

		//if (withInner) {
			resizeFDGraphCanvas(graphview, width, height);
		//}
	} else {
		var size = calulateInitialGraphViewport(contentarea)
		$(graphview.config.injectInto+'-outer').style.width = size.width+"px";
		$(graphview.config.injectInto+'-outer').style.height = size.height+"px";

		//if (withInner) {
			resizeFDGraphCanvas(graphview, width, height);
		//}
	}

	// GRAB FOCUS
	graphview.canvas.getPos(true);
}


function calulateInitialGraphViewport(areaname) {
	var w = $(areaname).offsetWidth - 30;
	var h = getWindowHeight();
	//alert(h);

	if ($('header')) {
		h -= $('header').offsetHeight;
	}

	// The explore views toolbar
	if ($('nodearealineartitle')) {
		h -= $('nodearealineartitle').offsetHeight;
	}
	if ($('headertoolbar')) {
		h -= $('headertoolbar').offsetHeight;
		h -= 30;
	}

	if ($('graphkeydivtoolbar')) {
		h -= $('graphkeydivtoolbar').offsetHeight;
	}
	if ($('graphmaintoolbar')) {
		h -= $('graphmaintoolbar').offsetHeight;
	}

	// Main social Network
	if ($('tabs')) { // +user social uses this
		h -= $('tabs').offsetHeight;
	}
	if ($('tab-content-user-title')) {
		h -= $('tab-content-user-title').offsetHeight;
		h -= 35;
	}
	if ($('tab-content-user-search')) {
		h -= $('tab-content-user-search').offsetHeight;
	}
	if ($('usertabs')) {
		h -= $('usertabs').offsetHeight;
	}

	// User social network
	if ($('context')) {
		h -= $('context').offsetHeight;
	}
	if ($('tab-content-user-bar')) {
		h -= $('tab-content-user-bar').offsetHeight;
		h -= 20;
	}

	//alert(h);
	return {width:w, height:h};
}

/**
 * Called to set the screen to standard view
 */
function reduceMap(contentarea, forcedirectedGraph) {

	if ($('header')) {
		$('header').style.display="block";
	}

	// The explore views toolbar
	if ($('headertoolbar')) {
		$('headertoolbar').style.display="block";
	}
	if ($('nodearealineartitle')) {
		$('nodearealineartitle').style.display="block";
	}

	// Main social Network
	if ($('tabs')) { // +user social uses this
		$('tabs').style.display="block";
	}
	if ($('tab-content-user-title')) {
		$('tab-content-user-title').style.display="block";
	}
	if ($('tab-content-user-search')) {
		$('tab-content-user-search').style.display="block";
	}
	if ($('usertabs')) {
		$('usertabs').style.display="block";
	}

	// User social network
	if ($('context')) {
		$('context').style.display="block";
	}
	if ($('tab-content-user-bar')) {
		$('tab-content-user-bar').style.display="block";
	}

	resizeFDGraph(forcedirectedGraph, contentarea, true);
}

/**
 * Called to remove some screen realestate to increase map area.
 */
function enlargeMap(contentarea, forcedirectedGraph) {

	if ($('header')) {
		$('header').style.display="none";
	}

	// The explore views toolbar
	if ($('headertoolbar')) {
		$('headertoolbar').style.display="none";
	}
	if ($('nodearealineartitle')) {
		$('nodearealineartitle').style.display="none";
	}

	// Main social Network
	if ($('tabs')) { // +user social uses this
		$('tabs').style.display="none";
	}
	if ($('tab-content-user-title')) {
		$('tab-content-user-title').style.display="none";
	}
	if ($('tab-content-user-search')) {
		$('tab-content-user-search').style.display="none";
	}
	if ($('usertabs')) {
		$('usertabs').style.display="none";
	}

	// User social network
	if ($('context')) {
		$('context').style.display="none";
	}
	if ($('tab-content-user-bar')) {
		$('tab-content-user-bar').style.display="none";
	}

	resizeFDGraph(forcedirectedGraph, contentarea, true);
}

/**
 * Called by the Applet to open the applet help
 */
function showHelp() {
    loadDialog('help', URL_ROOT+'help/networkmap.php');
}

/**
 * Called by the Applet to go to the home page of the given userid
 */
function viewUserHome(userid) {
	var width = getWindowWidth();
	var height = getWindowHeight()-20;

	loadDialog('userdetails', URL_ROOT+"user.php?userid="+userid, width,height);
}

/**
 * Called by the Applet to go to the multi connection expanded view for the given connection
 */
function showMultiConnections(connectionids) {
	loadDialog("multiconnections", URL_ROOT+"ui/popups/showmulticonns.php?connectionids="+connectionids, 790, 450);
}

/**
 * Check if the current brwoser supports HTML5 Canvas.
 * Return true if it does, else false.
 */
function isCanvasSupported(){
  	var elem = document.createElement('canvas');
  	return !!(elem.getContext && elem.getContext('2d'));
}

/**
 * Called by the network graph to display a ideas full details.
 */
function viewNodeDetails(nodeid) {
	loadDialog('nodedetails', URL_ROOT+"ui/popups/nodedetails.php?nodeid="+nodeid);
}