Mirror of Mcvities site snuggler so it works over https http://www.mcvities.co.uk/extras/site-snuggler

site-snuggler.js

    if(window.SNUGGLE) { SNUGGLE.snug(); }

    window.SNUGGLE || (function(window){

    window.SNUGGLE = {
        snug: function(){
            var viewportWidth  = document.documentElement.clientWidth,
              viewportHeight = document.documentElement.clientHeight;

            var body = document.getElementsByTagName('body');
            document.body.innerHTML +='<div id="mcvities_snuggletWrapper"><div id="mcvities_catWrapper"><div id="mcvities_cat" class="paw animate"><div id="mcvities_catpaw"></div><div id="mcvities_claw"></div></div></div></div><iframe id="snugglet_frame" src="//www.mcvities.co.uk/bookmarklets/bookmarklet1.html" ></iframe>';

            var wrapper = document.getElementById("mcvities_catWrapper"),
            pic = document.getElementById("mcvities_cat"),
            claw = document.getElementById("mcvities_claw");

            var browser = navigator.userAgent,
            browser_name = 'Unknown';

            if ( browser.indexOf( 'MSIE' ) !== -1 ) {
                browser_name = 'Microsoft Internet Explorer';
            }
            else if ( browser.indexOf( 'Firefox' ) !== -1 ) {
                browser_name = 'Mozilla Firefox';
            }
            else if ( browser.indexOf( 'Chrome' ) !== -1 ) {
                browser_name = 'Google Chrome';
            }
            else if ( browser.indexOf( 'Safari' ) !== -1 ) {
                browser_name = 'Apple Safari';
            }
            else if ( browser.indexOf( 'Opera/9' ) !== -1 ) {
                browser_name = 'Opera';
            }

            var addClass = function(el, thingy){
                el.className += ' '+thingy;   
            }

            var removeClass = function(el, thingy){
                var elClass = ' '+el.className+' ';
                while(elClass.indexOf(' '+thingy+' ') != -1)
                     elClass = elClass.replace(' '+thingy+' ', ' ');
                el.className = elClass;
            }

            var translate = function(x,y, target) {
                if(browser_name == 'Google Chrome'){
                    target.style.WebkitTransform = 'translateX(' + x + 'px) translateY(' + y + 'px)';
                } 
                else if(browser_name == 'Mozilla Firefox') {
                    target.style.MozTransform = 'translateX(' + x + 'px) translateY(' + y + 'px)';
                }
                else if(browser_name == 'Opera') {
                    target.style.OTransform = 'translateX(' + x + 'px) translateY(' + y + 'px)';
                }
                else if(browser_name == 'Microsoft Internet Explorer') {
                    target.style.msTransform = 'translateX(' + x + 'px) translateY(' + y + 'px)';
                    console.log("IE")
                }
                else {
                    target.style.transform = 'translateX(' + x + 'px) translateY(' + y + 'px)';
                }
            }

            pos = {
                x: 0,
                y: 0,
                resetPos: function() {
                    translate(0, 0, wrapper);
                },
                upDatepos: function() {
                    translate(this.x, -(viewportHeight-this.y), wrapper);
                },
                changePos: function(new_x, new_y) {
                    if ((typeof new_x) != "undefined") {
                        this.x = new_x;
                    }
                    if ((typeof new_y) != "undefined") {
                        this.y = new_y;
                    }
                    this.upDatepos();
                },
            }

            mousePos = {
                mouseX: 0,
                mouseY: viewportHeight-500
            }

            document.body.addEventListener("mousemove", function(e) {
                var next_x = mousePos.mouseX,
                next_y = mousePos.mouseY;
                addClass(pic, "catPawActivated");
                if((viewportWidth / 3) * 2 < e.clientX) {
                    removeClass(pic, "left");
                    addClass(pic, "right");
                    mousePos.mouseX = e.clientX;
                    if((viewportHeight - e.clientY) < 626) {
                        mousePos.mouseY = e.clientY+100;
                    }
                    
                }
                else if((viewportWidth / 3) < e.clientX) {
                    removeClass(pic, "left");
                    removeClass(pic, "right");
                    mousePos.mouseX = e.clientX;
                    if((viewportHeight - e.clientY) < 626) {
                        mousePos.mouseY = e.clientY+100;
                    }

                } else {
                    removeClass(pic, "right");
                    addClass(pic, "left");
                    mousePos.mouseX = e.clientX;
                    if((viewportHeight - e.clientY) < 626) {
                        mousePos.mouseY = e.clientY+100;
                    }
                }
                pos.changePos(next_x, next_y);
                
            }, false);

            document.body.addEventListener("mousedown", function(e) {
                if((viewportWidth / 3) * 2 < e.clientX) {
                    setTimeout(function(){
                            removeClass(pic, "tap_right");
                            removeClass(claw, "bigger");
                        },400);
                        addClass(claw, "bigger");
                        addClass(pic, "tap_right");
                }
                else if(((viewportWidth / 3) < e.clientX) && ((viewportWidth / 3) * 2 > e.clientX)) {
                    setTimeout(function(){
                            removeClass(pic, "tap_center");
                            removeClass(claw, "bigger");
                        },400);
                        addClass(claw, "bigger");
                        addClass(pic, "tap_center");

                } else {
                    setTimeout(function(){
                            removeClass(pic, "tap_left");
                            removeClass(claw, "bigger");
                        },400);
                        addClass(claw, "bigger");
                        addClass(pic, "tap_left");
                }
            }, false);
        }
    };

    SNUGGLE.snug();

}).call({},window);