(function() {
    
    var W = this, D = this.document;
    
    if(typeof W.ker == 'undefined') {
        W.ker = {};
    }
    
    var hasVisual, viewport, doc, page, pageH, pageW, pageTop, pageLeft, visual;
    var bgVisualTop = -106, bgVisualLeft = -148;
        
    var positionPage = function(end) {
        var top = 0, left = 0;
        pageTop = pageH < viewport.height ? (viewport.height - pageH) / 2 : 0;
        pageLeft = pageW < viewport.width ? (viewport.width - pageW) / 2 : 0;
        page.css({
            'top': pageTop + 'px',
            'left': pageLeft + 'px'
        });
    };
    
    var sizeVisual = function() {
        if(hasVisual) {
            var bgVisualPos = (pageLeft + bgVisualLeft) + 'px ' + (pageTop + bgVisualTop) + 'px';
            visual
                .height(Math.max(pageH, doc.height))
                .width(Math.max(pageW, viewport.width))
                .css('background-position', bgVisualPos);
            
            var bgBodyTop = 600 - (pageTop + bgVisualTop);
            box.dom(D.body).css('background-position', '0 -' + bgBodyTop + 'px');
        }
    };
    
    W.ker.addVisual = function(url, offsetTop, offsetLeft) {
        if(!isNaN(offsetTop)) {
            bgVisualTop = offsetTop;
        }
        if(!isNaN(offsetLeft)) {
            bgVisualLeft = offsetLeft;
        }
        hasVisual = true;
        
        box.dom(function() {
            var img = new Image();
            box.dom(img).load(function() {
                hasVisual = true;
                visual = box.dom('<div id="visual" style="display:none; background-image:url(' + url + ');"></div>').insertBefore('#page');
                sizeVisual();
                visual.fadeIn(800);
            }).attr('src', url);
        });
    };
    
    box.dom(function() {
        viewport = box.dom(W).getSize();
        doc = box.dom(D).getSize();
        page = box.dom('#page');
        pageH = page.get(0).scrollHeight;
        pageW = page.get(0).scrollWidth;
        positionPage();
    });
    
    box.dom(W).resize(function() {
        viewport = box.dom(W).getSize();
        doc = box.dom(D).getSize();
        positionPage();
        sizeVisual();
    });
    
})();