<HTML>
<HEAD><TITLE>Simple Matching</TITLE></HEAD>
<BODY LINK="#FFFFFF" VLINK="#FFFFFF" ALINK="#FFFFFF">
<br><br><br><br><br><br><br><br>
<form name="fbform" action="">
<textarea NAME="fb" cols=18 rows=10 wrap="soft">
At the left are the components of a basic messaging architecture.
Click on a component, then click on the blank space on the topology where it belongs.  
When you're finished, click on Done, and we'll see you how you did.
</textarea>
</form>



<Layer name="archover" LEFT=134 TOP=2 WIDTH=800 src="archbase.htm">
</layer>

<LAYER NAME="relay" LEFT=300 TOP=0 WIDTH=130 src="blank.htm">
</LAYER>

<LAYER NAME="inhub" LEFT=300 top=160 WIDTH=130 src="blank.htm">
</LAYER>

<LAYER NAME="outhub" LEFT=500 top=160 WIDTH=130 src="blank.htm">
</LAYER>

<LAYER NAME="directory" LEFT=300 top=320 WIDTH=130 src="blank.htm">
</LAYER>

<LAYER NAME="messaging2" LEFT=470 top=480 WIDTH=130 src="blank.htm">
</LAYER>

<LAYER NAME="mmp" LEFT=300 TOP=540 WIDTH=130 src="blank.htm">
</LAYER>

<LAYER NAME="clients" LEFT=300 TOP=700 WIDTH=130 src="blank.htm">
</LAYER>


<LAYER NAME="select1" LEFT=650 TOP=0 WIDTH=130 src="clients.htm">
</LAYER>

<LAYER NAME="select2" LEFT=650 TOP=140 WIDTH=130 src="mserver.htm">
</LAYER>

<LAYER NAME="select3" LEFT=650 TOP=280 WIDTH=130 src="dserver.htm">
</LAYER>

<LAYER NAME="select4" LEFT=650 TOP=420 WIDTH=130 src="ohub.htm">
</LAYER>

<LAYER NAME="select5" LEFT=650 TOP=560 WIDTH=130 src="ihub.htm">
</LAYER>

<LAYER NAME="select6" LEFT=650 TOP=700 WIDTH=130 src="mmp.htm">
</LAYER>

<LAYER NAME="select7" LEFT=650 TOP=840 WIDTH=130 src="irelay.htm">
</LAYER>

<layer name="done" width=50 src="done.htm"></layer>

<LAYER NAME="messaging1" LEFT=130 TOP=480 WIDTH=130 src="mserver.htm">
</LAYER>






</BODY>

<SCRIPT>
var who = new Array();
for (var i=1; i < 16; i++){who[i]=0;initlayer(i);}
who[8] = 7; who[9] = 5; who[10] = 4; who[11] = 3; who[12]=2; who[13] = 6; who[14] = 1; 
var suffix = ".html";
var highname = "high";
var unhighname = "unhigh";
var blankname = "blank";
var selected = 0;
var t = 100;

function choose(n) {
// alert("layer " + n + " has person " + who[n] + " and the selected layer is " + selected);
// if the same selection, do nothing except reset the capture

// if something selected already
   if (selected > 0) 
   {

//    if they clicked on a blank
      if (who[n] == 0) 
      {

//      fill the blank with an unhighlighted version of who is selected

        unselect(n, who[selected]);

// var thislayer = document.layers[n-1];
   setTimeout(blank, t, selected);
//      put a blank where selected was
//        blank(selected);




//      update the new position 
        who[n] = who[selected];
//      blank out who is at selected
        who[selected] = 0;
//      Set no one selected
        selected = 0;

      } 
      else 
      {
//       else if they clicked on the same selection, do nothing
         if (n == selected) 
         {
         }
//       else they clicked on another selection
         else 
         {
//         highlight the new selection
           select(n, who[n]);
//         unhighlight the previous selection
   setTimeout(unselect, t, selected, who[selected]);
//         update which layer is selected
           selected = n;       
         }
      }
   } 
// else nothing selected
   else 
   {
//    if a non blank
      if (who[n] > 0) 
      {
//       highlight the new selection
         select(n, who[n]);
//       update the selected variable
         selected = n;
      }
   }
// lastly reset the layers
// resetcapture(n);
// for (var i=1; i < 9; i++){resetcapture(i);}
}
         
// function to put highlighted w into layer n
function select(n, w) {
  layerupdate(n, "h" + getname(w));
}

// function to put unhighlighted w into layer n
function unselect(n, w) {
   layerupdate(n, getname(w));
}

// function to put a blank in layer n
function blank(n) {
   layerupdate(n, "blank.htm");
}

// function to update layer l with source s
function layerupdate(l, s) {
  var thislayer = document.layers[l];
//  thislayer.load(s, thislayer.width);
  thislayer.src = s;
//  thislayer.visibility = "show";
//  thislayer.document.onload = resetcapture(l);
//  thislayer.document.load;
//thislayer.load(s, thislayer.width);
// alert("updating layer " + l + ", " + thislayer.name + ", with source " + s);
resetcapture(l);
}

