var scrollcount = 1; // a global var used to setup counting between transitions
var scrollinterval = 7000; // time in milliseconds between transitions
var transinterval = 1000; // time in milliseconds for the transition between featured images

function autoscroll(){
	var buttontotal = jQuery('#steps ul').children().size();
	var marginleft = scrollcount * -960;
	jQuery('.widearea').animate({
		marginLeft: marginleft + 'px'
	},transinterval);
	scrollcount++;
	if(scrollcount == buttontotal) scrollcount = 0;
}

$(document).ready(function(){
	autoscrollID = setInterval('autoscroll()',scrollinterval);
jQuery('#steps li a').click(function(){
	clearInterval(autoscrollID);
});
jQuery('.buttons').click(function(){
	clearInterval(autoscrollID);
});

        $("#button1").click(function() {
                $(".widearea").animate({
                        marginLeft: "0px"
                }, 500);
        });
        $("#button2").click(function() {
                $(".widearea").animate({
                        marginLeft: "-960px"
                }, 500);
        });
        $("#button3").click(function() {
                $(".widearea").animate({
                        marginLeft: "-1920px"
                }, 500);
        });
        $("#button4").click(function() {
                $(".widearea").animate({
                        marginLeft: "-2880px"
                }, 500);
        });        
        $("#button5").click(function() {
                $(".widearea").animate({
                        marginLeft: "-3840px"
                }, 500);
        });  
        $("#button6").click(function() {
                $(".widearea").animate({
                        marginLeft: "-4800px"
                }, 500);
        });
        $("#button7").click(function() {
                $(".widearea").animate({
                        marginLeft: "-5760px"
                }, 500);
        });
        $("#button8").click(function() {
                $(".widearea").animate({
                        marginLeft: "-6720px"
                }, 500);
        });
        $("#button9").click(function() {
                $(".widearea").animate({
                        marginLeft: "-7680px"
                }, 500);
        });        
        $("#button10").click(function() {
                $(".widearea").animate({
                        marginLeft: "-8640px"
                }, 500);
        });          
        $("#next1").click(function() {
                $(".widearea").animate({
                        marginLeft: "0px"
                }, 500);
        });
        $("#next2").click(function() {
                $(".widearea").animate({
                        marginLeft: "-960px"
                }, 500);
        });
        $("#next3").click(function() {
                $(".widearea").animate({
                        marginLeft: "-1920px"
                }, 500);
        });
        $("#next4").click(function() {
                $(".widearea").animate({
                        marginLeft: "-2880px"
                }, 500);
        });        
        $("#next5").click(function() {
                $(".widearea").animate({
                        marginLeft: "-3840px"
                }, 500);
        }); 
        $("#next6").click(function() {
                $(".widearea").animate({
                        marginLeft: "-4800px"
                }, 500);
        });
        $("#next7").click(function() {
                $(".widearea").animate({
                        marginLeft: "-5760px"
                }, 500);
        });
        $("#next8").click(function() {
                $(".widearea").animate({
                        marginLeft: "-6720px"
                }, 500);
        });
        $("#next9").click(function() {
                $(".widearea").animate({
                        marginLeft: "-7680px"
                }, 500);
        });        
        $("#next10").click(function() {
                $(".widearea").animate({
                        marginLeft: "-8640px"
                }, 500);
        });                  
        $("#prev1").click(function() {
                $(".widearea").animate({
                        marginLeft: "0px"
                }, 500);
        });
        $("#prev2").click(function() {
                $(".widearea").animate({
                        marginLeft: "-960px"
                }, 500);
        });
        $("#prev3").click(function() {
                $(".widearea").animate({
                        marginLeft: "-1920px"
                }, 500);
        });
        $("#prev4").click(function() {
                $(".widearea").animate({
                        marginLeft: "-2880px"
                }, 500);
        });        
        $("#prev5").click(function() {
                $(".widearea").animate({
                        marginLeft: "-3840px"
                }, 500);
        });                                                         
        $("#prev6").click(function() {
                $(".widearea").animate({
                        marginLeft: "-4800px"
                }, 500);
        });
        $("#prev7").click(function() {
                $(".widearea").animate({
                        marginLeft: "-5760px"
                }, 500);
        });
        $("#prev8").click(function() {
                $(".widearea").animate({
                        marginLeft: "-6720px"
                }, 500);
        });
        $("#prev9").click(function() {
                $(".widearea").animate({
                        marginLeft: "-7680px"
                }, 500);
        });        
        $("#prev10").click(function() {
                $(".widearea").animate({
                        marginLeft: "-8640px"
                }, 500);
        });                   
});