<!--
/*******************************************************************************
 * Copyright 2014 Centre for Development of Advanced Computing(C-DAC), Pune
 * 
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * 
 *   http://www.apache.org/licenses/LICENSE-2.0
 * 
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 ******************************************************************************/
 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="ISO-8859-1">
<title>CSNOCtrl Demo</title>
	<link rel="stylesheet" href="css/demo.css"> 
	<link rel="stylesheet" href="css/searchtool.css"> 
	<link rel="stylesheet" href="css/map.css">
	<link rel="icon" href="images/csnotk.ico">

<script src="ext/js/jquery.js"></script>
<script src="ext/js/jquery-ui.custom.min.js"></script>
<script type="text/javascript" src="ext/js/jquery.autocomplete.js"></script>
<script type="text/javascript" src="js/demo.js"></script>
<script type="text/javascript" src="js/searchtool.js"></script>
<script type="text/javascript" src="js/map.js"></script>
<script type="text/javascript" src="js/autosearch.js"></script>
<script type="text/javascript" src="js/disb.js"></script>
<script type="text/javascript" src="ext/js/jquery-ui-date.js"></script>
<script type="text/javascript">

/*
*callbck_index defines the callback function that is called once the user selects a particular concept 
*from the search results list. It is sent as parameter in the selectSNOMEDCT(). setValue() is registered
*in this callback function.This function is used to return the result to the user.
*/
var callbck_index =function(ret_OUT){setValue(ret_OUT);};
var semantictag_IN;
var acceptability_IN;
var state_IN ;
var returnlimit_IN;
var refsetid_IN;
var parentid_IN;
var hostname="http://localhost:8080/"; //change host name here
var languageId=[];
var arrayList=[];
 $.ajaxSetup({
		async : false
	});  
 	//change host name here
	 $.ajax({url: "http://localhost:8080/csnoserv/api/search/langrefset",
			method: 'GET',
         headers: {
                 'Access-Control-Allow-Origin': '*'
             },
         success: function(result){	
		 
        	 var i;
     		for (i = 0; i < result.length-1; i++) {
				 arrayList.push(result[i][1].toUpperCase());
				 languageId.push(result[i][0]);
     		}
  },error:function(result){
 	console.log("no response"+result);

 }});
		  $.ajaxSetup({
		async : true
	}); 

/*
*setValues() function is to set the values for the selected input parameters.
*It checks if selected or set to default values as the user click on Search button.
*/
function setValues()
{
	if(document.getElementById("forState").value!="")
		state_IN=document.getElementById("forState").value;
	else
		state_IN="both";
	if($('#forSemanticTag').val()!=""){
		semantictag_IN = $('#forSemanticTag').val();		
		}
	else
		semantictag_IN="all";
	if(document.getElementById("forAcceptability").value!="")
		acceptability_IN=document.getElementById("forAcceptability").value;
	else
		acceptability_IN="all";
	if(document.getElementById("txtreturnlimit").value!="")
		returnlimit_IN=document.getElementById("txtreturnlimit").value;
	else
		returnlimit_IN=-1;
	if(document.getElementById("txtrefsetid").value!="")
		refsetid_IN=document.getElementById("txtrefsetid").value;
	else
		refsetid_IN=null;
	if(document.getElementById("txtparentid").value!="")
		parentid_IN=document.getElementById("txtparentid").value;
	else
		parentid_IN=null;
}

/*
* validateReturnLimit() function is used for validation of Return Limit. As It can have numeric value only. 
*Any Positive value and -1 can be the value for Retuen Limit. -1 is in the case of All.
*
*/
function validateReturnLimit(returnLimit) {	
	    returnLimit.value = (returnLimit.value[0] === '-') ? ('-' + returnLimit.value.replace(/[^0-9]/g, '')) : (returnLimit.value.replace(/[^0-9]/g, ''));
	    returnlimit_IN = returnLimit.value;
	}   
/*
*Any Positive value and -1 can be the value for Retuen Limit. -1 is in the case of All.
*
*/	
function validateReturnLimitSearch(returnLimit) {	
	$("#errreturnlimit").hide();
	if(parseInt(returnLimit.value)<-1)
	{
	returnLimit.value='';
	$("#errreturnlimit").show();
	}
	 returnlimit_IN = returnLimit.value;
	} 

/*
* validateParentIds() function is used for validation of Parent Ids. As It can have numeric value only seprated by ','.
*
*/
function validateParentIds(parentId) {	
	parentId.value=parentId.value.replace(/[^0-9,',']/g, '');
	}  
/*
* setValue() function is called in the callback function. This function is used to display the return value in the HTML control.
* In index.html page,the value is displayed in the label as a table. The result includes- Concept ID, Description-id and Description  
* param selectedSNOMEDTerm(var)- is the concept selected by the user from the search result list. 
* 
*/
function setValue(selectedSNOMEDTerm)
{
	//document.getElementById("snomedcttxt").value=selectedSNOMEDTerm;
	$("#searchResult").html(selectedSNOMEDTerm);	
}

/*
* isNumeric() function validates input data as it should be numeric only.
*/

function isNumeric(e)
{
e.value = (e.value.replace(/[^0-9]/g, ''));
}

