jquery animate() not working in Safari, unable to prevent Multiple clicks

Question

I certainly hope I could get help with my problem. I have the page uploaded at http://www.strategyinstitute.com/test

It is a simple photo gallery navigation.

Problem 1:

The entire script runs perfectly (except for problem 2) on Firefox. But on Safari, .animate() is not executing as it should. It is suppose to to do margin-left : -=630 for each click, however my observation tells me that only 5px has been shifted. Is this something to do with CSS standards?

Problem 2:

I have tried using bind/unbind, queues, adding/removing class on each click to prevent multiple clicks on the arrows. However, these steps do not help if I am to click multiple times on the arrows.

Having said, here's the code for my script.

var current_node = 1;
var total_nodes = 0;

$(document).ready(function(){
    if($("#photos")) {
        totalWidth = $("#photos").innerWidth();
        total_nodes = $("#photos li").length
        nodeWidth = $("#photos img").innerWidth() + 5;



        $("#left a").click(function() { 
            prev_node($(this));


        });

        $("#right a").click(function() { 
            next_node($(this));

        });
    }
});



function prev_node(obj) {
    obj.unbind('click');
    if( current_node > 1 ) {
        $("#photos").animate({"margin-left": "+=" + nodeWidth}, 600, function() {
            current_node--;
        })

    }
    obj.bind('click', function() { next_node(obj) } )
}

function next_node(obj) {
    obj.unbind('click');
    if ( current_node < total_nodes ) {
        $("#photos").animate({"margin-left": "-=" + nodeWidth}, 600, function() {
            current_node++;
        })

    }
    obj.bind('click', function() { prev_node(obj) } )
}

Here's my CSS..

#container {padding:6px;background:#333333; max-width:738px}
#captions {padding:5px 5px;}
#captions h4 {color:#ffffff; margin:0; padding:0; font-size:20px; letter-spacing:-0.5px; line-height:30px}
#captions h5 {color:#ffffff; margin:0; padding:0}
#gallery {overflow:hidden; position:relative; width:730px; height:473px;; border:2px solid #222222; background:#0C0C0C;}
#photos {position:absolute; list-style:none; overflow:none; white-space:nowrap; padding:0; margin:0 0 0 50px; z-index:10}
#photos li {display:inline; padding:0; margin:0}
#nav {position:absolute;; z-index:100;}
#nav img {cursor:pointer}
#nav ul{ padding:0;margin:0;}
#nav li {display:inline-block; padding:0; margin:0;background:url(images/nav-bg.png) repeat;}
#nav #right {margin-left:630px;}

and finally... my html

<div id="container">
    <div id="gallery">
        <ul id="photos">
        <li><img src="DSC1.jpg" /></li>
        <li><img src="DSC2.jpg" /></li>
        <li><img src="DSC3.jpg" /></li>
        <li><img src="DSC4.jpg" /></li>
        </ul>
        <div class="clr"></div>
        <div id="nav">
            <ul>
            <li id="left"><a><img src="images/nav-left.png" onmouseover="roll(this);" onmouseout="roll(this);"  /></a></li><li id="right"><a><img src="images/nav-right.png" onmouseover="roll(this);" onmouseout="roll(this);"  /></a></li>
            </ul>
        </div>
    </div>
    <div id="captions">
      <h4>6th Annual North American Summit on Food Safety</h4>
      <h5>Venue: Holiday Inn Yorkdale, Toronto</h5>
    </div>

</div>