using pushstate() & popstate()

using pushstate() & popstate()

I've got a page that loads() php files depending on what navigation item is clicked. I want to adjust this so the user can go through history, and also in an attempt to make the loaded pages crawlable.

But, it seems to be over my head. I can't get anything to work, and not sure what I don't get.

I've gotten to this point

  1. // function for navigation clicks

        $("#top_nav li a, #footer_info").live('click', function(e){
       
                    e.preventDefault();

                    // highlight active nav link & turn off others               
                    $('.current').attr('class','link1');

                    href = $(this).attr("href");
                   
                    // which page chosen?
                    var loadpage = 'inc/'+$(this).attr('name')+'.php';
                    var footer = 'inc/footer.php';
                   
                    // fade out the main box                
                    if(loadpage == "inc/index.php"){
                       
                        $('#main_center_box,.header_content').css({opacity:1}).stop().animate({ opacity: 0 }, 700, function() { /* animation complete */ });
                        $('#starting_point, .places-slideshow,#full-size-background').css({display:"block"}).stop().animate({ opacity: 1 }, 1400, function() { /* animation complete */ });
                        $('#main_center_box').css({zIndex:"-1"});
                        $("#starting_point_link").attr('class','');
                     
                    } else {
                        $('#main_center_box,#footer_links').stop().animate({ opacity: 0, zIndex:0 }, 700, function() {
                            $(this).attr('class','current');
                           
                            // now load the page that matches navigation selected, and fade back in.
                            $('#main_center_box').css({zIndex:1 }).load(loadpage).stop().animate({ opacity: 1}, 700, function() { /* animation complete */ });
                            $('html,body').scrollTop(0);

                            window.history.pushState('', 'New URL: '+href, href);

                        });
                    }
        });
       
       
       
       
        // researching deeplinking solutions
       
    function change(state) {
        if(state === null) {
        alert('nullstate');
            $("#main_center_box").load('inc/mazenga.php');
        } else {
            $('#main_center_box').load(url);
           // $("#main_center_box").load(state.url);
        }
    }

    $(window).bind("popstate", function change(e) {
        //alert('popped');
        change(e.originalEvent.state);
    });




    (function(original) {
        history.pushState = function(state) {
            alert('this is called');
            change(state);
            return original.apply(this, arguments);
        };
    })(history.pushState);