(function(){
    touchstart = 'ontouchstart' in document.documentElement ? 'touchstart' : 'mousedown';
    touchmove = 'ontouchmove' in document.documentElement ? 'touchmove' : 'mousemove';
    touchend = 'ontouchend' in document.documentElement ? 'touchend' : 'mouseup';
    
    var el = document.createElement('div'),
        transform = ('WebkitTransform' in el.style) ? 'WebkitTransform' : ('MozTransform' in el.style) ? 'MozTransform' : false,
        dragScale = 1.1,
        drags = 0,
        iphone = navigator.userAgent.match(/iPhone|iPod/i);
    el = null;
    
    var draggables = document.getElementsByClassName('draggable');
    for(var i = 0, len = draggables.length; i < len; i++){
        draggables[i].draggable = true;
    }
    
    var touches = {},
        dragging = 0;
    document.addEventListener(touchstart, function(e){
        (!e.changedTouches ? (e.changedTouches = [{ pageX: e.pageX, pageY: e.pageY }]) : null);
        var el;
        if(el = e.target && e.target.draggable ? e.target : e.srcElement && e.srcElement.draggable ? e.srcElement : e.srcElement && e.srcElement.parentNode.draggable ? e.srcElement.parentNode : false){
            e.preventDefault();
            e.stopPropagation();

            var t = e.changedTouches[0];
            el.dragging = true;
            dragging++;
            el.off = {
                x: t.pageX,
                y: t.pageY
            }
            el.pos = el.pos ||  { x: 0, y: 0 };
            touches[t.identifier] = el;
            el.styleBefore = el.style[transform];
            el.style[transform] = 'scale('+dragScale+')';
            el.classBefore = el.className;
            el.className += ' dragging';
        }
    }, false);
    
    document.addEventListener(touchmove, function(e){
        (!e.changedTouches ? (e.changedTouches = [{ pageX: e.pageX, pageY: e.pageY }]) : null);
        i = e.changedTouches.length;
        while (i--) {
            var t = e.changedTouches[i], el = touches[t.identifier];
            if (el && el.dragging) {
                var off = el.off, x = t.pageX - off.x, y = t.pageY - off.y;
                el.style[transform] = ['scale(',dragScale,') translate', (iphone ? '3d' : ''), '(', x, 'px,', y, 'px',(iphone ? ', 0px' : ''),')'].join('');
            }
        }
        if(dragging){
            e.preventDefault();
        }
    }, false);
    
    document.addEventListener(touchend, function(e){
        (!e.changedTouches ? (e.changedTouches = [{ pageX: e.pageX, pageY: e.pageY }]) : null);
        var t = e.changedTouches[0], el = touches[t.identifier];
        if (el && el.dragging) {
            el.dragging = false;
            var pos = {
                x: t.pageX - el.off.x + el.pos.x,
                y: t.pageY - el.off.y + el.pos.y
            }
            
            el.style.left = pos.x;
            el.style.top = pos.y;
            
            el.pos = pos;
            el.style[transform] = el.styleBefore;
            el.style.zIndex = ++drags;
            el.className = el.classBefore;
            dragging--;
        }
    }, false);
    
    document.addEventListener('gesturechange', function(e){ 
        if (dragging) {
            e.preventDefault();
        } 
    });
})();