uki 1.1.1 → 1.1.2

data/frameworks/uki/src/uki-theme/airport.js

@@ -1,50 +1,60 @@
 (function() {
-    var defaultCss = 'position:absolute;z-index:100;-moz-user-focus:none;font-family:Arial,Helvetica,sans-serif;';
-    
+    var defaultCss = 'position:absolute;z-index:100;-moz-user-focus:none;font-family:Arial,Helvetica,sans-serif;',
+        reflex     = '<div style="position:absolute;z-index:1;left:1px;bottom:0px;right:1px;height:1px;overflow:hidden;background:rgba(255,255,255,0.4)"></div>';
+
     uki.theme.airport = uki.extend({}, uki.theme.Base, {
         imagePath: '/src/uki-theme/airport/i/',
         
         backgrounds: {
             // basic button
             'button-normal': function() {
-                var prefix = "button/normal-";
-                return new uki.background.Sliced9({
-                    c: [u(prefix + "c.png"), "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAS0lEQVQIW2NgAILy8vL/yJgBJrh+/fr/MABigyVBxN9//1EwXGLGrDn/j5++9P/G7Qf/t+/YBZEA6k5LTU39j4xBYmB7QAxkDBIDALKrX9FN99pwAAAAAElFTkSuQmCC", u(prefix + "c.gif")],
-                    v: [u(prefix + "v.png"), "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAATCAYAAACz13xgAAAAT0lEQVQYlZXPMQ6AQAhE0b9m78zZFca1sdEwxZLQ8MIQiIh1XuvTEbEmQOnmXxNAVT2UB5komY1MA5KNys3jHlyUtv+wNzhGDwMDzfyFRh7wcj5EWWRJUgAAAABJRU5ErkJggg==", false, true],
-                    h: [u(prefix + "h.png"), "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAH8AAAAGCAYAAADqkEEaAAAAMklEQVRIie3DUQ0AIAxDwZodFmaVhB+MjIeQ9pJTd5OeRdjSPEjP2ueSnlVVpGcBKz1/kUWrDOOOWIQAAAAASUVORK5CYII=", u(prefix + "h.gif")],
-                    m: [u(prefix + "m.png"), "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAH8AAAATCAYAAAC5i9IyAAAAXklEQVQYGe3BgRHDMAACsXeP/fdtDUkHAUnf3/syleQ8TCfFZjrJNtNJdphOSsx00r1mOikJ00nJZTrJDtNJdphOci7TSXGYTkrMdJIdppP4HKaTDofpJA5TSnCYTn/FLC2twbqbSQAAAABJRU5ErkJggg==", null, true]
-                }, '3 3 3 3', { inset: '0 0 -1 0'});
+                return new uki.background.LinearGradient({
+                    startColor: '#FDFEFF',
+                    stops: [ 
+                        { pos: 0.15, color: '#F5F7FD' },
+                        { pos: 0.8, color: '#C9CACF' }
+                    ],
+                    endColor: '#C7CBD2',
+                    innerHTML: reflex,
+                    css: 'border:1px solid #666;border-radius:3px;box-shadow:0 1px 0 rgba(255,255,255,0.5);'
+                });
             },
             
             'button-hover': function() {
-                var prefix = "button/hover-";
-                return new uki.background.Sliced9({
-                    c: [u(prefix + "c.png"), "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAS0lEQVQIW2NgAILy8vL/yJgBJrh+/fr/MABigyVBxN9//1EwXGL+wqX/b9579v/Ji3f/9+w9AJEA6m5ITU39j4xBYmB7QAxkDBIDAN/zYPRpDtd1AAAAAElFTkSuQmCC", u(prefix + "c.gif")],
-                    v: [u(prefix + "v.png"), "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAATCAYAAACz13xgAAAAT0lEQVQY062PMQ7AIAwDj8Kf83gw7tKlhQxItZTp5EtCRLh3vyYi3AA0J980gJmBoayh31S290DS4Q4pUzlTjdOr0j9KLXvAanrAWuAiyQ2Hqz+Eaxa7lwAAAABJRU5ErkJggg==", false, true],
-                    h: [u(prefix + "h.png"), "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAH8AAAAGCAYAAADqkEEaAAAAM0lEQVRIS+3DsREAIAwDMS+bGdIyLAUVG4RnEFt3UneTnkXY0jxIz9rnkp5VVaRnASs9f4uJy0upJnsYAAAAAElFTkSuQmCC", u(prefix + "h.gif")],
-                    m: [u(prefix + "m.png"), "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAH8AAAATCAYAAAC5i9IyAAAAXElEQVQYGe3BgRHAMAABQLnaf+EEHYR/3ptgKlE2phNtYzrxyZhOtIzpRNuYTnwyphOTYDpREqYTbWM6UQqmExVhOtHPmE5MgunEJ2M68XwH04kIphRxMKWIqfUDGFEu5jKnhiUAAAAASUVORK5CYII=", null, true]
-                }, "3 3 3 3", { inset: '0 0 -1 0'});
+                return new uki.background.LinearGradient({
+                    startColor: '#FFFFFF',
+                    stops: [ 
+                        { pos: 0.7, color: '#D7DAE4' }
+                    ],
+                    endColor: '#D9DEE6',
+                    innerHTML: reflex,
+                    css: 'border:1px solid #666;border-radius:3px;box-shadow:0 1px 0 rgba(255,255,255,0.5);'
+                });
             },
 
             'button-down': function() {
-                var prefix = "button/down-";
-                return new uki.background.Sliced9({
-                    c: [u(prefix + "c.png"), "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAR0lEQVQIW2NgAIKGhob/yJgBJlhQUPg/JTUDjEFssCSIyC8o+l9b1wjGIDZcoq9v4v9tO/aDMYiNYhyGHSDw////NGQMEgMAouBOxXrB3FIAAAAASUVORK5CYII=", u(prefix + "c.gif")],
-                    v: [u(prefix + "v.png"), "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAATCAYAAACz13xgAAAAkUlEQVQYV42Nuw4CMQwEHT9ojvvnNPTQ8LfIeH3BmKuwNMomI294zulz3vz+eCbIeGOK2a4b7fueIGNSmF1IRBPkEqxMYpIgl1A2UllE/m5IbCyQS4hEjS4iN6FHXYDcBCokkV7FrYp7lcXFVA+6oME0xkiQS3weS9YGj19q48QfVbQ+zY+b4BMlXu7kcfrKmDdNVhnN3VjMVQAAAABJRU5ErkJggg==", false, true],
-                    h: [u(prefix + "h.png"), "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAH8AAAAGCAYAAADqkEEaAAAARklEQVQYGe3BsQ2AQAwDQNvD0oCYIQ0UbIVExVDxDxLfsaqMGIn7cVoSYpbuBq/7sSTELN0Nvt9vgohZDINVZcRItL0hRloovBiO+VNuegAAAABJRU5ErkJggg==", u(prefix + "h.gif")],
-                    m: [u(prefix + "m.png"), "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAH8AAAATCAYAAAC5i9IyAAAAa0lEQVQYGe3BsREDQQwDseWJF/n7n3lH7lQuhAT8fn8rUWF2wc/zQRKVZXexfalMnjtUJnsulckzQ2XyeKhM9lwqk2eGyuTxUJl8bSqTpUNlsiQqkzmiMllUKkuiMhkdKpMPlcoLSKKy7C5/du0Mt289U6QAAAAASUVORK5CYII=", null, true]
-                }, "3 3 3 3", { inset: '0 0 -1 0'});
+                return new uki.background.LinearGradient({
+                    startColor: '#9C9DA1',
+                    stops: [ 
+                        { pos: 0.6, color: '#C5C7CD' }
+                    ],
+                    endColor: '#CCCFD6',
+                    css: 'border:1px solid #666;border-radius:3px;box-shadow:inset 0 1px 3px rgba(0,0,0,0.5);'
+                });
             },
             
             'button-focus': function() {
-                if (uki.image.needAlphaFix) return new uki.background.CssBox('filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=3);background:#7594D2;', { inset: '-5 -5 -4 -5', zIndex: -2 } );
-                
-                var prefix = "button/focusRing-";
-                return new uki.background.Sliced9({
-                    c: [u(prefix + "c.png"), "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAtUlEQVQokWNgQABGBof9LNqhq9hkQo9xgjCIDRIDy6GA0FXMKp7b2NX9jvCqJB4S1Y47IgfCIDZYDCgHUgM3GSSgkLBfQCfxoKxO3Ak93fijdiAMYoPEQHJgTWCbgFaCTAFJ6MafMNZNPOGvl3AiC4RBbJAYSA6kBuw8kDtBVoNNBis+WQWzGsQGiYHkwE4F+QnsOaB7QU4AmcqABsA2AeVAakBqSddAspNI9jTpwUpGxJGUNADqMZr1BXNgDAAAAABJRU5ErkJggg=="],
-                    v: [u(prefix + "v.png"), "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAUCAYAAAC58NwRAAAAf0lEQVQoU2MQj93JrZlwQlUn/qS3TsLJegY0ABIDyYHUgNQyqPsd4dWJPa6pl3giRDfxeB+6BpAYSA6kBqSWQSl0N79m7FEdvcSTkUA8DV0DSAwkB1IDUgvWoBN3Qk83/ni0buKJGegaQGIgOZCaUQ2jGgZeA0nJm+QMRGoWBQCeEP1BW4HCpgAAAABJRU5ErkJggg=="],
-                    h: [u(prefix + "h.png"), "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACsAAAAMCAYAAAD79EROAAAAOUlEQVRIx2NQCt3NP1Qwg3rkCb2hghl0o45HDxXMoJNwYsZQwQyjYBQMNTCkMtiQKrqGVKUwlKpbALcNHad+5qhBAAAAAElFTkSuQmCC"]
-                }, "6 6 6 6", { inset: '-4 -4 -4 -4', zIndex: 2 });
+                if (uki.browser.cssBoxShadow() == 'unsupported') {
+                    return new uki.background.CssBox( 
+                        'background:#7594D2;' + (uki.browser.cssFilter() && uki.image.needAlphaFix ? 'filter:Alpha(opacity=70);' : 'opacity:0.7;'), 
+                        { inset: '-2 -2', zIndex: -2 } 
+                    );
+                }
+                return new uki.background.Css({ 
+                    // WebkitTransition: '-webkit-box-shadow 0.2s linear',
+                    boxShadow: '0 0 6px #0244D4',
+                    borderRadius: '3px'
+                });
             },
             
             'button-disabled': function() {
@@ -81,10 +91,15 @@
             },
             
             'checkbox-focus': function() {
-                var src = uki.theme.imageSrc('checkbox-focus');
+                if (uki.image.needAlphaFix) {
+                    return new uki.background.CssBox('', 
+                        { innerHTML: '<div style="position:absolute;left:50%;top:50%;width:19px;height:19px;overflow:hidden;' +
+                        'margin:-10px 0 0 -10px;background:#7594D2;filter:Alpha(opacity=70);"></div>', zIndex: -2  }
+                    );
+                }
                 return new uki.background.CssBox('', 
                     { innerHTML: '<div style="position:absolute;left:50%;top:50%;width:24px;height:24px;overflow:hidden;' +
-                    'margin:-12px 0 0 -12px; background: url(' + src + ') 0 0"></div>', zIndex: -2  }
+                    'margin:-12px 0 0 -12px; background: url(' + uki.theme.imageSrc('checkbox-focus') + ') 0 0"></div>', zIndex: -2  }
                 );
             },
             
@@ -115,6 +130,7 @@
             },    
             
             'radio-focus': function() {
+                if (uki.image.needAlphaFix) return uki.theme.airport.background('checkbox-focus');
                 var src = uki.theme.imageSrc('radio-focus');
                 return new uki.background.CssBox('', 
                     { innerHTML: '<div style="position:absolute;left:50%;top:50%;width:24px;height:24px;overflow:hidden;' +
@@ -150,80 +166,116 @@
             },
             
             'toolbar-popup-button-hover': function() {
-                return new uki.background.Css({ background: '#4086FF', color: '#FFF', textAlign: 'left' });
+                return new uki.background.Css({ background: '#4086FF', color: '#FFF', textAlign: 'left', textShadow: 'none' });
             },
             
             
             // panel
             'popup-normal': function() {
-                return new uki.background.Multi(
-                    new uki.background.CssBox('opacity:0.95;background:#ECEDEE;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;border:1px solid #CCC'),
-                    uki.theme.background('shadow-medium')
-                );
+                return new uki.background.CssBox('background:#ECEDEE;border-radius:5px;border:1px solid #CCC;box-shadow:0 3px 8px rgba(0,0,0,0.6)');
             },
             
             'panel': function() {
-                var prefix = "panel/dark-";
-                return new uki.background.Sliced9({
-                    h: [u(prefix + "h.png"), "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAAGCAYAAADpJ08yAAAAIElEQVQIW2NcvnzFfwYgYLx37z4aY8aMmWgMIJ4JYgAAGzEQWXMYYT0AAAAASUVORK5CYII=", u(prefix + "h.gif")],
-                    m: [u(prefix + "m.png"), "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAABlCAYAAABnRzLGAAAAPUlEQVQoz2O5e/fefwYgYGGAAgTj////DERLkaSY6lLkKaaQATfw379/BNVgSsF1Ud1hw5VBYYBTaCntGQBCJspdTUaYMwAAAABJRU5ErkJggg==", false, true]
-                }, "3 0 3 0");
+                return new uki.background.LinearGradient({
+                    startColor: '#DEDEDF',
+                    stops: [ 
+                        { pos: 0.2, color: '#D4D4D5' },
+                        { pos: 0.9, color: '#989899' }
+                    ],
+                    endColor: '#989899',
+                    css: 'box-shadow:0 1px 0 rgba(0,0,0,0.5);'
+                });
             },
             
             // text field
             'input': function() {
                 return new uki.background.CssBox(
-                   'background:white;border: 1px solid #999;border-top-color:#555;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;-moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.4);-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, 0.4);box-shadow:0 1px 0 rgba(255, 255, 255, 0.4)',
-                   { inset: '0 0 0 0' }
+                   'background:white;border: 1px solid #999;border-top-color:#777;box-shadow:0 1px 0 rgba(255, 255, 255, 0.4), inset 0 1px 2px rgba(0,0,0,0.2);'
                );
             },
             
+            'input-focus': function() {
+                if (uki.browser.cssBoxShadow() == 'unsupported') {
+                    return new uki.background.CssBox( 
+                        'background:#7594D2;' + (uki.browser.cssFilter() && uki.image.needAlphaFix ? 'filter:Alpha(opacity=70);' : 'opacity:0.7;'), 
+                        { inset: '-2 -2', zIndex: -2 } 
+                    );
+                }
+                return new uki.background.Css({ 
+                    // WebkitTransition: '-webkit-box-shadow 0.2s linear',
+                    boxShadow: '0 0 6px #0244D4'
+                });
+            },
+            
+            
+            
             // slider
+            'slider-handle-normal': function() {
+                return new uki.background.LinearGradient({
+                    startColor: '#FFFFFF',
+                    endColor: '#B1CEEA',
+                    innerHTML: sliderPin(),
+                    css: 'border:1px solid #8393A6;border-bottom-color:#687482;box-shadow:0 0 2px rgba(0,0,0,0.5);'
+                });
+            },
+            
+            'slider-handle-hover': function() {
+                return new uki.background.LinearGradient({
+                    startColor: '#DFF6FF',
+                    endColor: '#8AC5F3',
+                    innerHTML: sliderPin(),
+                    css: 'border:1px solid #8393A6;border-bottom-color:#687482;box-shadow:0 0 2px rgba(0,0,0,0.5);'
+                });
+            },
+
+            'slider-handle-focus': function() {
+                if (uki.browser.cssBoxShadow() == 'unsupported') {
+                    return new uki.background.CssBox( 
+                        'background:#7594D2;' + (uki.browser.cssFilter() && uki.image.needAlphaFix ? 'filter:Alpha(opacity=70);' : 'opacity:0.7;'), 
+                        { inset: '-2 -2', zIndex: -2 } 
+                    );
+                }
+                return new uki.background.CssBox(
+                    'box-shadow: 0 0 6px #0244D4;',
+                    { zIndex: 2, inset: '1' }
+                );
+            },
+            
             'slider-bar': function() {
-                var prefix = "slider/bar-"; 
-                return new uki.background.Sliced9({ 
-                    v: [u(prefix + "v.png"), "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAASCAYAAAB4i6/FAAAASUlEQVQY02NgGHqgvLz8PzKGC7a0tP1ftnwNGIPYYEkQsW//0f/Hjp8FYxAbLjFjxiy4BIgNlvj//38auh0gMbA9IAYyHvDQAACE3VpNVzKSLwAAAABJRU5ErkJggg==", u(prefix + "v.gif")], 
-                    m: [u(prefix + "m.png"), "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARMAAAASCAYAAAB4gjqpAAAAUUlEQVQYGe3BwRFAMBAAwItJIVTAR0taSE9eVHiKOA9jdjcCAAAAAAAAgJ9rY4wMgKK+bnsAVPV5XgKgagqAF/T7OgOgqmXmEQAAAAAAAHzTAx6DCNiUJps4AAAAAElFTkSuQmCC", u(prefix + "m.gif"), true] 
-                }, "0 3 0 3", {fixedSize: '0 18'});            
+                uki.dom.offset.initializeBoxModel();
+                return new uki.background.CssBox(
+                    'overflow:visible;',
+                    { 
+                        inset: uki.dom.offset.boxModel ? '0 2 0 0' : '0 0',
+                        innerHTML: '<div style="' + uki.browser.css('position:absolute;left:0;overflow:hidden;width:100%;top:50%;height:3px;margin-top:-2px;background:#C6C7CD;border:1px solid #777;border-radius:3px;box-shadow:0 1px 0 rgba(255,255,255,0.5),inset 0 1px 1px rgba(0,0,0,0.2)') + '"></div>' 
+                    }
+                );
             },
             
             // list
             list: function(rowHeight) {
                 return new uki.background.Rows(rowHeight, '#EDF3FE');
             },
-
-            'shadow-big': function() {
-                return new uki.background.Sliced9(shadowData(), "23 23 23 23", {zIndex: -2, inset: '-4 -10 -12 -10'});
-            },
-            'shadow-medium': function() {
-                return new uki.background.Sliced9(shadowData(), "23 23 23 23", {zIndex: -2, inset: '-1 -6 -6 -6'});
+            
+            // table
+            'table-header': function() {
+                return new uki.background.LinearGradient({
+                    startColor: '#FFFFFF',
+                    stops: [
+                        { pos: 0.8, color: '#e0e0e0' }
+                    ],
+                    endColor: '#EEEEEE',
+                    css: 'border-bottom:1px solid #CCC;'
+                });
             }
         },
         
         images: {
-            'slider-handle': function() {
-                return uki.image(u("slider/handle.gif"), "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAkCAYAAACwlKv7AAABcUlEQVQ4T7WSy0sCYRRH758b0aKFCwmjB1kwlGEIJQiVvRe6iajIVpGbJArKjWK0GCgq7DE2muJt7kf3cmeaBlz0wVl8Z34Dw3AAvLNbqmIUtIHNo2sk/jr8HNb2K/jV60dCG8gVy9jq9IThsXmDdrQxw2arKySzRYN2mcIpQma7hE/vHYHuYQ5SG8doN9sC3cMcWKsHeP/sCnQPc5BcKWDtoSXwN/qct4GZzA5WbUcgSWhHG5hczP+SwZdpAwkrhxeNN2EivWXQjjYQn13Gcu1VSKTWDdrRBmJTS/6h9zahHW1gdHwBT25fIqENjMTnkND/TcPPTWpDsWmMAgY+AxXedZxQfIXffWIkUriWXLh2UvjlIwpcj3ZSuE/+FB50pvAzGwUuPOhM4aVGX+DCg84UfljvCvyNPseFF6oocOHaSeF7N22BC9dOCs9fuQIXrp0Unq24AheunRSeLjsCF66dFG6df0TiK7xid0L5v8K/AYNKQJdGv2S4AAAAAElFTkSuQmCC");
-            },
-            'slider-focus': function() {
-                if (uki.image.needAlphaFix) {
-                    var i = new uki.createElement('div', 'width:12px;height:18px;filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=4);background:#7594D2;');
-                    i.width = 20;
-                    i.height = 28;
-                    return i;
-                }
-                return uki.image(u("slider/focus.png"), "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAZCAYAAAA8CX6UAAABUUlEQVQ4y+2VsUoDQRCGVxRFRLQRGxUJETmyd4292IoQm1wRwuVuWx/BxjewDHmGPIAgFkFJvL23cr45MVhli20EFxaW2f//b+afvV1jVmPD3My3evls+yT/3D0uXvcu+4v9Tv52wGRNjD0wYJXza+Szze7tyw7grvs46o0XZ0nlL2xRJ0mxtExdS4w9MIoVDtyfTAicV/ND695P7dhnabm8tmVzlzk/yFwzbKcfENM9wYCFo2KamaSIOhtp6a9S5++zyj/YqnlKXf0sIhMma2LsgQELB66WSb2kqpmoSPNo1gwwYOGoFXim5kndpMzXTODQzIQDFw1DJ9RYqZ/UQ4XAwoGLhlF/pCOYiQ+hQq1/0gDhqk+cEdr73Z1JcGltE4Zw0VChtuX1SAychmfkp3Dg/gv9aaEo5yjayY72r0X7+6PdR9FuyHh3dsRXJMq79gUgPopCCBOTpwAAAABJRU5ErkJggg==");
-            },
             checkbox: function() {
                 var prefix = "checkbox/normal";
                 return uki.image(u(prefix + ".png"), "data:image/png;base64,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", u(prefix + ".gif"));
             },
             'checkbox-focus': function() {
-                if (uki.image.needAlphaFix) {
-                    var i = new uki.createElement('div', 'width:18px;height:18px;filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=3);background:#7594D2;');
-                    i.width = 26;
-                    i.height = 26;
-                    return i;
-                }
                 return uki.image(u("checkbox/focus.png"), "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABdklEQVRIie2Wv0rDUBSHUxRFRHQRFxWRioTeZHEXVxHqYgaRNrmrj+Ai+AAdi6trH0AQh6K05uYpfBQ934m0EnHQcIuDB+5y7/l9J+dPchMEU2sER8P5VjJY2ExeljY6D8v77dHKbvK4+t3iHD/80aFXzhdLBnPN4/tFBE37vN7qjrbDzO2ZTh6GnbExXRdXl+5zLn74o1O9cOB9xjfY3MmGa8Y+bSGO0vGhSYuT2Lqz2BbnUZpfVBf7nOOn/gQWPRwNMslE0iIyh1HqDiLrTuPMXZqsuI5s3hNQX/Zuq6vcz3v44Y8OPRx4H+UKAmpHevrkCi+ubu5e33660KGHo2WmJ5g2SGpImjzJb+DTIJKJcODB1QBMgTZUakm6dQKghwMPrgbQ+ss00DBqWidA2TNpvPC0DxjzzMiVU1H0a5VI9HDgwZ0EKEdTxk+mo14GMmHCgfcf4I8F8DpF3t8D72+y92+R96+p9/vA/402gzt5Bn8VHu0d2HhIetPffvAAAAAASUVORK5CYII=");
             },
             radio: function() {
@@ -231,7 +283,6 @@
                 return uki.image(u(prefix + ".png"), "data:image/png;base64,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", u(prefix + ".gif"));
             },
             'radio-focus': function() {
-                if (uki.image.needAlphaFix) return uki.theme.airport.image('checkbox-focus');
                 return uki.image(u("radio/focus.png"), "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABcElEQVRIx92VP0oEMRTGt9ADeAERq21E8ACLNp7AUrRbWdzdDDa6IBhnM5YqaCPCiiewyPzBA1gK1oIsHsNCNL9owBl1HYWM6MBjSPK+7+W99yWp1X7jm5dyrLUVTwTyYqotdb0dJjOdUM86Y8w86/jhX5q82TwZF1JPrkd6rtNPF40tiTBb7qps1Rlj5lnHD39wpchbMp4WKmmIKF0x/+0gSg8DlZ0KlZ05Y8w8669+DXAjgzjy7m68IPrJmoiS/Y29S907vr7fGdw+hOfDJ2eMmWcdP/zBfRqEGpKm3TnkKj3aPLi6kYO7x7fERWMdP/xfcAZveN71hEbZWpKu2RGgUcRFs0HIxODhgS8XADXQMGpK2l/t/KNMbLkMHh74cgGQHKqgcdT2O+TOwIGHB758AKNrpIc6ig0ta+Cs2gwPfLkAHB6rbyPBn5A7Aw8PfP8sgPceeFeR93Pg/SR7v4u836aVvAeVvGiVvMl/7nsGaBHOn+3vxvEAAAAASUVORK5CYII=");
             }
         },
@@ -251,7 +302,7 @@
         templates: {
             'table-header-cell': function() {
                 return new uki.theme.Template(
-                    '<div style="position:relative;border:1px solid #CCC;border-top:none;border-left:none;'+
+                    '<div style="position:relative;border-right:1px solid #CCC;'+
                     '${style}" class="${className}">${data}</div>');
             },
             
@@ -259,6 +310,18 @@
                 return new uki.theme.Template(
                     '<div style="position:relative;border-right:1px solid #CCC;height:100%;'+
                     '${style}" class="${className}">${data}</div>');
+            },
+            
+            'table-header-cell-asc': function() {
+                return new uki.theme.Template(
+                    '<div style="position:relative;border-right:1px solid #CCC;background: rgba(0,0,128,0.1);'+
+                    '${style}" class="${className}"><div style="padding-right:7px">${data}</div><span style="position:absolute;right:0;top:50%;margin-top:-7px;">&darr;</span></div>');
+            },
+            
+            'table-header-cell-desc': function() {
+                return new uki.theme.Template(
+                    '<div style="position:relative;border-right:1px solid #CCC;background: rgba(0,0,128,0.1);'+
+                    '${style}" class="${className}"><div style="padding-right:7px">${data}</div><span style="position:absolute;right:0;top:50%;margin-top:-7px;">&uarr;</span></div>');
             }
         },
         
@@ -313,10 +376,10 @@
                 return 'font-size:12px;';
             },
             'button': function() {
-                return 'color:#333;text-align:center;font-weight:bold;';
+                return 'color:#333;text-align:center;font-weight:bold;text-shadow:0 1px 0 rgba(255,255,255,0.6);';
             },
             'input': function() {
-                return 'font-size:11px;';
+                return 'font-size:12px;';
             }
         }
     });
