Interface update (WARNING: Flash to JS communication is currently broken, and JS to Flash does not work on Firefox, to be fixed soon)

8 files changed, 391 insertions, 441 deletions

diff --git a/public/css/style.css b/public/css/style.css
index 320292a..3fad3cb 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -1,139 +1,204 @@
-html,body {
-	margin:				0;
-	padding:			0;
-	height:				100%;
-	background:			#FFF;
+*{
+	margin: 0;
+	padding: 0;
+	font-family: Helvetica,Arial;
+	font-size: 8pt;
+}
+
+#head{
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	height: 20px;
+	background-color: #f0f0f0;
 	
-	font-family:		Helvetica;
-	font-size:			10pt;
-	color:				#666;
+	font-weight: bold;
+
+	border-bottom-color: #B5B5B5;
+	border-bottom-width: 1px;
+	border-bottom-style: solid;
 }
 
-p { 
-	line-height:		1.5; 
-	margin:				0 0 1em;
+#head_title{
+	float: left;
+	padding-left: 10px;
+	padding-top: 4px;
 }
 
-table, tr {
-	width:				100%;
-	border-spacing:		0px;
+#head a{
+	float: right;
+	padding-right: 10px;
+	padding-top: 4px;
 }
 
-td {
-	display:			table-cell;
-	border-spacing:		0px;
+#main{
+	position: absolute;
+	top: 21px;
+	bottom: 114px;
+	left: 0;
+	right: 0;
+	background-color: #fff;
 }
 
-a.button{
-	height:				30px;
-	line-height:		29px;
-	margin-bottom:		14px;
-	text-decoration:	none;
+#foot{
+	position: absolute;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	height: 113px;
 	
-	font-family:		Helvetica;
-	font-size:			small;
-	color:				#666;
+	background-color: #f0f0f0;
+
+	border-top-color: #b5b5b5;
+	border-top-width: 1px;
+	border-top-style: solid;
 }
 
-a:hover.button{
-	color:				#0066CC;
+#query{
+	float: left;
+	width: 36%;
+	height: 112px;
+	
+	background-color: #ccc;
+	background-image: -webkit-gradient(
+		linear,
+		left bottom,
+		left top,
+		color-stop(0, rgb(181,181,181)),
+		color-stop(0.99, rgb(224,224,224))
+	);
+	background-image: -moz-linear-gradient(
+		center bottom,
+		rgb(181,181,181) 0,
+		rgb(224,224,224) 111pt,
+		rgb(256,256,256) 112pt,
+	);
+
+	border-top-color: #F0F0F0;
+	border-top-width: 1px;
+	border-top-style: solid;
+
+	border-right-color: #B5B5B5;
+	border-right-width: 1px;
+	border-right-style: solid;
+}
+	
+#query_query{
+	float: left;
+	height: 112px;
+	width: 70%;
 }
 
-.edges{
-	background:			url("../images/displayedges.png") no-repeat 24px 4px;
-	text-indent:		52px;
-	display:			block;
+#query_top{
+	width: 100%;
+	height: 65%;
 }
 
-.labels{
-	background:			url("../images/displaylabels.png") no-repeat 24px 0px;
-	text-indent:		52px;
-	display:			block;
+#query_top label{
+	padding-left: 10px;
+	font-family: Collegiate;
+	font-size: 26pt;
 }
 
-.fisheye{
-	background:			url("../images/fisheye.png") no-repeat 24px 4px;
-	text-indent:		52px;
-	display:			block;
+#query_top input{
+	padding-right: 10px;
+	font-size: 20pt;
+	width: 60%;
 }
 
-.title {
-	text-align:			center;
-	font-size:			12pt;
-	color:				#000;
+#query_bottom{
+	width: 100%;
+	height: 35%;
 }
 
-.verticalTitle {
-	float:				left;
-	position:			absolute;
-	text-align:			center;
-	font-size:			12pt;
-	color:				#000;
-	
-	-o-transform:		rotate(-90deg); 
-	-webkit-transform:	rotate(-90deg); 
-	-moz-transform:		rotate(-90deg);
+#query_bottom span{
+	float: left;
+	width: 50%;
 }
 
-.tab {
-	width:				200px;
+#query_bottom span label{
+	padding-left: 10px;
 }
 
