Code Optimization, Event Firing & Safari SyntaxError

Code Optimization, Event Firing & Safari SyntaxError

Hello everyone, I'm working on a new theme for my WordPress blog. A lot of my interface relies on jQuery for animations and effects. I'm having trouble with the below code.

UPDATE: I've updated the code below to show some changes I made. However, my problem still isn't solved. You can take a look at what I mean by going to my site (in my signature) and clicking on the "About" or "Contact" links on the left. If you click them more than once in rapid succession it sort of "wonks up".

$(".toggle").bind('click', clickDo);
   
   function clickUndo(e) {
         var togLink = $(this).attr("rel");
         var togText = $(this).attr("title");
         $(togLink).stop().fadeOut(function() {
            $("#header").stop().animate({ width: '200px' }, 500, 'easeInBack', function() {
               $("#main").stop().fadeTo(350, 1);
            });
         });
         $("#nav ul li").not($(this).parent()).stop().animate({ left: '0px' }, 500, 'easeOutExpo');
         $(this).stop().removeClass("expanded")
               .stop().html(togText)
                 .stop().unbind('click')
                 .pause(2000)
               .stop().bind('click', clickDo);
   }
   function clickDo(e) {
         var togLink = $(this).attr("rel");
         var togText = $(this).attr("title");
         $("#main").stop().fadeTo(300, 0.35, function() {
            if ($(togLink).html() == "") {
               var dataString = 'page='+ togText +''; 
               $.ajax({ 
                 type: "POST", 
                 url: "/bin/", 
                 data: dataString, 
                 success: function(html) { 
                       $(togLink).stop().html(html);
                     $("#header").stop().animate({ width: '835px' }, 500, 'easeOutExpo', function() {
                        $(togLink).stop().fadeIn();
                     });
                 },
                 error: function() {
                   alert('something broke');       
                 }
               });
            }
            else {
               $("#header").animate({ width: '835px' }, 500, 'easeOutExpo', function() {
                  $(togLink).stop().fadeIn();
               });
            }
         });
         $("#nav ul li").not($(this).parent()).stop().animate({ left: '-850px' }, 500, 'easeOutExpo');
         $(this).stop().addClass("expanded")
               .stop().html('Close <img src="/img/ico_close.png" class="ico" />')
               .stop().unbind('click')
               .stop().pause(2000)
               .stop().bind('click', clickUndo);
   }


First problem I'm having is that if someone clicks the trigger element twice in rapid succession, the effects start chaining and end up stuck half way. I need a way to prevent the clickUndo(); function from running if the clickDo(); function just ran or is in the process of running. Additionally, Safari is throwing a SyntaxError with no line number when the functions run. It doesn't break the code, but it's still pesky none-the-less. Any help would be appreciated.