/*
*openTabContent function 
*This is to display the content of the selected tab.
*/
function openTabContent(evt, tabName) {

		var i, tabcontent, tablinks;

		// Get all elements with class="tabcontent" and hide them
		tabcontent = document.getElementsByClassName("tabcontent");
		for (i = 0; i < tabcontent.length; i++) {
			tabcontent[i].style.display = "none";
		}

		// Get all elements with class="tablinks" and remove the class "active"
		tablinks = document.getElementsByClassName("tablinks");
		for (i = 0; i < tablinks.length; i++) {
			tablinks[i].className = tablinks[i].className.replace(" active", "");
		}

		// Show the current tab, and add an "active" class to the link that opened the tab
		document.getElementById(tabName).style.display = "block";
		evt.currentTarget.className += " active";
		
		
	if(window.innerWidth < 1368)
		{
		document.getElementById("changespan").style.display='block';
		document.getElementById("srcTgt").style.marginLeft='2.25%';
		var element = document.createElement("span");
		element.marginBottom='0.8em';
	    element.display='block';
		element.id = 'dynamicbutton'; 
		var mydiv = document
		.getElementById("detailbar");

		console.log(document
		.getElementById("detailbar"))
        mydiv.append(element);
		}
}

/*
*setTabContent function 
*This is to display the content of the default selected tab on page load.
*/
function setTabContent(tabName) {
	loadSemanticTags();
	document.getElementById(tabName).style.display = 'block';
}
	
/*
*callback_icd defines the callback function that is called once the user selects a particular mappped ICD-10 code 
*from the mapping results list. It is sent as parameter in the mapICDCode(). setValue_icd() is registered
*in this callback function. This function is used to return the result to the user.
*/
var callback_icd =function(ret_OUT, field_id){setValue_icd(ret_OUT, field_id);};

/*
*callback_cpt defines the callback function that is called once the user selects a particular term 
*from the search results list. It is sent as parameter in the autoselectSNOMEDCT(). setValue_cpt() is registered
*in this callback function. This function is used to return the result to the user.
*/
var callback_cpt =function(ret_OUT, field_id){setValue_cpt(ret_OUT, field_id);};

/*
*variables declared that are required as input parameters to mapICDCode().
*/
var gender_IN;
var birthdate_IN;
var diagnosisdate_IN ;
var secondary_IN = "";
var snomedctid_IN;

/*
*variables declared that are required as input parameters to selectSNOMEDCT().

var semantictag_IN = "disorder";
var acceptability_IN = "synonyms";
var state_IN = "active";
var returnlimit_IN = -1;
*/

/*
*validate function checks if input - birth date, diagnosis date, SNOMED Concept ID are valid.
*If invalid, it displays error message/label for them.
*Or else, calls mapping function mapICDCode() for mapping.
*/
function validate()
{		
	if(document.getElementById("snomedctid").value==""){
		$("#invalidBirthDate").hide();
		$("#invalidDiagnosisDate").hide();
		$("#blankConceptTermMap").show();
		return;
	}
	else{
		$("#blankConceptTermMap").hide();
		$("#invalidBirthDate").hide();
		$("#invalidDiagnosisDate").hide();
		//main mapping function that invokes plugin. It can be invoked directly.									
			if(birthdate_IN!="" && diagnosisdate_IN!="")
			{
				if(birthdate_IN>diagnosisdate_IN)
				{
					alert("Diagnosis Date must be a date after Birthdate");
					return;
				}	
			}
		mapICDCode("mapResult", snomedctid_IN, gender_IN, birthdate_IN, diagnosisdate_IN, secondary_IN, callback_icd);
	}	
}

/*
*setValuesForMap function is to set the variables to selected values or to default as the user clicks on map button.
*/
function setValuesForMap()
{
	if(document.getElementById("forGender").value!="")
		gender_IN=document.getElementById("forGender").value;
	else
		gender_IN="NONE";
	if(document.getElementById("forBirthDate").value!="")
		birthdate_IN= new Date($('#forBirthDate').val());		
	else
		birthdate_IN="";
	if(document.getElementById("forDiagnosisDate").value!="")
		diagnosisdate_IN= new Date($('#forDiagnosisDate').val());
	else
		diagnosisdate_IN="";
	if(document.getElementById("snomedctid").value!="")
		snomedctid_IN=document.getElementById("snomedctid").value;	
	if(document.getElementById("mapResult").value!="") 
		document.getElementById("mapResult").value="";
	if(document.getElementById("mapResult").innerHTML!="")	
		document.getElementById("mapResult").innerHTML="";
}

/*
* setValue_icd() function is called in the callback function. This function is used to display the return value in the HTML control.
* In index.html page,the value is displayed in the mapResult label. The result includes- Map Target id 
* param mappedTerm(var)- is the map Target selected by the user from the result list 
* 
*/
function setValue_icd(mappedTerm, field_id)
{	
	$("#"+field_id).html(mappedTerm);
}

