<!--
// Author:  Yee Hsu
// Date:    2/13/2007
//
// Desc:    Taken directly from my Personal page! This is demonstration of AJAX.
//          Now that you have the code, you can tell the page was really a FAKE,
//          and didnt actually do anything but gave the appearance it was some
//          secret lair! hahahahaha......
-->
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Yee Hsu - About Me</title>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<script language="Javascript">
function xmlhttpPost(strURL) {
    var xmlHttpReq = false;
    var self = this;
    // Mozilla/Safari
    if (window.XMLHttpRequest) {
        self.xmlHttpReq = new XMLHttpRequest();
    }
    // IE
    else if (window.ActiveXObject) {
        self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
    }
     
    self.xmlHttpReq.open('POST', strURL, false);
    self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    self.xmlHttpReq.send(getquerystring());  
    updatepage(self.xmlHttpReq.responseText);       
           
    /*                
    self.xmlHttpReq.onreadystatechange = function() {                                         
        if (self.xmlHttpReq.readyState == 4) {          
            updatepage(self.xmlHttpReq.responseText);
        }
    }  
    */            
}

function getquerystring() {
    var form = document.forms['f1'];
    var word = form.pass.value;
    var qstr = 'pass=' + escape(word);  // NOTE: no '?' before querystring
   
    return qstr;
}

function updatepage(str){
    document.getElementById("result").innerHTML = str;
}
</script>

</head>

<body>
<style type="text/css">
a:hover         {color: #ddddff; text-decoration: none;                                                                 }
a.head1         {color: #dddddd; text-decoration: none;                                                                 }
a.head2         {color: #0000ff; text-decoration: none;                                                                 }
a.link          {color: #000000; text-decoration: none;                                                                 }
td.bluebg       {color: #000000; font-size: 12px; text-align: left; background: #666699; font-family: ariel;            }
td.grey         {color: #000000; font-size: 12px; text-align: left; background: #dddddd; font-family: ariel;            }
td.ltgrey       {color: #000000; font-size: 12px; text-align: left; background: #eeeeee; font-family: verdana;          }
td.whitebg      {color: #000000; font-size: 12px; text-align: left; background: #ffffff; font-family: verdana;          }
li              {margin-left: 30px;                                                                                     }

#name           {color: #ddddff; font-weight: bold; font-size: 24px; font-family: verdana;                              }
#head1          {color: #dddddd; font-weight: none; font-size: 14px; text-align: left; font-family: ariel;              }
#head2          {color: #dddddd; font-weight: bold; font-size: 12px; font-family: ariel;                                }
#foot1          {color: #dddddd; font-weight: none; font-size: 12px; font-family: ariel;                                }
#foot2          {color: #222222; font-weight: none; font-size: 12px; font-family: ariel;                                }
#line           {padding: 5px 5px 5px 0px;border-top: dotted 1px #cccccc;                                               }
#container      {position: relative; height: 20px;                                                                      }
#lelement       {position: absolute; width: 100%; left: 0;                                                              }
#relement       {position: absolute; width: 100%; right: 0; text-align: right;                                          } 
</style>

<br />
<br />

<div align="center">
  <table width="700" border="0" cellspacing="0" cellpadding="5">
    <tr> 
      
    <td width="100%" valign="bottom" class="bluebg">
<div id="name">
        <div align="center"><font size="4"><br></font><font size="5">Personal 
          Portal</font></div>
      </div>
      <br />
          </td>
      
    </tr>
    <tr> 
      <td class="grey" width="690"><table width="100%" border="0" cellspacing="10" cellpadding="10">
        <tr> 
          <td class="whitebg"><font size="3"><b>Private Area</b></font><br />
            <div id="line">
                        Are you the web administrator?<p>This area requires authorized 
            access. If you do not have proper privileges to enter this portal, 
            please keep out. Please enter the administrator password so we may 
            authenticate your access.</p>
            <div id="result"></div> 
            <p>Enter Password:</p>
            <form name="f1">
              <p>
              <input type="password" name="pass" size="30"></p>
              <p><input type="button" value="Submit" name="b1" onclick='JavaScript:xmlhttpPost("./personal.cgi")'>
              <input type="reset" value="Reset" name="b2" onclick='JavaScript:updatepage("")'></p>                          
            </form>
          </div></td>
        </tr>
        </table></td>
    </tr>
    </table>
  </body>
</html>