var cursor = {
    delay: 3,
    _x: 0,
    _y: 0,
    endx: (window.innerwidth / 2),
    endy: (window.innerheight / 2),
    cursorvisible: true,
    cursorenlarged: false,
    $outline: document.queryselector('.cursor-dot'),
    init: function() {
        // set up element sizes
        this.outlinesize = this.$outline.offsetwidth;
        
        this.setupeventlisteners();
        this.animatedotoutline();
    },
    setupeventlisteners: function() {
        var self = this;
        // anchor hovering
        var hoveitems = document.queryselectorall('a,.js-chover');
          hoveritems = array.prototype.slice.call(hoveitems);
          hoveritems.foreach(function(el) {
            el.addeventlistener('mouseover', function() {
                self.cursorenlarged = true;
                self.togglecursorsize(el);
            });
            el.addeventlistener('mouseout', function() {
                self.cursorenlarged = false;
                self.togglecursorsize();
            });
        });
        var hoveitemscolor = document.queryselectorall('.js-chovercolor');
          hoveitemscolor = array.prototype.slice.call(hoveitemscolor);
          hoveitemscolor.foreach(function(el) {
            el.addeventlistener('mouseover', function() {
                self.cursorenlarged = true;
                self.$outline.style.background = 'rgba(0,0,0,0.5)';
            });
            el.addeventlistener('mouseout', function() {
                self.cursorenlarged = false;
                self.$outline.style.background = 'rgba(255,255,255,0.5)';
            });
        });
        
        // click events
        document.addeventlistener('mousedown', function() {
            self.cursorenlarged = true;
            self.togglecursorsize();
        });
        document.addeventlistener('mouseup', function() {
            self.cursorenlarged = false;
            self.togglecursorsize();
        });
  
        document.addeventlistener('mousemove', function(e) {
            // show the cursor
            self.cursorvisible = true;
            self.togglecursorvisibility();

            // position the dot
            self.endx = e.clientx;
            self.endy = e.clienty;
        });
        
        // hide/show cursor
        document.addeventlistener('mouseenter', function(e) {
            self.cursorvisible = false;
            self.togglecursorvisibility();
            self.$outline.style.opacity = 1;
        });
        
        document.addeventlistener('mouseleave', function(e) {
            self.cursorvisible = false;
            self.togglecursorvisibility();
            self.$outline.style.opacity = 0;
            
        });
    },
    
    animatedotoutline: function() {
        var self = this;
        
        self._x += (self.endx - self._x) / self.delay;
        self._y += (self.endy - self._y) / self.delay;
        
          self.$outline.style.left = self._x + 'px';
        
        
          self.$outline.style.top = self._y + 'px';
        
        requestanimationframe(this.animatedotoutline.bind(self));
    },
    
    togglecursorsize: function(el) {
        var self = this;
        
        if (self.cursorenlarged) {
            self.$outline.style.transform = 'translate(-50%, -50%)';
            self.$outline.style.width = '32px';
            self.$outline.style.height = '32px';
        } else {
            self.$outline.style.transform = 'translate(-50%, -50%)';
            self.$outline.style.width = '8px';
            self.$outline.style.height = '8px';
        }
    },
    
    togglecursorvisibility: function() {
        var self = this;
        
        if (self.cursorvisible) {
            self.$outline.style.opacity = 1;
        } else {
            self.$outline.style.opacity = 0;
        }
    }
}
cursor.init();

$('iframe,.nocursordot').hover(function(){
    $('.cursor-dot').hide();
},function(){
    $('.cursor-dot').show();
});