// Add model to the application.
window.application.addModel((function( $, application ){
 
	// I am the contact class.
	function Contact( id, name, phone, email ){
		this.id = (id || 0);
		this.name = (name || "");
		this.phone = (phone || "");
		this.email = (email || "");
	};
 
	// I validate the contact instance.
	Contact.prototype.validate = function(){
		// For now, we are just goint to validate TRUE on the client and let
		// the full validation happen on the model peristence.
		return( [] );
	};
 
 
	// ----------------------------------------------------------------------- //
	// ----------------------------------------------------------------------- //
 
	// Return a new model class.
	return( Contact );
 
})( jQuery, window.application ));

// Add a controller to the application.
window.application.addController((function( $, application ){
 
	// I am the controller class.
	function Controller(){
		// Route URL events to the controller's event handlers.
		this.route( "/", this.index );
		this.route( "/contacts/", this.index );
		this.route( "/contacts/add/", this.addContact );
		this.route( "/contacts/edit/:id", this.editContact );
		this.route( "/contacts/delete/:id", this.deleteContact );
 
		// Set default properties.
		this.currentView = null;
		this.contactListView = null;
		this.contactFormView = null;
	};
 
	// Extend the core application controller (required).
	Controller.prototype = new application.Controller();
 
 
	// I initialize the controller. I get called once the application starts
	// running. At that point, the DOM is available and all the other model
	// and view classes will have been added to the system.
	Controller.prototype.init = function(){
		this.contactListView = application.getView( "ContactList" );
		this.contactFormView = application.getView( "ContactForm" );
	};
 
 
	// I am the add event for this controller.
	Controller.prototype.addContact = function( event ){
		// Show the form view.
		this.showView( this.contactFormView, event );
	};
 
 
	// I am the edit event for this controller.
	Controller.prototype.editContact = function( event, id ){
		// Show the form view.
		this.showView( this.contactFormView, event );
	};
 
 
	// I am the delete event for this controller.
	Controller.prototype.deleteContact = function( event, id ){
		// Delete the contact.
		application.getModel( "ContactService" ).deleteContact(
			id,
			function(){
				application.relocateTo( "contacts" );
			}
		);
	};
 
 
	// I am the default event for this controller.
	Controller.prototype.index = function( event ){
		// Show the list view.
		this.showView( this.contactListView, event );
	};
 
 
	// I show the given view; but first, I hide any existing view.
	Controller.prototype.showView = function( view, event ){
		// Check to see if there is a current view. If so, then hide it.
		if (this.currentView && this.currentView.hideView){
			this.currentView.hideView();
		}
 
		// Show the given view.
		view.showView( event.parameters );
 
		// Store the given view as the current view.
		this.currentView = view;
	};
 
 
	// ----------------------------------------------------------------------- //
	// ----------------------------------------------------------------------- //
 
	// Return a new contoller instance.
	return( new Controller() );
 
})( jQuery, window.application ));

 
// Add view to the application.
window.application.addView((function( $, application ){
 
	// I am the contact list view class.
	function ContactList(){
		this.layout = null;
		this.searchForm = null;
		this.searchCriteria = null;
		this.addLink = null;
		this.contactList = null;
		this.contactTemplate = null;
	};
 
 
	// I initialize the view. I get called once the application starts
	// running. At that point, the DOM is available and all the other model
	// and view classes will have been added to the system.
	ContactList.prototype.init = function(){
		var self = this;
 
		// Initialize properties.
		this.layout = $( "#contact-list-layout" );
		this.searchForm = $( "#contact-list-header form" );
		this.searchCriteria = this.searchForm.find( "input" );
		this.addLink = $( "#contact-list-header a" );
		this.contactList = $( "#contact-list" );
		this.contactTemplate = $( "#contact-list-item-template" );
 
		// Bind the search form submit.
		this.searchForm.submit(
			function( event ){
				// Hand of to the search form handler.
				self.searchFormHandler();
 
				// Cancel the default event.
				return( false );
			}
		);
 
		// Bind the keypress event on the search criteria.
		this.searchCriteria.keyup(
			function( event ){
				// Filter the contact list.
				self.filterList( this.value );
			}
		);
 
		// Bind the keypress event to the search criteria so we can track 
		// the use of the special keys presses.
		this.searchCriteria.keypress(
			function( event ){
				// Store the SHIFT and ALT key status of the current click.
				self.searchCriteria.data( "shift", event.shiftKey );
				self.searchCriteria.data( "alt", event.altKey );
			}
		);
 
		// Bind the list-level clicking (to avoid setting to many 
		// event handlers).
		this.contactList.click(
			function( event ){
				var target = $( event.target );
 
				// Check to see if the target is the "more" link.
				if (target.is( "a.more" )){
 
					// Toggle the list item details.
					self.toggleDetails( target.parents( "li" ) );
 
					// Blur the current link.
					target.blur();
 
					// Prevent default event.
					return( false );
 
				// Check to see if the target is a the "delete" link.
				} else if (target.is( "a.delete" )){
 
					// Blur the current link.
					target.blur();
 
					// Confirm that the user wants to delete the contact.
					if (confirm( "Delete this contact?" )){
 
						// This is a *hack* that we have to do since jQuery click() 
						// event won't trigger the default action of the link.
						application.setLocation( target.attr( "href" ) );
 
					}
 
					// Return false to cancel default event.
					return( false );		
 
				}
			}
		);
	};
 
	....
 
	// Return a new view class.
	return( new ContactList() );
 
})( jQuery, window.application ));