IOS stuff

ios.js

(function(window) {

    var ios = {

        onload: function() {

        },

        width: 0,
        height: 0,

        profiles: {

            iphone: {
                scale: window.devicePixelRatio,
                width: screen.width * window.devicePixelRatio,
                height: screen.height * window.devicePixelRatio,
                barHeight: 40,
                border: 8
            },

            browser: {
                scale: 1,
                width: 640,
                height: 960,
                barHeight: 0,
                border: 0
            }

        }

    };

    var app = document.getElementById('app'),
        style = document.body.style,
        ua = navigator.userAgent,
        iphone = ~ua.indexOf('iPhone') || ~ua.indexOf('iPod'),
        profile = ios.profiles[iphone ? 'iphone' : 'browser'],
        loaded = false;

    function getOrientation() {

        var orientation = window.orientation;
        orientation = orientation === undefined ? 90 : orientation;
        switch(orientation) {
            case 0:
            case 180:
                return 'portrait';

            case 90:
            case -90:
                return 'landscape';
        }

    }

    function resize() {

        var orientation = getOrientation();

        // Convert portrait mode into landscape
        if (orientation === 'portrait') {

            style.width = (profile.width - profile.border) + 'px';
            style.height = profile.height + 'px';

            app.style.left = (-profile.height / 4) + 'px';
            app.style.top = profile.barHeight + 'px';
            app.style.width = (profile.height - profile.barHeight) + 'px';
            app.style.height = profile.width + 'px';
            app.style.webkitTransform = 'rotate(90deg) translate(140px, -100px) translateZ(0px)';

        // Normal landscape mode
        } else {
            style.width = (profile.height - profile.border) + 'px';
            style.height = profile.width + 'px';

            app.style.left = '0px';
            app.style.top = profile.barHeight + 'px';
            app.style.width = profile.height + 'px';
            app.style.height = (profile.width - profile.barHeight) + 'px';
            app.style.webkitTransform = '';
        }

        ios.width = profile.height;
        ios.height = profile.width;

        if (!loaded) {
            ios.onload(ios.width, ios.height);
            loaded = true;
        }

        var debug = document.getElementById('debug');
        if (debug) {
            debug.innerText = ios.width + 'x' + ios.height + '(' + orientation + ', ' + profile.barHeight + ', ' + window.devicePixelRatio + ')';
        }

    }

    function updateSize() {
        setTimeout(resize, 1);
    }

    window.addEventListener('orientationchange', updateSize, false);

    window.onload = function() {
        updateSize();
    };

    document.body.ontouchmove = function(e) {
        e.preventDefault();
    };

    window.ios = ios;

})(window);