@@ -341,17 +404,11 @@
         );
     }
     
-    function shadowData() {
-        var prefix = "shadow/large-";
-        return {
-            c: [u(prefix + "c.png"), "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAYAAABXuSs3AAACzklEQVRo3t2a63KiUBCEPYCX1U2Ixvd/Qm/kYjRBWd2aTjW950CS3fyYtaprULl8p2kGAcMg/QqR6SDTsXk/8moi041Mx+bt3WAKVDVIDOQj0ArcROCbFHzoAGbYTICzLwygC/jc8T62bGccFDKLKLUXeH2625sIpCo2mBa8bkiBWbkpo5oaQMrxFPCJ6ikxkNYAQg90Tiqk5h0DiDmeAoZqqTqIFrxuSB0uSENTQVUHkHJdnVbgN6qYrmkQ6n7U6VygRwY6Eg1pHiyDdcQcx0YZGLCvInxWyx44q+Nwi6Hh8Ng0kTqieTQ2QcCbSDzeCPB40UHqUfYAlvu9Lu0aDD0i0B+iiQnup1wfdLgNdw+mFxEG8CrwZziuB6JCT00zqQyfcn3Q4TZD7y96lrqPwL9HJkiLKygecPcK+tN0Y3VG348lMlnC8bNE5EjuXmGfLnq0+mSf4fujuh6kM8DtCUHfmG6pMry63uc4u83QDwaO+kjwB3U9SD45InD61lSS4PzU4GNxUXCNyYvFAU5XpAcTnOfI/AFeiNuIxhX0TgT3pxKXoge8lpjsyeWdqKLosOs1wIcEzgck3L6Czk0Le1/ad7O/BH826MpgNxdtTTtynQ/UFngh4DNym6HvbfqO4oKcfwYc+UZMdga7FviKss7gdbB45NJNAA637wl8QXFBzsfSz7vAccLZ00EJt9dU4TofpOgup0AbLKSbICYAZiEu3NM/6zh6NmKyFm0oLtxdWo5z/8ZJpiTwpYDPxfGvgsPxrUCvCLyik9J7P1dw7igAB+zStDDw8h+BVwa+MeAVDQDg3FmS4NxR5gTN9TvA1wS9opxrZ+kFL6mbLEnfDb6iqGzJ8f8f3F1UXB6cLtuhyxOQy1O+2x9Zbn/Wur2QcHvp5vZi2e3tCbc3hNzegnN709P1bWaXN/bdPkpx/fDK9eNCtw9oXT8Sd/MnhF+iLpLibpmRrgAAAABJRU5ErkJggg==", u(prefix + "c.gif")],
-            v: [u(prefix + "v.png"), "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAECAYAAADxjg1nAAAAWklEQVQYGdXBWwpAQAAAwLEeSUqy9z/hSkpSnh9OsTMFGlSo0aJDjwEjJkREREwYMaBHhxY1KpQIKPxePLhx4cSBHRtWLJiRkJAwY8GKDTsOnLiCTAWZCjL1AeihFg5/1kytAAAAAElFTkSuQmCC", u(prefix + "v.gif")],
-            h: [u(prefix + "h.png"), "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAuCAYAAAAPxrguAAAAe0lEQVQoz5XSWwtAQBCG4XEMOST+/y8kOYScKRe8WzZbc7FPX7PNtLaIuPI49l0vUBIewT/LuO/7BRETMRMpExkh/w9KD+WVhBASAu20jnZjFsEkGAQh7ISNsBIWwkwYCT2hI9SEilASiv+g9KgEH6ZhomVi0E47fW7sAEmnGr/QVlzBAAAAAElFTkSuQmCC", u(prefix + "h.gif")],
-            m: [u(prefix + "m.png"), "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAEUlEQVQIHWNgYGD4i4ZJFQAAAkoP0RsgosoAAAAASUVORK5CYII=", u(prefix + "m.gif"), true]
-        };
-    };
+    function sliderPin () {
+        return '<div style="' + uki.browser.css('position:absolute;overflow:hidden;z-index:10;left:50%;top:50%;width:2px;height:11px;margin:-6px 0 0 -1px;background:#8599AE;border-top:1px solid #6A7A8C;') + '"></div>';
+    }
     
