# HOW TO CREATE THE DELICIOUS TRAILMAKER #

0. Open files for demonstration and prepare environment
	Open trailmaker_skeleton.html in TextMate.
	Open http://iolab/delicious_trailmaker/trailmaker_skeleton.html in Firefox
	Open 1Password to copy password for vannevarbush account
	
	Zoom TextMate display
	Zoom Firefox display
	
	Turn off Expose and sleep corners
	Turn off Growl notifications
	Close other applications. All but: Firefox, TextMate, Keynote
	

1. Explain that this is a demonstration. I'm going to go through these steps quickly. Hand-waving. If there are parts of it that you don't understand, don't worry. At the end, I'll post a detailed step-by-step tutorial on the blog for you to review at your own pace.

2. Create HTML skeleton

	Make a form to load a user's bookmarks.
	- Form with id="load-bookmarks"
		- input id="username" type="text"
		- input type="submit" value="Load Bookmarks"
	
	Place to load the bookmarks
	- div id="bookmarks"
		- h3 "Bookmarks"
		- ul
	
	Place to create a new trail
	- div id="new-trail"
		- h3 "New Trail"
		- ul

	And a form to save the trail
		- form with id="save-trail"
		- input id="save-username"
		- input id="save-password"

--> BROWSER: Let's take a look at this HTML skeleton in the browser.

So now we've got all the HTML we need to build this and we'll just be writing Javascript and styling.

QUESTION: What needs to happen when I click "Load Bookmarks"

3. Javascript

	SWITCH TEXTMATE TO JQUERY JAVASCRIPT BUNDLE

	- $.ready
		We want to attach functionality with Javascript when the page loads, so we put our actions in the ready function.
	
	- $('#load-bookmarks').submit()
		Attach an event to the submission of the load-bookmarks form
		- Form has id="load-bookmarks"
		- The CSS to identify something by its id is #name
		- jQuery operates by using CSS selectors
		- return false; Start with "return false", to prevent the default action

	- var username = $('#username').val();

	- When form is submitted, we want to load a user's bookmarks. We can get this information from feeds that Delicious provides. We want the feed that gives the user's bookmarks.

	$.getJSON(delicious url + username + ?callback=?, function(rsp))
	[url to Delicious api should be in snippets file]

	CALLBACK FUNCTIONS

	QUESTION: Who here has used Firebug before?
	- We're asking everyone to install Firebug for the next class. Firebug is a Firefox extension that lets you debug and inspect Javascript and web pages.
	
	- console.log(rsp)
	- To test this, let's put console.log(rsp) in the callback function and see what the data Delicious is giving us looks like.
	
	- Array of objects, each of which represents a bookmark
	
	-> Firefox: examine console data
		u: url
		d: description of the link
		n: extended notes
		t: tag
		
	- $.each(rsp)
	We want to make a list element for each of the returned bookmarks.
		- start by writing just the HTML, explaining as you go
		- Then insert the this.u and this.d variables where they are needed
		Should look like this:
		var html = '<li><a href="' + this.u + '">' + this.d + '</a></li>';
		
		- Put each bookmark into #bookmarks ul
			$(html).appendTo('#bookmarks ul');
			
		BROWSER: See if this works

		- PASTE The syntax for adding the hidden data to the line should be in the snippets file.

3. Adding styling

	- We want these two sections, bookmarks and new trail to appear side-by-side. Drag and drop.

	<style type="text/css">
	    #bookmarks, #new-trail {
	        width: 48%;
			margin-right: 1%;
			float: left;
	        min-height: 300px;
	        border: 1px solid #666;
	    }
	</style>


4. jQuery UI
	- We want to make these list elements draggable so we can add them to our new trail. This is really easy with jQuery UI.

	$('#bookmarks li').draggable();
	
	- Make all of the li elements draggable -- do this in Firebug Console
		(when done use .draggable('destroy'))
	
	- Use draggable({revert: true}) to make them snap back into place
	
	- We need to make the new-trail list "droppable"
		- $('#new-trail').droppable({ ... options ... })
		- accept: li
		- drop: function to add the dragged element to the list
		- drop: function(event, ui)
		
		$(ui.draggable).draggable('disable').appendTo('#new-trail ul')

		BROWSER: See what this works like

		[can also copy snippet to fix visual glitch]

5. Sorting items in the new trail
	Order is important--we want to be able to reorder the elements in this new trail. Otherwise it's kind of worthless without it.
	
	- Add $('#new-trail ul').sortable() to ready

6. Saving the trail

	- Again, we want something to happen when the #save-trail form is submitted
	- $('#save-trail).submit()
	
	- Get name for new trail
	- delicious.username = Get username from form
	- delicious.password = Get password
	- $('#new-trail h3').text(prompt('Enter a name for your trail:') || 'My New Trail');
	- saveTrail();
	- return false !!
	
	- function saveTrail()
	
	- Add delicious.stepNum counter to increment
    delicious.stepNum ? delicious.stepNum++ : delicious.stepNum = 1;

	
	- delicious.newTrailName = $('#new-trail h3').text().prompt('Enter a name for your trail:')
		- toLowerCase()
		- Replace spaces with underscores using / /g, '_'

	- var $bookmark = $('#new-trail li:first')
	
	- Construct POST data to save this particular bookmark
	
	- var postData = {
		url: $bookmark.find('a').attr('href')
		description: $bookmark.find('a').html()
		tags: 'trail:' + newTrailName + ' step:' + delicious.stepNum
	}
	
	COPY rest of postData from snippets
	
	$.post('delicious_proxy.php, postData, function())
	
	COPY callback from snippets