<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
        <head>
                <title>PhoneBook</title>
                <script type="text/javascript" src="PhoneBook.ashx?proxy&v=2"></script>                
                <script type="text/javascript" src="js/dojo/dojo.js"></script>
                <script type="text/javascript">
                	dojo.require("dojo.widget.TabContainer");                
	                dojo.require("dojo.widget.ContentPane");
	                dojo.require("dojo.widget.LayoutContainer");
                    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;
                    }
                                		
            		var container_id = "container";

                    function view_select(id) {
                        var w = dojo.widget.byId(container_id);  
           	            w.selectChild(id);                    	
                    }
                    
                    /* lister */
                                        
            		var lister_id = "lister";
            		var entry_list_id = "entry_list";
            		
                    function lister_select() {
                        view_select(lister_id); 
                    }            		
            		
            		function entry_list() {
            		    return dojo.widget.byId(entry_list_id);
            		}
            		
                    function entry_list_result(type, data, evt)
                    {
                        entry_list().store.setData(data.result);
                    }                    
                    function entry_list_load()
                    {                    
                        PhoneBook.rpc.entry_list(entry_list_result).call(server);
                    }
                    dojo.addOnLoad(entry_list_load);
                    
                    function entry_list_select_edit(evt) {                   
                        entry_edit(entry_list().getSelectedData().entry_key);
                    }                   
                    function entry_list_select_delete(evt) {                   
                        entry_delete(entry_list().getSelectedData().entry_key);
                    }                   

                    function entry_list_select() {
                        dojo.event.connect(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_load();
			        }
			        			        
                    /* editor */

            		var editor_id = "editor";

                    function editor_select() {
                        view_select(editor_id); 
                    }

            		var entry_form_id = "entry_form";

            		function entry_form() {
            		    return dojo.widget.byId(entry_form_id);
            	    }
            		
            		var dpHired_id = "dpHired";
            		            		
                    function setHired(hired) {                    
                        var dpHired = dojo.widget.byId(dpHired_id);
                    	dpHired.setDate(hired);
                    }

                    function entry_edit_result(type, data, evt) 
                    {
                    	entry_form().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); 
                    	
                    	editor_select();
                    }
                    function entry_edit(entry_key) 
                    {
                        PhoneBook.rpc.entry(entry_key,entry_edit_result).call(server);
                    }

                    function entry_save_result() {
                    	reloadData(entry_list_id);
                    	entry_reset();
                    	lister_select();
                    	
                    }                    
                    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 values = entry_form().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_quit() {
                    	entry_reset();
                    	lister_select();
                    }               
                    
                    function entry_reset() {
                        var values = entry_form().getValues(); 
                        values.first_name = "";
                        values.last_name = "";
                        values.extension = "";
                        values.user_name = "";
                        values.hours = "37.5";
                        values.entry_key = "";
                        entry_form().setValues(values);
                        var today = new Date();
                        setHired(today);
                    }                    
                    
                    function entry_add() 
                    {
                        entry_reset();
                        editor_select();
                    }

                    function entry_delete_result(type, data, evt)
                    {
                    	alert ( "Deleted: (" + data.result.entry_key + ")" );
                    	entry_save_result();
                    }    
                    function entry_delete(entry_key) 
                    {
                    	if (entry_key) {   
                            var ok = confirm ( "Delete entry?" );
                            if (ok) 
                                PhoneBook.rpc.entry_delete(entry_key,entry_delete_result).call(server);
                        }
                    }

                </script>
                
                <style type="text/css">
                body {
	                font-family : sans-serif;
                }
                .dojoTabPaneWrapper {
                    padding : 10px 10px 10px 10px;
                }

                </style>
                
	            <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="container" dojoType="TabContainer" style="width:100%; height:70%;" selectedChild="lister">

        <div id="lister" dojoType="ContentPane" label="PhoneBook Directory" >
        <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" /> 
            <input type="button" onclick="applyName('entry_list');" value="Show only names between M and Z" /> 
            <input type="button" value="Show All Entries" onclick="clearFilters('entry_list');" />
   		    <input type="button" value="Reload Entries" onclick="reloadData('entry_list');" />        
        </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="Add Entry" onclick="entry_add('entry_list');" />
        </td></tr></table>
        
       	</div> 
       	
        <div id="editor" dojoType="ContentPane" label="Entry Editor">
        
        <form id="entry_form" dojoType="Form">
            <table><tr>
                    <td>First Name</td><td><input name="first_name" /></td>
                </tr><tr>
                    <td>Last Name</td><td><input name="last_name" /></td>
                </tr><tr>
                    <td>Extension</td><td><input name="extension" /></td>
                </tr><tr>
                    <td>User Name</td><td><input name="user_name" /></td>
                </tr><tr>
                    <td>Hired</td><td><input name="hired" widgetid="dpHired" dojoType="dropdowndatepicker" displayFormat="MM/dd/yyyy" /></td>
                </tr><tr>
                    <td>Hours</td><td><input name="hours" /></td>
                </tr><tr>
                    <td rowspan="2">
                    <input type="button" value="SAVE" onClick="entry_save();" />
                    <input type="button" value="CANCEL" onClick="entry_quit();" />
                    <input type="button" value="DELETE" onclick="entry_list_select_delete('entry_list');" />
                    <input type="hidden" name="editor" value="1" />
                    <input type="hidden" name="entry_key" />
                </td>
            </tr></table>
        </form>
        </div>
        </div>
        
    </body>
</html>