-    uki.theme.airport.backgrounds['input-focus'] = uki.theme.airport.backgrounds['button-focus'];
+    uki.theme.airport.backgrounds['slider-handle-down'] = uki.theme.airport.backgrounds['slider-handle-hover'];
     uki.theme.airport.backgrounds['toolbar-popup'] = uki.theme.airport.backgrounds['popup-normal'];
     uki.theme.airport.backgrounds['toolbar-popup-button-disabled'] = uki.theme.airport.backgrounds['toolbar-popup-button-normal'];
 

data/frameworks/uki/src/uki-touch.js

@@ -0,0 +1,2 @@
+include('uki-touch/touch/setup.js');
+include('uki-touch/touch/view/scrollPane.js');

data/frameworks/uki/src/uki-touch/touch.js

@@ -0,0 +1 @@
+uki.touch = {};

data/frameworks/uki/src/uki-touch/touch/const.js

@@ -0,0 +1,24 @@
+include('../../uki-core/const.js'); 
+
+/**
+ * Global uki constants, for speed optimization and better merging
+ */
+/** @ignore */
+
+    // Device sniffing
+var isWebkit = /webkit/i.test(ua),
+    isIphone = /iphone/i.test(ua)
+    isIpad = /ipad/i.test(ua),
+    isAndroid = /android/i.test(ua),
+    isTouch = isIphone || isIpad || isAndroid,                                    
+    isStandalone = nav.standalone,
+    
+    // Event sniffing
+    touchStart = isTouch ? 'touchstart' : 'mousedown',
+    touchMove = isTouch ? 'touchmove' : 'mousemove',
+    touchEnd = isTouch ? 'touchend' : 'mouseup',
+    
+    // CSS3 Translate3d helper
+    cssHas3d = ('WebKitCSSMatrix' in window && 'm11' in new WebKitCSSMatrix()),
+    cssTranslateOpen = 'translate' + (cssHas3d ? '3d(' : '('),
+    cssTranslateClose = cssHas3d ? ',0)' : ')';

