Javascript / JQuery interactive timeline with expanding entries that are centered relative to container on click
<p>I'm in the process of developing a timeline.  The concept is that when an entry in the timeline is clicked, the entire timeline is centered on that entry and the entry expands.</p>

<p>I have a working demo here:
<a href="http://jsfiddle.net/A3YhX/9/" rel="nofollow">http://jsfiddle.net/A3YhX/9/</a></p>

<p>I have manually set the css left position (to center the timeline on the clicked item) using the jquery index method (which gives me a numerical value for each item in the timeline when I click it).</p>

<p>What I want to be able to do is have javascript/jquery do the math for me so that if I add items, change their widths, change the size of the container element, etc  the jquery function will automatically calculate the css left position.</p>

<p>I know there are plugins out there that do exactly this, but I threw this together from scratch this morning before doing any dissection on existing solutions.</p>

<p>Any and all help/suggestions are greatly appreciated.</p>

<p>Thanks!</p>

<p>mckinselberg</p>
