Navigation bar not working

Navigation bar not working

I am doing a scrolling horizontal website similar to
http://www.apple.com/mac-pro/ (they seemed to have changed it) but mine is
horizontal. However, I am experiencing a problem where the 6 white
navigation bars do not light up and correspond to the page that is being
navigated to. My code is as follows below. Thanks in advance! Here is an
example http://jackyeu.com/sp3beta/ I am trying to do the navigation
circles on the right side.
$(function(){
var _left = $(window).scrollLeft();
var individualDivWidth = 1024;
$(window).scroll(function(){
var _cur_left = $(window).scrollLeft();
var totalWidth = $('#container').width();
var posToScroll = Math.round(_cur_left / individualDivWidth) *
individualDivWidth;
TweenMax.to($('html, body'), 0.5, {scrollLeft: posToScroll,
overwrite:true});
if ($(window).scrollLeft() >= $('#index_container').width() )
{
$(".b1").css({ background: "#569EB2"});
$(".b2").css({ background: "#FFF"});
$(".b3").css({ background: "#FFF"});
$(".b4").css({ background: "#FFF"});
$(".b5").css({ background: "#FFF"});
$(".b6").css({ background: "#FFF"});
}
if ($(window).scrollLeft() > = $('#page1_container').width() )
{
$(".b1").css({ background: "#FFF"});
$(".b2").css({ background: "#569EB2"});
$(".b3").css({ background: "#FFF"});
$(".b4").css({ background: "#FFF"});
$(".b5").css({ background: "#FFF"});
$(".b6").css({ background: "#FFF"});
}
});<!-- end of scroll funcion -->'