data/frameworks/uki/src/uki-touch/touch/setup.js

@@ -0,0 +1,52 @@
+include('../touch.js');
+include('const.js'); 
+
+uki.touch.setup = function(config) {
+    if (config && isTouch) {   
+        var viewport = uki.createElement('meta');
+        var app = uki.createElement('meta'); 
+        var statusBar = uki.createElement('meta');  
+        var startupScreen = uki.createElement('link');
+        var appIcon = uki.createElement('link');
+        
+        var head = document.getElementsByTagName('head')[0];  
+        
+        viewport.name = 'viewport';
+        viewport.content = 'width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0;';
+        
+        app.name = 'apple-mobile-web-app-capable'
+        app.content = 'yes';
+        
+        if (config.statusBarStyle) {
+            statusBar.name = 'apple-mobile-web-app-status-bar-style'
+            statusBar.content = config.statusBarStyle;
+        }
+        
+        if (config.tabletStartupScreen && isIpad) {
+            startupScreen.rel = 'apple-touch-startup-image';
+            startupScreen.href = config.tabletStartupScreen;
+        } else if (config.phoneStartupScreen && isIphone) {
+            startupScreen.rel = 'apple-touch-startup-image';
+            startupScreen.href = config.phoneStartupScreen;
+        }
+        
+        if (config.icon) {
+            config.phoneIcon = config.tabletIcon = config.icon;
+        }
+        
+        var precomposed = (config.glossOnIcon == false) ? '-precomposed' : '';
+        if (config.tabletIcon && isIpad) {
+            appIcon.rel = 'apple-touch-icon' + precomposed;
+            appIcon.href = config.tabletIcon;
+        } else if (config.phoneIcon && isIphone) {
+            appIcon.rel = 'apple-touch-icon' + precomposed;
+            appIcon.href = config.phoneIcon;
+        }
+          
+        head.appendChild(viewport);
+        head.appendChild(app);
+        if (statusBar.getAttribute('name')) head.appendChild(statusBar);
+        if (appIcon.getAttribute('href')) head.appendChild(appIcon);
+        if (startupScreen.getAttribute('href')) head.appendChild(startupScreen);
+    }
+};

