<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
        <head>
                <title>PhoneBook</title>
                <meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
                <meta name=ProgId content=VisualStudio.HTML>
                <meta name=Originator content="Microsoft Visual Studio .NET 7.1">
                <script language="javascript" src="PhoneBook.ashx?proxy&v=2"></script>                
                <script language="javascript" src="js/dojo/dojo.js"></script>
                <script language="javascript">
                    dojo.require("dojo.io.*");
                    dojo.require("dojo.event.*");
                    dojo.require("dojo.html.*");
                    dojo.require("dojo.json");
            		dojo.require("dojo.widget.FilteringTable");
            		dojo.hostenv.writeIncludes();
            		
            		/* call server */
            		
                    function server(call)
                    {
                        var bindArgs = {
                            url: call.url+'?rpc',
                            error: function(type, data, evt){alert("Error Communicating with Server: " + data.result);},
                            method: "POST",
                            mimetype: "text/json",
                            handle: call.callback,
                            postContent: dojo.json.serialize(call.request)
                        };
                        var req = dojo.io.bind(bindArgs);
                        dojo.event
                        return req;
                    }

                    /* lister */
                    
                    function entry_list_result(type, data, evt)
                    {
                    	var w = dojo.widget.byId("entry_list");
                        w.store.setData(data.result);
                    }                    
                    function entry_list()
                    {                    
                        PhoneBook.rpc.entry_list(entry_list_result).call(server);
                    }
                    dojo.addOnLoad(entry_list);
                    
                    function entry_list_select_edit(evt) {                   
                        var table = dojo.widget.byId("entry_list");
                        entry_edit(table.getSelectedData().entry_key);
                    }                   
                    function entry_list_select_delete(evt) {                   
                        var table = dojo.widget.byId("entry_list");
                        entry_delete(table.getSelectedData().entry_key);
                    }                   

                    function entry_list_select() {
                        dojo.event.connect(dojo.byId("entry_list"), "onSelect",	entry_list_select_edit);
                    }
                    dojo.addOnLoad(entry_list_select);
                    
                    /* lister filters */
                    
    		        function dateFilter(hired) {
			            return (hired == '5/29/1987' || hired == '11/18/1984');
		            }
		            function applyDate(id){
			            dojo.widget.byId(id).setFilter("hired", dateFilter);
		            }
				
		            function nameFilter(last_name){
			            return (last_name.charAt(0) >= 'M' && last_name.charAt(0) <= 'Z');
		            }
		            function applyName(id){
			            dojo.widget.byId(id).setFilter("last_name", nameFilter);
	            	}
		
		            function clearFilters(id){
			            dojo.widget.byId(id).clearFilters();
		            }		            
		            function reloadData(id){
			            dojo.widget.byId(id).store.clearData();
			            entry_list();
			        }
			        			        
                    /* editor */

                    function setHired(hired) {                    
                        var dpHired = dojo.widget.byId("dpHired");
                    	dpHired.setDate(hired);
                    }

                    function entry_edit_result(type, data, evt) 
                    {
                    	var w = dojo.widget.byId("entry_form");         
                    	w.setValues(data.result);   
                    	var part = new Array();
                    	part = data.result.hired.split('/',3); // mm/dd/yyyy
                    	var yyyy = part[2];
                    	var mm = part[0];
                    	var dd = part[1];
                    	if (mm.length==1) mm = new String().concat('0',mm);
                    	if (dd.length==1) dd = new String().concat('0',dd);
                    	var hired = new String().concat( yyyy,'-',mm,'-',dd );
                    	setHired(hired); 
                    }
                    function entry_edit(entry_key) 
                    {
                        PhoneBook.rpc.entry(entry_key,entry_edit_result).call(server);
                    }

                    function entry_save_result() {
                    	reloadData('entry_list');
                    	entry_reset();
                    }                    
                    function entry_save_update_result(type, data, evt)
                    {
                    	alert ( "Edited: " + data.result.user_name + " (" + data.result.entry_key + ")" );
                    	entry_save_result();
                    }    
                    function entry_save_insert_result(type, data, evt)
                    {
                    	alert ( "Added: " + data.result.user_name + " (" + data.result.entry_key + ")" );
                    	entry_save_result();
                    }    
                    function entry_save()
                    {                    
                    	var w = dojo.widget.byId("entry_form");         
                    	var values = w.getValues();        
                    	if (values.entry_key)   	
                            PhoneBook.rpc.entry_save(values,entry_save_update_result).call(server);
                        else                             
                            PhoneBook.rpc.entry_save(values,entry_save_insert_result).call(server);
                    }                    
                    
                    function entry_reset() {
                        var w = dojo.widget.byId("entry_form");
                        var values = w.getValues(); 
                        values.first_name = "";
                        values.last_name = "";
                        values.extension = "";
                        values.user_name = "";
                        values.hours = "37.5";
                        values.entry_key = "";
                        w.setValues(values);
                        var today = new Date();
                        setHired(today);
                    }                    
                    
                    function entry_add() 
                    {
                        entry_reset();
                    }

                    function entry_delete_result(type, data, evt)
                    {
                    	alert ( "Deleted: (" + data.result.entry_key + ")" );
                    	entry_save_result();
                    }    
                    function entry_delete(entry_key) 
                    {
                    	if (entry_key) {   
                            confirm ( "Delete entry?" );
                            PhoneBook.rpc.entry_delete(entry_key,entry_delete_result).call(server);
                        }
                    }

                </script>
                
	            <style type="text/css">
		        /***
			        The following is just an example of how to use the table.
			        You can override any class names to be used if you wish.
		        ***/
		        table {
			        font-family:Lucida Grande, Verdana;
			        font-size:0.8em;
			        width:100%;
			        border:1px solid #ccc;
			        border-collapse:collapse;
			        cursor:default;
		        }
		        table td,
		        table th{
			        padding:2px;
			        font-weight:normal;
		        }
		        table thead td, table thead th {
			        background-image:url(images/ft-head.gif);
			        background-repeat:no-repeat;
			        background-position:top right;
		        }
		        table thead td.selectedUp, table thead th.selectedUp {
			        background-image:url(images/ft-headup.gif);
		        }
		        table thead td.selectedDown, table thead th.selectedDown {
			        background-image:url(images/ft-headdown.gif);
		        }
			
		        table tbody tr td{
			        border-bottom:1px solid #ddd;
		        }
		        table tbody tr.alt td{
			        background: #e3edfa;
		        }
		        table tbody tr.selected td{
			       background: yellow;
		        }
		        table tbody tr:hover td{
			        background: #a6c2e7;
		        }
		        table tbody tr.selected:hover td{
			        background:#ff9;
		        }

		        #inputArea{
			        margin:1em 0;
			        padding:1em;
			        background-color:#eef;
		        }
		        #updateTestInput{
			        border:1px solid #ccc;
			        width:100%;
			        height:80px;
			        font-family:serif;
			        font-size:0.9em;
			        overflow:auto;
		        }
    	</style>                            
    </head>
    <body>   
    
        <div id="finder" />
        
        <div id="lister">
        
        <table id="filter_menu"><tr><td>
       	    <input type="button" onclick="applyDate('entry_list');" value="Show only hires between 1/1/1984 and 1/1/1987" ID="Button1" NAME="Button1"/> 
            <input type="button" onclick="applyName('entry_list');" value="Show only names between M and Z" ID="Button2" NAME="Button2"/> 
            <input type="button" value="Show All Entries" onclick="clearFilters('entry_list');" ID="Button3" NAME="Button3"/>
   		    <input type="button" value="Reload Entries" onclick="reloadData('entry_list');" ID="Button4" NAME="Button4"/>        
        </td></tr></table>
        
	    <table id="entry_list" 
            dojoType="filteringTable" alternateRows="true" valueField="user_name" >
	        <thead>
		    <tr>
			    <th field="last_name" sort="asc">Last Name</th>
			    <th field="first_name">First Name</th>
			    <th field="extension">Extension</th>
			    <th field="user_name">User</th>
			    <th field="hired" align="center">Hired</th>
			    <th field="hours" align="center">Hours</th>
		    </tr>
	        </thead>
	    </table>
        
        <table id="edit_menu"><tr><td>
            <input type="button" value="Edit Entry" onclick="entry_list_select_edit('entry_list');" ID="Button5" NAME="Button5"/>
            <input type="button" value="Add Entry" onclick="entry_add('entry_list');" ID="Button6" NAME="Button6"/>
            <input type="button" value="Delete Entry" onclick="entry_list_select_delete('entry_list');" ID="Button7" NAME="Button7"/>
        </td></tr></table>
        
       	</div> 
       	
       	<div id="viewer" />
       	
        <div id="editor">
        
        <form id="entry_form" dojoType="Form">
            <table ID="Table1"><tr>
                    <td>First Name</td><td><input name="first_name" ID="Text1"/></td>
                </tr><tr>
                    <td>Last Name</td><td><input name="last_name" ID="Text2"/></td>
                </tr><tr>
                    <td>Extension</td><td><input name="extension" ID="Text3"/></td>
                </tr><tr>
                    <td>User Name</td><td><input name="user_name" ID="Text4"/></td>
                </tr><tr>
                    <td>Hired</td><td><input name="hired" widgetid="dpHired" dojoType="dropdowndatepicker" displayFormat="MM/dd/yyyy" ID="Text5"/></td>
                </tr><tr>
                    <td>Hours</td><td><input name="hours" ID="Text6"/></td>
                </tr><tr>
                    <td rowspan="2"><input type="button" onClick="entry_save();" value="SAVE" ID="Button8" NAME="Button8"/>
                    <input type="hidden" name="editor" value="1" ID="editor"/>
                    <input type="hidden" name="entry_key" ID="entry_key"/>
                </td>
            </tr></table>
        </form>
        </div>
        
    </body>
</html>