-.github {
-	padding-left:		100px;
-	font-family:		Collegiate;
-	font-size:			26pt;
-	color:				black;
-	vertical-align:		middle;
+#query_bottom select{
+	width: auto;
 }
 
-.greyBG {
-	background-image:	url("../images/bottom_bg.png");
+#query_properties{
+	
+}
+		
+#query_buttons{
+	float: left;
+	width: 30%;
+	height: 100%;
 }
+		
+#query_buttons:hover{
+	color: #F0F;
+}
+
+#query_buttons input{
+	display: block;
+	color: #666;
+	border: 0;
+	background-color: transparent;}
 
-.query {
-	width:				240px;
-	font-size:			18pt;
-	font-family:		Helvetica;
-	float:				left;
-	padding-top:		10px;
+input.edges{
+	height: 36px;
+	padding-left: 28px;
+	background: url("../images/edges.png") no-repeat 0 50%;
 }
 
-#container {
-	padding:			0;
-	margin:				0 auto;
-	width:				100%;
-	height:				100%;
-	
-	background:			#FFF;
+input.labels{
+	height: 36px;
+	padding-left: 28px;
+	background: url("../images/labels.png") no-repeat 0 50%;
 }
 
-#header {
-	position:			absolute;
-	right:				0px;
-	top:				0px;
+input.fisheye{
+	height: 36px;
+	padding-left: 28px;
+	background: url("../images/fisheye.png") no-repeat 0 50%;
 }
 
-#about {
-	float:				right;
-	padding:			2px;
+#user{
+	float: left;
+	height: 112px;
+	width: 32%;
+
+	border-top-color: #FFF;
+	border-top-width: 1px;
+	border-top-style: solid;
 }
 
-#files {
-	float:				right;
-	padding:			2px;
+#legend{
+	float: left;
+	height: 112px;
+	
+	min-width: 30%;
+	max-width: 31%;
+
+	border-top-color: #FFF;
+	border-top-width: 1px;
+	border-top-style: solid;
+
+	border-left-color: #B5B5B5;
+	border-left-width: 1px;
+	border-left-style: solid;
 }
 
-#content {
-	height:				auto !important;
-	width:				100%;
+#legend_title{
+	width: 100%;
+	height: 25%;
 }
 
-#footer {
-	position:			relative;
-	height:				0px;
+#legend_elements{
+	width: 100%;
+	height: 75%;
 }
 