/*
* setValue_cpt() function is called in the callback function. This function is used to display the return value in the HTML control.
* In index.html page,the value is displayed with label field_id excluding txt from it. The result includes- SNOMED Concept ID 
* param selectedSNOMEDTerm(var)- is the Concept ID selected by the user from the result list 
* 
*/
function setValue_cpt(selectedSNOMEDTerm, field_id)
{
	document.getElementById("txtsnomedctid").readOnly = true;
	document.getElementById(field_id.replace("txt","")).value=selectedSNOMEDTerm.conceptId; // use to set term to another textbox
	document.getElementById("mapResult").value="";
	document.getElementById("mapResult").innerHTML="";
}						
function setValue_cptSimple(selectedSNOMEDTerm, field_id)
{
	document.getElementById("infosimplemapconceptId").readOnly = true;
	document.getElementById(field_id.replace("info","")).value=selectedSNOMEDTerm.conceptId; // use to set term to another textbox
}

/*
*This function is used to clear the selected SNOMED term and corresponding Concept ID and mapped ICD-10 code.
*/
function tog(v){return v?'addClass':'removeClass';} 
$(document).on('mouseenter', '.clearable', function(){
   $(this)[tog(this.value)]('x');
}).on('mousemove', '.x', function( e ){
    $(this)[tog(this.offsetWidth-18 < e.clientX-this.getBoundingClientRect().left)]('onX');
}).on('touchstart click', '.onX', function( ev ){
    if(this.id==="infosimplemapconceptId"){
    	document.getElementById("infosimplemapconceptId").readOnly = false;
    ev.preventDefault();
    $(this).removeClass('x onX').val('').change();
   	$("#"+this.id.replace("info","") ).val('').change();
	$("#simplemapdetails").remove();
}
else{
	document.getElementById("txtsnomedctid").readOnly = false;
	ev.preventDefault();
    $(this).removeClass('x onX').val('').change();
   	$("#"+this.id.replace("txt","") ).val('').change();
	document.getElementById("mapResult").value="";
	document.getElementById("mapResult").innerHTML="";}
});


/*
*Ajax call used for load semantic tags from CSNOServ
*/
function loadSemanticTags(){
var semanticURL=hostname+"csnoserv/api/search/semantic";
$.ajax({url: semanticURL,
			method: 'GET',
            headers: {
                    'Access-Control-Allow-Origin': '*'
                },
            success: function(result){	
		//console.log(result);
		$('#forSemanticTag').remove();
        loadSemanticTagList(result);
     },error:function(result){
    	console.log("no response"+result);

    }});

}

/*
*loading semantic tags from result of Ajax call loadSemanticTags
*/
var orderedList=["procedure","finding","disorder","observable entity","body structure","organism","substance","medicinal product","clinical drug","medicinal product form"];
var newSemList;
function loadSemanticTagList(semanticTagList){
	var selectListData="";	
	var dataStr='';
	 newSemList=semanticTagList.filter(orderingSemanticTagList);
	 semanticTagList=orderedList.concat(newSemList);
	semanticTagList.forEach(element => {
	dataStr=element;
	selectListData=selectListData+'<option value="'+dataStr.toUpperCase().split(' ').join('_')+'">'+dataStr.toUpperCase()+'</option>';
});
// making order as per user requirement
function orderingSemanticTagList(semanticTag){
		for(i=0;i<orderedList.length;i++){
			if(orderedList[i]==semanticTag)
				return false;			
			}
		return true;
			
}

/*
*appending default option
*/
$('#semanticTD').append('<select	id="forSemanticTag" name="forSemanticTag" multiple>'+
'<option value="ALL" selected="selected" >ALL</option>'+
	selectListData+'</select>');
}
/*
*To load the options in lookup
*/
$(document).ready(function(){	
	var langRefset;
 	var selectData=  $('#langRefset');
	 langRefset = document.getElementById('langRefset');
	 
        	var i;
     		for (i = 0; i < arrayList.length; i++) {
     			 if(!$.isNumeric( arrayList[i]))
     				langRefset.options[langRefset.options.length]=new Option(arrayList[i],arrayList[i]);
     		}

});
</script>

