<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US"  style="background-color: buttonface; color: buttontext;">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Iframe Ajax</title>
    <script type="text/javascript" src="scripts/webtoolkit.aim.js"></script>
    <script type="text/javascript">
        function startCallback() {

           document.getElementById('r').innerHTML ="uploading, please wait";
// make something useful before submit (onStart)
            return true;
        }

        function completeCallback(response) {
            // make something useful after (onComplete)
           // document.getElementById('nr').innerHTML = parseInt(document.getElementById('nr').innerHTML) + 1;

        var resp_and_filename=response.split("|||");
//alert(mytool_array[0]+" "+mytool_array[1]+" "+mytool_array[2]);
            document.getElementById('r').innerHTML = resp_and_filename[0];
            document.mainform.image_data.value=resp_and_filename[1];
        }
        function check_address_is_same(theField)
        {
        var em1 = document.mainform.email_from1.value;
        var em2 = document.mainform.email_from2.value;
        if(em1 != em2){
alert("Your email addresses dont match! \n Enter the exact same email address in the repeat email address box.");return false;

//document.nameform.user.focus();
//document.mainform.email_from2.focus();
document.getElementById(email_from2).focus();
//theField.focus(theField);
}
        
        }
    </script> 
    <script type="text/javascript" src="scripts/dynamic_no_of_recipients2.js"></script>

<!-- CALENDER -->
<!-- calendar stylesheet -->
  <link rel="stylesheet" type="text/css" media="all" href="scripts/jscalendar_1.0/calendar-win2k-cold-1.css" title="win2k-cold-1" />

  <!-- main calendar program -->
  <script type="text/javascript" src="scripts/jscalendar_1.0/calendar.js"></script>

  <!-- language for the calendar -->
  <script type="text/javascript" src="scripts/jscalendar_1.0/lang/calendar-en.js"></script>

  <!-- the following script defines the Calendar.setup helper function, which makes
       adding a calendar a matter of 1 or 2 lines of code. -->
  <script type="text/javascript" src="scripts/jscalendar_1.0/calendar-setup.js"></script>
<!-- end CALENDER-->


<style type="text/css">
<!--
.style1 {font-size: smaller}
-->
</style>
</head>

<body marginheight="0" topmargin="0" >


<table width="500" border="1" cellspacing="4" cellpadding="4" frame="box" rules="none">
  <tr>
    <td><div id="r">&nbsp; </div><div align="right">[HELP]</div></td>
  </tr>
  <tr>
    <td>
    <form action="index.php" method="post" onsubmit="return AIM.submit(this, {'onStart' : startCallback, 'onComplete' : completeCallback})">

        <div><label>File:</label> <input type="file" name="ryans" /><input type="submit" value="SUBMIT" /></div>
    </form></td>
  </tr><form action="process_ecard1.php" method="post" name="mainform">
  <tr>
    <td><input name="auto_pic_resize" type="checkbox" id="auto_pic_resize" value="1" checked="checked" />
      If needed, resize my image for best results <span class="style1">(Recommended)</span></td>
    </tr>
  <tr>
    <td><table width="350" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td>Your email address:</td>
        <td><input type="text" name="email_from1" id="email_from1" /></td>
      </tr>
      <tr>
        <td nowrap="nowrap">Repeat your email address:</td>
        <td><input type="text" name="email_from2" id="email_from2" onblur="check_address_is_same(this)" /></td>
      </tr>

    </table></td>
    </tr>
  <tr>
    <td>Number of recipients 
      <select name="no_of_friends" id="no_of_friends"  onchange="change_no_of_recipients(this); return false">
        <option value="1" selected="selected">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
      </select>      </td>
    </tr>
  <tr>
    <td id="recips"><table width="50%" border="0" cellspacing="2" cellpadding="2">
  <tr>
    <td nowrap="nowrap">Recipient's name:</td>
    <td><input type="text" name="rec1_name" id="rec1_name" /></td>
    <td nowrap="nowrap">Recipient's email:</td>
    <td><input type="text" name="rec1_email" id="rec1_email" /></td>
  </tr>
<tr>
</table></td>
    </tr>
  <tr>
    <td><input name="notify" type="checkbox" id="notify" value="1" checked="checked" />
      Notify/email me when the recipient(s) views my ecard</td>
    </tr>
  <tr>
    <td><input type="hidden" name="f_date_d" id="f_date_d" /><input type="hidden" name="image_data" id="image_data" /><!-- Send on date: <span style="background-color: #ff8; cursor: default;"
         onmouseover="this.style.backgroundColor='#ff0';"
         onmouseout="this.style.backgroundColor='#ff8';"
         id="show_d"
   > (<a href="#">Click to open calender</a>)</span> --><script type="text/javascript">
    Calendar.setup({
        inputField     :    "f_date_d",     // id of the input field
        ifFormat       :    "%Y/%d/%m",     // format of the input field (even if hidden, this format will be honored)
        displayArea    :    "show_d",       // ID of the span where the date is to be shown
        daFormat       :    "%A, %B %d, %Y",// format of the displayed date
        align          :    "Tl",           // alignment (defaults to "Bl")
        singleClick    :    true
    });
</script></td>
    </tr><tr><td><div align="right">
      
      <input type="submit" name="submit" id="submit" value="Done! Take me to the next and final step!" />
    </div></td></tr></form>
</table>


<p>&nbsp;</p>
</body>
</html>