// POP3 // 14.4 added example gmail pop server and ssl port var text = ""; var protokollaTila = -1; var hosts = { "h1": "POP3_Asiakas", "h2": "POP3_Palvelin" }; var synArray = new Array("Avataanko yhteys? (TCP SYN)", "Avataan yhteys, ok? (TCP SYNACK)", "OK! (TCP ACK)"); var pop3Array = new Array("+OK Gpop ready for requests", "user [email protected]", "+OK send PASS", "[salasana lähetetty]", "+OK Welcome.", "list", "+OK 16 messages (164864 bytes)...", "retr 16", "+OK message follows", "quit", "+OK Farewell."); var finArray = new Array("Suljetaanpa yhteys (TCP FIN)", "Suljetaan yhteys (TCP FIN)", "Okei! (TCP ACK)", "Ookoo! (TCP ACK)"); $(document).ready(function() { alusta(); piirra(); $('a').click(function(event) { var tila = this.id; switch (tila) { case "pop3": switch (protokollaTila) { case -1: $('#pop3').fadeOut(500); $('#pop3').fadeIn(500, function() { $('#pop3').html('Seuraava viesti'); }); protokollaTila += 1; break; case 0: case 2: piirra_nuoli("h1", "h2", synArray[protokollaTila]); protokollaTila += 1; break; case 1: piirra_nuoli("h2", "h1", synArray[protokollaTila]); protokollaTila += 1; break; case 3: case 5: case 7: case 9: case 11: case 13: piirra_nuoli("h2", "h1", pop3Array[protokollaTila - 3]); protokollaTila += 1; break; case 4: case 6: case 8: case 10: case 12: piirra_nuoli("h1", "h2", pop3Array[protokollaTila - 3]); protokollaTila += 1; break; case 14: case 16: piirra_nuoli("h1", "h2", finArray[protokollaTila - 14]); protokollaTila += 1; break; case 15: case 17: piirra_nuoli("h2", "h1", finArray[protokollaTila - 14]); protokollaTila += 1; break; case 18: text = text.concat("\nNote right of " + hosts.h1 + ": Kommunikaatio päättyi"); protokollaTila = -1; break; } break; case "aa": alusta(); break; default: break; } // switch piirra(); }); }); function piirra_nuoli(h1, h2, viesti) { text = text.concat("\n" + hosts[h1] + "->" + hosts[h2] + ": "); text = text.concat(viesti); } function alusta() { text = "title: POP3 Protokolla (esim. pop.gmail.com port 995 (SSL))"; protokollaTila = -1; kuvia = 0; $('#pop3').fadeIn(500, function() { $('#pop3').html('POP3 protokolla'); }); } function piirra() { $('#diagram').html(''); var diagram = Diagram.parse(text); diagram.drawSVG("diagram", { //theme: 'hand' //theme: 'simple' theme: $('.theme').val() }); }
<a id="pop3" href="javascript:void(0);">POP3 kommunikaatio</a> <a id="aa" href="javascript:void(0);">Aloita alusta</a> Theme: <select class="theme" style="margin-left:0.1cm;"> <option value="simple" selected>Simple</option> <option value="hand">Hand drawn</option> </select> <div id="diagram"></div>
a { background-color: #FFFFCC; width: 100px; font-size: 1em; border: 2px solid black; border-radius: 5px; float: top; margin-left: 0.1cm; }