</head>
<body onload="setTabContent('Search')">
<div class="main-div" id="maindiv">
		
		<div id="header" class="header">	                    	
         	<img class="pull-left" src="images/CSNOCtrl.png" alt="CSNOServ" style="height: 70px">
        	
        	<label>CSNOCtrl Demonstration Page</label>
                
			<img class="pull-right" src="images/CDACLogo.png" alt="C-DAC" style="height: 60px; margin-left:-5%">				
		</div>
			
		
		<div id="maincontent">

			<div id="tab-links">
					<ul class="tab">
						<li><a href="#" class="tablinks active" onclick="openTabContent(event, 'Search')">Search</a></li>
						<li><a href="#" class="tablinks" onclick="openTabContent(event, 'Lookup')">Lookup</a></li>
						<li><a href="#" class="tablinks" onclick="openTabContent(event, 'Map')">Map</a></li>
						<li><a href="#" class="tablinks" onclick="openTabContent(event, 'DISB')">DISB</a></li>
					</ul>
 			</div>
			
			<div id="Search" class="tabcontent">
					<div class="detailbar"> 
						<img alt="Steps to Use Control in your application" onclick="infoDialog('searchCtrl')" title="Steps to use CSNOControl for active SNOMED CT codes in your application" src="images/help.png" style="float: right;width: 50px;height:50px;cursor: pointer;"/>
						<table id="searchTable">
						<caption></caption>
						<thead>
						<tr><th scope="col"></th></tr>
						</thead>
						<tbody>
							<tr>
								<td>
									<label for="State">State</label>
								</td>
								<td>
									<select	id="forState" name="forState">										
										<option value="ACTIVE">ACTIVE</option>
										<option value="INACTIVE">INACTIVE</option>
										<option value="BOTH">BOTH</option>
									</select>
								</td>
								<td>
									<label for="Semantic tag">Semantic Tag</label>
								</td>
								<td id="semanticTD">
									<select	id="forSemanticTag" name="forSemanticTag" multiple>
											<option value="ALL">ALL</option>
											<option value="PROCEDURE">PROCEDURE</option>
											<option value="DISORDER">DISORDER</option>
											<option value="FINDING">FINDING</option>
											<option value="OBSERVABLE_ENTITY">OBSERVABLE ENTITY</option>
											<option value="BODY_STRUCTURE">BODY STRUCTURE</option>
											<option value="ORGANISM">ORGANISM</option>
											<option value="SUBSTANCE">SUBSTANCE</option>
											<option value="SPECIMEN">SPECIMEN</option>
											<option value="SPECIAL_CONCEPT">SPECIAL CONCEPT</option>
											<option value="LINKAGE_CONCEPT">LINKAGE CONCEPT</option>
											<option value="PHYSICAL_FORCE">PHYSICAL FORCE</option>
											<option value="EVENT">EVENT</option>
											<option value="ENVIRONMENT">ENVIRONMENT</option>
											<option value="GEOGRAPHIC_LOCATION">GEOGRAPHIC LOCATION</option>
											<option value="SOCIAL_CONCEPT">SOCIAL CONCEPT</option>
											<option value="SITUATION_WITH_EXPLICIT_CONTEXT">SITUATION WITH EXPLICIT CONTEXT</option>
											<option value="STAGING_SCALE">STAGING SCALE</option>
											<option value="PHYSICAL_OBJECT">PHYSICAL OBJECT</option>
											<option value="QUALIFIER_VALUE">QUALIFIER VALUE</option>
											<option value="RECORD_ARTIFACT">RECORD ARTIFACT</option>
											<option value="PERSON">PERSON</option>
											<option value="LINK_ASSERTION">LINK ASSERTION</option>
											<option value="NAMESPACE_CONCEPT">NAMESPACE CONCEPT</option>
											<option value="ATTRIBUTE">ATTRIBUTE</option>
											<option value="ASSESSMENT_SCALE">ASSESSMENT SCALE</option>
											<option value="RACIAL_GROUP">RACIAL GROUP</option>
											<option value="TUMOR_STAGING">TUMOR STAGING</option>
											<option value="OCCUPATION">OCCUPATION</option>
											<option value="MORPHOLOGIC_ABNORMALITY">MORPHOLOGIC ABNORMALITY</option>
											<option value="CELL">CELL</option>
											<option value="CELL_STRUCTURE">CELL STRUCTURE</option>
											<option value="ETHNIC_GROUP">ETHNIC GROUP</option>
											<option value="PRODUCT">PRODUCT</option>
											<option value="INACTIVE_CONCEPT">INACTIVE CONCEPT</option>
											<option value="NAVIGATIONAL_CONCEPT">NAVIGATIONAL CONCEPT</option>
											<option value="LIFE_STYLE">LIFE STYLE</option>
											<option value="REGIME_THERAPY">REGIME THERAPY</option>
											<option value="RELIGION_PHILOSOPHY">RELIGION PHILOSOPHY</option>
											<option value="DISPOSITION">DISPOSITION</option>
											<option value="MEDICINAL_PRODUCT">MEDICINAL PRODUCT</option>
											<option value="MEDICINAL_PRODUCT_FORM">MEDICINAL PRODUCT FORM</option>
											<option value="CLINICAL_DRUG">CLINICAL DRUG</option>
											<option value="UNIT_OF_PRESENTATION">UNIT OF PRESENTATION</option>
											<option value="NUMBER">NUMBER</option>
											<option value="ADMINISTRATION_METHOD">ADMINISTRATION METHOD</option>
											<option value="BASIC_DOSE_FORM">BASIC DOSE FORM</option>
											<option value="DOSE_FORM">DOSE FORM</option>
											<option value="INTENDED_SITE">INTENDED SITE</option>
											<option value="RELEASE_CHARACTERISTIC">RELEASE CHARACTERISTIC</option>
											<option value="STATE_OF_MATTER">STATE OF MATTER</option>
											<option value="TRANSFORMATION">TRANSFORMATION</option>
											<option value="ROLE">ROLE</option>
											<option value="BRAND_PRODUCT">BRAND PRODUCT</option>
											<!--semantic tag according july 19 -->
											<option value="PRODUCT_NAME">PRODUCT NAME</option>
											<option value="PACKAGED_CLINICAL_DRUG">PACKAGED CLINICAL DRUG</option>
											<option value="REAL_CLINICAL_DRUG">REAL CLINICAL DRUG</option>
											<option value="REAL_MEDICINAL_PRODUCT">REAL MEDICINAL PRODUCT</option>
											<option value="REAL_PACKAGED_CLINICAL_DRUG">REAL PACKAGED CLINICAL DRUG</option>
											<option value="SUPPLIER">SUPPLIER</option>
									</select>
								</td>
							</tr>
							<tr>	
								<td>
									 <label for="Acceptability">Acceptability</label>
								</td>	
								
								<td>
									<select	id="forAcceptability" name="forAcceptability">
										<option value="SYNONYMS">SYNONYMS</option>										
										<option value="PREFERRED">PREFERRED</option>
										<option value="PREFERRED_EXCLUDING_FSN">PREFERRED EXCLUDING FSN</option>				
										<option value="ACCEPTABLE">ACCEPTABLE</option>
										<option value="ALL">ALL</option>
									</select>
								</td>

								<td>
									 <label for="returnlimit">Return Limit</label>
								</td>	
								
								<td>
									<input type="text" id="txtreturnlimit" onkeyup="validateReturnLimitSearch(this);">
									<br><strong><span id="errreturnlimit" class="errmsg">Invalid return limit, must enter value greater than zero or -1 only.</span></strong>
									<script>$("#errreturnlimit").hide();</script>
								</td>	
							</tr>
							<tr>
								<td>
									 <label for="refsetid">Refset ID</label>
								</td>	
								
								<td>
									<input type="text" id="txtrefsetid" onkeyup="validateReturnLimit(this);">
								</td>
								
								<td>
									 <label for="parentid">Parent ID</label>
								</td>	
								
								<td>
									<input type="text" id="txtparentid" onkeyup="validateParentIds(this);">
								</td>
								
							</tr>				
							
							
							<tr>
								<td></td>
								<td></td>
								<td>
									<button id="searchConceptId" onclick=  "setValues(); selectSNOMEDCT( state_IN,semantictag_IN, acceptability_IN, returnlimit_IN,refsetid_IN,parentid_IN,callbck_index);" type="button"> Search </button>
								</td>	
							</tr>					
							</tbody>
						</table>
						
						<br/>
						<span id="searchResult"></span>
						
					</div>	
			</div>
			
			<div id="Lookup" class="tabcontent">

							<div class="detailbar"> 
										<label for="conceptId">Concept ID<span class="required">*</span></label>	
										<input id="conceptId" name="conceptId" onkeyup="isNumeric(this)" type="text" required/>
										<label for="forlangRefset">Language</label>									
										<select	id="langRefset" name="langrefset" >
										 </select>
										<button id="byConcept" type="button" onclick="lookupByConcept('conceptId','langRefset','conResult')">Lookup
										</button>
								<img alt="Steps To Use LookUp In Your Application" onclick="infoDialog('conceptLookup')" title="Steps To Use LookUp In Your Application" src="images/help.png" style="float: right;width: 50px;height:50px;cursor: pointer"/>
								<br>
								
								<strong><span id="blankConceptIdLookup" class="errmsg">Concept ID is required</span></strong>
								
								<strong><span id="wrongConceptIdLookup" class="errmsg">Please enter valid Concept ID</span></strong>
								<br>

								<span id="conResult" style="position: relative;"></span>
						</div>		



						<div class="detailbar"> 							
										<label for="conceptId">Concept ID<span class="required">*</span></label>	
										<input id="cptId" name="cptId" type="text" onkeyup="isNumeric(this)" />
										<label for="relation" >Relation</label> 
							
								<select	id="relation" name="relation">								
									
									<option value="ACCESS">ACCESS</option>
									<option value="ASSOCIATED_FINDING">ASSOCIATED FINDING</option>
									<option value="ASSOCIATED_WITH">ASSOCIATED WITH</option>
									<option value="ASSOCIATED_MORPHOLOGY">ASSOCIATED MORPHOLOGY</option>
									<option value="ASSOCIATED_ETIOLOGIC_FINDING">ASSOCIATED ETIOLOGIC FINDING</option>
									<option value="AFTER">AFTER</option>
									<option value="ASSOCIATED_PROCEDURE">ASSOCIATED PROCEDURE</option>
									<option value="ASSOCIATED_FUNCTION">ASSOCIATED FUNCTION</option>
									<option value="APPROACH">APPROACH</option>
									<option value="ACCESS_INSTRUMENT">ACCESS INSTRUMENT</option>
									
									<option value="CAUSATIVE_AGENT">CAUSATIVE AGENT</option>
									<option value="COMPONENT">COMPONENT</option>
									<option value="COURSE">COURSE</option>
									<option value="CLINICAL_COURSE">CLINICAL COURSE</option>
									<option value="COMMUNICATION_WITH_WOUND">COMMUNICATION WITH WOUND</option>
									<option value="COUNT_OF_ACTIVE_INGREDIENT">COUNT OF ACTIVE INGREDIENT</option>
									<option value="COUNT_OF_BASE_AND_MODIFICATION_PAIR">COUNT OF BASE AND MODIFICATION PAIR</option>
									<option value="COUNT_OF_BASE_OF_ACTIVE_INGREDIENT">COUNT OF BASE OF ACTIVE INGREDIENT</option>
									
									<option value="DIRECT_DEVICE">DIRECT DEVICE</option>
									<option value="DIRECT_MORPHOLOGY">DIRECT MORPHOLOGY</option> 
									<option value="DUE_TO">DUE TO</option>
									<option value="DIRECT_SUBSTANCE">DIRECT SUBSTANCE</option>
									
									<option value="EXTENT">EXTENT</option>
									<option value="EPISODICITY">EPISODICITY</option>
									
									<option value="FINDING_SITE">FINDING SITE</option>
									<option value="FINDING_INFORMER">FINDING INFORMER</option>
									<option value="FINDING_CONTEXT">FINDING CONTEXT</option>
									<option value="FINDING_METHOD">FINDING METHOD</option>
									
									<option value="HAS_INTENT">HAS INTENT</option>
									<option value="HAS_ACTIVE_INGREDIENT">HAS ACTIVE INGREDIENT</option>
									<option value="HAS_FOCUS">HAS FOCUS</option>
									<option value="HAS_MEASURED_COMPONENT">HAS MEASURED COMPONENT</option>
									<option value="HAS_DEFINITIONAL_MANIFESTATION">HAS DEFINITIONAL MANIFESTATION</option>
									<option value="HAS_INTERPRETATION">HAS INTERPRETATION</option>
									<option value="HAS_SPECIMEN">HAS SPECIMEN</option>
									<option value="HAS_DISPOSITION">HAS DISPOSITION</option>
									<option value="HAS_MANUFACTURED_DOSE_FORM">HAS MANUFACTURED DOSE FORM</option>
									<option value="HAS_BASIS_OF_STRENGTH_SUBSTANCE">HAS BASIS OF STRENGTH SUBSTANCE</option>
									<option value="HAS_PRESENTATION_STRENGTH_NUMERATOR_VALUE">HAS PRESENTATION STRENGTH NUMERATOR VALUE</option>
									<option value="HAS_PRESENTATION_STRENGTH_NUMERATOR_UNIT">HAS PRESENTATION STRENGTH NUMERATOR UNIT</option>
									<option value="HAS_PRESENTATION_STRENGTH_DENOMINATOR_VALUE">HAS PRESENTATION STRENGTH DENOMINATOR VALUE</option>
									<option value="HAS_PRESENTATION_STRENGTH_DENOMINATOR_UNIT">HAS PRESENTATION STRENGTH DENOMINATOR UNIT</option>
									<option value="HAS_BASIC_DOSE_FORM">HAS BASIC DOSE FORM</option>
									<option value="HAS_CONCENTRATION_STRENGTH_DENOMINATOR_UNIT">HAS CONCENTRATION STRENGTH DENOMINATOR UNIT</option>
									<option value="HAS_CONCENTRATION_STRENGTH_DENOMINATOR_VALUE">HAS CONCENTRATION STRENGTH DENOMINATOR VALUE</option>
									<option value="HAS_CONCENTRATION_STRENGTH_NUMERATOR_UNIT">HAS CONCENTRATION STRENGTH NUMERATOR UNIT</option>
									<option value="HAS_CONCENTRATION_STRENGTH_NUMERATOR_VALUE">HAS CONCENTRATION STRENGTH NUMERATOR VALUE</option>
									<option value="HAS_DOSE_FORM_ADMINISTRATION_METHOD">HAS DOSE FORM ADMINISTRATION METHOD</option>
									<option value="HAS_DOSE_FORM_INTENDED_SITE">HAS DOSE FORM INTENDED SITE</option>	
									<option value="HAS_DOSE_FORM_RELEASE_CHARACTERISTIC">HAS DOSE FORM RELEASE CHARACTERISTIC</option>
									<option value="HAS_DOSE_FORM_TRANSFORMATION">HAS DOSE FORM TRANSFORMATION</option>
									<option value="HAS_STATE_OF_MATTER">HAS STATE OF MATTER</option>
									<option value="HAS_INGREDIENT">HAS INGREDIENT</option>
									<option value="HAS_PRECISE_ACTIVE_INGREDIENT">HAS PRECISE ACTIVE INGREDIENT</option>
									<option value="HAS_UNIT_OF_PRESENTATION">HAS UNIT OF PRESENTATION</option>
									
									<option value="IS_A">IS A</option>
									<option value="INDIRECT_MORPHOLOGY">INDIRECT MORPHOLOGY</option>
									<option value="INTERPRETS">INTERPRETS</option>
									<option value="INDIRECT_DEVICE">INDIRECT DEVICE</option>
									<option value="INSTRUMENTATION">INSTRUMENTATION</option>
									<option value="IS_MODIFICATION_OF">IS MODIFICATION OF</option>
									
									<option value="LATERALITY">LATERALITY</option>
									<option value="LOCATION">LOCATION</option>
									
									<option value="METHOD">METHOD</option>
									<option value="MEASUREMENT_METHOD">MEASUREMENT METHOD</option>
									<option value="MEASURES">MEASURES</option>
									
									<option value="OCCURRENCE">OCCURRENCE</option>
									<option value="ONSET">ONSET</option> 
									
									<option value="PART_OF">PART OF</option>
									<option value="PROCEDURE_SITE">PROCEDURE SITE</option>
									<option value="PROCEDURE_SITE_DIRECT">PROCEDURE SITE DIRECT</option>
									<option value="PROCEDURE_SITE_INDIRECT">PROCEDURE SITE INDIRECT</option>
									<option value="PROCEDURE_DEVICE">PROCEDURE DEVICE</option>
									<option value="PROCEDURE_MORPHOLOGY">PROCEDURE MORPHOLOGY</option>
									<option value="PRIORITY">PRIORITY</option>
									<option value="PROPERTY">PROPERTY</option>
									<option value="PATHOLOGICAL_PROCESS">PATHOLOGICAL PROCESS</option>
									<option value="PLAYS_ROLE">PLAYS ROLE</option>
									<option value="PROCEDURE_CONTEXT">PROCEDURE CONTEXT</option>
									
									<option value="RECIPIENT_CATEGORY">RECIPIENT CATEGORY</option>
									<option value="REVISION_STATUS">REVISION STATUS</option>
									<option value="ROUTE_OF_ADMINISTRATION">ROUTE OF ADMINISTRATION</option>
									
									<option value="SEVERITY">SEVERITY</option>
									<option value="SPECIMEN_SUBSTANCE">SPECIMEN SUBSTANCE</option>
									<option value="SPECIMEN_SOURCE_TOPOGRAPHY">SPECIMEN SOURCE TOPOGRAPHY</option>
									<option value="SPECIMEN_SOURCE_MORPHOLOGY">SPECIMEN SOURCE MORPHOLOGY</option>
									<option value="SUBJECT_RELATIONSHIP_CONTEXT">SUBJECT RELATIONSHIP CONTEXT</option>
									<option value="SPECIMEN_PROCEDURE">SPECIMEN PROCEDURE</option>
									<option value="SURGICAL_APPROACH">SURGICAL APPROACH</option>
									<option value="STAGE">STAGE</option>
									<option value="SPECIMEN_SOURCE_IDENTITY">SPECIMEN SOURCE IDENTITY</option>
									<option value="SCALE_TYPE">SCALE TYPE</option>
									<option value="SUBJECT_OF_INFORMATION">SUBJECT OF INFORMATION</option>
									
									<option value="TEMPORALLY_FOLLOWS">TEMPORALLY FOLLOWS</option>
									<option value="TEMPORAL_CONTEXT">TEMPORAL CONTEXT</option>
									<option value="TIME_ASPECT">TIME ASPECT</option>
									
									<option value="USING">USING</option>
									<option value="USING_DEVICE">USING DEVICE</option>
									<option value="USING_SUBSTANCE">USING SUBSTANCE</option>
									<option value="USING_ACCESS_DEVICE">USING ACCESS DEVICE</option>
									<option value="USING_ENERGY">USING ENERGY</option>
									
								</select>
							<span id="changespan" style="margin-bottom: 0.8em; display: none;"></span>
							
							<label for="direction">Direction</label>
						
							<select id="srcTgt" name="srcTgt">		
								  <option value="source">Source</option>
								  <option value="destination">Destination</option>
							</select>
						
							 <button id="byConceptRelation" onclick="lookupByConceptRelation('cptId','relation','srcTgt','conList')" type="button">Get Relations</button>
							 <img alt="Steps To Use LookUp In Your Application" onclick="infoDialog('conceptRelationLookup')" title="Steps To Use LookUp In Your Application" src="images/help.png" style="float: right;width: 50px;height:50px;cursor: pointer"/>
								<br>
								<strong><span id="blankConceptIdRelation" class="errmsg">Concept ID is required</span></strong>
								<strong><span id="wrongConceptIdRelation" class="errmsg">Please enter valid Concept ID for selected Relation</span></strong>
							<span id="conList"></span>
						</div>	

			</div>			
		
			<div id="Map" class="tabcontent">
			<div style="background-color:#D3D3D3;">
				<label>SNOMED CT to ICD-10 Map</label></div>
				<div class="detailbar"> 
						<img alt="Steps to Use Control in your application" onclick="infoMapDialog('mapICDCode')" title="Steps to use CSNO Control for mapping SNOMED CT codes to ICD-10 codes in your application" src="images/help.png" style="float: right;width: 50px;height:50px;cursor: pointer;"/>				
						
						<table>
						<caption></caption>
							<thead><tr><th scope="col"></th></tr></thead>
							<tr>
								<td style="color:#428bca;"><strong>Patient Details:</strong></td>
							</tr>
							
							<tr>	
								<td>
									 <label for="BirthDate">Birthdate</label>
									 <br/><strong><span id="invalidBirthDate" class="errmsg">Please enter valid birthdate</span></strong>
									 <script>$("#invalidBirthDate").hide();</script>
								</td>									
								<td>
									<input type="text" class="clearable" id="forBirthDate" name="forBirthDate" readonly="readonly"/>
									<script>
										$( function() {
										$( "#forBirthDate" ).datepicker({
											dateFormat: "yy-mm-dd"
											});
										} );
									</script>									
								</td>								
							
								<td>
									<label for="Gender">Gender</label>
								</td>
								<td>
									<select	id="forGender" name="forGender">										
										<option value="MALE">MALE</option>
										<option value="FEMALE">FEMALE</option>
										<option value="NONE" selected="selected">NONE</option>
									</select>
								</td>								
							</tr>
	
							<tr></tr><tr></tr>
							<tr>
								<td style="color:#428bca;"><strong>Diagnosis Details:</strong></td>
							</tr>
							
							<tr>
								<td>
									 <label for="DiagnosisDate">Diagnosis Date</label>
									 <br/><strong><span id="invalidDiagnosisDate" class="errmsg">Please enter valid diagnosisdate</span></strong>
									 <script>$("#invalidDiagnosisDate").hide();</script>
								</td>								
								<td>
									<input type="text" class="clearable" id="forDiagnosisDate" name="forDiagnosisDate" readonly="readonly" />
									<script>
										$( function() {
										$( "#forDiagnosisDate" ).datepicker({
											dateFormat: "yy-mm-dd"
											});
										} );
									</script>									
								</td>
							</tr>
							
							<tr>
								<td>
									<label>Primary Diagnosis<span class="required">*</span></label>
									<br/><strong><span id="blankConceptTermMap" class="errmsg">Diagnosis is required</span></strong>
									<script>$("#blankConceptTermMap").hide();</script>
								</td>
								<td>									
									<input type="text" class="clearable" id="txtsnomedctid" onfocus="autoselectSNOMEDCT( 'txtsnomedctid', 'ACTIVE', ['DISORDER'], 'SYNONYMS', 10, callback_cpt);"></input>
								</td>	
								
								<td>
									<label>Concept ID</label>
								</td>
								<td>									
									<input type="text" id="snomedctid" readonly></input>
								</td> 
									
								<td>
									<button id="mapConceptId" onclick="setValuesForMap(); validate(); " type="button"> Map </button>
								</td>									
							</tr>
							
							
							
						</table>
						<span id="mapResult"></span>
	
					</div>	
				
				<div style="background-color:#D3D3D3;">
					<label>Simple Map</label>
				</div>
					<div class="detailbar"> 
						<img alt="Steps To Use LookUp In Your Application" onclick="infoMapDialog('simpleMapInfo')" title="Steps To Use LookUp In Your Application" src="images/help.png" style="float: right;width: 50px;height:50px;cursor: pointer"/>
						<table>
						<caption></caption>
						<thead><tr><th scope="col"></th></tr></thead>
						<tbody>
							<tr>
								<td style="color:#428bca;"><strong>Simple Map:</strong></td>
							</tr>
							
							 
							<tr>
							    <td>
									<label>Term<span class="required">*</span></label>
								</td>
								<td>									
									<input type="text" class="clearable" id="infosimplemapconceptId" onfocus="autoselectSNOMEDCT( 'infosimplemapconceptId', 'ACTIVE', ['CLINICAL_DRUG','GEOGRAPHIC_LOCATION'], 'SYNONYMS', 20, setValue_cptSimple);"></input>
								<br>
									 <strong><span id="blankConceptIdSimpleMap" class="errmsg">Term is required.</span></strong>
								<script>$("#blankConceptIdSimpleMap").hide();</script>
								 <strong><span id="numericSimpleValue" class="errmsg">Enter the valid Term.</span></strong>
								<script>$("#numericSimpleValue").hide();</script>
								</td>	
								 
								<td>		<label  >Concept ID<span class="required"></span></label>	
									
								</td>
								 <td>	<input id="simplemapconceptId" name="simplemapconceptId" onkeyup="isNumeric(this)" type="text" readonly></td>
										
								<td> <button id="bysimplemapconceptId" type="button" onclick="getSimpleMap('simplemapconceptId','simplemapResult')">SimpleMap
										</button>
								</td>
								
								
							</tr>
							</tbody> 	
						</table>
								<span id="simplemapResult" style="position: relative;"></span> 
					</div>
						
						
			</div>

			<!-- Start-Tab for DISB -->
			<div id="DISB" class="tabcontent">

				<div class="detailbar"> 
							<h4><span class="small-title">Get information from DISB for Substance, Generic and Medicine</span></h4><br>
							<label for="conceptId">Concept ID<span class="required">*</span></label>	
							<input id="conceptIdDISB" name="conceptIdDISB" onkeyup="isNumeric(this)" type="text" required/>
							<label for="forCategory">Category</label>									
							<select	id="category" name="category" >
								<option value="SUBSTANCE">SUBSTANCE</option>
								<option value="GENERIC">GENERIC</option>								
								<option value="MEDICINE">MEDICINE</option>								
							</select>
							<button id="byConceptDISB" type="button" onclick="disbByConcept('conceptIdDISB','category','disbResult')">Get Info
							</button>
					<img alt="Steps To Use DISB In Your Application" onclick="infoDialog('conceptDISB')" title="Steps To Use DISB In Your Application" src="images/help.png" style="float: right;width: 50px;height:50px;cursor: pointer"/>
					<br>
					
					<strong><span id="blankConceptIdDISB" class="errmsg">Concept ID is required</span></strong>
					
					<strong><span id="wrongConceptIdDISB" class="errmsg">Please enter valid Concept ID</span></strong>
					<br>

					<span id="disbResult" style="position: relative;"></span>
				</div>
			</div>	
			<!-- End- Tab for DISB -->
			

		</div>		
			
			
			<div class="bar">			
	 			<span style="font-weight: normal;font-size: 12px;"> &COPY; CSNOtk v8.6</span>	 			
	 		</div>	 		
	 		<div id="dialog-howto"></div>
	 		 
</div>
</body>

</html>