// function to give the source name for person w
function getname(w) {
switch (w) {
  case 0: s="blank.htm";break;
  case 1: s="irelay.htm"; break;
  case 2: s="ihub.htm"; break;
  case 3: s="ohub.htm"; break;
  case 4: s="dserver.htm"; break;
  case 5: s="mserver.htm"; break;
  case 6: s="mmp.htm"; break;
  case 7: s="clients.htm"; break;
 }
return s;
}

function initlayer(n) {
  var thislayer = document.layers[n];
  resetcapture(n);
  switch (n) {
  case 1: thislayer.document.onMouseDown=ch1; break;
  case 2: thislayer.document.onMouseDown=ch2; break;
  case 3: thislayer.document.onMouseDown=ch3; break;
  case 4: thislayer.document.onMouseDown=ch4; break;
  case 5: thislayer.document.onMouseDown=ch5; break;
  case 6: thislayer.document.onMouseDown=ch6; break;
  case 7: thislayer.document.onMouseDown=ch7; break;
  case 8: thislayer.document.onMouseDown=ch8; break;
  case 9: thislayer.document.onMouseDown=ch9; break;
  case 10: thislayer.document.onMouseDown=ch10; break;
  case 11: thislayer.document.onMouseDown=ch11; break;
  case 12: thislayer.document.onMouseDown=ch12; break;
  case 13: thislayer.document.onMouseDown=ch13; break;
  case 14: thislayer.document.onMouseDown=ch14; break;
  case 15: thislayer.document.onMouseDown=chkans; break;
 }

//  thislayer.document.onMouseDown=choose;
//  thislayer.onload=resetcapture(n);

}


function ch1(e) {choose(1);return false;}
function ch2(e) {choose(2);return false;}
function ch3(e) {choose(3);return false;}
function ch4(e) {choose(4);return false;}
function ch5(e) {choose(5);return false;}
function ch6(e) {choose(6);return false;}
function ch7(e) {choose(7);return false;}
function ch8(e) {choose(8);return false;}
function ch9(e) {choose(9);return false;}
function ch10(e) {choose(10);return false;}
function ch11(e) {choose(11);return false;}
function ch12(e) {choose(12);return false;}
function ch13(e) {choose(13);return false;}
function ch14(e) {choose(14);return false;}

// var layer2 = document.select2;
// layer2.document.captureEvents(Event.MOUSEDOWN);
// layer2.document.onMouseDown=ch2;
// function ch2(e) {choose(2);}



function resetcapture(n) {
var thislayer = document.layers[n];
thislayer.document.captureEvents(Event.MOUSEDOWN);
}

function chkans(e) {checkanswer(1); resetcapture(15);return false;}


function checkanswer(x) {
var n;
//    if filled with an answer
	if (who[x] > 0) {
//		if the incorrect answer
		if (who[x]!= x) {
//			select the layer
//alert(x);
			choose(x);
			for (p=1;p<1000;p++) {};
//			move back to the first blank on the selection list	
			n = 0;
//			find the first blank
			for (y=8;n == 0; y++) {
				if (who[y]==0){n=y;}
			}
//alert(n);
			choose(n);
		}
}

if (x < 7) {setTimeout(checkanswer, t, x+1);} else {feedback();}
}

function feedback() {
var fbstr=" ";
var wrong=0;
for (x=8;x<15;x++) {
// if a selection contains a character, get feedback on that character
	if (who[x] > 0) {
		wrong++;
		fbstr = fbstr + wrong + ") " + fb(who[x]) + " // ";
 	}

}
// Check if all correct
if (wrong == 0) {fbstr="Good job! You're done. Click the arrow on the top bar to move on to the next page! ";} else {fbstr = "Not quite.  Try again.  Here's some more information on the incorrectly placed components that may help you figure it out. //  " + fbstr;}
document.fbform.fb.value=fbstr;
//alert(document.fbform.fb.value);
}

function fb(x) {
switch(x) {
	case 1: fbstr = "The Internet Relay sends messages from the Internet across the firewall to the Inbound Messaging Hub via SMTP.";break;
	case 2: fbstr = "The Inbound Messaging Hub receives messages across the firewall from the Internet Relay via SMTP, finds out from the Directory Server via LDAP which Messaging Server the recipient uses, then sends the message to that server via SMTP.";break;
	case 3: fbstr = "The Outbound Messaging Hub sends outbound messages across the firewall to the Internet via SMTP."; break;
	case 4: fbstr = "The Directory Server is the information source for the other servers, processing queries via LDAP."; break;
	case 5: fbstr = "The Messaging Server receives messages from the hubs via SMTP, and processes client retrievals through the Messaging Multiplexor via POP3 and IMAP4.";break;
	case 6: fbstr = "The Messaging Multiplexor connects the clients to the Messaging Server that hold the users' messages via POP3 and IMAP4."; break;
	case 7: fbstr = "The Clients receive messages from the Messaging Servers through the Messaging Multiplexor via POP3 and IMAP4, and send messages via SMTP to the Outbound Messaging Hub.";break;
	}
return fbstr;
}
</SCRIPT>

</HTML>