-h1, h2 {
-	font-weight:		normal;
-}
\ No newline at end of file
+.button{
+	display: block;
+}
diff --git a/public/images/displayedges.png b/public/images/edges.png
index cbf69c5..cbf69c5 100644
--- a/public/images/displayedges.png
+++ b/public/images/edges.png
diff --git a/public/images/displaylabels.png b/public/images/labels.png
index 6bea06b..6bea06b 100644
--- a/public/images/displaylabels.png
+++ b/public/images/labels.png
diff --git a/public/javascripts/github-connector.js b/public/javascripts/github-connector.js
deleted file mode 100644
index 976f8de..0000000
--- a/public/javascripts/github-connector.js
+++ /dev/null
@@ -1,152 +0,0 @@
-var githubNodesObj = {};
-var githubEdgesObj = {};
-var graphAttributes = {};
-
-// Interface:
-function init(){
-	getGraphAttributes()
-}
-
-function newQuery(query){
-  sigmaDOM = thisMovie("SiGMa");
-  
-  getGithubGraph(query);
-}
-
-function thisMovie(movieName) {
-  if (navigator.appName.indexOf("Microsoft") != -1) {
-    return window[movieName];
-  } else {
-    return document[movieName];
-  }
-}
-
-function setComboBoxes(){
-	var colorAtts = [];
-	var sizeAtts = [];
-	
-	for(var att in graphAttributes){
-		graphAttributes[att]["id"] = att;
-		
-		if(graphAttributes[att]["type"]=="Num"){
-			sizeAtts.push(graphAttributes[att]);
-			colorAtts.push(graphAttributes[att]);
-		}else{
-			colorAtts.push(graphAttributes[att]);
-		}
-	}
-	
-	var nodes_color = document.forms["node_properties"]["nodes_color"];
-	var nodes_size = document.forms["node_properties"]["nodes_size"];
-	
-	while(nodes_color.options.length) nodes_color.options.remove(0);
-	while(nodes_size.options.length) nodes_size.options.remove(0);
-	
-	var i;
-	var optn;
-	
-	var l=colorAtts.length;
-	for(i=0;i<l;i++){
-		optn = document.createElement("OPTION");
-		optn.text = colorAtts[i]["label"] ? colorAtts[i]["label"] : colorAtts[i]["id"];
-		optn.value = colorAtts[i]["id"];
-		
-		nodes_color.options.add(optn);
-	}
-	
-	l=sizeAtts.length;
-	for(i=0;i<l;i++){
-		optn = document.createElement("OPTION");
-		optn.text = sizeAtts[i]["label"] ? sizeAtts[i]["label"] : sizeAtts[i]["id"];
-		optn.value = sizeAtts[i]["id"];
-		
-		nodes_size.options.add(optn)
-	}
-}
-
-// SiGMa interaction:
-function toggleDisplayLabels(){
-	if(sigmaDOM){
-		if(sigmaDOM.getDisplayLabels()){
-			sigmaDOM.setDisplayLabels(false);
-		}else{
-			sigmaDOM.setDisplayLabels(true);
-		}	
-	}
-}
-
-function toggleDisplayEdges(){
-	if(sigmaDOM){
-		if(sigmaDOM.getDisplayEdges()){
-			sigmaDOM.setDisplayEdges(false);
-		}else{
-			sigmaDOM.setDisplayEdges(true);
-		}	
-	}
-}
-
-function toggleFishEye(){
-	if(sigmaDOM){
-		if(sigmaDOM.hasFishEye()){
-			sigmaDOM.deactivateFishEye();
-		}else{
-			sigmaDOM.activateFishEye();
-		}	
-	}
-}
-
-function resetGraph(graph){
-  recenterGraph();
-
-  killForceAtlas();
-  deleteGraph();
-  updateGraph(graph);
-  initForceAtlas();
-  
-  setColor(document.forms["node_properties"]["nodes_color"].value,graphAttributes);
-  setSize(document.forms["node_properties"]["nodes_size"].value);
-}
-
-function onClickNodes(nodesArray){
-  if(nodesArray.length){
-    sigmaDOM = thisMovie("SiGMa");
-    query = nodesArray[0];
-    
-    getGithubGraph(query);
-    document.getElementById("query").value = query;
-  }
-}
-
-function onOverNodes(nodesArray){
-	for(var i=0;i<nodesArray.length;i++){
-		console.debug("node: "+nodesArray[i]);
-	}
-}
-
-// Github network:
-function getGithubGraph(user){
-  url = "/graph/local/"+user;
-  
-  $.ajax({
-    url: url,
-    dataType: 'json',
-    success:
-      function(json){
-        resetGraph(json);
-      }
-  });
-}
-
-function getGraphAttributes(){
-  url = "/graph/attributes";
-  
-  $.ajax({
-    url: url,
-    dataType: 'json',
-    success:
-      function(json){
-        graphAttributes = (json && json["attributes"]) ? json["attributes"] : {};
-        setComboBoxes();
-      }
-  });
-}
diff --git a/public/javascripts/sigma-connector.js b/public/javascripts/sigma-connector.js
deleted file mode 100644
index c511de9..0000000
--- a/public/javascripts/sigma-connector.js
+++ /dev/null
@@ -1,125 +0,0 @@
-// --- SiGMa (API version) JavaSCript connector ---
-// Contains the functions to send data to a SiGMa.swf instance.
-
-// You have to initialize this parameter before using the
-// different functions:
-var sigmaDOM;
-var outputFunction;
-
-// This function starts the layout algorithm:
-function initForceAtlas(){
-  try{
-    sigmaDOM.initForceAtlas();
-  }catch(e){
-    if(outputFunction){
-      outputFunction(e.description);
-    }
-  } 
-}
-
-// This function stops the layout algorithm:
-function killForceAtlas(){
-  try{
-    sigmaDOM.killForceAtlas();
-  }catch(e){
-    if(outputFunction){
-      outputFunction(e.description);
-    }
-  } 
-}
-
-// This function delete the whole graph in SiGMa:
-function deleteGraph(){
-  try{
-    sigmaDOM.deleteGraph();
-  }catch(e){
-    if(outputFunction){
-      outputFunction(e.description);
-    }
-  } 
-}
-
-// This function pushes each non-existing node and edge in the graph,
-// and removes the ones that were in SiGMa:
-function updateGraph(graph){
-  try{
-    sigmaDOM.updateGraph(graph);
-  }catch(e){
-    if(outputFunction){
-      outputFunction(e.description);
-    }
-  } 
-}
-
-// This function pushes each non-existing node and edge in the graph,
-// and updates the ones that are already in SiGMa:
-function pushGraph(graph){
-  try{
-    sigmaDOM.pushGraph(graph);
-  }catch(e){
-    if(outputFunction){
-      outputFunction(e.description);
-    }
-  } 
-}
-
-// This function activates the fish-eye zoom:
-function activateFishEye(){
-  try{
-    sigmaDOM.activateFishEye();
-  }catch(e){
-    if(outputFunction){
-      outputFunction(e.description);
-    }
-  } 
-}
-
-// This function desactivates the fish-eye zoom:
-function deactivateFishEye(){
-  try{
-    sigmaDOM.deactivateFishEye();
-  }catch(e){
-    if(outputFunction){
-      outputFunction(e.description);
-    }
-  } 
-}
-
-// This function sets the color of the nodes relatively to one
-// attribute:
-function setColor(field,attributes){
-  try{
-    sigmaDOM.setColor(field,attributes);
-  }catch(e){
-    if(outputFunction){
-      outputFunction(e.description);
-    }
-  } 
-}
-
-// This function sets the color of the nodes relatively to one
-// attribute:
-function setSize(field){
-  try{
-    sigmaDOM.setSize(field);
-  }catch(e){
-    if(outputFunction){
-      outputFunction(e.description);
-    }
-  } 
-}
-
-// This function recenters the graph in SiGMa (basically, it
-// cancels each zooming action and every drag'n'drop):
-function recenterGraph(){
-  try{
-    sigmaDOM.resetGraphPosition();
-  }catch(e){
-    if(outputFunction){
-      outputFunction(e.description);
-    }
-  } 
-}
-
-// /!\ This script is just a draft, most of the methods might change
-//     soon, and a lot of missing features are already in development...
diff --git a/public/javascripts/stargit.js b/public/javascripts/stargit.js
new file mode 100644
index 0000000..82c414d
--- /dev/null
+++ b/public/javascripts/stargit.js
@@ -0,0 +1,150 @@
+var stargit=(function(){
+	// Functions:
+	var flash;
+	var githubNodesObj = {};
+	var githubEdgesObj = {};
+	var graphAttributes = {};
+	
+	function setFlash(){
+		flash = $('#SiGMa')[0];
+		
+		if(!flash){
+			return false;
+		}else{
+			return true;
+		}
+	}
+	
+	// This function refreshes the graph from the login of
+	// a user:
+	function getGithubGraph(user){
+	  url = "/graph/local/"+user;
+	  
+	  $.ajax({
+	    url: url,
+	    dataType: 'json',
+	    success:
+	      function(json){
+	        resetGraph(json);
+	      }
+	  });
+	}
+	
+	// This function gets the graph attributes to refresh
+	// the different comboboxes:
+	function getGraphAttributes(){
+	  url = "/graph/attributes";
+	  
+	  $.ajax({
+	    url: url,
+	    dataType: 'json',
+	    success:
+	      function(json){
+	        graphAttributes = (json && json["attributes"]) ? json["attributes"] : {};
+	        setComboBoxes();
+	      }
+	  });
+	}
+
+	function resetGraph(graph){
+		if(!setFlash()){
+			return;
+		}
+		
+	  flash.resetGraphPosition();
+	
+	  flash.killForceAtlas();
+	  flash.deleteGraph();
+	  flash.updateGraph(graph);
+	  flash.initForceAtlas();
+	  
+	  if($("#query_color").value) flash.setColor($("#query_color").value,graphAttributes);
+	  if($("#query_size").value) flash.setSize($("#query_size").value);
+	}
+
+	// This function updates the comboboxes:
+	function setComboBoxes(){
+		var colorAtts = [];
+		var sizeAtts = [];
+		
+		for(var att in graphAttributes){
+			graphAttributes[att]["id"] = att;
+			
+			if(graphAttributes[att]["type"]=="Num"){
+				sizeAtts.push(graphAttributes[att]);
+				colorAtts.push(graphAttributes[att]);
+			}else{
+				colorAtts.push(graphAttributes[att]);
+			}
+		}
+		
+		var nodes_color = $("#query_color");
+		var nodes_size = $("#query_size");
+		
+		while(nodes_color.options.length) nodes_color.options.remove(0);
+		while(nodes_size.options.length) nodes_size.options.remove(0);
+		
+		var i;
+		var optn;
+		
+		var l=colorAtts.length;
+		for(i=0;i<l;i++){
+			optn = document.createElement("OPTION");
+			optn.text = colorAtts[i]["label"] ? colorAtts[i]["label"] : colorAtts[i]["id"];
+			optn.value = colorAtts[i]["id"];
+			
+			nodes_color.options.add(optn);
+		}
+		
+		l=sizeAtts.length;
+		for(i=0;i<l;i++){
+			optn = document.createElement("OPTION");
+			optn.text = sizeAtts[i]["label"] ? sizeAtts[i]["label"] : sizeAtts[i]["id"];
+			optn.value = sizeAtts[i]["id"];
+			
+			nodes_size.options.add(optn)
+		}
+	}
+	
+	// PUBLIC FUNCTIONS:
+	return {
+		loadUser: function(name){
+			getGithubGraph(name);
+		},
+		
+		setSize: function(e){
+			if(!setFlash()) return;
+			flash.setSize(e.value);
+		},
+		
+		setColor: function(e){
+			if(!setFlash()) return;
+			flash.setColor(e.value,graphAttributes);
+		},
+		
+		toggleEdges: function(){
+			if(!setFlash()) return;
+			var areEdgesDisplayed = flash.getDisplayEdges();
+			flash.setDisplayEdges(!areEdgesDisplayed);
+			return !areEdgesDisplayed;
+		},
+		
+		toggleLabels: function(){
+			if(!setFlash()) return;
+			var areLabelsDisplayed = flash.getDisplayLabels();
+			flash.setDisplayLabels(!areLabelsDisplayed);
+			return !areLabelsDisplayed;
+		},
+		
+		toggleFishEye: function(){
+			if(!setFlash()) return;
+			var isFishEye = flash.hasFishEye();
+			if(isFishEye){
+				flash.deactivateFishEye();
+			}else{
+				flash.activateFishEye();
+			}
+			return !isFishEye;
+		}
+	};
+})();
\ No newline at end of file
diff --git a/views/index.tt b/views/index.tt
index 58f31d0..93ca976 100644
--- a/views/index.tt
+++ b/views/index.tt
@@ -1,62 +1,50 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
-	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
- 
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
-	<head> 
-		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
-		<title>StartGit | Explore the Github users network</title>
-		<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>