data/frameworks/uki/src/uki-touch/touch/view.js

@@ -0,0 +1,4 @@
+include('../touch.js');
+uki.touch.view = {};
+
+uki.viewNamespaces.unshift('uki.touch.view.');

data/frameworks/uki/src/uki-touch/touch/view/scrollPane.js

@@ -0,0 +1,505 @@
+include('../view.js');
+include('../const.js');
+
+// Scroll implementation based on iScroll, http://cubiq.org/iscroll (by Matteo Spinelli)
+// uki-adapted by rsaccon
+
+(function() {
+    var TouchScrollBar = function (dir, parent, fade, shrink) {
+        this.dir = dir;
+        this.fade = fade;
+        this.shrink = shrink;
+        this.uid = ++uki.guid;
+
+        // Create main scrollbar
+        this.bar = document.createElement('div');
+
+        var style = 'position:absolute;top:0;left:0;-webkit-transition-timing-function:cubic-bezier(0,0,0.25,1);pointer-events:none;-webkit-transition-duration:0;-webkit-transition-delay:0;-webkit-transition-property:-webkit-transform;z-index:100;background:rgba(0,0,0,0.5);' +
+            '-webkit-transform:' + cssTranslateOpen + '0,0' + cssTranslateClose + ';' +
+            (dir == 'horizontal' ? '-webkit-border-radius:3px 2px;min-width:6px;min-height:5px' : '-webkit-border-radius:2px 3px;min-width:5px;min-height:6px'),
+            size, ctx;
+
+        this.bar.setAttribute('style', style);
+
+        // Create scrollbar wrapper
+        this.wrapper = document.createElement('div');
+        style = '-webkit-mask:-webkit-canvas(scrollbar' + this.uid + this.dir + ');position:absolute;z-index:100;pointer-events:none;overflow:hidden;opacity:0;-webkit-transition-duration:' + (fade ? '300ms' : '0') + ';-webkit-transition-delay:0;-webkit-transition-property:opacity;' +
+            (this.dir == 'horizontal' ? 'bottom:2px;left:1px;right:7px;height:5px' : 'top:1px;right:2px;bottom:7px;width:5px;');
+        this.wrapper.setAttribute('style', style);
+
+        // Add scrollbar to the DOM
+        this.wrapper.appendChild(this.bar);
+        parent.appendChild(this.wrapper);
+    };
+
+    TouchScrollBar.prototype = {
+        init: function (scroll, size) {
+            var ctx, sbSize;
+
+            // Create scrollbar mask
+            if (this.dir == 'horizontal') {
+                sbSize = this.wrapper.offsetWidth;
+                ctx = document.getCSSCanvasContext("2d", "scrollbar" + this.uid + this.dir, sbSize, 5);
+                ctx.fillStyle = "rgb(0,0,0)";
+                ctx.beginPath();
+                ctx.arc(2.5, 2.5, 2.5, Math.PI/2, -Math.PI/2, false);
+                ctx.lineTo(sbSize-2.5, 0);
+                ctx.arc(sbSize-2.5, 2.5, 2.5, -Math.PI/2, Math.PI/2, false);
+                ctx.closePath();
+                ctx.fill();
+            } else {
+                sbSize = this.wrapper.offsetHeight;
+                ctx = document.getCSSCanvasContext("2d", "scrollbar" + this.uid + this.dir, 5, sbSize);
+                ctx.fillStyle = "rgb(0,0,0)";
+                ctx.beginPath();
+                ctx.arc(2.5, 2.5, 2.5, Math.PI, 0, false);
+                ctx.lineTo(5, sbSize-2.5);
+                ctx.arc(2.5, sbSize-2.5, 2.5, 0, Math.PI, false);
+                ctx.closePath();
+                ctx.fill();
+            }
+
+            this.maxSize = this.dir == 'horizontal' ? this.wrapper.clientWidth : this.wrapper.clientHeight;
+            this.size = Math.round(this.maxSize * this.maxSize / size);
+            this.maxScroll = this.maxSize - this.size;
+            this.toWrapperProp = this.maxScroll / (scroll - size);
+            this.bar.style[this.dir == 'horizontal' ? 'width' : 'height'] = this.size + 'px';
+        },
+
+        setPosition: function (pos, hidden) {
+            var p1 = pos;
+            if (!hidden && this.wrapper.style.opacity != '1') {
+                this.show();
+            }
+
+            pos = this.toWrapperProp * pos;
+
+            if (pos < 0) {
+                pos = this.shrink ? pos + pos*3 : 0;
+                if (this.size + pos < 5) {
+                    pos = -this.size+5;
+                }
+            } else if (pos > this.maxScroll) {
+                pos = this.shrink ? pos + (pos-this.maxScroll)*3 : this.maxScroll;
+                if (this.size + this.maxScroll - pos < 5) {
+                    pos = this.size + this.maxScroll - 5;
+                }
+            }
+
+            pos = this.dir == 'horizontal'
+                ? cssTranslateOpen + Math.round(pos) + 'px,0' + cssTranslateClose
+                : cssTranslateOpen + '0,' + Math.round(pos) + 'px' + cssTranslateClose;
+
+            this.bar.style.webkitTransform = pos;
+        },
+
+        show: function () {
+            if (cssHas3d) {
+                this.wrapper.style.webkitTransitionDelay = '0';
+            }
+            this.wrapper.style.opacity = '1';
+        },
+
+        hide: function () {
+            if (cssHas3d) {
+                this.wrapper.style.webkitTransitionDelay = '200ms';
+            }
+            this.wrapper.style.opacity = '0';
+        },
+
+        remove: function () {
+            this.wrapper.parentNode.removeChild(this.wrapper);
+            return null;
+        }
+    };
+
+
+    /**
+    * Touch scroll pane.
+    * Optimized for webkit browsers.
+    *
+    * @author voloko, rsaccon
+    * @name uki.touch.view.TouchScrollPane
+    * @class
+    * @extends uki.view.Container
+    */
+    uki.view.declare('uki.touch.view.ScrollPane', uki.view.ScrollPane, function(Base) {
+        
+        this._touch = isTouch;
+
+        this._setup = function() {
+            Base._setup.call(this);
+
+            // touch properties
+            this._bounce = cssHas3d;
+            this._momentum = cssHas3d;
+            this._hScrollbar = cssHas3d;
+            this._vScrollbar = cssHas3d;
+            this._fadeScrollBar = isIphone || isIpad || !isTouch;
+            this._shrinkScrollBar = isIphone || isIpad;
+        };
+
+        uki.addProps(this, ['touch']);
+        
+        /**
+        * @function
+        * @param {Number} dx
+        * @param {Number} dy
+        * @param {Boolean} runtime
+        * @name uki.view.ScrollPane#scroll
+        */
+        this.scroll = function(dx, dy, runtime) {
+            if (!this._touch) return Base.scroll.call(this, dx, dy, runtime);
+            
+            return this._touchScrollTo(dx, dy, runtime);
+        };
+
+        /**
+        * @function
+        * @name uki.view.ScrollPane#scrollTop
+        */
+        /**
+        * @function
+        * @name uki.view.ScrollPane#scrollLeft
+        */
+        uki.each(['scrollTop', 'scrollLeft'], function(i, name) {
+            this[name] = function(v) {
+                if (!this._touch) return Base[name].call(this, v);
+                
+                if (v === undefined) return ((name == 'scrollLeft') ? this._x : this._y) || 0;
+                this._touchScrollTo((name == 'scrollTop') ? v : 0, (name == 'scrollLeft') ? v : 0);
+                this.trigger('scroll', { source: this });
+                return this;
+            };
+        }, this);
+
+        this._createDom = function() {
+            Base._createDom.call(this);
+            
+            this._touch = this._touch && this._dom.addEventListener; // won't work without it
+            
+            if (this._touch) {
+                this._dom.style.overflow = 'hidden';
+                this._scroller = uki.createElement("div", 'z-index:100;-moz-user-focus:none;');
+                this._scroller.className = 'uki-touch-view-ScrollPane__scroller';
+                this._scroller.style.webkitTransitionProperty = '-webkit-transform';
+                this._scroller.style.webkitTransitionTimingFunction = 'cubic-bezier(0,0,0.25,1)';
+                this._scroller.style.webkitTransitionDuration = '0';
+                this._scroller.style.webkitTransform = cssTranslateOpen + '0,0' + cssTranslateClose;
+                this._dom.appendChild(this._scroller);
+
+                this._scroller.addEventListener(touchStart, uki.proxy(this._onTouchStart, this), false);
+                this._scroller.addEventListener(touchMove, uki.proxy(this._onTouchMove, this), false);
+                this._scroller.addEventListener(touchEnd, uki.proxy(this._onTouchEnd, this), false);
+
+                if (!isTouch) {
+                    uki.dom.bind(this._scroller, 'click', function(e) {
+                        if (!e._fake) e.stopPropagation();
+                    });
+                }
+            }
+        };
+
+        this.domForChild = function(child) {
+            return this._touch ? this._scroller : this._dom;
+        };
+        
+        this._updateClientRects = function() {
+            if (!this._touch) return Base._updateClientRects.call(this);
+            
+            var oldClientRect = this._clientRect;
+            Base._recalcClientRects.call(this);
+            this._scroller.style.width = this.contentsWidth() + 'px';
+            this._scroller.style.height = this.contentsHeight() + 'px';
+        };
+
+        this._layoutDom = function(rect) {
+            if (!this._touch) return Base._layoutDom.call(this, rect);
+            
+            this._updateClientRects();
+            uki.view.Container.prototype._layoutDom.call(this, rect);
+            this._refresh();
+        };
+
+        this._onTouchStart = function(e) {
+             var matrix;
+
+             this._isScrolling = true;
+
+             e.preventDefault();
+             e.stopPropagation();
+
+             this._touchMoved = false;
+             this._touchDist = 0;
+
+             this._setTransitionTime('0');
+
+             // Check if the scroller is really where it should be
+             if (this._momentum) {
+                 matrix = new WebKitCSSMatrix(window.getComputedStyle(this._scroller).webkitTransform);
+                 if (matrix.e != this._x || matrix.f != this._y) {
+                     this._scroller.removeEventListener('webkitTransitionEnd', this._onTransitionEnd, false);
+                     this._setPosition(matrix.e, matrix.f);
+                     this._touchMoved = true;
+                 }
+             }
+
+             this._touchStartX = isTouch ? e.changedTouches[0].pageX : e.pageX;
+             this._scrollStartX = this._x;
+
+             this._touchStartY = isTouch ? e.changedTouches[0].pageY : e.pageY;
+             this._scrollStartY = this._y;
+
+             this._scrollStartTime = e.timeStamp;
+         };
+
+         this._onTouchMove = function(e) {
+             var pageX = isTouch ? e.changedTouches[0].pageX : e.pageX,
+                 pageY = isTouch ? e.changedTouches[0].pageY : e.pageY,
+                 leftDelta = this._scrollX ? pageX - this._touchStartX : 0,
+                 topDelta = this._scrollY ? pageY - this._touchStartY: 0,
+                 newX = this._x + leftDelta,
+                 newY = this._y + topDelta;
+
+             if (!this._isScrolling) {
+                 return;
+             }
+
+             this._touchDist+= Math.abs(this._touchStartX - pageX) + Math.abs(this._touchStartY - pageY);
+
+             this._touchStartX = pageX;
+             this._touchStartY = pageY;
+
+             // Slow down if outside of the boundaries
+             if (newX > 0 || newX < this._maxScrollX) {
+                 newX = this._bounce ? Math.round(this._x + leftDelta / 3) : newX >= 0 ? 0 : this._maxScrollX;
+             }
+             if (newY > 0 || newY < this._maxScrollY) {
+                 newY = this._bounce ? Math.round(this._y + topDelta / 3) : newY >= 0 ? 0 : this._maxScrollY;
+             }
+
+             if (this._touchDist > 5) {            // 5 pixels threshold is needed on Android, but also on iPhone looks more natural
+                 this._setPosition(newX, newY);
+                 this._touchMoved = true;
+             }
+         };
+
+         this._onTouchEnd = function(e) {
+             var time = e.timeStamp - this._scrollStartTime,
+                 target, ev,
+                 momentumX, momentumY, newDuration, newPositionX, newPositionY;
+
+             if (!this._isScrolling) {
+                 return;
+             }
+
+             this._isScrolling = false;
+
+             if (!this._touchMoved) {
+                 this._resetPosition();
+
+                 // Find the last touched element
+                 target = isTouch ? e.changedTouches[0].target : e.target;
+                 while (target.nodeType != 1) {
+                     target = target.parentNode;
+                 }
+
+                 // Create the fake event
+                 ev = document.createEvent('Event');
+                 ev.initEvent('focus', true, true);
+                 target.dispatchEvent(ev);
+
+                 ev = document.createEvent('MouseEvents');
+                 ev.initMouseEvent("click", true, true, e.view, 1,
+                     target.screenX, target.screenY, target.clientX, target.clientY,
+                     e.ctrlKey, e.altKey, e.shiftKey, e.metaKey,
+                     0, null);
+                 ev._fake = true;
+                 target.dispatchEvent(ev);
+
+                 return;
+             }
+
+             if (!this._momentum || time > 250) {           // Prevent slingshot effetct
+                 this._resetPosition();
+                 return;
+             }
+
+             momentumX = this._scrollX === true
+                 ? this._calcMomentum(this._x - this._scrollStartX,
+                                 time,
+                                 this._bounce ? -this._x + this._scrollWidth/5 : -this._x,
+                                 this._bounce ? this._x + this._scrollerWidth - this._scrollWidth + this._scrollWidth/5 : this._x + this._scrollerWidth - this._scrollWidth)
+                 : { dist: 0, time: 0 };
+
+             momentumY = this._scrollY === true
+                 ? this._calcMomentum(this._y - this._scrollStartY,
+                                 time,
+                                 this._bounce ? -this._y + this._scrollHeight/5 : -this._y,
+                                 this._bounce ? (this._maxScrollY < 0 ? this._y + this._scrollerHeight - this._scrollHeight : 0) + this._scrollHeight/5 : this._y + this._scrollerHeight - this._scrollHeight)
+                 : { dist: 0, time: 0 };
+
+             if (!momentumX.dist && !momentumY.dist) {
+                 this._resetPosition();
+                 return false;
+             }
+
+             newDuration = Math.max(Math.max(momentumX.time, momentumY.time), 1);        // The minimum animation length must be 1ms
+             newPositionX = this._x + momentumX.dist;
+             newPositionY = this._y + momentumY.dist;
+
+             this._touchScrollTo(newPositionX, newPositionY, newDuration + 'ms');
+         };
+
+         this._onTransitionEnd = function () {
+             this._scroller.removeEventListener('webkitTransitionEnd', this._onTransitionEnd, false);
+             this._resetPosition();
+         };
+
+         this._refresh = function () {
+             var resetX = this._x, resetY = this._y;
+
+             this._scrollWidth = this._rect.width;
+             this._scrollHeight = this._rect.height;
+             this._scrollerWidth = this.contentsWidth();
+             this._scrollerHeight = this.contentsHeight();
+             this._maxScrollX = this._scrollWidth - this._scrollerWidth;
+             this._maxScrollY = this._scrollHeight - this._scrollerHeight;
+
+             if (this._scrollX) {
+                 if (this._maxScrollX >= 0) {
+                     resetX = 0;
+                 } else if (this._x < this._maxScrollX) {
+                     resetX = this._maxScrollX;
+                 }
+             }
+             if (this._scrollY) {
+                 if (this._maxScrollY >= 0) {
+                     resetY = 0;
+                 } else if (this._y < this._maxScrollY) {
+                     resetY = this._maxScrollY;
+                 }
+             }
+             if (resetX!=this._x || resetY!=this._y) {
+                 this._setTransitionTime('0');
+                 this._setPosition(resetX, resetY, true);
+             }
+
+             this._scrollX = this._scrollerWidth > this._scrollWidth;
+             this._scrollY = !this._scrollX || this._scrollerHeight > this._scrollHeight;
+
+             // Update horizontal scrollbar
+             if (this._hScrollbar && this._scrollX) {
+                 this._touchScrollBarH = (this._touchScrollBarH instanceof TouchScrollBar)
+                     ? this._touchScrollBarH
+                     : new TouchScrollBar('horizontal', this._dom, this._fadeScrollBar, this._shrinkScrollBar);
+                 this._touchScrollBarH.init(this._scrollWidth, this._scrollerWidth);
+             } else if (this._touchScrollBarH) {
+                 this._touchScrollBarH = this._touchScrollBarH.remove();
+             }
+
+             // Update vertical scrollbar
+             if (this._vScrollbar && this._scrollY && this._scrollerHeight > this._scrollHeight) {
+                 this._touchScrollBarV = (this._touchScrollBarV instanceof TouchScrollBar)
+                     ? this._touchScrollBarV
+                     : new TouchScrollBar('vertical', this._dom, this._fadeScrollBar, this._shrinkScrollBar);
+                 this._touchScrollBarV.init(this._scrollHeight, this._scrollerHeight);
+             } else if (this._touchScrollBarV) {
+                 this._touchScrollBarV = this._touchScrollBarV.remove();
+             }
+         };
+
+         this._setPosition = function (x, y, hideScrollBars) {
+             this._x = x;
+             this._y = y;
+
+             this._scroller.style.webkitTransform = cssTranslateOpen + this._x + 'px,' + this._y + 'px' + cssTranslateClose;
+
+             // Move the scrollbars
+             if (!hideScrollBars) {
+                 if (this._touchScrollBarH) {
+                     this._touchScrollBarH.setPosition(this._x);
+                 }
+                 if (this._touchScrollBarV) {
+                     this._touchScrollBarV.setPosition(this._y);
+                 }
+             }
+         };
+
+         this._setTransitionTime = function(time) {
+             time = time || '0';
+             this._scroller.style.webkitTransitionDuration = time;
+
+             if (this._touchScrollBarH) {
+                 this._touchScrollBarH.bar.style.webkitTransitionDuration = time;
+                 this._touchScrollBarH.wrapper.style.webkitTransitionDuration = cssHas3d && this._fadeScrollBar ? '300ms' : '0';
+             }
+             if (this._touchScrollBarV) {
+                 this._touchScrollBarV.bar.style.webkitTransitionDuration = time;
+                 this._touchScrollBarV.wrapper.style.webkitTransitionDuration = cssHas3d && this._fadeScrollBar ? '300ms' : '0';
+             }
+         };
+
+         this._resetPosition = function (time) {
+             var resetX = this._x,
+                 resetY = this._y,
+                 time = time || '500ms';
+
+             if (this._x >= 0) {
+                 resetX = 0;
+             } else if (this._x < this._maxScrollX) {
+                 resetX = this._maxScrollX;
+             }
+
+             if (this._y >= 0 || this._maxScrollY > 0) {
+                 resetY = 0;
+             } else if (this._y < this._maxScrollY) {
+                 resetY = this._maxScrollY;
+             }
+
+             if (resetX != this._x || resetY !=this._y) {
+                 this._touchScrollTo (resetX, resetY, time);
+             } else {
+                 if (this._touchScrollBarH) {
+                     this._touchScrollBarH.hide();
+                 }
+                 if (this._touchScrollBarV) {
+                     this._touchScrollBarV.hide();
+                 }
+             }
+         };
+
+         this._touchScrollTo = function (destX, destY, runtime) {
+             this._setTransitionTime(runtime || '450ms');
+             this._setPosition(destX, destY);
+
+             if (runtime==='0' || runtime=='0s' || runtime=='0ms') {
+                 this._resetPosition();
+             } else {
+                 this._scroller.addEventListener('webkitTransitionEnd', uki.proxy(this._onTransitionEnd, this), false);
+             }
+         };
+
+         this._calcMomentum = function (dist, time, maxDistUpper, maxDistLower) {
+             var friction = 2.5,
+             deceleration = 1.2,
+             speed = Math.abs(dist) / time * 1000,
+             newDist = speed * speed / friction / 1000,
+             newTime = 0;
+
+             // Proportinally reduce speed if we are outside of the boundaries
+             if (dist > 0 && newDist > maxDistUpper) {
+                 speed = speed * maxDistUpper / newDist / friction;
+                 newDist = maxDistUpper;
+             } else if (dist < 0 && newDist > maxDistLower) {
+                 speed = speed * maxDistLower / newDist / friction;
+                 newDist = maxDistLower;
+             }
+
+             newDist = newDist * (dist < 0 ? -1 : 1);
+             newTime = speed / deceleration;
+
+             return { dist: Math.round(newDist), time: Math.round(newTime) };
+        };
+    });
+})();