Randomator.html
Here's the main web-page "Randomator.html": -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name = "author"
content = "Richard Maher"/>
<meta name = "description"
content = "Tier3Client random Employee picker"/>
<style>
html
{
height: 100%
}
body
{
background-color: Gray;
margin: 0px;
padding: 0px;
}
input.knob
{
font-family: arial;
font-weight: bold;
background-color: DarkGray;
color: black;
font-size: 18px;
height: 26px;
width: 20px;
padding: 0px;
margin: 1px;
}
.cntr
{
font-family: georgia;
font-weight: bold;
font-size: 18px;
background-color: white;
color: black;
height: 20px;
width: 30px;
text-align: center;
}
table#empDetails caption
{
font-family: Arial;
font-weight: bold;
font-size: 12px;
color: gray;
}
table#empDetails
{
width: 100%;
}
.promptItem
{
text-align: right;
}
.dataItem
{
font-weight: bold;
}
div#ctrlPanel
{
background-color: Turquoise;
color: black;
font-family: Georgia;
font-size: 12px;
margin: 0px;
padding: 0px;
border-style: solid;
border-width: 1px;
border-color: black;
height: 30px;
}
.screenHdr
{
text-align: center;
font-size: 22px;
font-weight: bold;
color: Black;
}
</style>
<script type="text/javascript" src="Tier3Client.js" ></script>
<script type="text/javascript">
var t3Client;
var fadeSecs;
var empsCnt;
EmpPicker.FADEMIN = 1000;
EmpPicker.FADEMAX = 5000;
EmpPicker.MAXEMPS = 5;
EmpPicker.fadeDuration = 3000;
EmpPicker.activeDivs = [];
function EmpPicker()
{
var DIVCOLORS = new Array("lightgrey",
"yellow",
"magenta",
"lawngreen",
"cyan");
var FADEINTERVAL = 50;
var HDRHEIGHT = 30;
var DIVWIDTH = 300;
var DIVHEIGHT = 150;
var BORDERWIDTH = 4;
var targetDiv = document.createElement("div");
var startTime;
var endTime;
var fadeDuration;
var shuttingDown = false;
targetDiv.style.visibility = "hidden";
targetDiv.style.position = "absolute";
targetDiv.style.width = DIVWIDTH+"px";
targetDiv.style.height = DIVHEIGHT+"px";
var colorIndex = EmpPicker.activeDivs.length %
DIVCOLORS.length;
targetDiv.style.backgroundColor
= DIVCOLORS[colorIndex];
targetDiv.style.color = "black";
targetDiv.style.fontSize = "12px";
targetDiv.style.borderTop = "1px solid black";
targetDiv.style.borderRight= "3px solid black";
targetDiv.style.borderBottom
= "3px solid black";
targetDiv.style.borderLeft = "1px solid black";
targetDiv.style.padding = "0px";
targetDiv.style.margin = "0px";
document.body.appendChild(targetDiv);
var eventsMgr = function()
{
var AST = 0;
var setAST =
function(entryPoint,timer){
AST = setTimeout(entryPoint,timer);
};
var cancelAST =
function(){
clearTimeout(AST);
};
return {
setAST : setAST,
cancelAST : cancelAST
};
}();
var positionDiv =
function(respMsg)
{
// console.log("SeqNum = " + this.msgSeqNum);
fadeSecs.value = this.msgSeqNum;
// console.log("after rendezvous");
if (shuttingDown){
// this.rendezvous();
// alert("PD exit");
return;
}
targetDiv.style.visibility = "hidden";
targetDiv.style.opacity = "";
targetDiv.style.filter = "";
targetDiv.style.zIndex = "1000";
var recType = respMsg.substr(0,2);
// t3Client.appendConsoleMsg("Checking recType [" + recType + "]");
// console.log("Checking recType [" + recType + "]");
switch (recType)
{
case "00" :
// alert(respMsg.substr(2));
this.rendezvous();
t3Client.appendConsoleMsg("got error");
break;
case "31" :
// t3Client.appendConsoleMsg("setting target Div");
// console.log("setting target Div");
try {
targetDiv.innerHTML =
'<table border="0" cellpadding="1px" '
+
' align="center" id="empDetails"> '
+
' <caption>Totally Random Employee</caption>'
+
' <tr><td class="promptItem">Employee Id: </td>'
+
' <td class="dataItem">'+ respMsg.substr(2,5)
+'</td></tr>' +
' <tr><td class="promptItem"> Name:</td>'
+
' <td class="dataItem">'+ respMsg.substr(7,28)
+'</td></tr>' +
' <tr><td class="promptItem">Sex: </td>'
+
' <td class="dataItem">'+ respMsg.substr(35,1)
+'</td></tr>' +
' <tr><td span class="promptItem">Department: </td>'
+
' <td class="dataItem">'+ respMsg.substr(36,30)
+'</td></tr>' +
' <tr><td class="promptItem">Current Salary: </td>'
+
' <td class="dataItem">'+ respMsg.substr(66,12)
+'</td></tr>' +
' <tr><td class="promptItem">Dept Average: </td>'
+
' <td class="dataItem">'+ respMsg.substr(78,12)
+'</td></tr>' +
'</table><br>';
}catch (err) {
this.rendezvous();
var errMsg = "Error calling setting DIV: -\n";
for (var prop in err) {
errMsg += " Property: " + prop + " Value: " +
err[prop] + "\n";
}
errMsg += " toString() = " + err.toString() +
"\n";
t3Client.appendConsoleMsg(errMsg);
// console.log(errMsg);
throw new Error(errMsg);
}
// t3Client.appendConsoleMsg("after target Div");
// console.log("after target Div");
break;
default :
throw new Error("Received Invalid Record Type [" + recType +
"]");
}
// t3Client.appendConsoleMsg("after recType");
// console.log("after recType");
var canvas = function(){
var height = 0;
var width = 0;
var scrollTop = 0;
var scrollLeft = 0;
if (window.innerHeight){
width = window.innerWidth;
height = window.innerHeight;
}
else if (document.documentElement &&
document.documentElement.clientHeight){
width = document.documentElement.clientWidth;
height = document.documentElement.clientHeight;
}
else if (document.body){
width = document.body.clientWidth;
height = document.body.clientHeight;
}
if (typeof( window.pageYOffset ) == 'number'){
scrollTop = window.pageYOffset;
scrollLeft = window.pageXOffset;
}
else if (document.documentElement &&
document.documentElement.scrollTop){
scrollTop = document.documentElement.scrollTop;
scrollLeft = document.documentElement.scrollLeft;
}
else if (document.body){
scrollTop = document.body.scrollTop;
scrollLeft = document.body.scrollLeft;
}
return {height : height, width : width, scrollTop : scrollTop,
scrollLeft : scrollLeft};
}();
// console.log("after canvass");
var divTop = Math.floor(Math.random()*(canvas.height -
(DIVHEIGHT + BORDERWIDTH + HDRHEIGHT)));
divTop = divTop < 0 ? 0 : divTop;
var divLeft = Math.floor(Math.random()*(canvas.width -
(DIVWIDTH + BORDERWIDTH)));
divLeft = divLeft < 0 ? 0 : divLeft;
targetDiv.style.left = divLeft + "px";
targetDiv.style.top = (divTop + HDRHEIGHT) + "px";
targetDiv.style.visibility = "visible";
startTime = new Date().getTime();
endTime = startTime + EmpPicker.fadeDuration;
this.rendezvous();
t3Client.appendConsoleMsg("after rendezvous" + this.msgSeqNum);
fadeDuration = EmpPicker.fadeDuration
// console.log("before setast");
eventsMgr.setAST(fadeIt,FADEINTERVAL);
// console.log("after setast");
}
var fadeIt =
function(){
var now = new Date().getTime();
if (now >= endTime) {
targetDiv.style.visibility = "hidden";
eventsMgr.setAST(carousel,300);
}else{
var fadeFactor = 1 - (now - startTime) / fadeDuration;
targetDiv.style.opacity = fadeFactor;
targetDiv.style.filter = "alpha(opacity="+(fadeFactor*100)+")";
targetDiv.style.zIndex--;
eventsMgr.setAST(fadeIt,FADEINTERVAL);
}
}
var carousel =
function(){
if (shuttingDown){
// alert("no go");
return;
}
t3Client.send("30",positionDiv,false);
}
this.shutdown =
function(){
shuttingDown = true;
eventsMgr.cancelAST();
targetDiv.style.visibility = "hidden";
document.body.removeChild(targetDiv);
targetDiv = null;
}
EmpPicker.activeDivs.push(this);
eventsMgr.setAST(carousel,0);
return this;
}
function load()
{
fadeSecs = document.getElementById("fadeSecs");
empsCnt = document.getElementById("empsCnt");
try {
t3Client = new Tier3Client(
"Demo", "http://192.168.1.159/Applets/",
2048, 1022, "ISO-8859-1", "N", Tier3Client.GUIAWT,
null,Tier3Client.WARNING);
} catch (err){
alert((err.description||err.message));
throw err;
}
if (t3Client == null || t3Client == undefined) {
alert("Error connecting to Tier3 Client")
throw new Error("Could not activate Tier3 Client");
}
fadeSecs.value = EmpPicker.fadeDuration / 1000;
t3Client.appendConsoleMsg("Employee Randomator successfully loaded");
addEmp();
return;
}
function setDuration(stepValue)
{
var newDuration = EmpPicker.fadeDuration + stepValue;
if (newDuration < EmpPicker.FADEMIN || newDuration >
EmpPicker.FADEMAX)
return;
EmpPicker.fadeDuration = newDuration;
fadeSecs.value = EmpPicker.fadeDuration / 1000;
}
function addEmp()
{
if (EmpPicker.activeDivs.length == EmpPicker.MAXEMPS)
return;
var newEmp = new EmpPicker();
empsCnt.value = EmpPicker.activeDivs.length;
}
function delEmp()
{
if (EmpPicker.activeDivs.length == 0)
return;
var victim = EmpPicker.activeDivs.pop();
victim.shutdown();
empsCnt.value = EmpPicker.activeDivs.length;
}
</script>
</head>
<body onload="load();" onunload="(function(){});">
<div id="ctrlPanel">
<table
style="table-layout: fixed;"
width="100%"
border="0"
frame="void"
cellpadding="0"
cellspacing="0"
rules="none"
>
<tr
valign="middle"
>
<td
width="40%"
style="text-align: right;"
valign="middle"
>
Fade Duration :
<input
type="button"
class="knob"
onclick="setDuration(1000)"
name="fadeUp"
value="^"
title="Increase Fade Time"
/>
<input
type="text"
class="cntr"
id="fadeSecs"
readonly="readonly"
value="0"
size=3
title="Duration of fade in seconds"
/>
<input
type="button"
class="knob"
style="font-size: 14px;"
onclick="setDuration(-1000)"
name="fadeDown"
value="v"
title="Decrease Fade Time"
/>
</td>
<td
width="20%"
class="screenHdr"
valign="middle"
>Randomator</td>
<td
width="40%"
style="text-align: left;"
valign="middle"
>
<input
type="button"
class="knob"
onclick="addEmp()"
name="empsUp"
value="^"
title="Pick more employees"
/>
<input
type="text"
class="cntr"
id="empsCnt"
readonly="readonly"
value="0"
size=3
title="Number of employees to pick"
/>
<input
type="button"
class="knob"
style="font-size: 14px;"
onclick="delEmp()"
name="empsDown"
value="v"
title="Pick fewer employees"
/>
: Concurrent Selections
</td>
</tr>
</table>
</div>
</body>
</html>