CJP Sandbox
$(document).ready(loadResources);
function loadResources() {
jQuery.browser = {};
(function () {
    jQuery.browser.msie = false;
    jQuery.browser.version = 0;
    if (navigator.userAgent.match(/MSIE (+)\./)) {
        jQuery.browser.msie = true;
        jQuery.browser.version = RegExp.$1;
		 // mw.loader.load('mediaWiki.user');
		$('#search').click(runQuery);
		$('#query-container').change(updateDisplay);
		$('#update').click(updateDisplay);
    $("#slider").slider({
        min: 0,
        max: 25,
        step: 1,
        range: true,
        values: ,
        slide: function(event, ui) {
            if (ui.values < ui.values)
                $("input.pillSizeSlider").val(ui.values);
                $("input.pillSizeSlider").val(ui.values);
                updatePillSizeImages();
            else if (ui.values > ui.values)
                $("input.pillSizeSlider").val(ui.values);
                $("input.pillSizeSlider").val(ui.values);
                updatePillSizeImages();                
            else
                $("input.pillSizeSlider").val(ui.values);
                $("input.pillSizeSlider").val(ui.values);
                updatePillSizeImages();
    $('input.pillSizeSlider').val($("#slider").slider("option","values"));
    $('input.pillSizeSlider').val($("#slider").slider("option","values"));
    $("input.pillSizeSlider").change(function() {
        var $this = $(this);
        $("#slider").slider("values", $this.data("index"), $this.val());
        updatePillSizeImages();
function updatePillSizeImages() {
	var minPillSize = $('input.pillSizeSlider').val();
	var maxPillSize = $('input.pillSizeSlider').val();
	var pillArr = [
	$("#queryDisplaySmallSize").attr("src",pillArr);
	$("#queryDisplayLargeSize").attr("src",pillArr);
function buildQueryParameters(){
	var queryShape = "";
	var queryColor = "";
	var queryScoring = "";
	var queryImprint = "";
	var queryMinSize = "";
	var queryMaxSize = "";
	var queryNDC = "";
	var queryIngred = "";
	if (document.getElementById('selectedShape').value)
		var  queryShape = ']';	
	if (document.getElementById('selectedColor').value)
		var queryColor = ']'
	if (document.getElementById('selectedScoring').value)
		var queryScoring = ']'
	if (document.getElementById('selectedImprint').value)
		var queryImprint = ']'
	if (document.getElementById('selectedMinSize').value)
		var queryMinSize = ']'
	if (document.getElementById('selectedMaxSize').value)
		var queryMaxSize = ']'
	if (document.getElementById('selectedNDC').value)
		var queryNDC = ']'
	if (document.getElementById('selectedIngred').value)
		var selectedIngredArray = document.getElementById('selectedIngred').value.split(',');
                $.each(selectedIngredArray, function(index, value){
                    selectedIngredArray = ']';
		var queryIngred = selectedIngredArray.join("");
	return queryShape+queryColor+queryScoring+queryImprint+queryMinSize+queryMaxSize+queryNDC+queryIngred;
function updateDisplay() {
	if (document.getElementById('selectedShape').value)
		switch(document.getElementById('selectedShape').value){
			case "Round":
				document.getElementById('queryDisplayShape').src = "";
				break;
			case "Oval":
				document.getElementById('queryDisplayShape').src = "";
				break;
			case "Square":
				document.getElementById('queryDisplayShape').src = "";
				break;
			case "Rectangular":
				document.getElementById('queryDisplayShape').src = "";
				break;
			case "Triangular":
				document.getElementById('queryDisplayShape').src = "";
				break;
			case "Capsule":
				document.getElementById('queryDisplayShape').src = "";
				break;
			case "Pentagon":
				document.getElementById('queryDisplayShape').src = "";
				break;
			case "Hexagon":
				document.getElementById('queryDisplayShape').src = "";
				break;
			case "Diamond":
				document.getElementById('queryDisplayShape').src = "";
				break;
			case "Gear":
				document.getElementById('queryDisplayShape').src = "";
				break;
			case "DoubleCircle":
				document.getElementById('queryDisplayShape').src = "";
				break;
			case "Clover":
				document.getElementById('queryDisplayShape').src = "";
				break;
			case "TearDrop":
				document.getElementById('queryDisplayShape').src = "";
				break;
			case "Octagon":
				document.getElementById('queryDisplayShape').src = "";
				break;
			case "SemiCircle":
				document.getElementById('queryDisplayShape').src = "";
				break;
			case "Bullet":
				document.getElementById('queryDisplayShape').src = "";
				break;
			case "Trapezoid":
				document.getElementById('queryDisplayShape').src = "";
				break;
			case "FreeForm":
				document.getElementById('queryDisplayShape').src = "";
				break;
if (document.getElementById('selectedImprint').value)
		document.getElementById('queryDisplaySelectedImprint').innerHTML = document.getElementById('selectedImprint').value
function changeImage(a) {
        document.getElementById("img").src=a;
function runQuery() {
	$('#resultsTable-body tr').remove();
	var queryParameters = buildQueryParameters();
	var printoutRequests = "|?Pill%20Imprint|?Pill%20Dosage|?Pill%20Ingred|?Pill%20Color|?Pill%20Shape|?Pill%20Size%20(mm)|?Pill%20Scoring|?NDC|?Pill%20Name";
	var jsonURL = "="+queryParameters+printoutRequests+"&format=json"
	$.getJSON(jsonURL, function (data) {
		$.each(data.query.results, function(ind, val) {
		//////                  Store each returned result                 //////
		//If the .getJSON() function is able to successfully receive information
		//from the WikiDoc API, it will begin to execute the unnamed function we
		//have provided.  The data that is returned is in JSON format, meaning 
		//that we will have lots of objects within objects.  Our function says 
		//that for EACH property of data.query.results (that is, each returned 
		//result from the query) we should perform the following operations.
		//We will first store all the results as local variables. Some of these
		//results will need to be converted to a string, so don't be alarmed if 
		//you see some string() methods. After storing our variables,we
		//construct a hyperlink and image URL.  Lastly, we add a row to the 
		//our results table.
		//The EACH loop will run through all of the described steps before
		//starting with the next returned result.  Doing this will build a table
		//of our results, row by row.
			drugNameFull = val.fulltext;
			drugNameShort = drugNameFull.split("#");
			pillImprint = val.printouts;
			pillDosage = val.printouts;
			pillIngred = val.printouts;
			pillColor = val.printouts;
			pillShape = val.printouts;
			pillSize = val.printouts;
			pillScoring = val.printouts;
			ndc = val.printouts;
			pillName = String(val.printouts).split(' ').join('_');
		//////                  Generate the URL to the image.             //////
		//When a picture is uploaded, the server will place the file in a   
		//directory. This directory is based upon the MD5 hashed name of file. A
		//file named "Example.jpg" will have an MD5 hashed name of:
		//				"a91fe217e45a700fc2dab0cc476f01c7."  
		//The file would then be located at the following URl:
		//To generate the URL, we use the MD5 method provided in the CryptoJS lib
		//This means  must be loaded
			//First we create the MD5 hash of the pill name
			md5 = String(CryptoJS.MD5(pillName));
			//Next we build the directory name using the first two characters 
			imageDirect = '/' + md5.charAt(0) + '/' + md5.substring(0,2) + '/' + pillName
		//////                Create the Drug Name Hyperlink               //////
			//Turn the spaces into underscores
			linkName = String(drugNameShort).split(' ').join('_')
			//String together appropiate text to create the link
			drugNameLink = ''+drugNameShort+''
		//////  Add each iteration of query  results to the Results Table  //////
		//Adding the results parameters works in the following way.
		//  The location of a specific table within the document is assigned to
		//  the variable "table"
		//  A row is added the to table at the index location (ind being the
		//  index of the .each() loop.  
		//  Cells are then added to each row with a named corresponding to the 
		//  column header.  For example, Drug Name is the header of the first 
		//  column, so the cell in the 0 index (the first cell of the row) will
		//  have a variable name of cellDrugName
		//  The cells are then populated with 			
			//Find a  element with id="resultsTable-body":
			table = document.getElementById("resultsTable-body");
			//Create an empty  element and add it to the 1st position of the table:
			row = table.insertRow(ind);
			//Insert new cells( elements) into the "new"  element:
			cellDrugName = row.insertCell(0);
			cellPillImprint = row.insertCell(1);
			cellPillDosage = row.insertCell(2);
			cellPillIngred = row.insertCell(3);
			cellPillColor = row.insertCell(4);
			cellPillShape = row.insertCell(5);
			cellPillSize = row.insertCell(6);
			cellPillSocring = row.insertCell(7);
			cellNDC = row.insertCell(8);
			cellPillName = row.insertCell(9);
			//Add Values to the cells:
			cellDrugName.innerHTML = drugNameLink;
			cellPillImprint.innerHTML = pillImprint;
			cellPillDosage.innerHTML = pillDosage;
			cellPillIngred.innerHTML = pillIngred;
			cellPillColor.innerHTML = pillColor;
			cellPillShape.innerHTML = pillShape;
			cellPillSize.innerHTML = pillSize;
			cellPillSocring.innerHTML = pillScoring;
			cellNDC.innerHTML = ndc;
			cellPillName.innerHTML = '';
			$('#resultsTable-container').css("visibility", "visible")
/*Query Container
            Query Container               
  The Query Container is a container which holds both    
  the propertyToolbar and the queryDisplay.                             
	#query-container{
		width:100%;
		position:relative;
	/*Query Builder*/
	#queryBuilder-container{
		background-color:#B0E0E6;
		width:100%;
		position:relative;
		vertical-align:middle;
		clear:both;
		padding:0.5%;
	#queryBuilder-container div{
		width:15%;
		background-color:#B0E0E6;
		margin-left:0.5%;
		margin-right:0.5%;
		margin-top:10px;
		margin-bottom:10px;
		display:inline-block;
		vertical-align:middle;
		align-content:center;
		overflow:hidden;
	#queryBuilder-container div img{
		height:100%;
		width:auto;
		display:block;
		margin:auto;
	.queryDisplayHeader{
		position:relative;
		width:100% !important;
		text-align:center;
		margin:0px !important;
		padding-top:0.5em;
		font-family: sans-serif, "Chrysanthi Unicode", "Doulos SIL", Gentium, GentiumAlt, Code2000, "TITUS Cyberbit Basic", "DejaVu Sans", "Bitstream Cyberbit", "Arial Unicode MS", "Lucida Sans Unicode", "Hiragino Kaku Gothic Pro", "Matrix Unicode";
	.queryDisplayContent{
		positon:relative; 
		width:100% !important; 
		vertical-align:top;
		margin:0px !important;
	#queryDisplayShape{
		width:118px !important;
		height:auto !important;
	#queryDisplayScore{
		width:80% !important;
		height:auto !important;
	#queryDisplayColor-1{
		width:118px !important;
		height:auto !important;
	#queryDisplaySize{
		width:118px !important;
		height:auto !important;
	#queryDisplayContent img{
		height:44px !important;
                float:right !important;
/*Results*
               Results Table              
 Contains style attributes for the following elements:    
		-#resultsTable-container                            
		-#resultsTable                                      
		-.resultsTable-class                                
				including th and tr							
	#resultsTable-container{
		width:100% !important;
		position:relative;
	#resultsTable{
		border-collapse:collapse;
		width:100% !important;
		table-layout:fixed;
		border:1px solid #B0E0E6;
		margin:10px;
	.resultsTable-class th{
		background-color:#B0E0E6;
		padding:5px;
		width:125px;
		height:25px;
	.resultsTable-class tbody tr:nth-child(even){
		background-color:#EBEDED;
		text-align:center;
	.resultsTable-class tbody tr:nth-child(odd){
		background-color:#FFFFFF;
		text-align:center;
        .resultsTable-class tbody img{
                width:300px !important;
	#propertyToolbar-container{
		background-color:#B0E0E6;
		width:100%;
		display:block;
	#selectedShape{
		width:120px;	
	#propertyShapeColor-container, #propertyScoringImprint-container, #propertySize-container, #propertyNDCIngreds-container{
		Display:inline-block;