<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Brian Grinstead &#187; Web Development</title>
	<atom:link href="http://www.briangrinstead.com/blog/category/web-development/feed" rel="self" type="application/rss+xml" />
	<link>http://www.briangrinstead.com/blog</link>
	<description></description>
	<lastBuildDate>Tue, 10 Aug 2010 18:26:31 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>bindWithDelay jQuery Plugin</title>
		<link>http://www.briangrinstead.com/blog/bindwithdelay-jquery-plugin</link>
		<comments>http://www.briangrinstead.com/blog/bindwithdelay-jquery-plugin#comments</comments>
		<pubDate>Tue, 10 Aug 2010 18:26:31 +0000</pubDate>
		<dc:creator>Brian</dc:creator>
				<category><![CDATA[Web Development]]></category>
		<category><![CDATA[bindwithdelay]]></category>
		<category><![CDATA[event binding]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[plugin]]></category>

		<guid isPermaLink="false">http://www.briangrinstead.com/blog/?p=380</guid>
		<description><![CDATA[Sometimes, I want to have a JavaScript event that doesn&#8217;t fire until the native event stops firing for a short timeout. I&#8217;ve needed to use that pattern in almost every project I have worked on. For example, you want to use JavaScript to resize an iframe to 100% height when the window resizes. The resize() [...]]]></description>
			<content:encoded><![CDATA[<p>Sometimes, I want to have a JavaScript event that doesn&#8217;t fire until the native event stops firing for a short timeout.  I&#8217;ve needed to use that pattern in almost every project I have worked on.</p>

<p><strong>For example</strong>, you want to use JavaScript to resize an iframe to 100% height when the window resizes.  The resize() event can fire dozens of times, and calculating and setting the new height can slow down your page.  I used to implement it like this (notice the extra global variable and indentation with the anonymous function):</p>


<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;color: #0000FF;">var</span> timeout<span style="color: #339933;color: #000000;">;</span>
<span style="color: #003366; font-weight: bold;color: #0000FF;">function</span> doResize<span style="color: #009900;color: #000000;">&#40;</span>e<span style="color: #009900;color: #000000;">&#41;</span> <span style="color: #009900;color: #000000;">&#123;</span>
   clearTimeout<span style="color: #009900;color: #000000;">&#40;</span>timeout<span style="color: #009900;color: #000000;">&#41;</span><span style="color: #339933;color: #000000;">;</span>
   timeout <span style="color: #339933;color: #000000;">=</span> setTimeout<span style="color: #009900;color: #000000;">&#40;</span><span style="color: #003366; font-weight: bold;color: #0000FF;">function</span><span style="color: #009900;color: #000000;">&#40;</span><span style="color: #009900;color: #000000;">&#41;</span> <span style="color: #009900;color: #000000;">&#123;</span>
      <span style="color: #006600; font-style: italic;color: #008000;">// run some code</span>
   <span style="color: #009900;color: #000000;">&#125;</span><span style="color: #339933;color: #000000;">,</span> <span style="color: #CC0000;color: #808080;">200</span><span style="color: #009900;color: #000000;">&#41;</span><span style="color: #339933;color: #000000;">;</span>
<span style="color: #009900;color: #000000;">&#125;</span>
$<span style="color: #009900;color: #000000;">&#40;</span><span style="color: #003366; font-weight: bold;color: #0000FF;">function</span><span style="color: #009900;color: #000000;">&#40;</span><span style="color: #009900;color: #000000;">&#41;</span> <span style="color: #009900;color: #000000;">&#123;</span>
   $<span style="color: #009900;color: #000000;">&#40;</span>window<span style="color: #009900;color: #000000;">&#41;</span>.<span style="color: #660066;">bind</span><span style="color: #009900;color: #000000;">&#40;</span><span style="color: #3366CC;color: #808080;">&quot;resize&quot;</span><span style="color: #339933;color: #000000;">,</span>doResize<span style="color: #009900;color: #000000;">&#41;</span><span style="color: #339933;color: #000000;">;</span>
<span style="color: #009900;color: #000000;">&#125;</span><span style="color: #009900;color: #000000;">&#41;</span><span style="color: #339933;color: #000000;">;</span></pre></div></div>


<p><strong>I wrote a plugin to make this pattern easier, it is called &#8220;bindWithDelay&#8221;.</strong>  The <a href='http://github.com/bgrins/bindWithDelay/'>source code</a> is online, as is a mini <a href='http://briangrinstead.com/files/bindWithDelay/'>project page</a> with a demo.</p>

<p>
This is what the same code looks like with the plugin:
</p>


<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;color: #0000FF;">function</span> doResize<span style="color: #009900;color: #000000;">&#40;</span>e<span style="color: #009900;color: #000000;">&#41;</span> <span style="color: #009900;color: #000000;">&#123;</span>
      <span style="color: #006600; font-style: italic;color: #008000;">// run some code</span>
<span style="color: #009900;color: #000000;">&#125;</span>
$<span style="color: #009900;color: #000000;">&#40;</span><span style="color: #003366; font-weight: bold;color: #0000FF;">function</span><span style="color: #009900;color: #000000;">&#40;</span><span style="color: #009900;color: #000000;">&#41;</span> <span style="color: #009900;color: #000000;">&#123;</span>
   $<span style="color: #009900;color: #000000;">&#40;</span>window<span style="color: #009900;color: #000000;">&#41;</span>.<span style="color: #660066;">bindWithDelay</span><span style="color: #009900;color: #000000;">&#40;</span><span style="color: #3366CC;color: #808080;">&quot;resize&quot;</span><span style="color: #339933;color: #000000;">,</span> doResize<span style="color: #339933;color: #000000;">,</span> <span style="color: #CC0000;color: #808080;">200</span><span style="color: #009900;color: #000000;">&#41;</span><span style="color: #339933;color: #000000;">;</span>
<span style="color: #009900;color: #000000;">&#125;</span><span style="color: #009900;color: #000000;">&#41;</span><span style="color: #339933;color: #000000;">;</span></pre></div></div>

]]></content:encoded>
			<wfw:commentRss>http://www.briangrinstead.com/blog/bindwithdelay-jquery-plugin/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Make Table Rows Sortable Using jQuery UI Sortable</title>
		<link>http://www.briangrinstead.com/blog/make-table-rows-sortable-using-jquery-ui-sortable</link>
		<comments>http://www.briangrinstead.com/blog/make-table-rows-sortable-using-jquery-ui-sortable#comments</comments>
		<pubDate>Thu, 30 Jul 2009 20:17:51 +0000</pubDate>
		<dc:creator>Brian</dc:creator>
				<category><![CDATA[All]]></category>
		<category><![CDATA[Web Development]]></category>
		<category><![CDATA[cell]]></category>
		<category><![CDATA[development]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[jquery-ui]]></category>
		<category><![CDATA[programming]]></category>
		<category><![CDATA[sortable]]></category>
		<category><![CDATA[table]]></category>

		<guid isPermaLink="false">http://www.briangrinstead.com/blog/?p=352</guid>
		<description><![CDATA[I wrote an article on the LANIT Development blog about a problem that I ran into when trying to set up a basic sortable table using jQuery UI. The columns would collapse down once the dragging began. This was fixed by adjusting the helper object for the sortable function. Check out the article for all [...]]]></description>
			<content:encoded><![CDATA[<p>I <a href="http://lanitdev.wordpress.com/2009/07/23/make-table-rows-sortable-using-jquery-ui-sortable/">wrote an article on the LANIT Development blog</a> about a problem that I ran into when trying to set up a basic sortable table using jQuery UI.  The columns would collapse down once the dragging began.</p>

<p><img src="http://briangrinstead.com/files/sotable-row-collapsed.png" alt="sortable-row-collapsed" title="sortable-row-collapsed" class="aligncenter size-full" /></p>

<p>This was fixed by adjusting the <a href="http://jqueryui.com/demos/sortable/#option-helper">helper object</a> for the sortable function.  Check out the <a href="http://lanitdev.wordpress.com/2009/07/23/make-table-rows-sortable-using-jquery-ui-sortable/">article</a> for all the details, but here is a sample of the code if you are just looking for the solution:</p>


<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #006600; font-style: italic;color: #008000;">// Return a helper with preserved width of cells</span>
<span style="color: #003366; font-weight: bold;color: #0000FF;">var</span> fixHelper <span style="color: #339933;color: #000000;">=</span> <span style="color: #003366; font-weight: bold;color: #0000FF;">function</span><span style="color: #009900;color: #000000;">&#40;</span>e<span style="color: #339933;color: #000000;">,</span> ui<span style="color: #009900;color: #000000;">&#41;</span> <span style="color: #009900;color: #000000;">&#123;</span>
	ui.<span style="color: #660066;">children</span><span style="color: #009900;color: #000000;">&#40;</span><span style="color: #009900;color: #000000;">&#41;</span>.<span style="color: #660066;">each</span><span style="color: #009900;color: #000000;">&#40;</span><span style="color: #003366; font-weight: bold;color: #0000FF;">function</span><span style="color: #009900;color: #000000;">&#40;</span><span style="color: #009900;color: #000000;">&#41;</span> <span style="color: #009900;color: #000000;">&#123;</span>
		$<span style="color: #009900;color: #000000;">&#40;</span><span style="color: #000066; font-weight: bold;color: #0000FF;">this</span><span style="color: #009900;color: #000000;">&#41;</span>.<span style="color: #660066;">width</span><span style="color: #009900;color: #000000;">&#40;</span>$<span style="color: #009900;color: #000000;">&#40;</span><span style="color: #000066; font-weight: bold;color: #0000FF;">this</span><span style="color: #009900;color: #000000;">&#41;</span>.<span style="color: #660066;">width</span><span style="color: #009900;color: #000000;">&#40;</span><span style="color: #009900;color: #000000;">&#41;</span><span style="color: #009900;color: #000000;">&#41;</span><span style="color: #339933;color: #000000;">;</span>
	<span style="color: #009900;color: #000000;">&#125;</span><span style="color: #009900;color: #000000;">&#41;</span><span style="color: #339933;color: #000000;">;</span>
	<span style="color: #000066; font-weight: bold;color: #0000FF;">return</span> ui<span style="color: #339933;color: #000000;">;</span>
<span style="color: #009900;color: #000000;">&#125;</span><span style="color: #339933;color: #000000;">;</span>
&nbsp;
$<span style="color: #009900;color: #000000;">&#40;</span><span style="color: #3366CC;color: #808080;">&quot;#sort tbody&quot;</span><span style="color: #009900;color: #000000;">&#41;</span>.<span style="color: #660066;">sortable</span><span style="color: #009900;color: #000000;">&#40;</span><span style="color: #009900;color: #000000;">&#123;</span>
	helper<span style="color: #339933;color: #000000;">:</span> fixHelper
<span style="color: #009900;color: #000000;">&#125;</span><span style="color: #009900;color: #000000;">&#41;</span>.<span style="color: #660066;">disableSelection</span><span style="color: #009900;color: #000000;">&#40;</span><span style="color: #009900;color: #000000;">&#41;</span><span style="color: #339933;color: #000000;">;</span></pre></div></div>

]]></content:encoded>
			<wfw:commentRss>http://www.briangrinstead.com/blog/make-table-rows-sortable-using-jquery-ui-sortable/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>C# Tips &#8211; Type Conversion with &#8220;as&#8221; and &#8220;is&#8221;</title>
		<link>http://www.briangrinstead.com/blog/csharp-tips-type-conversion-with-as-and-is</link>
		<comments>http://www.briangrinstead.com/blog/csharp-tips-type-conversion-with-as-and-is#comments</comments>
		<pubDate>Tue, 21 Jul 2009 19:00:39 +0000</pubDate>
		<dc:creator>Brian</dc:creator>
				<category><![CDATA[Web Development]]></category>
		<category><![CDATA[asp.net]]></category>
		<category><![CDATA[csharp]]></category>
		<category><![CDATA[programming]]></category>
		<category><![CDATA[snippet]]></category>
		<category><![CDATA[tips]]></category>

		<guid isPermaLink="false">http://www.briangrinstead.com/blog/?p=305</guid>
		<description><![CDATA[I had used C# for at least a year before I found out a couple of nice shorthand ways to convert types. These are the is and as expressions, and using them can help make your code more readable. The is Expression The is expression will return true if the provided expression is non-null and [...]]]></description>
			<content:encoded><![CDATA[<p>I had used C# for at least a year before I found out a couple of nice shorthand ways to convert types.  These are the <a href="http://msdn.microsoft.com/en-us/library/scekt9xw%28VS.80%29.aspx">is</a> and <a href="http://msdn.microsoft.com/en-us/library/cscsdfbt%28VS.71%29.aspx">as</a> expressions, and using them can help make your code more readable.</p>

<h3>The is Expression</h3>

<p>The <em>is</em> expression will return true if the provided expression is non-null and can be cast to the specific type.</p>


<div class="wp_syntax"><div class="code"><pre class="csharp" style="font-family:monospace;"><span style="color: #0600FF;color: #0000FF;">private</span> <span style="color: #FF0000;color: #0000FF;">string</span> GetDisplayField<span style="color: #000000;color: #000000;">&#40;</span><span style="color: #FF0000;color: #0000FF;">object</span> val<span style="color: #000000;color: #000000;">&#41;</span>
<span style="color: #000000;color: #000000;">&#123;</span>
	<span style="color: #0600FF;color: #0000FF;">if</span> <span style="color: #000000;color: #000000;">&#40;</span>val <span style="color: #008000;color: #0000FF;">is</span> <span style="color: #FF0000;color: #0000FF;">string</span><span style="color: #000000;color: #000000;">&#41;</span>
	<span style="color: #000000;color: #000000;">&#123;</span>
		<span style="color: #FF0000;color: #0000FF;">string</span> text <span style="color: #008000;color: #000000;">=</span> <span style="color: #000000;color: #000000;">&#40;</span><span style="color: #FF0000;color: #0000FF;">string</span><span style="color: #000000;color: #000000;">&#41;</span>val<span style="color: #008000;color: #000000;">;</span>
		<span style="color: #0600FF;color: #0000FF;">return</span> <span style="color: #666666;color: #808080;">&quot;Value was text: &quot;</span> <span style="color: #008000;color: #000000;">+</span> text<span style="color: #008000;color: #000000;">;</span>
	<span style="color: #000000;color: #000000;">&#125;</span>
	<span style="color: #0600FF;color: #0000FF;">else</span> <span style="color: #0600FF;color: #0000FF;">if</span> <span style="color: #000000;color: #000000;">&#40;</span>val <span style="color: #008000;color: #0000FF;">is</span> DateTime<span style="color: #000000;color: #000000;">&#41;</span>
	<span style="color: #000000;color: #000000;">&#123;</span>
		DateTime time <span style="color: #008000;color: #000000;">=</span> <span style="color: #000000;color: #000000;">&#40;</span>DateTime<span style="color: #000000;color: #000000;">&#41;</span>val<span style="color: #008000;color: #000000;">;</span>
		<span style="color: #0600FF;color: #0000FF;">return</span> <span style="color: #666666;color: #808080;">&quot;Value was date: &quot;</span> <span style="color: #008000;color: #000000;">+</span> time.<span style="color: #0000FF;">ToShortDateString</span><span style="color: #000000;color: #000000;">&#40;</span><span style="color: #000000;color: #000000;">&#41;</span><span style="color: #008000;color: #000000;">;</span>
	<span style="color: #000000;color: #000000;">&#125;</span>
&nbsp;
	<span style="color: #0600FF;color: #0000FF;">return</span> <span style="color: #666666;color: #808080;">&quot;Could not match type&quot;</span><span style="color: #008000;color: #000000;">;</span>
<span style="color: #000000;color: #000000;">&#125;</span></pre></div></div>


<h3>The as Expression</h3>

<p>The <em>as</em> expression will try to cast the object into the given type, and returns an object of that type if the cast was successful, or return null if unsuccessful.</p>

<p>This buys a little bit more functionality for you, as it assigns the variable with an already casted value if successful.  It is functionally equivalent to: <code>expression is type ? (type)expression : (type)null</code></p>


<div class="wp_syntax"><div class="code"><pre class="csharp" style="font-family:monospace;"><span style="color: #0600FF;color: #0000FF;">private</span> <span style="color: #FF0000;color: #0000FF;">string</span> GetDisplayField<span style="color: #000000;color: #000000;">&#40;</span><span style="color: #FF0000;color: #0000FF;">object</span> val<span style="color: #000000;color: #000000;">&#41;</span>
<span style="color: #000000;color: #000000;">&#123;</span>
	<span style="color: #FF0000;color: #0000FF;">string</span> text <span style="color: #008000;color: #000000;">=</span> val <span style="color: #0600FF;color: #0000FF;">as</span> string<span style="color: #008000;color: #000000;">;</span>
	DateTime<span style="color: #008000;color: #000000;">?</span> time <span style="color: #008000;color: #000000;">=</span> val <span style="color: #0600FF;color: #0000FF;">as</span> DateTime<span style="color: #008000;color: #000000;">?;</span>
&nbsp;
	<span style="color: #0600FF;color: #0000FF;">if</span> <span style="color: #000000;color: #000000;">&#40;</span>text <span style="color: #008000;color: #000000;">!=</span> <span style="color: #0600FF;color: #0000FF;">null</span><span style="color: #000000;color: #000000;">&#41;</span>
	<span style="color: #000000;color: #000000;">&#123;</span>
		<span style="color: #0600FF;color: #0000FF;">return</span> <span style="color: #666666;color: #808080;">&quot;Value was text: &quot;</span> <span style="color: #008000;color: #000000;">+</span> text<span style="color: #008000;color: #000000;">;</span>
	<span style="color: #000000;color: #000000;">&#125;</span>
	<span style="color: #0600FF;color: #0000FF;">if</span> <span style="color: #000000;color: #000000;">&#40;</span>time.<span style="color: #0000FF;">HasValue</span><span style="color: #000000;color: #000000;">&#41;</span>
	<span style="color: #000000;color: #000000;">&#123;</span>
		<span style="color: #0600FF;color: #0000FF;">return</span> <span style="color: #666666;color: #808080;">&quot;Value was date: &quot;</span> <span style="color: #008000;color: #000000;">+</span> time.<span style="color: #0000FF;">Value</span>.<span style="color: #0000FF;">ToShortDateString</span><span style="color: #000000;color: #000000;">&#40;</span><span style="color: #000000;color: #000000;">&#41;</span><span style="color: #008000;color: #000000;">;</span>
	<span style="color: #000000;color: #000000;">&#125;</span>
&nbsp;
	<span style="color: #0600FF;color: #0000FF;">return</span> <span style="color: #666666;color: #808080;">&quot;Could not match type&quot;</span><span style="color: #008000;color: #000000;">;</span>
<span style="color: #000000;color: #000000;">&#125;</span></pre></div></div>


<h3>Testing out the functions</h3>

<p><br /></p>


<div class="wp_syntax"><div class="code"><pre class="csharp" style="font-family:monospace;">Console.<span style="color: #0000FF;">WriteLine</span><span style="color: #000000;color: #000000;">&#40;</span>GetDisplayField<span style="color: #000000;color: #000000;">&#40;</span><span style="color: #FF0000;color: #808080;">1</span><span style="color: #000000;color: #000000;">&#41;</span><span style="color: #000000;color: #000000;">&#41;</span><span style="color: #008000;color: #000000;">;</span>              <span style="color: #008080; font-style: italic;color: #008000;">// Output: &quot;Could not match type&quot;</span>
Console.<span style="color: #0000FF;">WriteLine</span><span style="color: #000000;color: #000000;">&#40;</span>GetDisplayField<span style="color: #000000;color: #000000;">&#40;</span><span style="color: #666666;color: #808080;">&quot;Hello&quot;</span><span style="color: #000000;color: #000000;">&#41;</span><span style="color: #000000;color: #000000;">&#41;</span><span style="color: #008000;color: #000000;">;</span>        <span style="color: #008080; font-style: italic;color: #008000;">// Output: &quot;Value was text: Hello&quot;</span>
Console.<span style="color: #0000FF;">WriteLine</span><span style="color: #000000;color: #000000;">&#40;</span>GetDisplayField<span style="color: #000000;color: #000000;">&#40;</span>DateTime.<span style="color: #0000FF;">Now</span><span style="color: #000000;color: #000000;">&#41;</span><span style="color: #000000;color: #000000;">&#41;</span><span style="color: #008000;color: #000000;">;</span>   <span style="color: #008080; font-style: italic;color: #008000;">// Output: &quot;Value was date: 7/21/2009&quot;</span></pre></div></div>


<p>They are both readable ways to perform a type conversion &#8211; but pick one or the other!  Using both of them is redundant.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.briangrinstead.com/blog/csharp-tips-type-conversion-with-as-and-is/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Keep Original Variable State Between Event Binding and Execution</title>
		<link>http://www.briangrinstead.com/blog/keep-original-variable-state-between-event-binding-and-execution</link>
		<comments>http://www.briangrinstead.com/blog/keep-original-variable-state-between-event-binding-and-execution#comments</comments>
		<pubDate>Wed, 15 Jul 2009 13:48:09 +0000</pubDate>
		<dc:creator>Brian</dc:creator>
				<category><![CDATA[All]]></category>
		<category><![CDATA[Web Development]]></category>
		<category><![CDATA[closure]]></category>
		<category><![CDATA[event binding]]></category>
		<category><![CDATA[event handling]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[loop]]></category>
		<category><![CDATA[variable scope]]></category>

		<guid isPermaLink="false">http://www.briangrinstead.com/blog/?p=291</guid>
		<description><![CDATA[Or: Binding Events Inside of a Loop with jQuery I wrote an article over on the LANIT Development Blog about saving the state of a variable inside a closure that is not executed immediately. For example, functions passed into event binding or setTimeout(). Here is a quick rundown of the problem and the solution (using [...]]]></description>
			<content:encoded><![CDATA[<h3>Or: Binding Events Inside of a Loop with jQuery</h3>

<p>I <a href="http://lanitdev.wordpress.com/2009/07/15/keep-variable-state-between-event-binding-and-execution/">wrote an article</a> over on the LANIT Development Blog about saving the state of a variable inside a closure that is not executed immediately. For example, functions passed into event binding or setTimeout(). Here is a quick rundown of the problem and the solution (using the jQuery library).</p>

<h3>The Problem</h3>


<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;color: #000000;">&#40;</span><span style="color: #003366; font-weight: bold;color: #0000FF;">function</span><span style="color: #009900;color: #000000;">&#40;</span><span style="color: #009900;color: #000000;">&#41;</span> <span style="color: #009900;color: #000000;">&#123;</span>
	$<span style="color: #009900;color: #000000;">&#40;</span><span style="color: #3366CC;color: #808080;">&quot;body&quot;</span><span style="color: #009900;color: #000000;">&#41;</span>.<span style="color: #660066;">append</span><span style="color: #009900;color: #000000;">&#40;</span><span style="color: #3366CC;color: #808080;">&quot;&lt;ul id='container'&gt;&lt;/ul&gt;&quot;</span><span style="color: #009900;color: #000000;">&#41;</span><span style="color: #339933;color: #000000;">;</span>
&nbsp;
	<span style="color: #000066; font-weight: bold;color: #0000FF;">for</span> <span style="color: #009900;color: #000000;">&#40;</span><span style="color: #003366; font-weight: bold;color: #0000FF;">var</span> i <span style="color: #339933;color: #000000;">=</span> <span style="color: #CC0000;color: #808080;">0</span><span style="color: #339933;color: #000000;">;</span> i <span style="color: #339933;color: #000000;">&lt;</span> <span style="color: #CC0000;color: #808080;">5</span><span style="color: #339933;color: #000000;">;</span> i<span style="color: #339933;color: #000000;">++</span><span style="color: #009900;color: #000000;">&#41;</span>
	<span style="color: #009900;color: #000000;">&#123;</span>
		<span style="color: #003366; font-weight: bold;color: #0000FF;">var</span> $item <span style="color: #339933;color: #000000;">=</span> $<span style="color: #009900;color: #000000;">&#40;</span><span style="color: #3366CC;color: #808080;">&quot;&lt;li /&gt;&quot;</span><span style="color: #009900;color: #000000;">&#41;</span>.<span style="color: #660066;">text</span><span style="color: #009900;color: #000000;">&#40;</span><span style="color: #3366CC;color: #808080;">&quot;Item &quot;</span> <span style="color: #339933;color: #000000;">+</span> i<span style="color: #009900;color: #000000;">&#41;</span><span style="color: #339933;color: #000000;">;</span>
		$<span style="color: #009900;color: #000000;">&#40;</span><span style="color: #3366CC;color: #808080;">&quot;#container&quot;</span><span style="color: #009900;color: #000000;">&#41;</span>.<span style="color: #660066;">append</span><span style="color: #009900;color: #000000;">&#40;</span>$item<span style="color: #009900;color: #000000;">&#41;</span><span style="color: #339933;color: #000000;">;</span>
&nbsp;
		$item.<span style="color: #660066;">click</span><span style="color: #009900;color: #000000;">&#40;</span><span style="color: #003366; font-weight: bold;color: #0000FF;">function</span><span style="color: #009900;color: #000000;">&#40;</span><span style="color: #009900;color: #000000;">&#41;</span> <span style="color: #009900;color: #000000;">&#123;</span>
			<span style="color: #000066;color: #0000FF;">alert</span><span style="color: #009900;color: #000000;">&#40;</span><span style="color: #3366CC;color: #808080;">&quot;You clicked number &quot;</span> <span style="color: #339933;color: #000000;">+</span> i<span style="color: #009900;color: #000000;">&#41;</span><span style="color: #339933;color: #000000;">;</span>  <span style="color: #006600; font-style: italic;color: #008000;">// always &quot;You clicked number 5&quot;</span>
		<span style="color: #009900;color: #000000;">&#125;</span><span style="color: #009900;color: #000000;">&#41;</span><span style="color: #339933;color: #000000;">;</span>
	<span style="color: #009900;color: #000000;">&#125;</span>
<span style="color: #009900;color: #000000;">&#125;</span><span style="color: #009900;color: #000000;">&#41;</span><span style="color: #339933;color: #000000;">;</span></pre></div></div>


<h3>The Solution</h3>


<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;color: #000000;">&#40;</span><span style="color: #003366; font-weight: bold;color: #0000FF;">function</span><span style="color: #009900;color: #000000;">&#40;</span><span style="color: #009900;color: #000000;">&#41;</span> <span style="color: #009900;color: #000000;">&#123;</span>
	$<span style="color: #009900;color: #000000;">&#40;</span><span style="color: #3366CC;color: #808080;">&quot;body&quot;</span><span style="color: #009900;color: #000000;">&#41;</span>.<span style="color: #660066;">append</span><span style="color: #009900;color: #000000;">&#40;</span><span style="color: #3366CC;color: #808080;">&quot;&lt;ul id='container'&gt;&lt;/ul&gt;&quot;</span><span style="color: #009900;color: #000000;">&#41;</span><span style="color: #339933;color: #000000;">;</span>
&nbsp;
	<span style="color: #000066; font-weight: bold;color: #0000FF;">for</span> <span style="color: #009900;color: #000000;">&#40;</span><span style="color: #003366; font-weight: bold;color: #0000FF;">var</span> i <span style="color: #339933;color: #000000;">=</span> <span style="color: #CC0000;color: #808080;">0</span><span style="color: #339933;color: #000000;">;</span> i <span style="color: #339933;color: #000000;">&lt;</span> <span style="color: #CC0000;color: #808080;">5</span><span style="color: #339933;color: #000000;">;</span> i<span style="color: #339933;color: #000000;">++</span><span style="color: #009900;color: #000000;">&#41;</span>
	<span style="color: #009900;color: #000000;">&#123;</span>
		<span style="color: #003366; font-weight: bold;color: #0000FF;">var</span> $item <span style="color: #339933;color: #000000;">=</span> $<span style="color: #009900;color: #000000;">&#40;</span><span style="color: #3366CC;color: #808080;">&quot;&lt;li /&gt;&quot;</span><span style="color: #009900;color: #000000;">&#41;</span>.<span style="color: #660066;">text</span><span style="color: #009900;color: #000000;">&#40;</span><span style="color: #3366CC;color: #808080;">&quot;Item &quot;</span> <span style="color: #339933;color: #000000;">+</span> i<span style="color: #009900;color: #000000;">&#41;</span><span style="color: #339933;color: #000000;">;</span>
		$<span style="color: #009900;color: #000000;">&#40;</span><span style="color: #3366CC;color: #808080;">&quot;#container&quot;</span><span style="color: #009900;color: #000000;">&#41;</span>.<span style="color: #660066;">append</span><span style="color: #009900;color: #000000;">&#40;</span>$item<span style="color: #009900;color: #000000;">&#41;</span><span style="color: #339933;color: #000000;">;</span>
&nbsp;
		<span style="color: #009900;color: #000000;">&#40;</span><span style="color: #003366; font-weight: bold;color: #0000FF;">function</span><span style="color: #009900;color: #000000;">&#40;</span><span style="color: #009900;color: #000000;">&#41;</span> <span style="color: #009900;color: #000000;">&#123;</span> <span style="color: #006600; font-style: italic;color: #008000;">// Closure here here instead of &quot;bindItem()&quot;</span>
			<span style="color: #003366; font-weight: bold;color: #0000FF;">var</span> ind <span style="color: #339933;color: #000000;">=</span> i<span style="color: #339933;color: #000000;">;</span>
			$item.<span style="color: #660066;">click</span><span style="color: #009900;color: #000000;">&#40;</span><span style="color: #003366; font-weight: bold;color: #0000FF;">function</span><span style="color: #009900;color: #000000;">&#40;</span><span style="color: #009900;color: #000000;">&#41;</span> <span style="color: #009900;color: #000000;">&#123;</span>
				<span style="color: #000066;color: #0000FF;">alert</span><span style="color: #009900;color: #000000;">&#40;</span><span style="color: #3366CC;color: #808080;">&quot;You clicked number &quot;</span> <span style="color: #339933;color: #000000;">+</span> ind<span style="color: #009900;color: #000000;">&#41;</span><span style="color: #339933;color: #000000;">;</span> <span style="color: #006600; font-style: italic;color: #008000;">// Works as expected</span>
			<span style="color: #009900;color: #000000;">&#125;</span><span style="color: #009900;color: #000000;">&#41;</span><span style="color: #339933;color: #000000;">;</span>
		<span style="color: #009900;color: #000000;">&#125;</span><span style="color: #009900;color: #000000;">&#41;</span><span style="color: #009900;color: #000000;">&#40;</span><span style="color: #009900;color: #000000;">&#41;</span><span style="color: #339933;color: #000000;">;</span> <span style="color: #006600; font-style: italic;color: #008000;">// Execute immediately</span>
	<span style="color: #009900;color: #000000;">&#125;</span>
<span style="color: #009900;color: #000000;">&#125;</span><span style="color: #009900;color: #000000;">&#41;</span><span style="color: #339933;color: #000000;">;</span></pre></div></div>


<p>The solution uses an immediately executing function to create a new scope and declare a variable &#8220;ind&#8221; that is reserved a new space in memory instead of simply referencing &#8220;i&#8221;. Check out the <a href="http://lanitdev.wordpress.com/2009/07/15/keep-variable-state-between-event-binding-and-execution/">full article</a> for more details.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.briangrinstead.com/blog/keep-original-variable-state-between-event-binding-and-execution/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>jQuery outerHTML Snippet</title>
		<link>http://www.briangrinstead.com/blog/jquery-outerhtml-snippet</link>
		<comments>http://www.briangrinstead.com/blog/jquery-outerhtml-snippet#comments</comments>
		<pubDate>Tue, 16 Jun 2009 13:29:16 +0000</pubDate>
		<dc:creator>Brian</dc:creator>
				<category><![CDATA[All]]></category>
		<category><![CDATA[Web Development]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[programming]]></category>
		<category><![CDATA[snippet]]></category>

		<guid isPermaLink="false">http://www.briangrinstead.com/?p=246</guid>
		<description><![CDATA[outerHTML is a property that is provided by Internet Explorer that returns the full HTML of an element (including start and end tags). In jQuery, the html() function returns the innerHTML of an element, which is just the HTML inside the element (not including the start and end tags). There came a time that I [...]]]></description>
			<content:encoded><![CDATA[<p><code>outerHTML</code> is a property that is provided by Internet Explorer that returns the full HTML of an element (including start and end tags).  In jQuery, the html() function returns the <code>innerHTML</code> of an element, which is just the HTML inside the element (not including the start and end tags).</p>

<p>There came a time that I wanted to get the <code>outerHTML</code> of an element, and I found that <a href="http://brandonaaron.net/blog/2007/06/17/jquery-snippets-outerhtml/">Brandon Aaron</a> shared a jQuery code snippet that does this exactly.  It does the trick for most cases, but there was one problem that I ran into.  <em>I wanted to get the outerHTML of an element inside of an iframe</em>, and I got a &#8216;Permission Denied&#8217; error in Internet Explorer.</p>

<p>The problem was that it was appending an element belonging to the iframes &#8216;contentDocument&#8217; into an element belonging to the global &#8216;document&#8217; element.<br />
Using the <a href="http://docs.jquery.com/Core/jQuery#htmlownerDocument">jQuery(html, ownerDocument)</a> overload of the jQuery core function, this error was fixed:</p>


<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">$.<span style="color: #660066;">fn</span>.<span style="color: #660066;">outerHTML</span> <span style="color: #339933;color: #000000;">=</span> <span style="color: #003366; font-weight: bold;color: #0000FF;">function</span><span style="color: #009900;color: #000000;">&#40;</span><span style="color: #009900;color: #000000;">&#41;</span> <span style="color: #009900;color: #000000;">&#123;</span>
    <span style="color: #003366; font-weight: bold;color: #0000FF;">var</span> doc <span style="color: #339933;color: #000000;">=</span> <span style="color: #000066; font-weight: bold;color: #0000FF;">this</span><span style="color: #009900;color: #000000;">&#91;</span><span style="color: #CC0000;color: #808080;">0</span><span style="color: #009900;color: #000000;">&#93;</span> <span style="color: #339933;color: #000000;">?</span> <span style="color: #000066; font-weight: bold;color: #0000FF;">this</span><span style="color: #009900;color: #000000;">&#91;</span><span style="color: #CC0000;color: #808080;">0</span><span style="color: #009900;color: #000000;">&#93;</span>.<span style="color: #660066;">ownerDocument</span> <span style="color: #339933;color: #000000;">:</span> document<span style="color: #339933;color: #000000;">;</span>
    <span style="color: #000066; font-weight: bold;color: #0000FF;">return</span> $<span style="color: #009900;color: #000000;">&#40;</span><span style="color: #3366CC;color: #808080;">'&lt;div&gt;'</span><span style="color: #339933;color: #000000;">,</span> doc<span style="color: #009900;color: #000000;">&#41;</span>.<span style="color: #660066;">append</span><span style="color: #009900;color: #000000;">&#40;</span><span style="color: #000066; font-weight: bold;color: #0000FF;">this</span>.<span style="color: #660066;">eq</span><span style="color: #009900;color: #000000;">&#40;</span><span style="color: #CC0000;color: #808080;">0</span><span style="color: #009900;color: #000000;">&#41;</span>.<span style="color: #660066;">clone</span><span style="color: #009900;color: #000000;">&#40;</span><span style="color: #009900;color: #000000;">&#41;</span><span style="color: #009900;color: #000000;">&#41;</span>.<span style="color: #660066;">html</span><span style="color: #009900;color: #000000;">&#40;</span><span style="color: #009900;color: #000000;">&#41;</span><span style="color: #339933;color: #000000;">;</span>
<span style="color: #009900;color: #000000;">&#125;</span><span style="color: #339933;color: #000000;">;</span></pre></div></div>

]]></content:encoded>
			<wfw:commentRss>http://www.briangrinstead.com/blog/jquery-outerhtml-snippet/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Extending jQuery to Select ASP Controls</title>
		<link>http://www.briangrinstead.com/blog/extending-jquery-to-select-asp-controls</link>
		<comments>http://www.briangrinstead.com/blog/extending-jquery-to-select-asp-controls#comments</comments>
		<pubDate>Mon, 08 Jun 2009 18:54:30 +0000</pubDate>
		<dc:creator>Brian</dc:creator>
				<category><![CDATA[All]]></category>
		<category><![CDATA[Web Development]]></category>
		<category><![CDATA[asp.net]]></category>
		<category><![CDATA[development]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[jquery]]></category>

		<guid isPermaLink="false">http://www.briangrinstead.com/?p=226</guid>
		<description><![CDATA[One thing that has always been annoying about programming JavaScript in an ASP.NET Web Forms environment is that the ID attribute of HTML controls rendered out from ASP controls is unpredictable. &#60;asp:TextBox runat=&#34;server&#34; ID=&#34;txtPhoneNumber&#34; /&#62; renders out as something like: &#60;input type=&#34;text&#34; id=&#34;ctl00_ctl00_ctl00_main_Content_txtPhoneNumber&#34; name=&#34;ctl00$ctl00$ctl00$main$Content$txtPhoneNumber&#34; /&#62; I did a write up over on the LANIT development [...]]]></description>
			<content:encoded><![CDATA[<p>One thing that has always been annoying about programming JavaScript in an ASP.NET Web Forms environment is that the ID attribute of HTML controls rendered out from ASP controls is unpredictable.</p>


<div class="wp_syntax"><div class="code"><pre class="html" style="font-family:monospace;">	&lt;asp:TextBox runat=&quot;server&quot; ID=&quot;txtPhoneNumber&quot; /&gt;</pre></div></div>


<p>renders out as something like:</p>


<div class="wp_syntax"><div class="code"><pre class="html" style="font-family:monospace;">	&lt;input type=&quot;text&quot; id=&quot;ctl00_ctl00_ctl00_main_Content_txtPhoneNumber&quot; 
		name=&quot;ctl00$ctl00$ctl00$main$Content$txtPhoneNumber&quot; /&gt;</pre></div></div>


<p>I <a href="http://lanitdev.wordpress.com/2009/06/08/extending-jquery-to-select-asp-controls/">did a write up</a> over on the <a href="http://lanitdev.wordpress.com/">LANIT development blog</a> about a solution to this problem using jQuery.</p>

<p>Check out the post for more details, but here is the function:</p>


<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">	jQuery.<span style="color: #660066;">expr</span><span style="color: #009900;color: #000000;">&#91;</span><span style="color: #3366CC;color: #808080;">':'</span><span style="color: #009900;color: #000000;">&#93;</span>.<span style="color: #660066;">asp</span> <span style="color: #339933;color: #000000;">=</span> <span style="color: #003366; font-weight: bold;color: #0000FF;">function</span><span style="color: #009900;color: #000000;">&#40;</span>elem<span style="color: #339933;color: #000000;">,</span> i<span style="color: #339933;color: #000000;">,</span> match<span style="color: #009900;color: #000000;">&#41;</span> <span style="color: #009900;color: #000000;">&#123;</span>
		<span style="color: #000066; font-weight: bold;color: #0000FF;">return</span> <span style="color: #009900;color: #000000;">&#40;</span>elem.<span style="color: #660066;">id</span> <span style="color: #339933;color: #000000;">&amp;&amp;</span> elem.<span style="color: #660066;">id</span>.<span style="color: #660066;">match</span><span style="color: #009900;color: #000000;">&#40;</span>match<span style="color: #009900;color: #000000;">&#91;</span><span style="color: #CC0000;color: #808080;">3</span><span style="color: #009900;color: #000000;">&#93;</span> <span style="color: #339933;color: #000000;">+</span> <span style="color: #3366CC;color: #808080;">&quot;$&quot;</span><span style="color: #009900;color: #000000;">&#41;</span><span style="color: #009900;color: #000000;">&#41;</span><span style="color: #339933;color: #000000;">;</span>
	<span style="color: #009900;color: #000000;">&#125;</span><span style="color: #339933;color: #000000;">;</span>
&nbsp;
	$<span style="color: #009900;color: #000000;">&#40;</span><span style="color: #3366CC;color: #808080;">&quot;:asp(txtPhoneNumber)&quot;</span><span style="color: #009900;color: #000000;">&#41;</span>.<span style="color: #660066;">keyup</span><span style="color: #009900;color: #000000;">&#40;</span>...<span style="color: #009900;color: #000000;">&#41;</span><span style="color: #339933;color: #000000;">;</span></pre></div></div>

]]></content:encoded>
			<wfw:commentRss>http://www.briangrinstead.com/blog/extending-jquery-to-select-asp-controls/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>A* Search Algorithm in JavaScript</title>
		<link>http://www.briangrinstead.com/blog/astar-search-algorithm-in-javascript</link>
		<comments>http://www.briangrinstead.com/blog/astar-search-algorithm-in-javascript#comments</comments>
		<pubDate>Wed, 03 Jun 2009 17:29:36 +0000</pubDate>
		<dc:creator>Brian</dc:creator>
				<category><![CDATA[Algorithms]]></category>
		<category><![CDATA[All]]></category>
		<category><![CDATA[Web Development]]></category>
		<category><![CDATA[algorithm]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[programming]]></category>

		<guid isPermaLink="false">http://www.briangrinstead.com/?p=178</guid>
		<description><![CDATA[View the online demo I first implemented the A* algorithm for a research group I was in through school (Computer Graphics and Image Understanding). A* is a best-first, graph search algorithm. Some basic information can be found on the Wikipedia page for A* and the external links contained in it. Please refer to that page [...]]]></description>
			<content:encoded><![CDATA[<p><strong><a href="/files/astar/">View the online demo</a></strong></p>

<p>I first implemented the A* algorithm for a research group I was in through school (Computer Graphics and Image Understanding).  A* is a best-first, graph search algorithm.  Some basic information can be found on the <a href="http://en.wikipedia.org/wiki/A*_search_algorithm">Wikipedia page for A*</a> and the external links contained in it.  Please refer to that page for general reference about the algorithm, I will simply explain in my own words how it works and how I got it working.</p>

<div id="attachment_191" class="wp-caption alignright" style="width: 410px"><a href="/files/astar/"><img src="http://www.briangrinstead.com/files/astarscreenshot.png" alt="A* algorithm in JavaScript" title="View Demo" width="400" class="size-full wp-image-191" /></a><p class="wp-caption-text">A* algorithm in JavaScript</p></div>

<h3>Why JavaScript?</h3>

<p>Because it was easy to deploy!</p>

<p>Since I know JavaScript pretty well, and most of the examples you can find are in C, Java or a similar language that you cannot run without downloading source code or executables, I thought it would be a good idea to program it on an html page.  This way, people could see what was going on and view the source very easily by <a href="/files/astar/">using the online demo</a>.</p>

<p>My hope was to build a page that could be extended with other search algorithms by separating the UI code (that generates a graph with walls and animates the path that is determined by an algorithm), and the algorithm that finds the path.  Maybe I will get around to plugging in some more algorithms sometime and making it into a little resource for graph search algorithms.</p>

<h3>How?</h3>

<h4>search.html</h4>

<p>Just a basic html file that includes jQuery, the excellent JavaScript library, main.css, graph.js, and astar.js.  Also, I have a JavaScript block that initializes the page.</p>

<h4>graph.js</h4>

<p>The point of this file is to build the graph, call the search function, and animate the results after the search has returned.  It also has an option to show the debugging information created by the search algorithm.  I won&#8217;t get too into the code here, since it distracts from the search algorithm.</p>

<p>Please take a look at it, be aware that there are some improvements I would make if I was to rewrite this today.  First, I would like to convert it to a jQuery plugin.  Also, it modifies the Array.prototype to add on specific methods (findGraphNode and removeGraphNode) for search algorithms, which may not be ideal for bigger projects.  For this little page, I&#8217;m not too worried about it, but if I do get around to adding in more algorithms, I will probably improve this code.</p>

<h4>astar.js</h4>

<p>This is the actual implementation of the algorithm.  I will do my best to explain what is going on, but feel free to just look at the source of the example, or just download astar.js.</p>

<p>There are three functions that we keep track of for nodes that we look at:</p>

<ul>
<li>g(x):  The total cost of getting to that node (pretty straightforward).  If we reach a node for the first time or reach a node in less time than it currently took, then update the g(x) to the cost to reach this node.</li>
<li>h(x):  The estimated time to reach the finish from the current node.  This is also called a heuristic.  We online need to update this if it is not set already, since the distance to the finish will not change even if the path we took to arrive at a node changes.  <em>Note: There are many different ways to guess how far you are from the end, I use the <a href="http://en.wikipedia.org/wiki/Taxicab_geometry">Manhattan distance</a> in this implementation.</em>
</li>
<li>f(x):  Simply g(x) + h(x).  The lower the f(x), the better.  Think about it like this: the best node is one that takes the least total amount of time to arrive at and to get to the end.  So, a node that took only 1 step to arrive at and 5 to get to the end is more ideal than one that took 10 to arrive and and only 1 to get to the end.
</li>
</ul>

<p>Here is some high level pseudocode of what is happening in the algorithm.  Also see the <a href="http://en.wikipedia.org/wiki/A*_search_algorithm#Algorithm_description">Wikipedia pseudocode</a> for another example.
<pre>
  push startNode onto openList
  while(openList is not empty) {
     currentNode = find lowest f in openList
     if currentNode is final, return the successful path
     push currentNode onto closedList and remove from openList
     foreach neighbor of currentNode {
         if neighbor is not in openList {
                save g, h, and f then save the current parent
                add neighbor to openList
         }
         if neighbor is in openList but the current g is better than previous g {
                 save g and f, then save the current parent
         }
     }
</pre></p>

<p>Here is the JavaScript:</p>


<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">&nbsp;
<span style="color: #003366; font-weight: bold;color: #0000FF;">var</span> astar <span style="color: #339933;color: #000000;">=</span> <span style="color: #009900;color: #000000;">&#123;</span>
	init<span style="color: #339933;color: #000000;">:</span> <span style="color: #003366; font-weight: bold;color: #0000FF;">function</span><span style="color: #009900;color: #000000;">&#40;</span>grid<span style="color: #009900;color: #000000;">&#41;</span> <span style="color: #009900;color: #000000;">&#123;</span>
		<span style="color: #000066; font-weight: bold;color: #0000FF;">for</span><span style="color: #009900;color: #000000;">&#40;</span><span style="color: #003366; font-weight: bold;color: #0000FF;">var</span> x <span style="color: #339933;color: #000000;">=</span> <span style="color: #CC0000;color: #808080;">0</span><span style="color: #339933;color: #000000;">;</span> x <span style="color: #339933;color: #000000;">&lt;</span> grid.<span style="color: #660066;">length</span><span style="color: #339933;color: #000000;">;</span> x<span style="color: #339933;color: #000000;">++</span><span style="color: #009900;color: #000000;">&#41;</span> <span style="color: #009900;color: #000000;">&#123;</span>
			<span style="color: #000066; font-weight: bold;color: #0000FF;">for</span><span style="color: #009900;color: #000000;">&#40;</span><span style="color: #003366; font-weight: bold;color: #0000FF;">var</span> y <span style="color: #339933;color: #000000;">=</span> <span style="color: #CC0000;color: #808080;">0</span><span style="color: #339933;color: #000000;">;</span> y <span style="color: #339933;color: #000000;">&lt;</span> grid<span style="color: #009900;color: #000000;">&#91;</span>x<span style="color: #009900;color: #000000;">&#93;</span>.<span style="color: #660066;">length</span><span style="color: #339933;color: #000000;">;</span> y<span style="color: #339933;color: #000000;">++</span><span style="color: #009900;color: #000000;">&#41;</span> <span style="color: #009900;color: #000000;">&#123;</span>
				grid<span style="color: #009900;color: #000000;">&#91;</span>x<span style="color: #009900;color: #000000;">&#93;</span><span style="color: #009900;color: #000000;">&#91;</span>y<span style="color: #009900;color: #000000;">&#93;</span>.<span style="color: #660066;">f</span> <span style="color: #339933;color: #000000;">=</span> <span style="color: #CC0000;color: #808080;">0</span><span style="color: #339933;color: #000000;">;</span>
				grid<span style="color: #009900;color: #000000;">&#91;</span>x<span style="color: #009900;color: #000000;">&#93;</span><span style="color: #009900;color: #000000;">&#91;</span>y<span style="color: #009900;color: #000000;">&#93;</span>.<span style="color: #660066;">g</span> <span style="color: #339933;color: #000000;">=</span> <span style="color: #CC0000;color: #808080;">0</span><span style="color: #339933;color: #000000;">;</span>
				grid<span style="color: #009900;color: #000000;">&#91;</span>x<span style="color: #009900;color: #000000;">&#93;</span><span style="color: #009900;color: #000000;">&#91;</span>y<span style="color: #009900;color: #000000;">&#93;</span>.<span style="color: #660066;">h</span> <span style="color: #339933;color: #000000;">=</span> <span style="color: #CC0000;color: #808080;">0</span><span style="color: #339933;color: #000000;">;</span>
				grid<span style="color: #009900;color: #000000;">&#91;</span>x<span style="color: #009900;color: #000000;">&#93;</span><span style="color: #009900;color: #000000;">&#91;</span>y<span style="color: #009900;color: #000000;">&#93;</span>.<span style="color: #660066;">debug</span> <span style="color: #339933;color: #000000;">=</span> <span style="color: #3366CC;color: #808080;">&quot;&quot;</span><span style="color: #339933;color: #000000;">;</span>
				grid<span style="color: #009900;color: #000000;">&#91;</span>x<span style="color: #009900;color: #000000;">&#93;</span><span style="color: #009900;color: #000000;">&#91;</span>y<span style="color: #009900;color: #000000;">&#93;</span>.<span style="color: #660066;">parent</span> <span style="color: #339933;color: #000000;">=</span> <span style="color: #003366; font-weight: bold;color: #0000FF;">null</span><span style="color: #339933;color: #000000;">;</span>
			<span style="color: #009900;color: #000000;">&#125;</span>	
		<span style="color: #009900;color: #000000;">&#125;</span>
	<span style="color: #009900;color: #000000;">&#125;</span><span style="color: #339933;color: #000000;">,</span>
	search<span style="color: #339933;color: #000000;">:</span> <span style="color: #003366; font-weight: bold;color: #0000FF;">function</span><span style="color: #009900;color: #000000;">&#40;</span>grid<span style="color: #339933;color: #000000;">,</span> start<span style="color: #339933;color: #000000;">,</span> end<span style="color: #009900;color: #000000;">&#41;</span> <span style="color: #009900;color: #000000;">&#123;</span>
		astar.<span style="color: #660066;">init</span><span style="color: #009900;color: #000000;">&#40;</span>grid<span style="color: #009900;color: #000000;">&#41;</span><span style="color: #339933;color: #000000;">;</span>
&nbsp;
		<span style="color: #003366; font-weight: bold;color: #0000FF;">var</span> openList   <span style="color: #339933;color: #000000;">=</span> <span style="color: #009900;color: #000000;">&#91;</span><span style="color: #009900;color: #000000;">&#93;</span><span style="color: #339933;color: #000000;">;</span>
		<span style="color: #003366; font-weight: bold;color: #0000FF;">var</span> closedList <span style="color: #339933;color: #000000;">=</span> <span style="color: #009900;color: #000000;">&#91;</span><span style="color: #009900;color: #000000;">&#93;</span><span style="color: #339933;color: #000000;">;</span>
		openList.<span style="color: #660066;">push</span><span style="color: #009900;color: #000000;">&#40;</span>start<span style="color: #009900;color: #000000;">&#41;</span><span style="color: #339933;color: #000000;">;</span>
&nbsp;
		<span style="color: #000066; font-weight: bold;color: #0000FF;">while</span><span style="color: #009900;color: #000000;">&#40;</span>openList.<span style="color: #660066;">length</span> <span style="color: #339933;color: #000000;">&gt;</span> <span style="color: #CC0000;color: #808080;">0</span><span style="color: #009900;color: #000000;">&#41;</span> <span style="color: #009900;color: #000000;">&#123;</span>
&nbsp;
			<span style="color: #006600; font-style: italic;color: #008000;">// Grab the lowest f(x) to process next</span>
			<span style="color: #003366; font-weight: bold;color: #0000FF;">var</span> lowInd <span style="color: #339933;color: #000000;">=</span> <span style="color: #CC0000;color: #808080;">0</span><span style="color: #339933;color: #000000;">;</span>
			<span style="color: #000066; font-weight: bold;color: #0000FF;">for</span><span style="color: #009900;color: #000000;">&#40;</span><span style="color: #003366; font-weight: bold;color: #0000FF;">var</span> i<span style="color: #339933;color: #000000;">=</span><span style="color: #CC0000;color: #808080;">0</span><span style="color: #339933;color: #000000;">;</span> i<span style="color: #339933;color: #000000;">&lt;</span>openList.<span style="color: #660066;">length</span><span style="color: #339933;color: #000000;">;</span> i<span style="color: #339933;color: #000000;">++</span><span style="color: #009900;color: #000000;">&#41;</span> <span style="color: #009900;color: #000000;">&#123;</span>
				<span style="color: #000066; font-weight: bold;color: #0000FF;">if</span><span style="color: #009900;color: #000000;">&#40;</span>openList<span style="color: #009900;color: #000000;">&#91;</span>i<span style="color: #009900;color: #000000;">&#93;</span>.<span style="color: #660066;">f</span> <span style="color: #339933;color: #000000;">&lt;</span> openList<span style="color: #009900;color: #000000;">&#91;</span>lowInd<span style="color: #009900;color: #000000;">&#93;</span>.<span style="color: #660066;">f</span><span style="color: #009900;color: #000000;">&#41;</span> <span style="color: #009900;color: #000000;">&#123;</span> lowInd <span style="color: #339933;color: #000000;">=</span> i<span style="color: #339933;color: #000000;">;</span> <span style="color: #009900;color: #000000;">&#125;</span>
			<span style="color: #009900;color: #000000;">&#125;</span>
			<span style="color: #003366; font-weight: bold;color: #0000FF;">var</span> currentNode <span style="color: #339933;color: #000000;">=</span> openList<span style="color: #009900;color: #000000;">&#91;</span>lowInd<span style="color: #009900;color: #000000;">&#93;</span><span style="color: #339933;color: #000000;">;</span>
&nbsp;
			<span style="color: #006600; font-style: italic;color: #008000;">// End case -- result has been found, return the traced path</span>
			<span style="color: #000066; font-weight: bold;color: #0000FF;">if</span><span style="color: #009900;color: #000000;">&#40;</span>currentNode.<span style="color: #660066;">pos</span> <span style="color: #339933;color: #000000;">==</span> end.<span style="color: #660066;">pos</span><span style="color: #009900;color: #000000;">&#41;</span> <span style="color: #009900;color: #000000;">&#123;</span>
				<span style="color: #003366; font-weight: bold;color: #0000FF;">var</span> curr <span style="color: #339933;color: #000000;">=</span> currentNode<span style="color: #339933;color: #000000;">;</span>
				<span style="color: #003366; font-weight: bold;color: #0000FF;">var</span> ret <span style="color: #339933;color: #000000;">=</span> <span style="color: #009900;color: #000000;">&#91;</span><span style="color: #009900;color: #000000;">&#93;</span><span style="color: #339933;color: #000000;">;</span>
				<span style="color: #000066; font-weight: bold;color: #0000FF;">while</span><span style="color: #009900;color: #000000;">&#40;</span>curr.<span style="color: #660066;">parent</span><span style="color: #009900;color: #000000;">&#41;</span> <span style="color: #009900;color: #000000;">&#123;</span>
					ret.<span style="color: #660066;">push</span><span style="color: #009900;color: #000000;">&#40;</span>curr<span style="color: #009900;color: #000000;">&#41;</span><span style="color: #339933;color: #000000;">;</span>
					curr <span style="color: #339933;color: #000000;">=</span> curr.<span style="color: #660066;">parent</span><span style="color: #339933;color: #000000;">;</span>
				<span style="color: #009900;color: #000000;">&#125;</span>
				<span style="color: #000066; font-weight: bold;color: #0000FF;">return</span> ret.<span style="color: #660066;">reverse</span><span style="color: #009900;color: #000000;">&#40;</span><span style="color: #009900;color: #000000;">&#41;</span><span style="color: #339933;color: #000000;">;</span>
			<span style="color: #009900;color: #000000;">&#125;</span>
&nbsp;
			<span style="color: #006600; font-style: italic;color: #008000;">// Normal case -- move currentNode from open to closed, process each of its neighbors</span>
			openList.<span style="color: #660066;">removeGraphNode</span><span style="color: #009900;color: #000000;">&#40;</span>currentNode<span style="color: #009900;color: #000000;">&#41;</span><span style="color: #339933;color: #000000;">;</span>
			closedList.<span style="color: #660066;">push</span><span style="color: #009900;color: #000000;">&#40;</span>currentNode<span style="color: #009900;color: #000000;">&#41;</span><span style="color: #339933;color: #000000;">;</span>
			<span style="color: #003366; font-weight: bold;color: #0000FF;">var</span> neighbors <span style="color: #339933;color: #000000;">=</span> astar.<span style="color: #660066;">neighbors</span><span style="color: #009900;color: #000000;">&#40;</span>grid<span style="color: #339933;color: #000000;">,</span> currentNode<span style="color: #009900;color: #000000;">&#41;</span><span style="color: #339933;color: #000000;">;</span>
&nbsp;
			<span style="color: #000066; font-weight: bold;color: #0000FF;">for</span><span style="color: #009900;color: #000000;">&#40;</span><span style="color: #003366; font-weight: bold;color: #0000FF;">var</span> i<span style="color: #339933;color: #000000;">=</span><span style="color: #CC0000;color: #808080;">0</span><span style="color: #339933;color: #000000;">;</span> i<span style="color: #339933;color: #000000;">&lt;</span>neighbors.<span style="color: #660066;">length</span><span style="color: #339933;color: #000000;">;</span>i<span style="color: #339933;color: #000000;">++</span><span style="color: #009900;color: #000000;">&#41;</span> <span style="color: #009900;color: #000000;">&#123;</span>
				<span style="color: #003366; font-weight: bold;color: #0000FF;">var</span> neighbor <span style="color: #339933;color: #000000;">=</span> neighbors<span style="color: #009900;color: #000000;">&#91;</span>i<span style="color: #009900;color: #000000;">&#93;</span><span style="color: #339933;color: #000000;">;</span>
				<span style="color: #000066; font-weight: bold;color: #0000FF;">if</span><span style="color: #009900;color: #000000;">&#40;</span>closedList.<span style="color: #660066;">findGraphNode</span><span style="color: #009900;color: #000000;">&#40;</span>neighbor<span style="color: #009900;color: #000000;">&#41;</span> <span style="color: #339933;color: #000000;">||</span> neighbor.<span style="color: #660066;">isWall</span><span style="color: #009900;color: #000000;">&#40;</span><span style="color: #009900;color: #000000;">&#41;</span><span style="color: #009900;color: #000000;">&#41;</span> <span style="color: #009900;color: #000000;">&#123;</span>
					<span style="color: #006600; font-style: italic;color: #008000;">// not a valid node to process, skip to next neighbor</span>
					<span style="color: #000066; font-weight: bold;color: #0000FF;">continue</span><span style="color: #339933;color: #000000;">;</span>
				<span style="color: #009900;color: #000000;">&#125;</span>
&nbsp;
				<span style="color: #006600; font-style: italic;color: #008000;">// g score is the shortest distance from start to current node, we need to check if</span>
				<span style="color: #006600; font-style: italic;color: #008000;">//	 the path we have arrived at this neighbor is the shortest one we have seen yet</span>
				<span style="color: #003366; font-weight: bold;color: #0000FF;">var</span> gScore <span style="color: #339933;color: #000000;">=</span> currentNode.<span style="color: #660066;">g</span> <span style="color: #339933;color: #000000;">+</span> <span style="color: #CC0000;color: #808080;">1</span><span style="color: #339933;color: #000000;">;</span> <span style="color: #006600; font-style: italic;color: #008000;">// 1 is the distance from a node to it's neighbor</span>
				<span style="color: #003366; font-weight: bold;color: #0000FF;">var</span> gScoreIsBest <span style="color: #339933;color: #000000;">=</span> <span style="color: #003366; font-weight: bold;color: #0000FF;">false</span><span style="color: #339933;color: #000000;">;</span>
&nbsp;
&nbsp;
				<span style="color: #000066; font-weight: bold;color: #0000FF;">if</span><span style="color: #009900;color: #000000;">&#40;</span><span style="color: #339933;color: #000000;">!</span>openList.<span style="color: #660066;">findGraphNode</span><span style="color: #009900;color: #000000;">&#40;</span>neighbor<span style="color: #009900;color: #000000;">&#41;</span><span style="color: #009900;color: #000000;">&#41;</span> <span style="color: #009900;color: #000000;">&#123;</span>
					<span style="color: #006600; font-style: italic;color: #008000;">// This the the first time we have arrived at this node, it must be the best</span>
					<span style="color: #006600; font-style: italic;color: #008000;">// Also, we need to take the h (heuristic) score since we haven't done so yet</span>
&nbsp;
					gScoreIsBest <span style="color: #339933;color: #000000;">=</span> <span style="color: #003366; font-weight: bold;color: #0000FF;">true</span><span style="color: #339933;color: #000000;">;</span>
					neighbor.<span style="color: #660066;">h</span> <span style="color: #339933;color: #000000;">=</span> astar.<span style="color: #660066;">heuristic</span><span style="color: #009900;color: #000000;">&#40;</span>neighbor.<span style="color: #660066;">pos</span><span style="color: #339933;color: #000000;">,</span> end.<span style="color: #660066;">pos</span><span style="color: #009900;color: #000000;">&#41;</span><span style="color: #339933;color: #000000;">;</span>
					openList.<span style="color: #660066;">push</span><span style="color: #009900;color: #000000;">&#40;</span>neighbor<span style="color: #009900;color: #000000;">&#41;</span><span style="color: #339933;color: #000000;">;</span>
				<span style="color: #009900;color: #000000;">&#125;</span>
				<span style="color: #000066; font-weight: bold;color: #0000FF;">else</span> <span style="color: #000066; font-weight: bold;color: #0000FF;">if</span><span style="color: #009900;color: #000000;">&#40;</span>gScore <span style="color: #339933;color: #000000;">&lt;</span> neighbor.<span style="color: #660066;">g</span><span style="color: #009900;color: #000000;">&#41;</span> <span style="color: #009900;color: #000000;">&#123;</span>
					<span style="color: #006600; font-style: italic;color: #008000;">// We have already seen the node, but last time it had a worse g (distance from start)</span>
					gScoreIsBest <span style="color: #339933;color: #000000;">=</span> <span style="color: #003366; font-weight: bold;color: #0000FF;">true</span><span style="color: #339933;color: #000000;">;</span>
				<span style="color: #009900;color: #000000;">&#125;</span>
&nbsp;
				<span style="color: #000066; font-weight: bold;color: #0000FF;">if</span><span style="color: #009900;color: #000000;">&#40;</span>gScoreIsBest<span style="color: #009900;color: #000000;">&#41;</span> <span style="color: #009900;color: #000000;">&#123;</span>
					<span style="color: #006600; font-style: italic;color: #008000;">// Found an optimal (so far) path to this node.	 Store info on how we got here and</span>
					<span style="color: #006600; font-style: italic;color: #008000;">//	just how good it really is...</span>
					neighbor.<span style="color: #660066;">parent</span> <span style="color: #339933;color: #000000;">=</span> currentNode<span style="color: #339933;color: #000000;">;</span>
					neighbor.<span style="color: #660066;">g</span> <span style="color: #339933;color: #000000;">=</span> gScore<span style="color: #339933;color: #000000;">;</span>
					neighbor.<span style="color: #660066;">f</span> <span style="color: #339933;color: #000000;">=</span> neighbor.<span style="color: #660066;">g</span> <span style="color: #339933;color: #000000;">+</span> neighbor.<span style="color: #660066;">h</span><span style="color: #339933;color: #000000;">;</span>
					neighbor.<span style="color: #660066;">debug</span> <span style="color: #339933;color: #000000;">=</span> <span style="color: #3366CC;color: #808080;">&quot;F: &quot;</span> <span style="color: #339933;color: #000000;">+</span> neighbor.<span style="color: #660066;">f</span> <span style="color: #339933;color: #000000;">+</span> <span style="color: #3366CC;color: #808080;">&quot;&lt;br /&gt;G: &quot;</span> <span style="color: #339933;color: #000000;">+</span> neighbor.<span style="color: #660066;">g</span> <span style="color: #339933;color: #000000;">+</span> <span style="color: #3366CC;color: #808080;">&quot;&lt;br /&gt;H: &quot;</span> <span style="color: #339933;color: #000000;">+</span> neighbor.<span style="color: #660066;">h</span><span style="color: #339933;color: #000000;">;</span>
				<span style="color: #009900;color: #000000;">&#125;</span>
			<span style="color: #009900;color: #000000;">&#125;</span>
		<span style="color: #009900;color: #000000;">&#125;</span>
&nbsp;
		<span style="color: #006600; font-style: italic;color: #008000;">// No result was found -- empty array signifies failure to find path</span>
		<span style="color: #000066; font-weight: bold;color: #0000FF;">return</span> <span style="color: #009900;color: #000000;">&#91;</span><span style="color: #009900;color: #000000;">&#93;</span><span style="color: #339933;color: #000000;">;</span>
	<span style="color: #009900;color: #000000;">&#125;</span><span style="color: #339933;color: #000000;">,</span>
	heuristic<span style="color: #339933;color: #000000;">:</span> <span style="color: #003366; font-weight: bold;color: #0000FF;">function</span><span style="color: #009900;color: #000000;">&#40;</span>pos0<span style="color: #339933;color: #000000;">,</span> pos1<span style="color: #009900;color: #000000;">&#41;</span> <span style="color: #009900;color: #000000;">&#123;</span>
		<span style="color: #006600; font-style: italic;color: #008000;">// This is the Manhattan distance</span>
		<span style="color: #003366; font-weight: bold;color: #0000FF;">var</span> d1 <span style="color: #339933;color: #000000;">=</span> Math.<span style="color: #660066;">abs</span> <span style="color: #009900;color: #000000;">&#40;</span>pos1.<span style="color: #660066;">x</span> <span style="color: #339933;color: #000000;">-</span> pos0.<span style="color: #660066;">x</span><span style="color: #009900;color: #000000;">&#41;</span><span style="color: #339933;color: #000000;">;</span>
		<span style="color: #003366; font-weight: bold;color: #0000FF;">var</span> d2 <span style="color: #339933;color: #000000;">=</span> Math.<span style="color: #660066;">abs</span> <span style="color: #009900;color: #000000;">&#40;</span>pos1.<span style="color: #660066;">y</span> <span style="color: #339933;color: #000000;">-</span> pos0.<span style="color: #660066;">y</span><span style="color: #009900;color: #000000;">&#41;</span><span style="color: #339933;color: #000000;">;</span>
		<span style="color: #000066; font-weight: bold;color: #0000FF;">return</span> d1 <span style="color: #339933;color: #000000;">+</span> d2<span style="color: #339933;color: #000000;">;</span>
	<span style="color: #009900;color: #000000;">&#125;</span><span style="color: #339933;color: #000000;">,</span>
	neighbors<span style="color: #339933;color: #000000;">:</span> <span style="color: #003366; font-weight: bold;color: #0000FF;">function</span><span style="color: #009900;color: #000000;">&#40;</span>grid<span style="color: #339933;color: #000000;">,</span> node<span style="color: #009900;color: #000000;">&#41;</span> <span style="color: #009900;color: #000000;">&#123;</span>
		<span style="color: #003366; font-weight: bold;color: #0000FF;">var</span> ret <span style="color: #339933;color: #000000;">=</span> <span style="color: #009900;color: #000000;">&#91;</span><span style="color: #009900;color: #000000;">&#93;</span><span style="color: #339933;color: #000000;">;</span>
		<span style="color: #003366; font-weight: bold;color: #0000FF;">var</span> x <span style="color: #339933;color: #000000;">=</span> node.<span style="color: #660066;">pos</span>.<span style="color: #660066;">x</span><span style="color: #339933;color: #000000;">;</span>
		<span style="color: #003366; font-weight: bold;color: #0000FF;">var</span> y <span style="color: #339933;color: #000000;">=</span> node.<span style="color: #660066;">pos</span>.<span style="color: #660066;">y</span><span style="color: #339933;color: #000000;">;</span>
&nbsp;
		<span style="color: #000066; font-weight: bold;color: #0000FF;">if</span><span style="color: #009900;color: #000000;">&#40;</span>grid<span style="color: #009900;color: #000000;">&#91;</span>x<span style="color: #339933;color: #000000;">-</span><span style="color: #CC0000;color: #808080;">1</span><span style="color: #009900;color: #000000;">&#93;</span> <span style="color: #339933;color: #000000;">&amp;&amp;</span> grid<span style="color: #009900;color: #000000;">&#91;</span>x<span style="color: #339933;color: #000000;">-</span><span style="color: #CC0000;color: #808080;">1</span><span style="color: #009900;color: #000000;">&#93;</span><span style="color: #009900;color: #000000;">&#91;</span>y<span style="color: #009900;color: #000000;">&#93;</span><span style="color: #009900;color: #000000;">&#41;</span> <span style="color: #009900;color: #000000;">&#123;</span>
			ret.<span style="color: #660066;">push</span><span style="color: #009900;color: #000000;">&#40;</span>grid<span style="color: #009900;color: #000000;">&#91;</span>x<span style="color: #339933;color: #000000;">-</span><span style="color: #CC0000;color: #808080;">1</span><span style="color: #009900;color: #000000;">&#93;</span><span style="color: #009900;color: #000000;">&#91;</span>y<span style="color: #009900;color: #000000;">&#93;</span><span style="color: #009900;color: #000000;">&#41;</span><span style="color: #339933;color: #000000;">;</span>
		<span style="color: #009900;color: #000000;">&#125;</span>
		<span style="color: #000066; font-weight: bold;color: #0000FF;">if</span><span style="color: #009900;color: #000000;">&#40;</span>grid<span style="color: #009900;color: #000000;">&#91;</span>x<span style="color: #339933;color: #000000;">+</span><span style="color: #CC0000;color: #808080;">1</span><span style="color: #009900;color: #000000;">&#93;</span> <span style="color: #339933;color: #000000;">&amp;&amp;</span> grid<span style="color: #009900;color: #000000;">&#91;</span>x<span style="color: #339933;color: #000000;">+</span><span style="color: #CC0000;color: #808080;">1</span><span style="color: #009900;color: #000000;">&#93;</span><span style="color: #009900;color: #000000;">&#91;</span>y<span style="color: #009900;color: #000000;">&#93;</span><span style="color: #009900;color: #000000;">&#41;</span> <span style="color: #009900;color: #000000;">&#123;</span>
			ret.<span style="color: #660066;">push</span><span style="color: #009900;color: #000000;">&#40;</span>grid<span style="color: #009900;color: #000000;">&#91;</span>x<span style="color: #339933;color: #000000;">+</span><span style="color: #CC0000;color: #808080;">1</span><span style="color: #009900;color: #000000;">&#93;</span><span style="color: #009900;color: #000000;">&#91;</span>y<span style="color: #009900;color: #000000;">&#93;</span><span style="color: #009900;color: #000000;">&#41;</span><span style="color: #339933;color: #000000;">;</span>
		<span style="color: #009900;color: #000000;">&#125;</span>
		<span style="color: #000066; font-weight: bold;color: #0000FF;">if</span><span style="color: #009900;color: #000000;">&#40;</span>grid<span style="color: #009900;color: #000000;">&#91;</span>x<span style="color: #009900;color: #000000;">&#93;</span><span style="color: #009900;color: #000000;">&#91;</span>y<span style="color: #339933;color: #000000;">-</span><span style="color: #CC0000;color: #808080;">1</span><span style="color: #009900;color: #000000;">&#93;</span> <span style="color: #339933;color: #000000;">&amp;&amp;</span> grid<span style="color: #009900;color: #000000;">&#91;</span>x<span style="color: #009900;color: #000000;">&#93;</span><span style="color: #009900;color: #000000;">&#91;</span>y<span style="color: #339933;color: #000000;">-</span><span style="color: #CC0000;color: #808080;">1</span><span style="color: #009900;color: #000000;">&#93;</span><span style="color: #009900;color: #000000;">&#41;</span> <span style="color: #009900;color: #000000;">&#123;</span>
			ret.<span style="color: #660066;">push</span><span style="color: #009900;color: #000000;">&#40;</span>grid<span style="color: #009900;color: #000000;">&#91;</span>x<span style="color: #009900;color: #000000;">&#93;</span><span style="color: #009900;color: #000000;">&#91;</span>y<span style="color: #339933;color: #000000;">-</span><span style="color: #CC0000;color: #808080;">1</span><span style="color: #009900;color: #000000;">&#93;</span><span style="color: #009900;color: #000000;">&#41;</span><span style="color: #339933;color: #000000;">;</span>
		<span style="color: #009900;color: #000000;">&#125;</span>
		<span style="color: #000066; font-weight: bold;color: #0000FF;">if</span><span style="color: #009900;color: #000000;">&#40;</span>grid<span style="color: #009900;color: #000000;">&#91;</span>x<span style="color: #009900;color: #000000;">&#93;</span><span style="color: #009900;color: #000000;">&#91;</span>y<span style="color: #339933;color: #000000;">+</span><span style="color: #CC0000;color: #808080;">1</span><span style="color: #009900;color: #000000;">&#93;</span> <span style="color: #339933;color: #000000;">&amp;&amp;</span> grid<span style="color: #009900;color: #000000;">&#91;</span>x<span style="color: #009900;color: #000000;">&#93;</span><span style="color: #009900;color: #000000;">&#91;</span>y<span style="color: #339933;color: #000000;">+</span><span style="color: #CC0000;color: #808080;">1</span><span style="color: #009900;color: #000000;">&#93;</span><span style="color: #009900;color: #000000;">&#41;</span> <span style="color: #009900;color: #000000;">&#123;</span>
			ret.<span style="color: #660066;">push</span><span style="color: #009900;color: #000000;">&#40;</span>grid<span style="color: #009900;color: #000000;">&#91;</span>x<span style="color: #009900;color: #000000;">&#93;</span><span style="color: #009900;color: #000000;">&#91;</span>y<span style="color: #339933;color: #000000;">+</span><span style="color: #CC0000;color: #808080;">1</span><span style="color: #009900;color: #000000;">&#93;</span><span style="color: #009900;color: #000000;">&#41;</span><span style="color: #339933;color: #000000;">;</span>
		<span style="color: #009900;color: #000000;">&#125;</span>
		<span style="color: #000066; font-weight: bold;color: #0000FF;">return</span> ret<span style="color: #339933;color: #000000;">;</span>
	<span style="color: #009900;color: #000000;">&#125;</span>
<span style="color: #009900;color: #000000;">&#125;</span><span style="color: #339933;color: #000000;">;</span></pre></div></div>


<h3>Conclusion</h3>

<p>This A* search implementation could be used as a component to larger system (like a game &#8211; maybe tower defense or puzzle), or just for learning purposes.  I have done my best to make the code understandable and to present the concepts in a way that would help someone who has never seen the algorithm before, or someone who is not very familiar with JavaScript.</p>

<p>Feel free to view the demo, or download <a href="/files/astar/graph.js">graph.js</a> and <a href="/files/astar/astar.js">astar.js</a> to mess around with it.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.briangrinstead.com/blog/astar-search-algorithm-in-javascript/feed</wfw:commentRss>
		<slash:comments>13</slash:comments>
		</item>
		<item>
		<title>Multipart Form Post in C#</title>
		<link>http://www.briangrinstead.com/blog/multipart-form-post-in-c</link>
		<comments>http://www.briangrinstead.com/blog/multipart-form-post-in-c#comments</comments>
		<pubDate>Fri, 08 May 2009 14:58:07 +0000</pubDate>
		<dc:creator>Brian</dc:creator>
				<category><![CDATA[All]]></category>
		<category><![CDATA[Web Development]]></category>
		<category><![CDATA[asp.net]]></category>
		<category><![CDATA[csharp]]></category>
		<category><![CDATA[programming]]></category>
		<category><![CDATA[vb.net]]></category>

		<guid isPermaLink="false">http://www.briangrinstead.com/?p=119</guid>
		<description><![CDATA[I recently had to access a web API through C Sharp that required a file upload. This is pretty easy if you have an HTML page with a form tag and you want a user to directly upload the file. &#60;form method=&#34;POST&#34; action=&#34;http://localhost/&#34; enctype=&#34;multipart/form-data&#34;&#62; File : &#60;input type=&#34;file&#34; name=&#34;content&#34; size=&#34;38&#34; /&#62;&#60;br /&#62; &#60;input type=&#34;hidden&#34; name=&#34;id&#34; [...]]]></description>
			<content:encoded><![CDATA[<p>I recently had to access a web API through C Sharp that required a file upload.  This is pretty easy if you have an HTML page with a form tag and you want a user to directly upload the file.</p>


<div class="wp_syntax"><div class="code"><pre class="html" style="font-family:monospace;">&lt;form method=&quot;POST&quot; action=&quot;http://localhost/&quot; enctype=&quot;multipart/form-data&quot;&gt;
	File : &lt;input type=&quot;file&quot; name=&quot;content&quot; size=&quot;38&quot; /&gt;&lt;br /&gt;
	&lt;input type=&quot;hidden&quot; name=&quot;id&quot; value='fileUpload' /&gt;
 &lt;/form&gt;</pre></div></div>


<p>However, this is not always a reasonable path to take.  Sometimes you may be wanting to access a file that is already in a system and you don&#8217;t want a new upload.  If you are accessing an external API, this is probably always the case.  Unfortunately, building this post using C# is not quite as straightforward.  I first tried using the WebClient UploadFile method, but it didn&#8217;t fit my needs because I wanted to upload form values (id, filename, other API specific parameters) in addition to just a file.</p>

<p>So, I needed to roll my own form post.  Here is the <a href='http://www.ietf.org/rfc/rfc2388.txt'>Multipart Form RFC</a> and the <a href='http://www.w3.org/TR/html401/interact/forms.html#h-17.13.4.2'>W3C Specification</a> for multipart/form data.  After reading these links and searching some <a href='http://stackoverflow.com/questions/219827/multipart-forms-from-c-client'>forums</a>, here is what I came up with.</p>

<p><ins>Note: If anyone is interested in this code in Visual Basic, reader Mike Ferreira <a href='#comment-1153'>converted the code into VB.Net</a> in a comment below.</ins></p>


<div class="wp_syntax"><div class="code"><pre class="csharp" style="font-family:monospace;"><span style="color: #0600FF;color: #0000FF;">public</span> <span style="color: #0600FF;color: #0000FF;">static</span> <span style="color: #FF0000;color: #0000FF;">class</span> FormUpload
<span style="color: #000000;color: #000000;">&#123;</span>
	<span style="color: #0600FF;color: #0000FF;">private</span> <span style="color: #0600FF;color: #0000FF;">static</span> <span style="color: #0600FF;color: #0000FF;">readonly</span> Encoding encoding <span style="color: #008000;color: #000000;">=</span> Encoding.<span style="color: #0000FF;">UTF8</span><span style="color: #008000;color: #000000;">;</span>
	<span style="color: #0600FF;color: #0000FF;">public</span> <span style="color: #0600FF;color: #0000FF;">static</span> HttpWebResponse MultipartFormDataPost<span style="color: #000000;color: #000000;">&#40;</span><span style="color: #FF0000;color: #0000FF;">string</span> postUrl, <span style="color: #FF0000;color: #0000FF;">string</span> userAgent, Dictionary<span style="color: #008000;color: #000000;">&lt;</span><span style="color: #FF0000;color: #0000FF;">string</span>, <span style="color: #FF0000;color: #0000FF;">object</span><span style="color: #008000;color: #000000;">&gt;</span> postParameters<span style="color: #000000;color: #000000;">&#41;</span>
	<span style="color: #000000;color: #000000;">&#123;</span>
		<span style="color: #FF0000;color: #0000FF;">string</span> formDataBoundary <span style="color: #008000;color: #000000;">=</span> <span style="color: #666666;color: #808080;">&quot;-----------------------------28947758029299&quot;</span><span style="color: #008000;color: #000000;">;</span>
		<span style="color: #FF0000;color: #0000FF;">string</span> contentType <span style="color: #008000;color: #000000;">=</span> <span style="color: #666666;color: #808080;">&quot;multipart/form-data; boundary=&quot;</span> <span style="color: #008000;color: #000000;">+</span> formDataBoundary<span style="color: #008000;color: #000000;">;</span>
&nbsp;
		<span style="color: #FF0000;color: #0000FF;">byte</span><span style="color: #000000;color: #000000;">&#91;</span><span style="color: #000000;color: #000000;">&#93;</span> formData <span style="color: #008000;color: #000000;">=</span> GetMultipartFormData<span style="color: #000000;color: #000000;">&#40;</span>postParameters, formDataBoundary<span style="color: #000000;color: #000000;">&#41;</span><span style="color: #008000;color: #000000;">;</span>
&nbsp;
		<span style="color: #0600FF;color: #0000FF;">return</span> PostForm<span style="color: #000000;color: #000000;">&#40;</span>postUrl, userAgent, contentType, formData<span style="color: #000000;color: #000000;">&#41;</span><span style="color: #008000;color: #000000;">;</span>
	<span style="color: #000000;color: #000000;">&#125;</span>
	<span style="color: #0600FF;color: #0000FF;">private</span> <span style="color: #0600FF;color: #0000FF;">static</span> HttpWebResponse PostForm<span style="color: #000000;color: #000000;">&#40;</span><span style="color: #FF0000;color: #0000FF;">string</span> postUrl, <span style="color: #FF0000;color: #0000FF;">string</span> userAgent, <span style="color: #FF0000;color: #0000FF;">string</span> contentType, <span style="color: #FF0000;color: #0000FF;">byte</span><span style="color: #000000;color: #000000;">&#91;</span><span style="color: #000000;color: #000000;">&#93;</span> formData<span style="color: #000000;color: #000000;">&#41;</span>
	<span style="color: #000000;color: #000000;">&#123;</span>
		HttpWebRequest request <span style="color: #008000;color: #000000;">=</span> WebRequest.<span style="color: #0000FF;">Create</span><span style="color: #000000;color: #000000;">&#40;</span>postUrl<span style="color: #000000;color: #000000;">&#41;</span> <span style="color: #0600FF;color: #0000FF;">as</span> HttpWebRequest<span style="color: #008000;color: #000000;">;</span>
&nbsp;
		<span style="color: #0600FF;color: #0000FF;">if</span> <span style="color: #000000;color: #000000;">&#40;</span>request <span style="color: #008000;color: #000000;">==</span> <span style="color: #0600FF;color: #0000FF;">null</span><span style="color: #000000;color: #000000;">&#41;</span>
		<span style="color: #000000;color: #000000;">&#123;</span>
			<span style="color: #0600FF;color: #0000FF;">throw</span> <span style="color: #008000;color: #0000FF;">new</span> NullReferenceException<span style="color: #000000;color: #000000;">&#40;</span><span style="color: #666666;color: #808080;">&quot;request is not a http request&quot;</span><span style="color: #000000;color: #000000;">&#41;</span><span style="color: #008000;color: #000000;">;</span>
		<span style="color: #000000;color: #000000;">&#125;</span>
&nbsp;
		<span style="color: #008080; font-style: italic;color: #008000;">// Set up the request properties</span>
		request.<span style="color: #0000FF;">Method</span> <span style="color: #008000;color: #000000;">=</span> <span style="color: #666666;color: #808080;">&quot;POST&quot;</span><span style="color: #008000;color: #000000;">;</span>
		request.<span style="color: #0000FF;">ContentType</span> <span style="color: #008000;color: #000000;">=</span> contentType<span style="color: #008000;color: #000000;">;</span>
		request.<span style="color: #0000FF;">UserAgent</span> <span style="color: #008000;color: #000000;">=</span> userAgent<span style="color: #008000;color: #000000;">;</span>
		request.<span style="color: #0000FF;">CookieContainer</span> <span style="color: #008000;color: #000000;">=</span> <span style="color: #008000;color: #0000FF;">new</span> CookieContainer<span style="color: #000000;color: #000000;">&#40;</span><span style="color: #000000;color: #000000;">&#41;</span><span style="color: #008000;color: #000000;">;</span>
		request.<span style="color: #0000FF;">ContentLength</span> <span style="color: #008000;color: #000000;">=</span> formData.<span style="color: #0000FF;">Length</span><span style="color: #008000;color: #000000;">;</span>  <span style="color: #008080; font-style: italic;color: #008000;">// We need to count how many bytes we're sending. </span>
&nbsp;
		<span style="color: #0600FF;color: #0000FF;">using</span> <span style="color: #000000;color: #000000;">&#40;</span>Stream requestStream <span style="color: #008000;color: #000000;">=</span> request.<span style="color: #0000FF;">GetRequestStream</span><span style="color: #000000;color: #000000;">&#40;</span><span style="color: #000000;color: #000000;">&#41;</span><span style="color: #000000;color: #000000;">&#41;</span>
		<span style="color: #000000;color: #000000;">&#123;</span>
			<span style="color: #008080; font-style: italic;color: #008000;">// Push it out there</span>
			requestStream.<span style="color: #0000FF;">Write</span><span style="color: #000000;color: #000000;">&#40;</span>formData, <span style="color: #FF0000;color: #808080;">0</span>, formData.<span style="color: #0000FF;">Length</span><span style="color: #000000;color: #000000;">&#41;</span><span style="color: #008000;color: #000000;">;</span>
			requestStream.<span style="color: #0000FF;">Close</span><span style="color: #000000;color: #000000;">&#40;</span><span style="color: #000000;color: #000000;">&#41;</span><span style="color: #008000;color: #000000;">;</span>
		<span style="color: #000000;color: #000000;">&#125;</span>
&nbsp;
		<span style="color: #0600FF;color: #0000FF;">return</span> request.<span style="color: #0000FF;">GetResponse</span><span style="color: #000000;color: #000000;">&#40;</span><span style="color: #000000;color: #000000;">&#41;</span> <span style="color: #0600FF;color: #0000FF;">as</span> HttpWebResponse<span style="color: #008000;color: #000000;">;</span>
	<span style="color: #000000;color: #000000;">&#125;</span>
&nbsp;
	<span style="color: #0600FF;color: #0000FF;">private</span> <span style="color: #0600FF;color: #0000FF;">static</span> <span style="color: #FF0000;color: #0000FF;">byte</span><span style="color: #000000;color: #000000;">&#91;</span><span style="color: #000000;color: #000000;">&#93;</span> GetMultipartFormData<span style="color: #000000;color: #000000;">&#40;</span>Dictionary<span style="color: #008000;color: #000000;">&lt;</span><span style="color: #FF0000;color: #0000FF;">string</span>, <span style="color: #FF0000;color: #0000FF;">object</span><span style="color: #008000;color: #000000;">&gt;</span> postParameters, <span style="color: #FF0000;color: #0000FF;">string</span> boundary<span style="color: #000000;color: #000000;">&#41;</span>
	<span style="color: #000000;color: #000000;">&#123;</span>
		Stream formDataStream <span style="color: #008000;color: #000000;">=</span> <span style="color: #008000;color: #0000FF;">new</span> <span style="color: #000000;">System.<span style="color: #0000FF;">IO</span></span>.<span style="color: #0000FF;">MemoryStream</span><span style="color: #000000;color: #000000;">&#40;</span><span style="color: #000000;color: #000000;">&#41;</span><span style="color: #008000;color: #000000;">;</span>
&nbsp;
		<span style="color: #0600FF;color: #0000FF;">foreach</span> <span style="color: #000000;color: #000000;">&#40;</span>var param <span style="color: #0600FF;color: #0000FF;">in</span> postParameters<span style="color: #000000;color: #000000;">&#41;</span>
		<span style="color: #000000;color: #000000;">&#123;</span>
			<span style="color: #0600FF;color: #0000FF;">if</span> <span style="color: #000000;color: #000000;">&#40;</span>param.<span style="color: #0000FF;">Value</span> <span style="color: #008000;color: #0000FF;">is</span> FileParameter<span style="color: #000000;color: #000000;">&#41;</span>
			<span style="color: #000000;color: #000000;">&#123;</span>
				FileParameter fileToUpload <span style="color: #008000;color: #000000;">=</span> <span style="color: #000000;color: #000000;">&#40;</span>FileParameter<span style="color: #000000;color: #000000;">&#41;</span>param.<span style="color: #0000FF;">Value</span><span style="color: #008000;color: #000000;">;</span>
&nbsp;
				<span style="color: #008080; font-style: italic;color: #008000;">// Add just the first part of this param, since we will write the file data directly to the Stream</span>
				<span style="color: #FF0000;color: #0000FF;">string</span> header <span style="color: #008000;color: #000000;">=</span> <span style="color: #FF0000;color: #0000FF;">string</span>.<span style="color: #0000FF;">Format</span><span style="color: #000000;color: #000000;">&#40;</span><span style="color: #666666;color: #808080;">&quot;--{0}<span style="color: #008080; font-weight: bold;color: #808080;">\r</span><span style="color: #008080; font-weight: bold;color: #808080;">\n</span>Content-Disposition: form-data; name=<span style="color: #008080; font-weight: bold;color: #808080;">\&quot;</span>{1}<span style="color: #008080; font-weight: bold;color: #808080;">\&quot;</span>; filename=<span style="color: #008080; font-weight: bold;color: #808080;">\&quot;</span>{2}<span style="color: #008080; font-weight: bold;color: #808080;">\&quot;</span>;<span style="color: #008080; font-weight: bold;color: #808080;">\r</span><span style="color: #008080; font-weight: bold;color: #808080;">\n</span>Content-Type: {3}<span style="color: #008080; font-weight: bold;color: #808080;">\r</span><span style="color: #008080; font-weight: bold;color: #808080;">\n</span><span style="color: #008080; font-weight: bold;color: #808080;">\r</span><span style="color: #008080; font-weight: bold;color: #808080;">\n</span>&quot;</span>, 
					boundary, 
					param.<span style="color: #0000FF;">Key</span>, 
					fileToUpload.<span style="color: #0000FF;">FileName</span> <span style="color: #008000;color: #000000;">??</span> param.<span style="color: #0000FF;">Key</span>, 
					fileToUpload.<span style="color: #0000FF;">ContentType</span> <span style="color: #008000;color: #000000;">??</span> <span style="color: #666666;color: #808080;">&quot;application/octet-stream&quot;</span><span style="color: #000000;color: #000000;">&#41;</span><span style="color: #008000;color: #000000;">;</span>
&nbsp;
				formDataStream.<span style="color: #0000FF;">Write</span><span style="color: #000000;color: #000000;">&#40;</span>encoding.<span style="color: #0000FF;">GetBytes</span><span style="color: #000000;color: #000000;">&#40;</span>header<span style="color: #000000;color: #000000;">&#41;</span>, <span style="color: #FF0000;color: #808080;">0</span>, header.<span style="color: #0000FF;">Length</span><span style="color: #000000;color: #000000;">&#41;</span><span style="color: #008000;color: #000000;">;</span>
&nbsp;
				<span style="color: #008080; font-style: italic;color: #008000;">// Write the file data directly to the Stream, rather than serializing it to a string.</span>
				formDataStream.<span style="color: #0000FF;">Write</span><span style="color: #000000;color: #000000;">&#40;</span>fileToUpload.<span style="color: #0000FF;">File</span>, <span style="color: #FF0000;color: #808080;">0</span>, fileToUpload.<span style="color: #0000FF;">File</span>.<span style="color: #0000FF;">Length</span><span style="color: #000000;color: #000000;">&#41;</span><span style="color: #008000;color: #000000;">;</span>
			<span style="color: #000000;color: #000000;">&#125;</span>
			<span style="color: #0600FF;color: #0000FF;">else</span>
			<span style="color: #000000;color: #000000;">&#123;</span>
				<span style="color: #FF0000;color: #0000FF;">string</span> postData <span style="color: #008000;color: #000000;">=</span> <span style="color: #FF0000;color: #0000FF;">string</span>.<span style="color: #0000FF;">Format</span><span style="color: #000000;color: #000000;">&#40;</span><span style="color: #666666;color: #808080;">&quot;--{0}<span style="color: #008080; font-weight: bold;color: #808080;">\r</span><span style="color: #008080; font-weight: bold;color: #808080;">\n</span>Content-Disposition: form-data; name=<span style="color: #008080; font-weight: bold;color: #808080;">\&quot;</span>{1}<span style="color: #008080; font-weight: bold;color: #808080;">\&quot;</span><span style="color: #008080; font-weight: bold;color: #808080;">\r</span><span style="color: #008080; font-weight: bold;color: #808080;">\n</span><span style="color: #008080; font-weight: bold;color: #808080;">\r</span><span style="color: #008080; font-weight: bold;color: #808080;">\n</span>{2}<span style="color: #008080; font-weight: bold;color: #808080;">\r</span><span style="color: #008080; font-weight: bold;color: #808080;">\n</span>&quot;</span>, 
					boundary, 
					param.<span style="color: #0000FF;">Key</span>, 
					param.<span style="color: #0000FF;">Value</span><span style="color: #000000;color: #000000;">&#41;</span><span style="color: #008000;color: #000000;">;</span>
				formDataStream.<span style="color: #0000FF;">Write</span><span style="color: #000000;color: #000000;">&#40;</span>encoding.<span style="color: #0000FF;">GetBytes</span><span style="color: #000000;color: #000000;">&#40;</span>postData<span style="color: #000000;color: #000000;">&#41;</span>, <span style="color: #FF0000;color: #808080;">0</span>, postData.<span style="color: #0000FF;">Length</span><span style="color: #000000;color: #000000;">&#41;</span><span style="color: #008000;color: #000000;">;</span>
			<span style="color: #000000;color: #000000;">&#125;</span>
		<span style="color: #000000;color: #000000;">&#125;</span>
&nbsp;
		<span style="color: #008080; font-style: italic;color: #008000;">// Add the end of the request</span>
		<span style="color: #FF0000;color: #0000FF;">string</span> footer <span style="color: #008000;color: #000000;">=</span> <span style="color: #666666;color: #808080;">&quot;<span style="color: #008080; font-weight: bold;color: #808080;">\r</span><span style="color: #008080; font-weight: bold;color: #808080;">\n</span>--&quot;</span> <span style="color: #008000;color: #000000;">+</span> boundary <span style="color: #008000;color: #000000;">+</span> <span style="color: #666666;color: #808080;">&quot;--<span style="color: #008080; font-weight: bold;color: #808080;">\r</span><span style="color: #008080; font-weight: bold;color: #808080;">\n</span>&quot;</span><span style="color: #008000;color: #000000;">;</span>
		formDataStream.<span style="color: #0000FF;">Write</span><span style="color: #000000;color: #000000;">&#40;</span>encoding.<span style="color: #0000FF;">GetBytes</span><span style="color: #000000;color: #000000;">&#40;</span>footer<span style="color: #000000;color: #000000;">&#41;</span>, <span style="color: #FF0000;color: #808080;">0</span>, footer.<span style="color: #0000FF;">Length</span><span style="color: #000000;color: #000000;">&#41;</span><span style="color: #008000;color: #000000;">;</span>
&nbsp;
		<span style="color: #008080; font-style: italic;color: #008000;">// Dump the Stream into a byte[]</span>
		formDataStream.<span style="color: #0000FF;">Position</span> <span style="color: #008000;color: #000000;">=</span> <span style="color: #FF0000;color: #808080;">0</span><span style="color: #008000;color: #000000;">;</span>
		<span style="color: #FF0000;color: #0000FF;">byte</span><span style="color: #000000;color: #000000;">&#91;</span><span style="color: #000000;color: #000000;">&#93;</span> formData <span style="color: #008000;color: #000000;">=</span> <span style="color: #008000;color: #0000FF;">new</span> <span style="color: #FF0000;color: #0000FF;">byte</span><span style="color: #000000;color: #000000;">&#91;</span>formDataStream.<span style="color: #0000FF;">Length</span><span style="color: #000000;color: #000000;">&#93;</span><span style="color: #008000;color: #000000;">;</span>
		formDataStream.<span style="color: #0000FF;">Read</span><span style="color: #000000;color: #000000;">&#40;</span>formData, <span style="color: #FF0000;color: #808080;">0</span>, formData.<span style="color: #0000FF;">Length</span><span style="color: #000000;color: #000000;">&#41;</span><span style="color: #008000;color: #000000;">;</span>
		formDataStream.<span style="color: #0000FF;">Close</span><span style="color: #000000;color: #000000;">&#40;</span><span style="color: #000000;color: #000000;">&#41;</span><span style="color: #008000;color: #000000;">;</span>
&nbsp;
		<span style="color: #0600FF;color: #0000FF;">return</span> formData<span style="color: #008000;color: #000000;">;</span>
	<span style="color: #000000;color: #000000;">&#125;</span>
&nbsp;
	<span style="color: #0600FF;color: #0000FF;">public</span> <span style="color: #FF0000;color: #0000FF;">class</span> FileParameter
	<span style="color: #000000;color: #000000;">&#123;</span>
		<span style="color: #0600FF;color: #0000FF;">public</span> <span style="color: #FF0000;color: #0000FF;">byte</span><span style="color: #000000;color: #000000;">&#91;</span><span style="color: #000000;color: #000000;">&#93;</span> File <span style="color: #000000;color: #000000;">&#123;</span> get<span style="color: #008000;color: #000000;">;</span> set<span style="color: #008000;color: #000000;">;</span> <span style="color: #000000;color: #000000;">&#125;</span>
		<span style="color: #0600FF;color: #0000FF;">public</span> <span style="color: #FF0000;color: #0000FF;">string</span> FileName <span style="color: #000000;color: #000000;">&#123;</span> get<span style="color: #008000;color: #000000;">;</span> set<span style="color: #008000;color: #000000;">;</span> <span style="color: #000000;color: #000000;">&#125;</span>
		<span style="color: #0600FF;color: #0000FF;">public</span> <span style="color: #FF0000;color: #0000FF;">string</span> ContentType <span style="color: #000000;color: #000000;">&#123;</span> get<span style="color: #008000;color: #000000;">;</span> set<span style="color: #008000;color: #000000;">;</span> <span style="color: #000000;color: #000000;">&#125;</span>
		<span style="color: #0600FF;color: #0000FF;">public</span> FileParameter<span style="color: #000000;color: #000000;">&#40;</span><span style="color: #FF0000;color: #0000FF;">byte</span><span style="color: #000000;color: #000000;">&#91;</span><span style="color: #000000;color: #000000;">&#93;</span> file<span style="color: #000000;color: #000000;">&#41;</span> <span style="color: #008000;color: #000000;">:</span> <span style="color: #0600FF;color: #0000FF;">this</span><span style="color: #000000;color: #000000;">&#40;</span>file, <span style="color: #0600FF;color: #0000FF;">null</span><span style="color: #000000;color: #000000;">&#41;</span> <span style="color: #000000;color: #000000;">&#123;</span> <span style="color: #000000;color: #000000;">&#125;</span>
		<span style="color: #0600FF;color: #0000FF;">public</span> FileParameter<span style="color: #000000;color: #000000;">&#40;</span><span style="color: #FF0000;color: #0000FF;">byte</span><span style="color: #000000;color: #000000;">&#91;</span><span style="color: #000000;color: #000000;">&#93;</span> file, <span style="color: #FF0000;color: #0000FF;">string</span> filename<span style="color: #000000;color: #000000;">&#41;</span> <span style="color: #008000;color: #000000;">:</span> <span style="color: #0600FF;color: #0000FF;">this</span><span style="color: #000000;color: #000000;">&#40;</span>file, filename, <span style="color: #0600FF;color: #0000FF;">null</span><span style="color: #000000;color: #000000;">&#41;</span> <span style="color: #000000;color: #000000;">&#123;</span> <span style="color: #000000;color: #000000;">&#125;</span>
		<span style="color: #0600FF;color: #0000FF;">public</span> FileParameter<span style="color: #000000;color: #000000;">&#40;</span><span style="color: #FF0000;color: #0000FF;">byte</span><span style="color: #000000;color: #000000;">&#91;</span><span style="color: #000000;color: #000000;">&#93;</span> file, <span style="color: #FF0000;color: #0000FF;">string</span> filename, <span style="color: #FF0000;color: #0000FF;">string</span> contenttype<span style="color: #000000;color: #000000;">&#41;</span> 
		<span style="color: #000000;color: #000000;">&#123;</span>
			File <span style="color: #008000;color: #000000;">=</span> file<span style="color: #008000;color: #000000;">;</span>
			FileName <span style="color: #008000;color: #000000;">=</span> filename<span style="color: #008000;color: #000000;">;</span>
			ContentType <span style="color: #008000;color: #000000;">=</span> contenttype<span style="color: #008000;color: #000000;">;</span>
		<span style="color: #000000;color: #000000;">&#125;</span>
	<span style="color: #000000;color: #000000;">&#125;</span>
<span style="color: #000000;color: #000000;">&#125;</span></pre></div></div>


<p>Here is the code to call the MultipartFormDataPost function with multiple parameters, including a file.</p>


<div class="wp_syntax"><div class="code"><pre class="csharp" style="font-family:monospace;">&nbsp;
<span style="color: #008080; font-style: italic;color: #008000;">// Read file data</span>
FileStream fs <span style="color: #008000;color: #000000;">=</span> <span style="color: #008000;color: #0000FF;">new</span> FileStream<span style="color: #000000;color: #000000;">&#40;</span><span style="color: #666666;color: #808080;">&quot;c:<span style="color: #008080; font-weight: bold;color: #808080;">\\</span>people.doc&quot;</span>, FileMode.<span style="color: #0000FF;">Open</span>, FileAccess.<span style="color: #0000FF;">Read</span><span style="color: #000000;color: #000000;">&#41;</span><span style="color: #008000;color: #000000;">;</span>
<span style="color: #FF0000;color: #0000FF;">byte</span><span style="color: #000000;color: #000000;">&#91;</span><span style="color: #000000;color: #000000;">&#93;</span> data <span style="color: #008000;color: #000000;">=</span> <span style="color: #008000;color: #0000FF;">new</span> <span style="color: #FF0000;color: #0000FF;">byte</span><span style="color: #000000;color: #000000;">&#91;</span>fs.<span style="color: #0000FF;">Length</span><span style="color: #000000;color: #000000;">&#93;</span><span style="color: #008000;color: #000000;">;</span>
fs.<span style="color: #0000FF;">Read</span><span style="color: #000000;color: #000000;">&#40;</span>data, <span style="color: #FF0000;color: #808080;">0</span>, data.<span style="color: #0000FF;">Length</span><span style="color: #000000;color: #000000;">&#41;</span><span style="color: #008000;color: #000000;">;</span>
fs.<span style="color: #0000FF;">Close</span><span style="color: #000000;color: #000000;">&#40;</span><span style="color: #000000;color: #000000;">&#41;</span><span style="color: #008000;color: #000000;">;</span>
&nbsp;
<span style="color: #008080; font-style: italic;color: #008000;">// Generate post objects</span>
Dictionary<span style="color: #008000;color: #000000;">&lt;</span><span style="color: #FF0000;color: #0000FF;">string</span>, <span style="color: #FF0000;color: #0000FF;">object</span><span style="color: #008000;color: #000000;">&gt;</span> postParameters <span style="color: #008000;color: #000000;">=</span> <span style="color: #008000;color: #0000FF;">new</span> Dictionary<span style="color: #008000;color: #000000;">&lt;</span><span style="color: #FF0000;color: #0000FF;">string</span>, <span style="color: #FF0000;color: #0000FF;">object</span><span style="color: #008000;color: #000000;">&gt;</span><span style="color: #000000;color: #000000;">&#40;</span><span style="color: #000000;color: #000000;">&#41;</span><span style="color: #008000;color: #000000;">;</span>
postParameters.<span style="color: #0000FF;">Add</span><span style="color: #000000;color: #000000;">&#40;</span><span style="color: #666666;color: #808080;">&quot;filename&quot;</span>, <span style="color: #666666;color: #808080;">&quot;People.doc&quot;</span><span style="color: #000000;color: #000000;">&#41;</span><span style="color: #008000;color: #000000;">;</span>
postParameters.<span style="color: #0000FF;">Add</span><span style="color: #000000;color: #000000;">&#40;</span><span style="color: #666666;color: #808080;">&quot;fileformat&quot;</span>, <span style="color: #666666;color: #808080;">&quot;doc&quot;</span><span style="color: #000000;color: #000000;">&#41;</span><span style="color: #008000;color: #000000;">;</span>
postParameters.<span style="color: #0000FF;">Add</span><span style="color: #000000;color: #000000;">&#40;</span><span style="color: #666666;color: #808080;">&quot;file&quot;</span>, <span style="color: #008000;color: #0000FF;">new</span> FormUpload.<span style="color: #0000FF;">FileParameter</span><span style="color: #000000;color: #000000;">&#40;</span>data, <span style="color: #666666;color: #808080;">&quot;People.doc&quot;</span>, <span style="color: #666666;color: #808080;">&quot;application/msword&quot;</span><span style="color: #000000;color: #000000;">&#41;</span><span style="color: #000000;color: #000000;">&#41;</span><span style="color: #008000;color: #000000;">;</span>
&nbsp;
<span style="color: #008080; font-style: italic;color: #008000;">// Create request and receive response</span>
<span style="color: #FF0000;color: #0000FF;">string</span> postURL <span style="color: #008000;color: #000000;">=</span> <span style="color: #666666;color: #808080;">&quot;http://localhost&quot;</span><span style="color: #008000;color: #000000;">;</span>
<span style="color: #FF0000;color: #0000FF;">string</span> userAgent <span style="color: #008000;color: #000000;">=</span> <span style="color: #666666;color: #808080;">&quot;Someone&quot;</span><span style="color: #008000;color: #000000;">;</span>
HttpWebResponse webResponse <span style="color: #008000;color: #000000;">=</span> FormUpload.<span style="color: #0000FF;">MultipartFormDataPost</span><span style="color: #000000;color: #000000;">&#40;</span>postURL, userAgent, postParameters<span style="color: #000000;color: #000000;">&#41;</span><span style="color: #008000;color: #000000;">;</span>
&nbsp;
<span style="color: #008080; font-style: italic;color: #008000;">// Process response</span>
StreamReader responseReader <span style="color: #008000;color: #000000;">=</span> <span style="color: #008000;color: #0000FF;">new</span> StreamReader<span style="color: #000000;color: #000000;">&#40;</span>webResponse.<span style="color: #0000FF;">GetResponseStream</span><span style="color: #000000;color: #000000;">&#40;</span><span style="color: #000000;color: #000000;">&#41;</span><span style="color: #000000;color: #000000;">&#41;</span><span style="color: #008000;color: #000000;">;</span>
<span style="color: #FF0000;color: #0000FF;">string</span> fullResponse <span style="color: #008000;color: #000000;">=</span> responseReader.<span style="color: #0000FF;">ReadToEnd</span><span style="color: #000000;color: #000000;">&#40;</span><span style="color: #000000;color: #000000;">&#41;</span><span style="color: #008000;color: #000000;">;</span>
webResponse.<span style="color: #0000FF;">Close</span><span style="color: #000000;color: #000000;">&#40;</span><span style="color: #000000;color: #000000;">&#41;</span><span style="color: #008000;color: #000000;">;</span>
Response.<span style="color: #0000FF;">Write</span><span style="color: #000000;color: #000000;">&#40;</span>fullResponse<span style="color: #000000;color: #000000;">&#41;</span><span style="color: #008000;color: #000000;">;</span></pre></div></div>


<p>Hopefully this code can help someone, figuring out exactly where to place the boundary and newlines in between form key-value pairs caused a little bit of grief during development.  This is some functionality that would be really nice inside of the language library, but it seems like in most languages this is something you end up coding yourself.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.briangrinstead.com/blog/multipart-form-post-in-c/feed</wfw:commentRss>
		<slash:comments>39</slash:comments>
		</item>
		<item>
		<title>C# Tips &#8211; Null Coalescing ??</title>
		<link>http://www.briangrinstead.com/blog/null-coalescing</link>
		<comments>http://www.briangrinstead.com/blog/null-coalescing#comments</comments>
		<pubDate>Tue, 05 May 2009 17:29:30 +0000</pubDate>
		<dc:creator>Brian</dc:creator>
				<category><![CDATA[All]]></category>
		<category><![CDATA[Web Development]]></category>
		<category><![CDATA[asp.net]]></category>
		<category><![CDATA[csharp]]></category>
		<category><![CDATA[programming]]></category>
		<category><![CDATA[tips]]></category>

		<guid isPermaLink="false">http://www.briangrinstead.com/?p=85</guid>
		<description><![CDATA[I have always enjoyed using the logical OR operator in JavaScript (&#124;&#124;) as an oppurtunity to check for a null-like value, specifically to provide default parameters for functions or to check for existence of a property on a collection. I think they are a great way to make code more concise, and if used well, [...]]]></description>
			<content:encoded><![CDATA[<p>I have always enjoyed using the logical OR operator in JavaScript (||) as an oppurtunity to check for a null-like value, specifically to provide default parameters for functions or to check for existence of a property on a collection.  I think they are a great way to make code more concise, and if used well, more readable.</p>

<p>These two functions do the same thing, but the first is shorter and more readable to people who may have to go back and modify it later.</p>


<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;color: #0000FF;">function</span> contentDocument<span style="color: #009900;color: #000000;">&#40;</span>frame<span style="color: #009900;color: #000000;">&#41;</span> <span style="color: #009900;color: #000000;">&#123;</span>
    <span style="color: #006600; font-style: italic;color: #008000;">// If the frame.contentDocument either doesn't exist or is a null </span>
    <span style="color: #006600; font-style: italic;color: #008000;">// value, it will skip to the next value down the line </span>
    <span style="color: #000066; font-weight: bold;color: #0000FF;">return</span> frame.<span style="color: #660066;">contentDocument</span> <span style="color: #339933;color: #000000;">||</span> 
        frame.<span style="color: #660066;">contentWindow</span>.<span style="color: #660066;">document</span> <span style="color: #339933;color: #000000;">||</span> 
        frame.<span style="color: #660066;">document</span><span style="color: #339933;color: #000000;">;</span>
<span style="color: #009900;color: #000000;">&#125;</span>
&nbsp;
<span style="color: #003366; font-weight: bold;color: #0000FF;">function</span> contentDocumentVerbose<span style="color: #009900;color: #000000;">&#40;</span>frame<span style="color: #009900;color: #000000;">&#41;</span> <span style="color: #009900;color: #000000;">&#123;</span>
    <span style="color: #006600; font-style: italic;color: #008000;">// This works, but is possibly too verbose for such a simple task</span>
    <span style="color: #000066; font-weight: bold;color: #0000FF;">if</span> <span style="color: #009900;color: #000000;">&#40;</span>frame.<span style="color: #660066;">contentDocument</span><span style="color: #009900;color: #000000;">&#41;</span> <span style="color: #009900;color: #000000;">&#123;</span>
        <span style="color: #000066; font-weight: bold;color: #0000FF;">return</span> frame.<span style="color: #660066;">contentDocument</span><span style="color: #339933;color: #000000;">;</span>
    <span style="color: #009900;color: #000000;">&#125;</span>
    <span style="color: #000066; font-weight: bold;color: #0000FF;">else</span> <span style="color: #000066; font-weight: bold;color: #0000FF;">if</span> <span style="color: #009900;color: #000000;">&#40;</span>frame.<span style="color: #660066;">contentWindow</span><span style="color: #009900;color: #000000;">&#41;</span> <span style="color: #009900;color: #000000;">&#123;</span>
        <span style="color: #000066; font-weight: bold;color: #0000FF;">return</span> frame.<span style="color: #660066;">contentWindow</span>.<span style="color: #660066;">document</span><span style="color: #339933;color: #000000;">;</span>
    <span style="color: #009900;color: #000000;">&#125;</span>
    <span style="color: #000066; font-weight: bold;color: #0000FF;">else</span> <span style="color: #000066; font-weight: bold;color: #0000FF;">if</span> <span style="color: #009900;color: #000000;">&#40;</span>frame.<span style="color: #660066;">document</span><span style="color: #009900;color: #000000;">&#41;</span> <span style="color: #009900;color: #000000;">&#123;</span>
        <span style="color: #000066; font-weight: bold;color: #0000FF;">return</span> frame.<span style="color: #660066;">document</span><span style="color: #339933;color: #000000;">;</span>
    <span style="color: #009900;color: #000000;">&#125;</span>
<span style="color: #009900;color: #000000;">&#125;</span></pre></div></div>


<p>I was happy to see that C# has a similar feature, the <a href="http://en.wikipedia.org/wiki/%3F%3F_Operator">Null Coalescing Operator</a>.</p>

<p>This is nice for the same reasons, and is more readable than the normal ternary operator when simply checking null.  Of course, if I am not checking for a null value, but a more complex boolean expression, I will usually use the ternary operator or an if-else block it is more than just a variable assignment or return statement.  Anytime I use any extra syntactical feature, it is my hope to make the code more readable.</p>

<p>Anyway, here is an example of the &#8216;??&#8217; (coalescing) operator contrasted with the &#8216;?:&#8217; (ternary) operator.</p>


<div class="wp_syntax"><div class="code"><pre class="csharp" style="font-family:monospace;"><span style="color: #FF0000;color: #0000FF;">string</span> APP_DEFAULT <span style="color: #008000;color: #000000;">=</span> <span style="color: #666666;color: #808080;">&quot;application/octet-stream&quot;</span><span style="color: #008000;color: #000000;">;</span>
&nbsp;
<span style="color: #0600FF;color: #0000FF;">private</span> <span style="color: #FF0000;color: #0000FF;">string</span> GetContentType<span style="color: #000000;color: #000000;">&#40;</span><span style="color: #FF0000;color: #0000FF;">string</span> contentType<span style="color: #000000;color: #000000;">&#41;</span>
<span style="color: #000000;color: #000000;">&#123;</span>
    <span style="color: #008080; font-style: italic;color: #008000;">// Nice and readable.  The '??' operator can be very useful.</span>
    <span style="color: #FF0000;color: #0000FF;">string</span> FUNCTION_DEFAULT <span style="color: #008000;color: #000000;">=</span> null<span style="color: #008000;color: #000000;">;</span>
&nbsp;
    <span style="color: #0600FF;color: #0000FF;">return</span> contentType <span style="color: #008000;color: #000000;">??</span> FUNCTION_DEFAULT <span style="color: #008000;color: #000000;">??</span> APP_DEFAULT<span style="color: #008000;color: #000000;">;</span>
<span style="color: #000000;color: #000000;">&#125;</span>
&nbsp;
<span style="color: #0600FF;color: #0000FF;">private</span> <span style="color: #FF0000;color: #0000FF;">string</span> GetContentTypeTernary<span style="color: #000000;color: #000000;">&#40;</span><span style="color: #FF0000;color: #0000FF;">string</span> contentType<span style="color: #000000;color: #000000;">&#41;</span> 
<span style="color: #000000;color: #000000;">&#123;</span>
    <span style="color: #008080; font-style: italic;color: #008000;">// This is NOT readable.  Please do not use nested ternary</span>
    <span style="color: #008080; font-style: italic;color: #008000;">// operators... They take too much energy to figure out.</span>
    <span style="color: #FF0000;color: #0000FF;">string</span> FUNCTION_DEFAULT <span style="color: #008000;color: #000000;">=</span> <span style="color: #666666;color: #808080;">&quot;text/plain&quot;</span><span style="color: #008000;color: #000000;">;</span>
&nbsp;
    <span style="color: #0600FF;color: #0000FF;">return</span> <span style="color: #000000;color: #000000;">&#40;</span>contentType <span style="color: #008000;color: #000000;">!=</span> <span style="color: #0600FF;color: #0000FF;">null</span><span style="color: #000000;color: #000000;">&#41;</span> <span style="color: #008000;color: #000000;">?</span> contentType <span style="color: #008000;color: #000000;">:</span>
        <span style="color: #000000;color: #000000;">&#40;</span><span style="color: #000000;color: #000000;">&#40;</span>FUNCTION_DEFAULT <span style="color: #008000;color: #000000;">!=</span> <span style="color: #0600FF;color: #0000FF;">null</span><span style="color: #000000;color: #000000;">&#41;</span> <span style="color: #008000;color: #000000;">?</span> FUNCTION_DEFAULT <span style="color: #008000;color: #000000;">:</span> APP_DEFAULT<span style="color: #000000;color: #000000;">&#41;</span><span style="color: #008000;color: #000000;">;</span>
<span style="color: #000000;color: #000000;">&#125;</span></pre></div></div>

]]></content:encoded>
			<wfw:commentRss>http://www.briangrinstead.com/blog/null-coalescing/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
