Tab panel with sliding effect prototype

HTML

<div id="primarynav">
              <ul id="navigation">
                  <li><a href="page1.html" class="selected" rel="content1">Page 1</a></li>
                  <li><a href="page2.html" rel="content2">Page 2</a></li>
                  <li><a href="page3.html" rel="content3">Page 3</a></li>
              </ul>
          </div>

<div id="ajax-content"></div>

<div class="preload">
    <div id="content1">(Page 1)I have a series of links on a floating div (so they're always visible). When a user clicks one, I would like the following to happen in sequence:

The page scrolls up to the top (where the ajax container is located)
The current content slides out
The new content loads (ajax)
The new content slides in
NB: As the content in each ajax file is different, the ajax container will need to expand/contract to fit.

I would like to do this without jQuery UI, and keep the code as lite as possible.

I've been googling and attempting to do this with callbacks and queue functions all day, but struggle to get it working as intended. If anyone can please help me understand how to structure these functions to get it working I'd be incredibly grateful.

I've abstracted my code to show you where I'm at: http://jsfiddle.net/Cz5kg/1/

It currently slides the top of the page, and loads the content. But i'm yet to get the transitions working smoothly and in sequence.

Many thanks in advance.</div>
    
    <div id="content2">(Page 2)I'm writing a simple javascript to calculate the time difference between server and user time. But something is going wrong.

If I catch the javascript and php date i have:

date("M d Y h:i:s A")
php date : Wed Jun 27 2012 04:10:41 AM  

new Date()
J S date : Wed Jun 27 2012 10:10:40 GMT+0200 (CEST)   
This is correct! I have two different time for local and server time.

Now if I take the seconds time... something goes wrong:

(php: date("U"))
sec PHP: 1340784640    

(js new Date().getTime()/1000 )
sec J S: 1340784640
I got the same time!

Can...

CSS

ul li { float: left;margin: 0 15px 0 0; }

#ajax-content { 
    width:500px; 
    clear:both; 
    border: solid 1px black; /* border just for debugging purposes */
    position: relative; /* to contain absolutely positioned children */
    height: 100px; /* initial height */
}

.preload { /* for test purposes */
    display: none;
}

.item-container {/* style your inner content*/}

JavaScript

$(document).ready(function() {

    var $navlinks = $('#navigation li a'),
        $ajaxcontent = $('#ajax-content'),
        animDur = 1000, // animation duration
        isTransitionRunning = false;
    
    $navlinks.click(function(e) {        
        e.preventDefault(); // prevent default action
        // block actions until current transition finishes
        if(isTransitionRunning) {
            return false;
        }                
        var contentWidth = $ajaxcontent.width(),
            newContent = $('#' + $(this).attr('rel')).html(), // mock content                
            $newItem = $(document.createElement('div')), // nested container for new content
            newItemHeight,
            newContentHeight,
            $oldItem = $ajaxcontent.children('.item-container');

        // set the flag indicating that the transition is running
        isTransitionRunning = true;
        
        $newItem.addClass('item-container');
             
        $('html, body').animate({scrollTop:0}, 'slow');              
    
        //$ajaxcontent.empty().append("<div id='loading'><img src='http://expression.ws/stackoverflow/load.gif' alt='Loading Content' /></div>");
        $navlinks.removeClass('selected');
        $(this).addClass('selected');
 
        /*$.ajax({ url: this.href, success: function(html) {
            $ajaxcontent.empty().append(html);
            }
        });*/
                
        // freeze current ajax container height
        $ajaxcontent.height($ajaxcontent.height());
        $ajaxcontent.css('overflow', 'hidden');
        
        // slide away old item (if any)
        if($oldItem.length) {
            $oldItem
                 // fix width so no wrapping occurs during transision
                .width(contentWidth) 
                // position absolutely
                .css('position', 'absolute')
                .animate({
                    left: -contentWidth // move new content at the right edge of container
      ...