Apple’s Features.js -- prettified version of http://images.apple.com/v/ipad/a/scripts/features.js

gistfile1.js

AC.AmbientVR = Class.create({
    __defaultOptions: {
        imageIndexOffset: 0,
        initialPos: 0,
        throwable: false,
        invert: false,
        infiniteAxis: false,
        grabRotateDistance: 780,
        allowMobileScroll: true,
        introSpins: 0,
        fps: 30,
        animateToPos: 0,
        showOnScrollOptions: {
            timeInView: 0.25
        },
        onGrabStart: Prototype.emptyFunction,
        onGrabEnd: Prototype.emptyFunction,
        onGotoPos: Prototype.emptyFunction,
        onVisitorEngaged: Prototype.emptyFunction
    },
    initialize: function (k, j, i, m) {
        if (typeof m !== "object") {
            m = {}
        }
        this._options = Object.extend(Object.clone(this.__defaultOptions), m);
        this._element = $(k);
        this._hasAnimated = false;
        this._swipe = this._element.down("command");
        if (typeof this._swipe !== "undefined") {
            if (AC.Detector.isMobile() || AC.Detector.isiPad()) {
                var n = this._swipe.getAttribute("data-label-ios");
                this._swipe.update(n);
                this._swipe.setAttribute("label", n)
            } else {
                this._swipe.update(this._swipe.getAttribute("label"))
            }
        }
        var h = this._element.getElementsBySelector('a[href="#replay"]');
        if (h.length > 0) {
            var l = this.__setupReplay.bind(this);
            h.each(l)
        }
        this._ambient = new AC.Ambient.Content.Scroll.WithThreshold.AndTimer(this._element, this._options);
        this._ambient.setDelegate(this);
        this._vr = new AC.AmbientVR.VR(this._element, j, i, this._options);
        this._vr.setDelegate({
            onGrabStart: this.onGrabStart.bind(this),
            onGrabEnd: this.onGrabEnd.bind(this),
            onGotoPos: this.onGotoPos.bind(this)
        });
        if (this._vr.mobile && this._vr.options.mobileTotalFrames) {
            this._options.animateToPos = Math.floor(this._options.animateToPos / (i / this._options.mobileTotalFrames))
        }
        Object.synthesize(this)
    },
    __setupReplay: function (b) {
        if (typeof this.__boundOnReplayClick !== "function") {
            this.__boundOnReplayClick = this.__onReplayClick.bindAsEventListener(this)
        }
        b.observe("click", this.__boundOnReplayClick)
    },
    __onReplayClick: function (b) {
        b.stop();
        this._vr.gotoPos([this._options.initialPos, 0]);
        this._vr.animateToPos(this._options.animateToPos)
    },
    showSwipe: function (b) {
        if (typeof this._swipe !== "undefined" && typeof b === "object" && Object.isElement(b.container) && this.__neverShowSwipeAgain !== true) {
            b.container.addClassName("show-command")
        }
    },
    hideSwipe: function (b) {
        if (typeof this._swipe !== "undefined" && typeof b === "object" && Object.isElement(b.container) && this.__neverShowSwipeAgain !== true) {
            b.container.removeClassName("show-command");
            this.__neverShowSwipeAgain = true
        }
    },
    showReplays: function (b) {
        if (typeof b === "object" && Object.isElement(b.container)) {
            b.container.addClassName("show-replays")
        }
    },
    hideReplays: function (b) {
        if (typeof b === "object" && Object.isElement(b.container)) {
            b.container.removeClassName("show-replays")
        }
    },
    onGrabStart: function (b) {
        this.hideSwipe(b);
        this._options.onGrabStart.apply(this, [b])
    },
    onGrabEnd: function (b) {
        this._options.onGrabEnd.apply(this, [b])
    },
    onGotoPos: function (d, c) {
        if ((this._options.initialPos < this._options.animateToPos && c[0] >= this._options.animateToPos) || (this._options.initialPos > this._options.animateToPos && c[0] <= this._options.animateToPos)) {
            this.showSwipe(d);
            this.showReplays(d)
        } else {
            this.hideReplays(d)
        }
        this._options.onGotoPos.apply(this, [d, c])
    },
    onVisitorEngaged: function (g, h, e, f) {
        this._options.onVisitorEngaged.apply(this, [this._vr]);
        if (!this._hasAnimated) {
            this._vr.animateToPos(this._options.animateToPos);
            this._hasAnimated = true
        }
    },
    track: function (d) {
        if (typeof this.__analytics === "undefined") {
            this.__analytics = {};
            this.__analytics.pageName = AC.Tracking.pageName()
        }
        var c = Object.extend({
            prop3: this.__analytics.pageName + " - " + d
        }, this.__analytics);
        AC.Tracking.trackClick(c, this, "o", c.prop3)
    }
});
AC.AmbientVR.VR = Class.create(AC.VR, {
    animateToPos: function (b) {
        if (typeof this.animateToInterval !== "undefined") {
            clearInterval(this.animateToInterval)
        }
        this.animateToInterval = setInterval(this._animateToPos.bind(this, b), (1000 / this.options.fps))
    }
});
AC.TrackBackground = Class.create({
    initialize: function (c, d) {
        this._element = $(c);
        this._options = {
            minimumPercentage: 0,
            maximumPercentage: 100,
            anchorTop: false
        };
        Object.extend(this._options, d || {});
        if (!this._element) {
            return
        }
        this._scroll = new AC.ShowOnScroll(c, {
            threshold: 0.85,
            timeInView: 0.5
        });
        this._scroll.setDelegate(this);
        Event.observe(window, "resize", this.onWindowResize.bindAsEventListener(this));
        this._containerHeight = parseInt(this._element.getStyle("height"));
        this._elementOffset = this._element.cumulativeOffset().top;
        this._viewportHeight = document.viewport.getDimensions().height;
        Object.synthesize(this)
    },
    onWindowResize: function () {
        this._viewportHeight = document.viewport.getDimensions().height
    },
    scrolledWhileInView: function (g, j, h) {
        var k = document.viewport.getScrollOffsets().top;
        var i = this._elementOffset - (k - this._viewportHeight);
        var l = (i - (this._containerHeight / 2)) / (this._viewportHeight + this._containerHeight);
        if (this._options.anchorTop) {
            l = Math.min(Math.max(k / this._viewportHeight, 0), 1)
        }
        l = this._options.minimumPercentage + (l * (this._options.maximumPercentage - this._options.minimumPercentage));
        this._element.setStyle({
            backgroundPosition: "0 " + l + "%"
        })
    }
});
AC.TrackBackground.WithGallery = Class.create(AC.TrackBackground, {
    initialize: function ($super, d) {
        $super(d);
        if (!this._element) {
            return
        }
        var f = this._element.getElementsByClassName("gallery-content");
        var e = this._element.down(".gallery-view");
        this._swap = new AC.ViewMaster.Viewer(f, e, e.id, {
            addSectionIdAsClassName: true,
            manageZ: true,
            shouldAnimateFadeIn: true,
            silentTriggers: true,
            animationDuration: 0.6
        });
        this._swap.setDelegate(this)
    },
    scrolledWhileInView: Prototype.emptyFunction,
    visitorEngaged: function (h, g, e, f) {
        if (this._swap.currentSection.id !== this._swap.orderedSections[1]) {
            this._swap.show(this._swap.sectionWithId(this._swap.orderedSections[1]))
        }
    },
    scrolledOutOfView: function (b) {
        if (this._swap.currentSection.id !== this._swap.orderedSections[0]) {
            this._swap.show(this._swap.sectionWithId(this._swap.orderedSections[0]))
        }
    },
    shouldAnimateContentChange: function (e, f, d) {
        if (d && d.id === this._swap.orderedSections[0]) {
            return false
        }
        return true
    }
});
window.requestAnimFrame = (function () {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
    function (b) {
        window.setTimeout(b, 1000 / 60)
    }
})();
AC.BatteryClock = Class.create({
    __defaultOptions: {
        duration: 5,
        radius: 40,
        angleHours: 300,
        angleMinutes: 3600,
        animationTimingFunction: function (h, b, c, d) {
            h /= d / 2;
            if (h < 1) {
                return c / 2 * h * h + b
            }
            h--;
            return -c / 2 * (h * (h - 2) - 1) + b
        },
        fillStyle: "#19E063"
    },
    initialize: function (e, f, d) {
        if ((AC.Detector.isMobile()) || (AC.Detector.isiPad()) || !AC.Detector.supportsThreeD()) {
            return false
        }
        if (typeof d !== "object") {
            d = {}
        }
        this._options = Object.extend(Object.clone(this.__defaultOptions), d);
        this._hasAnimated = false;
        this._elements = {};
        this._elements.container = $(e);
        this.__addImage("http://images.apple.com/v/ipad/a/features/images/clock_background.svg");
        this._elements.hour_hand = this.__addImage("http://images.apple.com/v/ipad/a/features/images/clock_hour.svg");
        this._elements.min_hand = this.__addImage("http://images.apple.com/v/ipad/a/features/images/clock_minute.svg");
        this._elements.container.addClassName("enhanced");
        this._canvas = document.createElement("canvas");
        this._canvas.width = 80;
        this._canvas.height = 80;
        this._elements.container.appendChild(this._canvas);
        this._context = this._canvas.getContext("2d");
        this._showOnScroll = new AC.ShowOnScroll($(f));
        this._showOnScroll.setDelegate(this);
        Object.synthesize(this)
    },
    __addImage: function (c) {
        var d = new Element("img");
        d.src = c;
        this._elements.container.appendChild(d);
        return d
    },
    animate: function () {
        var j = this;
        var m = j._options.duration * 1000;
        var n = 0;
        var l = 0;
        var q = 0;
        var o = 0;
        var p = new Date().getTime();
        var r = {
            x: j._canvas.width / 2,
            y: j._canvas.height / 2
        };
        (function k() {
            if (l < m) {
                j._context.clearRect(0, 0, j._canvas.width, j._canvas.height);
                l = new Date().getTime() - p;
                q = j._options.animationTimingFunction(l, 0, j._options.angleHours, m);
                o = j._options.animationTimingFunction(l, 0, j._options.angleMinutes, m);
                n = (q * Math.PI / 180);
                j._elements.hour_hand.setVendorPrefixStyle("transform", "rotate(" + q + "deg)");
                j._elements.min_hand.setVendorPrefixStyle("transform", "rotate(" + o + "deg)");
                j._context.beginPath();
                j._context.fillStyle = j._options.fillStyle;
                j._context.arc(r.x, r.y, j._options.radius - 0.75, 0, n, false);
                j._context.lineTo(r.x, r.y);
                j._context.fill();
                j._context.closePath();
                requestAnimFrame(k)
            }
        }());
        j._hasAnimated = true
    },
    visitorEngaged: function () {
        if (!this._hasAnimated) {
            this.animate()
        }
    }
});
Event.onDOMReady(function () {
    new AC.BatteryClock("ambient-battery-clock", $$("section.performance .grid3col .last")[0]);
    if (document.getElementsByTagName("command").length > 0) {
        if (!(AC.Detector.isMobile() || AC.Detector.isiPad())) {
            var d = new AC.AmbientVR("ambient-lenses", "http://movies.apple.com/media/us/ipad/2012/camera-extrusion/camera_extrusion_###.jpg", 106, {
                grabbable: false,
                mobileTotalFrames: 53,
                animateToPos: 105,
                onGotoPos: function (b, a) {
                    if ((b.mobile && a[0] >= 41) || (!b.mobile && a[0] >= 82)) {
                        if (this._hasFadedInTickRight !== true) {
                            b.container.up().addClassName("show-tick-right");
                            this._hasFadedInTickRight = true
                        }
                    } else {
                        if (this._hasFadedInTickRight === true) {
                            b.container.up().removeClassName("show-tick-right");
                            this._hasFadedInTickRight = false
                        }
                    }
                    if ((b.mobile && a[0] >= 28) || (!b.mobile && a[0] >= 56)) {
                        if (this._hasFadedInTickLeft !== true) {
                            b.container.up().addClassName("show-tick-left");
                            this._hasFadedInTickLeft = true
                        }
                    } else {
                        if (this._hasFadedInTickLeft === true) {
                            b.container.up().removeClassName("show-tick-left");
                            this._hasFadedInTickLeft = false
                        }
                    }
                    if ((this._options.initialPos < this._options.animateToPos && a[0] >= this._options.animateToPos) || (this._options.initialPos > this._options.animateToPos && a[0] <= this._options.animateToPos)) {} else {
                        if (a[0] === 0) {
                            if (this.__trackStart === "replay") {
                                this.track("vr - lens - replay")
                            }
                        }
                    }
                },
                onVisitorEngaged: function (b, a) {
                    if (!this._hasAnimated) {
                        this.track("vr - lens - start")
                    }
                    this.__trackStart = "replay"
                }
            })
        }
        if (!(AC.Detector.isiPad() || AC.Detector.isMobile())) {
            var e = new AC.AmbientVR("ambient-smartcover", "http://movies.apple.com/media/us/ipad/2012/smart-cover/features/smartcover_###.jpg", 46, {
                initialPos: 45,
                animateToPos: 0,
                onGrabStart: function (a) {
                    if (this.__trackedInteracted !== true) {
                        this.track("vr - smartcover - interacted");
                        this.__trackedInteracted = true
                    }
                },
                onGrabEnd: function (a) {
                    if (a.currentPos[0] <= 14) {
                        a.animateToPos(0)
                    } else {
                        if (a.currentPos[0] <= 22) {
                            a.animateToPos(19)
                        } else {
                            a.animateToPos(45)
                        }
                    }
                }
            });
            var f = e.element();
            if (typeof f === "object" && Object.isElement(f)) {
                f.addClassName("active")
            }
        }
    }
    if ((!(AC.Detector.isMobile() || AC.Detector.isiPad())) && ((!AC.Detector.isIE()) || AC.Detector.isIE8())) {
        new AC.TrackBackground("ambient-hero-bg", {
            anchorTop: true,
            maximumPercentage: 50
        });
        new AC.TrackBackground("ambient-camera-bg");
        new AC.TrackBackground("ambient-wireless-bg")
    }
    if (!(AC.Detector.isMobile() || AC.Detector.isiPad())) {
        new AC.TrackBackground.WithGallery("ambient-airplay-bg")
    } else {
        $("gallery-airplay").setStyle("display:none");
        $("gallery-airplay-second").setStyle("display:block")
    }
});