//pixel=620;

$(document).ready(function(){
 		$("#button1").click(function() {
                $(".widearea").animate({
                        marginLeft: "0px"
                }, 500);
        });
        $("#button2").click(function() {
                $(".widearea").animate({
                        marginLeft: "-"+pixel+"px"
                }, 500);
        });
        $("#button3").click(function() {
                $(".widearea").animate({
                        marginLeft: "-"+pixel*2+"px"
                }, 500);
        });
        $("#button4").click(function() {
                $(".widearea").animate({
                        marginLeft: "-"+pixel*3+"px"
                }, 500);
        });        
        $("#button5").click(function() {
                $(".widearea").animate({
                        marginLeft: "-"+pixel*4+"px"
                }, 500);
        });  
        $("#button6").click(function() {
                $(".widearea").animate({
                        marginLeft: "-"+pixel*5+"px"
                }, 500);
        });
        $("#button7").click(function() {
                $(".widearea").animate({
                        marginLeft: "-"+pixel*6+"px"
                }, 500);
        });
        $("#button8").click(function() {
                $(".widearea").animate({
                        marginLeft: "-"+pixel*7+"px"
                }, 500);
        });
        $("#button9").click(function() {
                $(".widearea").animate({
                        marginLeft: "-"+pixel*8+"px"
                }, 500);
        });        
        $("#button10").click(function() {
                $(".widearea").animate({
                        marginLeft: "-"+pixel*9+"px"
                }, 500);
        });          
        $("#button11").click(function() {
                $(".widearea").animate({
                        marginLeft: "-"+pixel*10+"px"
                }, 500);
        });  
		$("#next1").click(function() {
                $(".widearea").animate({
                        marginLeft: "0px"
                }, 500);
        });
        $("#next2").click(function() {
                $(".widearea").animate({
                        marginLeft: "-"+pixel+"px"
                }, 500);
        });
        $("#next3").click(function() {
                $(".widearea").animate({
                        marginLeft:  "-"+pixel*2+"px"
                }, 500);
        });
        $("#next4").click(function() {
                $(".widearea").animate({
                        marginLeft:  "-"+pixel*3+"px"
                }, 500);
        });        
        $("#next5").click(function() {
                $(".widearea").animate({
                        marginLeft:  "-"+pixel*4+"px"
                }, 500);
        }); 
        $("#next6").click(function() {
                $(".widearea").animate({
                        marginLeft:  "-"+pixel*5+"px"
                }, 500);
        }); 
        $("#next7").click(function() {
                $(".widearea").animate({
                        marginLeft:  "-"+pixel*6+"px"
                }, 500);
        }); 
        $("#next8").click(function() {
                $(".widearea").animate({
                        marginLeft:  "-"+pixel*7+"px"
                }, 500);
        }); 
        $("#next9").click(function() {
                $(".widearea").animate({
                        marginLeft:  "-"+pixel*8+"px"
                }, 500);
        }); 
        $("#next10").click(function() {
                $(".widearea").animate({
                        marginLeft:  "-"+pixel*9+"px"
                }, 500);
        }); 
        $("#next11").click(function() {
                $(".widearea").animate({
                        marginLeft:  "-"+pixel*10+"px"
                }, 500);
        }); 
        $("#next12").click(function() {
                $(".widearea").animate({
                        marginLeft:  "-"+pixel*11+"px"
                }, 500);
        }); 
        $("#prev1").click(function() {
                $(".widearea").animate({
                        marginLeft: "0px"
                }, 500);
        });
        $("#prev2").click(function() {
                $(".widearea").animate({
                        marginLeft: "-"+pixel+"px"
                }, 500);
        });
        $("#prev3").click(function() {
                $(".widearea").animate({
                        marginLeft: "-"+pixel*2+"px"
                }, 500);
        });
        $("#prev4").click(function() {
                $(".widearea").animate({
                        marginLeft: "-"+pixel*3+"px"
                }, 500);
        });        
        $("#prev5").click(function() {
                $(".widearea").animate({
                        marginLeft: "-"+pixel*4+"px"
                }, 500);
        });    
        $("#prev6").click(function() {
                $(".widearea").animate({
                        marginLeft: "-"+pixel*5+"px"
                }, 500);
        }); 
        $("#prev7").click(function() {
                $(".widearea").animate({
                        marginLeft: "-"+pixel*6+"px"
                }, 500);
        }); 
        $("#prev8").click(function() {
                $(".widearea").animate({
                        marginLeft: "-"+pixel*7+"px"
                }, 500);
        }); 
        $("#prev9").click(function() {
                $(".widearea").animate({
                        marginLeft: "-"+pixel*8+"px"
                }, 500);
        }); 
        $("#prev10").click(function() {
                $(".widearea").animate({
                        marginLeft: "-"+pixel*9+"px"
                }, 500);
        }); 
		$("#prev11").click(function() {
                $(".widearea").animate({
                        marginLeft: "-"+pixel*10+"px"
                }, 500);
        });
        $("#prev12").click(function() {
                $(".widearea").animate({
                        marginLeft: "-"+pixel*11+"px"
                }, 500);
        }); 
});