-		<script type="text/javascript" src="js/sigma-connector.js"></script>
-		<script type="text/javascript" src="js/github-connector.js"></script>
-		<link rel="stylesheet" type="text/css" href="css/style.css" /> 
-	</head>
-		<table id="container">
-			<tr id="content">
-				<td colspan="5" width="100%" height="100%">
-					<object id="SiGMa">
-						<param name="movie" value="flash/SiGMa_API.swf" />
-						<param name="quality" value="high" />
-						<param name="allowScriptAccess" value="sameDomain" />
-						<embed src="flash/SiGMa_API.swf" quality="high" width="100%" height="100%" name="SiGMa" quality="high" allowScriptAccess="always">
-						</embed>
-					</object>
-				</td>
-			</tr>
-			<tr id="footer" valign="top">
-				<td class="greyBG">
-					<div class="title">
-						Graphic parameters
-					</div>
-					<form name="node_properties">
-						<br/>
-						nodes color:
-						<br/>
-						<select name="nodes_color" style="width:100%;" onchange="setColor(this.value,graphAttributes);">
-						</select>
-						<br/>
-						nodes size:
-						<br/>
-						<select name="nodes_size" style="width:100%;" onchange="setSize(this.value);">
-						</select>
-					</form>
-				</td>
-				<td class="greyBG">
-					<br/>
-					<a href="#" class="button" onclick="toggleDisplayEdges();">
-						<span class="edges">display edges</span>
-					</a>
-					<a href="#" class="button" onclick="toggleDisplayLabels();">
-						<span class="labels">display labels</span>
-					</a>
-					<a href="#" class="button" onclick="toggleFishEye();">
-						<span class="fisheye">use fisheye zoom</span>
-					</a>
-				</td>
-				<td  class="github" colspan="3">
-					<div style="float:left;">github/</div>
-					<input type="text" id="query" class="query" name="query" onkeypress="if((event.keyCode||event.which)==13) newQuery(this.value);"/>
-				</td>
-			</tr>
-		</table>
-	</body>
-</html>
+<div id="main">
+	<object id="SiGMa">
+		<param name="movie" value="flash/SiGMa_API.swf" />
+		<param name="quality" value="high" />
+		<param name="allowScriptAccess" value="sameDomain" />
+		<embed src="flash/SiGMa_API.swf" quality="high" width="100%" height="100%" name="SiGMa" quality="high" allowScriptAccess="always">
+		</embed>
+	</object>
+</div>
+<div id="foot">
+	<form id="query">
+		<div id="query_query">
+			<div id="query_top">
+				<label for="query_input">github/</label>
+				<input type="text" id="query_input" />
+			</div>
+			<div id="query_bottom">
+			  <span>
+					<label for="query_size">nodes size:</label>
+					<select id="query_size">
+					</select>
+				</span>
+				<span>
+					<label for="query_color">nodes color:</label>
+					<select id="query_color">
+					</select>
+				</span>
+			</div>
+		</div>
+		<div id="query_buttons">
+			<input type="button" class="edges" value="display edges"/>
+			<input type="button" class="labels" value="hide labels"/>
+			<input type="button" class="fisheye" value="use fisheye"/>
+		</div>
+	</form>
+	<div id="user">
+		<div id="user_avatar">
+		</div>
+		<div id="user_info">
+		</div>
+	</div>
+		<div id="legend">
+			<div id="legend_title">
+			Nodes color:
+			</div>
+			<div id="legend_elements">
+			</div>
+		</div>
+	</div>
+</div>
\ No newline at end of file
diff --git a/views/layouts/main.tt b/views/layouts/main.tt
index d19c388..f547e68 100644
--- a/views/layouts/main.tt
+++ b/views/layouts/main.tt
@@ -6,16 +6,40 @@
     <meta http-equiv="Content-type" content="text/html; charset=<% settings.charset %>" />
     <title>StarGit</title>
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
-    <script type="text/javascript" src="<% request.uri_base %>/javascripts/sigma-connector.js"></script>
-    <script type="text/javascript" src="<% request.uri_base %>/javascripts/github-connector.js"></script>
+    <script type="text/javascript" src="<% request.uri_base %>/javascripts/stargit.js"></script>
     <link rel="stylesheet" href="<% request.uri_base %>/css/style.css" />
