마우스를 따라가는 시계 [브라우저 간 지원]

(function(){
    var document = window.document;
    var scrollTop = document.body.scrollTop;
    
    var addHandler = document.body.addEventListener ? w3cAddEvent : ieAddEvent;
    var removeHandler = document.body.removeEventListener ? w3cRemoveEvent : ieRemoveEvent;
    
    var daysArray = ["SUNDAY", "MONDAY", "TUESDAY", "WEDNESDAY", "THURSDAY", "FRIDAY", "SATURDAY"];
    var monthsArray = ["JANUARY", "FEBRUARY", "MARCH", "APRIL", "MAY", "JUNE", "JULY", "AUGUST", "SEPTEMBER", "OCTOBER", "NOVEMBER", "DECEMBER"];
    
    function $$(selector){
        return document.querySelectorAll(selector);
    }
    
    function getById(id){
        return document.getElementById(id);
    }
    
    function w3cAddEvent(target, eventType, handler){
        target.addEventListener(eventType, handler, false);
    }
    
    function ieAddEvent(target, eventType, handler){
        target.attachEvent("on" + eventType, handler);
    }
    
    function w3cRemoveEvent(target, eventType, handler){
        target.removeEventListener(eventType, handler, false);
    }
    
    function ieRemoveEvent(target, eventType, handler){
        target.detachEvent("on" + eventType, handler);
    }
    
    function isIE(){
        return navigator.userAgent.indexOf('MSIE') !== -1;
    };
    
    function Clock(options){
        options = options ||
        {};
        
        var dateColor = options.dateColor || '#000000';
        var faceColor = options.faceColor || '#000000';
        var secondsColor = options.secondsColor || '#00ff00';
        var minutesColor = options.minutesColor || '#0000ff';
        var hoursColor = options.hoursColor || '#ff0000';
        
        var i, len;
        var todaysArray = null;
        var face = null;
        var hours = null;
        var minutes = null;
        var seconds = null;
        
        var split = null;
        var dsplit = null;
        var y, x, Y, X, Dx, Dy, DX, DY;
        
        //constants
        var clockHeight = 40;
        var clockWidth = 40;
        var clockFromMouseY = 0;
        var clockFromMouseX = 100;
        
        var font = 'Arial';
        var size = 1;
        var dim = {};
        dim.width = size * 10;
        dim.height = size * 10;
        var speed = 0.6;
        
        var ymouse = 0;
        var xmouse = 0;
        
        var handHeight = clockHeight / 4.5
        var handWidth = clockWidth / 4.5
        var handY = -7;
        var handX = -2.5;
        var step = 0.06;
        var currStep = 0;
        
        function init(){
            todaysArray = getTodaysCharArray();
            faces = getFacesCharArray();
            hours = getHhoursCharArray();
            minutes = getMinutesCharArray();
            seconds = getSecondsCharArray();
            split = 360 / faces.length;
            dsplit = 360 / todaysArray.length;
            initAllArray();
            draw();
        }
        
        function initAllArray(){
            y = [];
            x = [];
            Y = [];
            X = [];
            for (i = 0, len = faces.length; i < len; i++) {
                y[i] = 0;
                x[i] = 0;
                Y[i] = 0;
                X[i] = 0
            }
            Dy = [];
            Dx = [];
            DY = [];
            DX = [];
            for (i = 0, len = todaysArray.length; i < len; i++) {
                Dy[i] = 0;
                Dx[i] = 0;
                DY[i] = 0;
                DX[i] = 0;
            }
        }
        
        function getTodaysCharArray(){
            var date = new Date();
            var day = date.getDate();
            var year = date.getYear();
            if (year < 2000) 
                year = year + 1900;
            var todaysDate = " " + daysArray[date.getDay()] + " " + day + " " + monthsArray[date.getMonth()] + " " + year;
            return todaysDate.split('');
        }
        
        function getFacesCharArray(){
            return '1 2 3 4 5 6 7 8 9 10 11 12'.split(' ');
        }
        
        function getHhoursCharArray(){
            return '...'.split('');
        }
        
        function getMinutesCharArray(){
            return '....'.split('');
        }
        
        function getSecondsCharArray(){
            return '.....'.split('');
        }
        
        function buildTodays(){
            var props2 = "<font face=" + font + " size=" + size + " color=" + dateColor + "><B>";
            var html = [];
            for (i = 0, len = todaysArray.length; i < len; i++) 
                html.push('<div class="cDates" style="position:absolute;top:0px;left:0;height:' + dim.height + ';width:' + dim.width + ';text-align:center">' + props2 + todaysArray[i] + '</B></font></div>');
            return html.join('');
        }
        
        function buildFaces(){
            var props = "<font face=" + font + " size=" + size + " color=" + faceColor + "><B>";
            var html = [];
            for (i = 0, len = faces.length; i < len; i++) 
                html.push('<div class="cFaces" style="position:absolute;top:0px;left:0;height:' + dim.height + ';width:' + dim.width + ';text-align:center">' + props + faces[i] + '</B></font></div>');
            return html.join('');
        }
        
        function buildHours(){
            var html = [];
            for (i = 0, len = hours.length; i < len; i++) 
                html.push('<div class="cHours" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:' + hoursColor + ';text-align:center;font-weight:bold">' + hours[i] + '</div>');
            return html.join('');
        }
        
        function buildMinutes(){
            var html = [];
            for (i = 0, len = minutes.length; i < len; i++) 
                html.push('<div class="cMinutes" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:' + minutesColor + ';text-align:center;font-weight:bold">' + minutes[i] + '</div>');
            return html.join('');
        }
        
        function buildSeconds(){
            var html = [];
            for (i = 0, len = seconds.length; i < len; i++) 
                html.push('<div class="cSeconds" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:' + secondsColor + ';text-align:center;font-weight:bold">' + seconds[i] + '</div>');
            return html.join('');
        }
        
        function buildClockFace(){
            var html = [];
            html.push('<div id="Od" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
            html.push(buildTodays());
            html.push('</div></div>');
            html.push('<div id="Of" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
            html.push(buildFaces());
            html.push('</div></div>');
            html.push('<div id="Oh" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
            html.push(buildHours());
            html.push('</div></div>');
            html.push('<div id="Om" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
            html.push(buildMinutes());
            html.push('</div></div>')
            html.push('<div id="Os" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
            html.push(buildSeconds());
            html.push('</div></div>')
            return html.join('');
        }
        
        function setCFacesPos(){
            getById("Of").style.top = scrollTop + 'px';
            
            var cFaces = $$(".cFaces");
            var cface;
            for (i = 0, len = cFaces.length; i < len; i++) {
                cface = cFaces[i];
                cface.style.top = y[i] + clockHeight * Math.sin(-1.0471 + i * split * Math.PI / 180) + 'px';
                cface.style.left = x[i] + clockWidth * Math.cos(-1.0471 + i * split * Math.PI / 180) + 'px';
            }
        }
        
        function setCHoursPos(hrs){
            getById("Oh").style.top = scrollTop + 'px';
            
            var cHours = $$(".cHours");
            var cHour;
            for (i = 0, len = cHours.length; i < len; i++) {
                cHour = cHours[i];
                cHour.style.top = y[i] + handY + (i * handHeight) * Math.sin(hrs) + 'px';
                cHour.style.left = x[i] + handX + (i * handWidth) * Math.cos(hrs) + 'px';
            }
        }
        
        function setCMinutesPos(min){
            getById("Om").style.top = scrollTop + 'px';
            
            var cMinutes = $$(".cMinutes");
            var cMinute;
            for (i = 0, len = cMinutes.length; i < len; i++) {
                cMinute = cMinutes[i];
                cMinute.style.top = y[i] + handY + (i * handHeight) * Math.sin(min) + 'px';
                cMinute.style.left = x[i] + handX + (i * handWidth) * Math.cos(min) + 'px';
            }
        }
        
        function setCSecondsPos(sec){
            getById("Os").style.top = scrollTop + 'px';
            
            var cSeconds = $$(".cSeconds");
            var cSecond;
            for (i = 0, len = cSeconds.length; i < len; i++) {
                cSecond = cSeconds[i];
                cSecond.style.top = y[i] + handY + (i * handHeight) * Math.sin(sec) + 'px';
                cSecond.style.left = x[i] + handX + (i * handWidth) * Math.cos(sec) + 'px';
            }
        }
        
        function setCDatesPos(){
            getById("Od").style.top = scrollTop + 'px';
            
            var cDates = $$(".cDates");
            var cDate;
            for (i = 0, len = cDates.length; i < len; i++) {
                cDate = cDates[i];
                cDate.style.top = Dy[i] + clockHeight * 1.5 * Math.sin(currStep + i * dsplit * Math.PI / 180) + 'px';
                cDate.style.left = Dx[i] + clockWidth * 1.5 * Math.cos(currStep + i * dsplit * Math.PI / 180) + 'px';
            }
            
            currStep -= step;
        }
        
        function clockAndAssign(){
            var time = new Date();
            var secs = time.getSeconds();
            var sec = -1.57 + Math.PI * secs / 30;
            var mins = time.getMinutes();
            var min = -1.57 + Math.PI * mins / 30;
            var hr = time.getHours();
            var hrs = -1.575 + Math.PI * hr / 6 + Math.PI * parseInt(time.getMinutes()) / 360;
            
            setCFacesPos();
            setCHoursPos(hrs);
            setCMinutesPos(min);
            setCSecondsPos(sec);
            setCDatesPos();
        }
        
        function delay(){
            Dy[0] = Math.round(DY[0] += ((ymouse) - DY[0]) * speed);
            Dx[0] = Math.round(DX[0] += ((xmouse) - DX[0]) * speed);
            for (i = 1, len = todaysArray.length; i < len; i++) {
                Dy[i] = Math.round(DY[i] += (Dy[i - 1] - DY[i]) * speed);
                Dx[i] = Math.round(DX[i] += (Dx[i - 1] - DX[i]) * speed);
            }
            y[0] = Math.round(Y[0] += ((ymouse) - Y[0]) * speed);
            x[0] = Math.round(X[0] += ((xmouse) - X[0]) * speed);
            for (i = 1, len = faces.length; i < len; i++) {
                y[i] = Math.round(Y[i] += (y[i - 1] - Y[i]) * speed);
                x[i] = Math.round(X[i] += (x[i - 1] - X[i]) * speed);
            }
            clockAndAssign();
        }
        
        function draw(){
            document.body.innerHTML += buildClockFace();
            return this;
        }
        
        function start(){
            addHandler(document, "mousemove", function(e){
                e = e || window.event;
                ymouse = !isIE() ? e.pageY + clockFromMouseY : e.y + clockFromMouseY;
                xmouse = !isIE() ? e.pageX + clockFromMouseX : e.x + clockFromMouseX;
            });
            
            addHandler(window, "load", function(e){
                window.clockTimer = setInterval(delay, 20);
            });
            
            return this;
        }
        
        function stop(){
            clearInterval(window.clockTimer);
            return this;
        }
        
        init();
        
        return {
            draw: draw,
            start: start,
            stop: stop
        };
    }
    
    window.Clock = Clock;
})();

Clock().start();