var $number=0;
var $prev;
var $direction="forwards"
var $vis="inline";


//--------------
function inc(){
 if($direction=="forwards"){
            $number++;
            $prev=+1;
            }
            else{
                $direction="backwards";
                $number--;
                $prev=-1;
                
            }
        
        }
        //-----------------
        
        //----------------
        function setVisibility(id, visibility) {
           
            
            if($number>0 && $number<5){
            document.getElementById(id).style.display = visibility;
            }

        }
        //----------------
        //----------------
        function counter(){
            if($number==4){$direction="backwards"; $vis="inline";}
            if($number==1){$direction="forwards"; $vis="inline";}
                
                
            setTimeout(function(){
                
                inc();
                setVisibility("panel-hide"+$number, $vis);
                if(($number-$prev)>0){
                setVisibility("panel-hide"+($number-$prev), 'none');
                }
                alert("Direction: "+$direction+" Showing:"+$number+" Hiding: "+($number-$prev));
                counter();}
                ,2000);
            
        }
        //-----------------