jQuery(window).load(function() {
    var auto_start = true;
    var holding = false;

    jQuery('#navigation>li>a').each( function(i) {
        if(!jQuery(this).attr('rel')) return;
        jQuery(this).click(doSlide);
        jQuery(this).focus(function(){holding=true;});
        jQuery(this).blur(function(){holding=false;});
    });

    jQuery('div.section').each( function() {
        jQuery(this).mouseover(function(){holding=true;});
        jQuery(this).mouseout(function(){holding=false;});
    });



    function doSlide(event) {
        auto_start = false;
        var idx = jQuery(this).attr('rel').replace(/^s/,'');
        startSlide(idx);
    }

    function startSlide(idx) {
        var curIdx = Math.abs(parseInt(jQuery('#s1').css('left'),10) / jQuery('#s1').width()) +1;
        if(idx == curIdx) return;

        var gap = (curIdx - idx)*jQuery('#s1').width();

        function slide(gap) {
            gap = gap/2;
            jQuery('.section').each(function() {
                jQuery(this).css('left', parseInt(jQuery(this).css('left'),10)+gap);
            });
            if(Math.abs(gap)>30) {
            setTimeout(function() {slide(gap)},10);
            } else {
                jQuery('.section').each(function(i) {
                    jQuery(this).css('left', (i - idx +1) * jQuery('#s1').width());
                });
            }
        }
        slide(gap);
    }

    function autoStart(idx) {
        if(!auto_start) return;
        if(!holding) {
            if(idx>5) idx = 1;
            startSlide(idx);
        }
        setTimeout(function() { autoStart(idx+1); },3000);
    }

    autoStart(1);
});