Index: /SPARQLBuilderWWW/web/classselect.js
===================================================================
--- /SPARQLBuilderWWW/web/classselect.js (revision 253)
+++ /SPARQLBuilderWWW/web/classselect.js (revision 253)
@@ -0,0 +1,135 @@
+$(function(){
+
+	scrolldiv();
+
+	loadStartClass();
+
+
+	$('#searchstart').keypress(function(e) {
+		if ( e.which == 13 ) {
+			return false;
+		}
+	});
+	$('#searchstart').keyup(function(e) {
+		search();
+	});
+	$('#searchend').keypress(function(e) {
+		if ( e.which == 13 ) {
+			return false;
+		}
+	});
+	$('#searchend').keyup(function(e) {
+		search();
+	});
+});
+
+function scrolldiv(){
+	if(($('div.startclass').height() + $('#searchstart').height()) > $('div.left').height()){
+		$('div.left').css('overflow-y', 'scroll');
+	}else{
+		$('div.left').css('overflow-y', 'hidden');
+	}
+	if(($('div.endclass').height() + $('#searchend').height()) > $('div.right').height()){
+		$('div.right').css('overflow-y', 'scroll');
+	}else{
+		$('div.right').css('overflow-y', 'hidden');
+	}
+}
+
+function loadStartClass(){
+	var url = "http://www.sparqlbuilder.org/api/clist?ep=" + encodeURIComponent("http://www.ebi.ac.uk/rdf/services/reactome/sparql");
+	$.ajax({
+		type : "GET",
+		url : url,
+		success : function(data) {
+			var list = eval(data);
+			$('div.startclass').empty();
+
+			var startclasstable = $('<table>');
+
+			for (var i = 0; i < list.length; ++i) {
+				startclasstable.append('<tr><td class="startclasscell"><span class="endpointuri" title="http://www.ebi.ac.uk/rdf/services/reactome/sparql"></span><span class="startclassuri" title="' + list[i]['uri'] + '">' + list[i]['label'] + ' (' + list[i]['number'] + ')' + '</span></td></tr>');
+			}
+
+			$('div.startclass').append(startclasstable);
+
+			requestEndClass();
+			scrolldiv();
+		}
+	});
+}
+
+function requestEndClass(){
+	$('.startclasscell').each(function(){
+		$(this).unbind('click');
+		$(this).click(function(){
+			$('.endclass').empty();
+			$('.endclass').append('<img src="images/ajax-loader.gif">');
+			var ep = $(this).children('.endpointuri').attr('title');
+			var sc = $(this).children('.startclassuri').attr('title');
+			var url = "http://www.sparqlbuilder.org/api/clist?ep=" + encodeURIComponent(ep) + '&class=' + encodeURIComponent(sc);
+			$.ajax({
+				type : "GET",
+				url : url,
+				success : function(data) {
+					var list = eval(data);
+					$('.endclass').empty();
+					var endclasstable = $('<table>');
+
+					for (var i = 0; i < list.length; ++i) {
+						endclasstable.append('<tr><td class="endclasscell"><span class="endpointuri" title="' + ep + '"></span><span class="startclassuri" title="' + sc + '"></span><span class="endclassuri" title="' + list[i]['uri'] + '">' + list[i]['label'] + ' (' + list[i]['number'] + ')' + '</span></td></tr>');
+					}
+
+					$('.endclass').append(endclasstable);
+
+					requestSPARQLBuilder();
+				}
+			});
+		});
+	});
+}
+
+function requestSPARQLBuilder(){
+	$('.endclasscell').each(function(){
+		$(this).unbind('click');
+		$(this).click(function(){
+			var ep = $(this).children('.endpointuri').attr('title');
+			var sc = $(this).children('.startclassuri').attr('title');
+			var ec = $(this).children('.endclassuri').attr('title');
+			var url = "http://www.sparqlbuilder.org/?ep=" + encodeURIComponent(ep) + '&st=' + encodeURIComponent(sc) + '&en=' + encodeURIComponent(ec);
+
+			window.open(url);
+		});
+	})
+}
+
+function search(){
+	if($('#searchstart').val() == ''){
+		$('.startclasscell').parent().removeClass('nohit');
+	}else{
+		var keyword = $('#searchstart').val().toLowerCase();
+		$('.startclasscell').each(function(){
+			var label = $(this).children('.startclassuri').text().toLowerCase();
+			if(label.indexOf(keyword) != -1){
+				$(this).parent().removeClass('nohit');
+			}else{
+				$(this).parent().addClass('nohit');
+			}
+		});
+	}
+	if($('#searchend').val() == ''){
+		$('.endclasscell').parent().removeClass('nohit');
+	}else{
+		var keyword = $('#searchend').val().toLowerCase();
+		$('.endclasscell').each(function(){
+			var label = $(this).children('.endclassuri').text().toLowerCase();
+			if(label.indexOf(keyword) != -1){
+				$(this).parent().removeClass('nohit');
+			}else{
+				$(this).parent().addClass('nohit');
+			}
+		});
+	}
+
+	setTimeout('scrolldiv()',30);
+}
Index: /SPARQLBuilderWWW/web/classselect.css
===================================================================
--- /SPARQLBuilderWWW/web/classselect.css (revision 253)
+++ /SPARQLBuilderWWW/web/classselect.css (revision 253)
@@ -0,0 +1,27 @@
+@charset "UTF-8";
+
+div.wrap {
+	width: 100%;
+	height: 800px;
+	overflow: hidden;
+}
+
+div.left {
+	float: left;
+	width: 50%;
+	height: 100%;
+}
+
+div.right {
+	float: right;
+	width: 50%;
+	height: 100%;
+}
+
+div.startclass, div.endclass {
+	padding: 5px;
+}
+
+tr.nohit {
+	display: none;
+}
Index: /SPARQLBuilderWWW/web/classselect.html
===================================================================
--- /SPARQLBuilderWWW/web/classselect.html (revision 253)
+++ /SPARQLBuilderWWW/web/classselect.html (revision 253)
@@ -0,0 +1,28 @@
+<html>
+	<head>
+		<title>Class Select</title>
+		<link rel="stylesheet" href="classselect.css">
+
+		<script type="text/javascript" charset="UTF-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
+		<script type="text/javascript" charset="UTF-8" src="classselect.js"></script>
+	</head>
+	<body>
+		<div class="wrap">
+			<div class="left">
+				<div>
+					<input id="searchstart" type="text">
+				</div>
+				<div class="startclass">
+					<img src="images/ajax-loader.gif">
+				</div>
+			</div>
+			<div class="right">
+				<div>
+					<input id="searchend" type="text">
+				</div>
+				<div class="endclass">
+				</div>
+			</div>
+		</div>
+	</body>
+</html>