+		<script>
+			$(document).ready(function(){
+				$("#query_input").keypress(function(e){
+					if(e.which == 13) {
+						stargit.loadUser(this.value);
+						e.stopPropagation();
+						return false;
+					}
+					return true;
+				});
+				$("#query_size").change(stargit.setSize);
+				$("#query_color").change(stargit.setColor);
+				$("#query_buttons .edges").click(function(){
+					this.value = stargit.toggleEdges()?"hide edges":"display edges";
+				});
+				$("#query_buttons .labels").click(function(){
+					this.value = stargit.toggleLabels()?"hide labels":"display labels";
+				});
+				$("#query_buttons .fisheye").click(function(){
+					this.value = stargit.toggleFishEye()?"hide fisheye":"use fisheye";
+				});
+			});
+		</script>
   </head>
 
-  <body onload="init();">
-    <div id="header">
-      <a id="about" href="#">About</a>
-      <a id="files" href="#">Files</a>
-    </div>
+  <body>
+		<div id="head">
+			<div id="head_title">Stargit - Browse the Github collaborations network</div>
+			<a id="head_about" href="#">About</a>
+			<a id="head_dowload" href="#">Download</a>
+			<a id="head_api" href="#">API</a>
+		</div>" href="#">Files</a>
     <% content %>
   </body>
 </html>