window.onload=function(){
   var con=document.getElementById('con');
   var list=document.getElementById('list');
   var button=document.getElementById('button').getElementsByClassName('span');
   var prev=document.getElementById('prev');
   var next=document.getElementById('next');
   var index=1;

   function showButton(){
       for(var i=0; i<button.length;i++){
           if(button[i].className=='on'){
               button[i].className='' ;
               break;
           }
       }
       button[index-1].className = 'on';

   }
   function animate(offset){
       var newleft=parseInt(list.style.left) +offset;
       list.style.left = newleft+ 'px';

       if(newleft>-730){
           list.style.left=-3650+'px';
       }
       if(newleft<-3650){
           list.style.left=-730+'px';
       }
   }
   next.onclick=function() {
       if(index==5){
           index=1
       }
       else{index +=1}
       index +=1;
       showButton();
       animate(-730);
   }
   prev.onclick=function() {
       if(index==1){
           index=5
       }
       else{index -=1}
       index -=1;
       showButton();
       animate(730);
   }


}