JavaScript: Kiosk Next/Previous Buttons

by sjmcpherson

CSS

.kioskBtn{width:100px;height:100px;background-color:#ccc;position:absolute;top:0;opacity:0.7;}
.kioskBtn:hover{opacity:1;cursor:pointer;}

.kioskPrevBtn{left:0;border-radius:0 0 50% 0;}
.kioskNextBtn{right:0;border-radius:0 0 0 50%;}

.kioskBtn:before{content:"";width:0;height:0;display:block;position:absolute;left:35%;right:35%;top:20%;}

.kioskPrevBtn:before{border-top: 25px solid transparent;border-bottom: 25px solid transparent;border-right: 25px solid #fff;}
.kioskNextBtn:before{border-top: 25px solid transparent;border-bottom: 25px solid transparent;border-left: 25px solid #fff;}

JavaScript

KioskWidget = {
   capturing:false,
   body:document.body,
   delayAfterActivty:50000,//milliseconds;
   activityCheckTime:10000,//milliseconds;
   init: function() {
       if (window.history.length > 1){
            this.setupButtons();
       }
       //Start Activity Check
       setTimeout(this.setMouseCheck,this.activityCheckTime);
   },
   setupButtons: function(){ 
        var leftBtn = document.createElement("div"), rightBtn = document.createElement("div");
        leftBtn.id = "kioskPrevBtn";
        rightBtn.id = "kioskNextBtn";
        
        leftBtn.className = "kioskBtn kioskPrevBtn";
        rightBtn.className = "kioskBtn kioskNextBtn";
        
        this.body.insertBefore(leftBtn, this.body.firstChild);
        this.body.insertBefore(rightBtn, this.body.firstChild);
    
        if (kioskPrevBtn.addEventListener) {
          kioskPrevBtn.addEventListener('click', this.prevClick, false); 
          kioskNextBtn.addEventListener('click', this.nextClick, false);   
        } else if (kioskPrevBtn.attachEvent)  {        
          kioskPrevBtn.attachEvent('onclick', this.prevClick);
          kioskNextBtn.attachEvent('onclick', this.nextClick);
        }    
   },    
   prevClick: function(){
        window.history.back();    
   },
   nextClick: function(){
        window.history.forward(); 
   },
   setMouseCheck: function(){        
            if (window.addEventListener) { 
                        window.addEventListener ("mousemove", this.ActivityRecorded, true);
                        console.log('capturing = true');
                        setTimeout(this.NoActivityRecorded,this.delayAfterActivty);
            }
    },
    ActivityRecorded: function(){
        clearTimeout(this.NoActivityRecorded);
        window.removeEventListener ("mousemove", this.ActivityRecorded, true);
        console.log('capturing = false');
        setTimeout(this.setMouseCheck,this.activityCheckTime);
    },
    NoActivityRecorded: function(){
       ...