<script>

//Modify the value of pinsafeurl to reflect the URL of your PINsafe server
//if using on-demand SMS, url will need to be DCMessage rather the SCImage
//if using ha and you wish the page to try one server then the other to receive a TURING 
//set standby to be the url of the standby swivel appliance and set ha to true;


var primary='http://192.168.11.103:8080/pinsafe/SCPinPad?username='
var standby='http://192.168.11.103:8080/pinsafe/SCPinPad?username='
var pinsafeurl = primary;
var ha = false ; //set HA to true if you want the page to try two servers
var loadTimeout = 2500;  //how long the page waits (in milliseconds) for the image to be served from the main server before trying the secondary
var secondaryAuth = true; // set to true if you want Swivel to be the secondary authentication option
var button = true; // set to true if you want to show a button that requests a security string
var autoShow = true; // set to true to show the TURing image automatically after entering the username

var passwordInput, passwordField;

function checkUsername(name){
 if(name==""){
  return false;
 }else{
  return true;
 } 
}


function getUsername() {
	var uname=document.getElementById('username');
	if (!uname || !uname.value) {
		return null;
	}
	return uname.value;
}

function getEscapedName(uname) {
	return uname.replace("&", "&amp;").replace("\"", "&quot;").replace("'","&#x27;").replace("<","&lt;").replace(">","&gt;").replace("/","&#x2F;");
}

function addDigit(digit) {
  var otcField = document.getElementById(passwordInput);
  otcField.value += digit;
}

function showPin(uname){
  var obj=document.getElementById('logon_message_text');
  if(obj){
   obj.innerHTML="Please enter your OTP";
   var uname=getUsername();
   if(uname){
    var safeUserName = getEscapedName(uname);
    var padno = Math.floor(Math.random() * 1000000);
	obj.innerHTML += '<br><table><tr>' +
	'<td><img id="pinpad1" src="' + pinsafeurl + safeUserName + '&padno=' + padno + ':1" onclick="addDigit(1)" /></td>' +
	'<td><img id="pinpad2" src="' + pinsafeurl + safeUserName + '&padno=' + padno + ':2" onclick="addDigit(2)" /></td>' +
	'<td><img id="pinpad3" src="' + pinsafeurl + safeUserName + '&padno=' + padno + ':3" onclick="addDigit(3)" /></td>' +
	'</tr><tr>' +
	'<td><img id="pinpad4" src="' + pinsafeurl + safeUserName + '&padno=' + padno + ':4" onclick="addDigit(4)" /></td>' +
	'<td><img id="pinpad5" src="' + pinsafeurl + safeUserName + '&padno=' + padno + ':5" onclick="addDigit(5)" /></td>' +
	'<td><img id="pinpad6" src="' + pinsafeurl + safeUserName + '&padno=' + padno + ':6" onclick="addDigit(6)" /></td>' +
	'</tr><tr>' +
	'<td><img id="pinpad7" src="' + pinsafeurl + safeUserName + '&padno=' + padno + ':7" onclick="addDigit(7)" /></td>' +
	'<td><img id="pinpad8" src="' + pinsafeurl + safeUserName + '&padno=' + padno + ':8" onclick="addDigit(8)" /></td>' +
	'<td><img id="pinpad9" src="' + pinsafeurl + safeUserName + '&padno=' + padno + ':9" onclick="addDigit(9)" /></td>' +
	'</tr><tr>' +
	'<td>&nbsp;</td>' +
	'<td><img id="pinpad0" src="' + pinsafeurl + safeUserName + '&padno=' + padno + ':0" onclick="addDigit(0)" /></td>' +
	'<td>&nbsp;</td>' +
	'</tr></table>';
	if(ha){
		setTimeout("checkImage()", loadTimeout);
	}
	 obj=document.getElementById('username');
   if(obj){
      obj.value=uname;
      obj.readOnly=true;
      obj.style.backgroundColor='gray'
    }
 
    obj=document.getElementById(passwordInput);
    if(obj){
     obj.readOnly=false;
     obj.style.backgroundColor=password_bgcolor;
    } 
   } 
  }
 
}

 function checkImage(){
	   if(ha){
			image = document.getElementById("pinpad1");
			var iw = image.height;
			if(iw < 50){
				pinsafeurl = standby;
				ha = false;  //to prevent multiple checks
				showPin();
			}
		}
}

//This function is called when the Username field is blurred.
function onblurUserName(){
	document.getElementById("btnRefresh") .value = "Refresh Image";
	var uname=document.getElementById('username');
	if(checkUsername(uname.value)){
		showPin(uname);
	} 
}

function refreshButtonEvent(){
	document.getElementById("btnRefresh") .value = "Refresh Image";
	var uname=document.getElementById('username');
	if(checkUsername(uname.value)){
		showPin(uname);
	}
	document.getElementById(passwordInput).focus();
}

function checkBeforeSubmitForm(){
	var message = document.getElementById("logon_message_text");
	message.innerHTML="Please enter your user name and click on Get OTP";
	
	var obj = document.getElementById("username");
	if(obj){
		if(obj.value == ""){
			message.innerHTML += '<br> Please enter a username';
			return false;
		}
	}
	var obj = document.getElementById("password_input");
	if(obj){
		if(obj.value == ""){
			message.innerHTML += '<br> Please enter a password';
			document.getElementById("password_input").focus();
			return false;
		}
	}
	var obj = document.getElementById("secondary_password_input");
	if(obj){
		if(obj.value == ""){
			message.innerHTML += '<br> Please enter an OTP';
			refreshButtonEvent();
			return false
		}
	}
	message.innerHTML = "Loading";
}

function setAutoShow() {
	
 var usernameField = document.getElementById('username');
 if (usernameField) {
   usernameField.onblur = onblurUserName;
 }
}

function changeFields(){ 

 if (autoShow) {
  setAutoShow();
 }
 
 if(document.getElementsByName("Login")[0] != null){
	 
  var obj=document.getElementsByName("Login");
  if(button){
   if(obj){
		var obj = obj[0].parentElement;
		var temp = obj.innerHTML;
		obj.innerHTML = '<input style="font-weight: bold; cursor: pointer;" type="button" name="btnRefresh" value="    Get Image    " id="btnRefresh" onclick="refreshButtonEvent()" >' + temp;
   }
 
   obj=document.getElementById('unicorn_form');
   if(obj){
	obj.onsubmit=checkBeforeSubmitForm;
   }
   obj=document.getElementById("logon_message_text");

   if(obj) {
    obj.innerHTML="Please enter your user name and click on Get OTP";
   }
  }

  if(secondaryAuth) {
   passwordField ='secondary_password_field';
   passwordInput = 'secondary_password_input';
  } else {
   passwordField ='password_field';
   passwordInput = 'password_input';
  }
	
  obj=document.getElementById(passwordField);
  if (obj) {
   obj.innerHTML="OTP:";
  }

  obj=document.getElementById(passwordInput);
  if(obj && button){
   obj.readOnly=true;
   password_bgcolor=obj.style.backgroundColor;
   obj.style.backgroundColor='gray'
  }
 }
}

changeFields();

/* Known issues
-when trying to press the "Get Image" button when autoshow is enabled the onblur is triggered (not the button click) and password isn't focused
*/

</script>