seanking94/gist:30491610ffbe9c335863

## gistfile1.txt
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Vanderbilt Bioimages</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.4/cosmo/bootstrap.min.css">
<link rel="stylesheet" href="/stylesheets/style.css">
<script>

//Here is the converting to links function that later gets reference. It's pretty much just a bunch of regex-ing.
function convertToLinks(text) {
var replaceText, replacePattern1;

//URLs starting with http://, https://
replacePattern1 = /(\b(https?):\/\/[-A-Z0-9+&amp;@#\/%?=~_|!:,.;]*[-A-Z0-9+&amp;@#\/%=~_|])/ig;
replacedText = text.replace(replacePattern1, '<a class="colored-link-1" title="$1" href="$1" target="_blank">$1</a>');

//URLs starting with "www."
replacePattern2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim;
replacedText = replacedText.replace(replacePattern2, '$1<a class="colored-link-1" href="http://$2" target="_blank">$2</a>');

//returns the text result

return replacedText;
}


// function to turn XML object into a string
function getXmlString(xml) {
  if (window.ActiveXObject) { return xml.xml; }
  return new XMLSerializer().serializeToString(xml);
}

$(document).ready(function(){

    // creates a function that's executed when the button is clicked
    $("button").click(function(){

        //pulls data from the input boxes
        input1=document.getElementById('box1').value;
        input2=document.getElementById('box2').value;
        input3=document.getElementById('box3').value;
        input4=document.getElementById('box4').value;

        // creates a string that contains the query with the data from the box
        // inserted into the right place
        var query = "PREFIX foaf: <http://xmlns.com/foaf/0.1/>"+
                    "PREFIX ac: <http://rs.tdwg.org/ac/terms/>"+
                    "PREFIX dwc: <http://rs.tdwg.org/dwc/terms/>"+
                    "PREFIX dsw: <http://purl.org/dsw/>"+
                    "PREFIX Iptc4xmpExt: <http://iptc.org/std/Iptc4xmpExt/2008-02-29/>"+
                    "PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>"+
                    "SELECT DISTINCT ?uri WHERE {" +
                    "?identification dwc:genus " + input1 + "." +
                    "?identification dwc:specificEpithet " + input2 + "." +
                    "?organism dsw:hasIdentification ?identification." +
                    "?organism foaf:depiction ?image." +
                    "?organism dsw:hasOccurrence ?occurrence." +
                    "?occurrence dsw:atEvent ?event." +
                    "?event dsw:locatedAt ?location." +
                    "?location dwc:stateProvince " + input3 + "." +
                    "?image Iptc4xmpExt:CVterm ?view." +
                    "?view rdfs:subClassOf ?featureCategory." +
                    "?featureCategory rdfs:label " + input4 + "." +
					"?image ac:hasServiceAccessPoint ?sap." +
					"?sap ac:accessURI ?uri." +
                    "} " +
                    "LIMIT 10";

        // URL-encodes the query so that it can be appended as a query value
        var encoded = encodeURIComponent(query)

        // does the AJAX to send the HTTP GET to the Callimachus SPARQL endpoint
        // then puts the result in the "data" variable
        $.ajax({
            type: 'GET',
            url: 'http://localhost/sparql?query=' + encoded,
            headers: {
                Accept: 'application/sparql-results+xml'
            },
            success: function(data) {

                // performs the string-conversion function on the returned XML object
                var stringXml=getXmlString(data) ;
                //Have to clip off the first link that is useless
                stringXml = stringXml.substring(95);
                //Commented this out because no user wants to see an alert
		//alert(stringXml);
		//Use the function to turn out string into clickable links
		links=convertToLinks(stringXml);

		//Here is where I need to be able to parse the list of links in order to return them one
		//at a time so I can mess with them individually in HTML later on
		//Also the list size is not fixed, so I can't just parse it and set it to a certain number of variable
		//or do anything of a similar nature

		//This function below is one of the things that I understand the function of, but not the nuance
		//The links get printed on line 146
                document.getElementById('div1').innerHTML=links ;
                }
        });
    });
});
</script>
</head>
  <body>

    <nav class="navbar navbar-default ">
      <div class="container">
        <div class="navbar-header">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Bioimages</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

    <div class="container">

      <div class="starter-template">

        <div class="bs-component">
             <div class="jumbotron">
		<h2>Bioimages at Vanderbilt</h2>
               <p><img src="http://www.library.vanderbilt.edu/webimages/Bioimages/magnolia.jpg" width="500"  /></p>
               <form action="http://bioimages.vanderbilt.edu/">
					<input style="color: #FFFFFF; font-size:170%; background-color: #0099FF; font-weight: normal;" type="submit" name="submit" value="Learn More" id="submit" />
				</form>
             </div>
        <h1>Find Bioimages</h1>

		<!--Here is where the links get printed-->
		<div id="div1"></div>


    <span class="input-group-addon">
    <input id="box1" type="select" size="50" value="?genus"/><br/>
    <input id="box2" type="text" size="50" value="?species"/><br/>
    <input id="box3" type="text" size="50" value="?state"/><br/>
    <input id="box4" type="text" size="50" value="?category"/><br/>
	<button>Search</button>


	  </div></span>


    </div><!-- /.container -->
		</div>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Vanderbilt Bioimages</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.4/cosmo/bootstrap.min.css">
	<link rel="stylesheet" href="/stylesheets/style.css">
	<script>

	//Here is the converting to links function that later gets reference. It's pretty much just a bunch of regex-ing.
	function convertToLinks(text) {
	var replaceText, replacePattern1;

	//URLs starting with http://, https://
	replacePattern1 = /(\b(https?):\/\/[-A-Z0-9+&@#\/%?=~_\|!:,.;]*[-A-Z0-9+&@#\/%=~_\|])/ig;
	replacedText = text.replace(replacePattern1, '<a class="colored-link-1" title="$1" href="$1" target="_blank">$1</a>');

	//URLs starting with "www."
	replacePattern2 = /(^\|[^\/])(www\.[\S]+(\b\|$))/gim;
	replacedText = replacedText.replace(replacePattern2, '$1<a class="colored-link-1" href="http://$2" target="_blank">$2</a>');

	//returns the text result

	return replacedText;
	}


	// function to turn XML object into a string
	function getXmlString(xml) {
	if (window.ActiveXObject) { return xml.xml; }
	return new XMLSerializer().serializeToString(xml);
	}

	$(document).ready(function(){

	// creates a function that's executed when the button is clicked
	$("button").click(function(){

	//pulls data from the input boxes
	input1=document.getElementById('box1').value;
	input2=document.getElementById('box2').value;
	input3=document.getElementById('box3').value;
	input4=document.getElementById('box4').value;

	// creates a string that contains the query with the data from the box
	// inserted into the right place
	var query = "PREFIX foaf: <http://xmlns.com/foaf/0.1/>"+
	"PREFIX ac: <http://rs.tdwg.org/ac/terms/>"+
	"PREFIX dwc: <http://rs.tdwg.org/dwc/terms/>"+
	"PREFIX dsw: <http://purl.org/dsw/>"+
	"PREFIX Iptc4xmpExt: <http://iptc.org/std/Iptc4xmpExt/2008-02-29/>"+
	"PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>"+
	"SELECT DISTINCT ?uri WHERE {" +
	"?identification dwc:genus " + input1 + "." +
	"?identification dwc:specificEpithet " + input2 + "." +
	"?organism dsw:hasIdentification ?identification." +
	"?organism foaf:depiction ?image." +
	"?organism dsw:hasOccurrence ?occurrence." +
	"?occurrence dsw:atEvent ?event." +
	"?event dsw:locatedAt ?location." +
	"?location dwc:stateProvince " + input3 + "." +
	"?image Iptc4xmpExt:CVterm ?view." +
	"?view rdfs:subClassOf ?featureCategory." +
	"?featureCategory rdfs:label " + input4 + "." +
	"?image ac:hasServiceAccessPoint ?sap." +
	"?sap ac:accessURI ?uri." +
	"} " +
	"LIMIT 10";

	// URL-encodes the query so that it can be appended as a query value
	var encoded = encodeURIComponent(query)

	// does the AJAX to send the HTTP GET to the Callimachus SPARQL endpoint
	// then puts the result in the "data" variable
	$.ajax({
	type: 'GET',
	url: 'http://localhost/sparql?query=' + encoded,
	headers: {
	Accept: 'application/sparql-results+xml'
	},
	success: function(data) {

	// performs the string-conversion function on the returned XML object
	var stringXml=getXmlString(data) ;
	//Have to clip off the first link that is useless
	stringXml = stringXml.substring(95);
	//Commented this out because no user wants to see an alert
	//alert(stringXml);
	//Use the function to turn out string into clickable links
	links=convertToLinks(stringXml);

	//Here is where I need to be able to parse the list of links in order to return them one
	//at a time so I can mess with them individually in HTML later on
	//Also the list size is not fixed, so I can't just parse it and set it to a certain number of variable
	//or do anything of a similar nature

	//This function below is one of the things that I understand the function of, but not the nuance
	//The links get printed on line 146
	document.getElementById('div1').innerHTML=links ;
	}
	});
	});
	});
	</script>
	</head>
	<body>

	<nav class="navbar navbar-default ">
	<div class="container">
	<div class="navbar-header">
	<span class="sr-only">Toggle navigation</span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	</button>
	<a class="navbar-brand" href="#">Bioimages</a>
	</div>
	<div id="navbar" class="collapse navbar-collapse">
	<ul class="nav navbar-nav">
	<li class="active"><a href="#">Home</a></li>
	<li><a href="#about">About</a></li>
	<li><a href="#contact">Contact</a></li>
	</ul>
	</div><!--/.nav-collapse -->
	</div>
	</nav>

	<div class="container">

	<div class="starter-template">

	<div class="bs-component">
	<div class="jumbotron">
	<h2>Bioimages at Vanderbilt</h2>
	<p><img src="http://www.library.vanderbilt.edu/webimages/Bioimages/magnolia.jpg" width="500" /></p>
	<form action="http://bioimages.vanderbilt.edu/">
	<input style="color: #FFFFFF; font-size:170%; background-color: #0099FF; font-weight: normal;" type="submit" name="submit" value="Learn More" id="submit" />
	</form>
	</div>
	<h1>Find Bioimages</h1>

	<!--Here is where the links get printed-->
	<div id="div1"></div>


	<span class="input-group-addon">
	<input id="box1" type="select" size="50" value="?genus"/><br/>
	<input id="box2" type="text" size="50" value="?species"/><br/>
	<input id="box3" type="text" size="50" value="?state"/><br/>
	<input id="box4" type="text" size="50" value="?category"/><br/>
	<button>Search</button>














	</div></span>


	</div><!-- /.container -->
	</div>
	</body>
	</html>