dynamic-tag

/* TAG SPHERE - BREITBILD OPTIMIERT */
#tagSphere {
    position: fixed;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    width: 280px;
    height: 280px;
    z-index: 999;
    cursor: move;
    cursor: -webkit-grab;
    cursor: -moz-grab;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease, width 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55), height 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55), top 0.7s ease, left 0.7s ease, transform 0.7s ease, z-index 0s;
    background: transparent;
    border: none;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

#tagSphere.visible {
    opacity: 1;
    visibility: visible;
}

#tagSphere.exploded {
    width: 90vmin;
    height: 90vmin;
    max-width: 900px;
    max-height: 900px;
    top: 50vh;
    left: 50vw;
    transform: translate(-50%, -50%);
    z-index: 2147483647;
}

/* LANDSCAPE: Breiter nutzen! */
@media (orientation: landscape) and (min-width: 900px) {
    #tagSphere.exploded {
        width: 85vw;
        height: 75vh;
        max-width: 1400px;
        max-height: 800px;
    }
}

/* Backdrop für Click-außerhalb */
#tagSphereBackdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.3);
    z-index: 2147483646;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

#tagSphereBackdrop.visible {
    opacity: 1;
    visibility: visible;
}

/* MOBILE: Fullscreen */
@media (max-width: 768px) {
    #tagSphere {
        width: 250px;
        height: 250px;
        left: 50vw;
        top: 50vh;
        transform: translate(-50%, -50%);
    }
    
    #tagSphere.exploded {
        width: 100vw !important;
        height: 100vh !important;
        max-width: none !important;
        max-height: none !important;
        top: 50vh !important;
        left: 50vw !important;
        transform: translate(-50%, -50%) !important;
        background: rgba(255, 255, 255, 0.95);
    }
    
    #tagSphereBackdrop {
        display: none;
    }
}

#tagSphere.dragging {
    cursor: -webkit-grabbing !important;
    cursor: -moz-grabbing !important;
}

/* CLOSE BUTTON - WEITER AUßEN */
#tagSphere .close-btn {
    position: absolute;
    top: 30px;
    right: 30px;
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #CC0000;
    border: 2px solid rgba(204, 0, 0, 0.2);
    border-radius: 50%;
    font-size: 32px;
    font-weight: bold;
    line-height: 52px;
    text-align: center;
    cursor: pointer;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    user-select: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

#tagSphere.exploded .close-btn {
    opacity: 1;
    visibility: visible;
}

#tagSphere .close-btn:hover {
    background: #CC0000;
    color: #FFFFFF;
    border-color: #CC0000;
    transform: scale(1.1);
    box-shadow: 0 6px 24px rgba(204, 0, 0, 0.4);
}

#tagSphere .close-btn:active {
    transform: scale(0.95);
}

/* BACK BUTTON - WEITER AUßEN */
#tagSphere .back-btn {
    position: absolute;
    top: 30px;
    left: 30px;
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #0066CC;
    border: 2px solid rgba(0, 102, 204, 0.2);
    border-radius: 50%;
    font-size: 28px;
    font-weight: bold;
    line-height: 52px;
    text-align: center;
    cursor: pointer;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    user-select: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

#tagSphere.mode-pages.exploded .back-btn {
    opacity: 1;
    visibility: visible;
}

#tagSphere .back-btn:hover {
    background: #0066CC;
    color: #FFFFFF;
    border-color: #0066CC;
    transform: scale(1.1);
    box-shadow: 0 6px 24px rgba(0, 102, 204, 0.4);
}

#tagSphere .back-btn:active {
    transform: scale(0.95);
}

/* LANDSCAPE: Buttons noch weiter außen */
@media (orientation: landscape) and (min-width: 900px) {
    #tagSphere.exploded .close-btn {
        top: 40px;
        right: 50px;
    }
    
    #tagSphere.exploded .back-btn {
        top: 40px;
        left: 50px;
    }
}

/* PORTRAIT MODE: VIEL GRÖSSER! */
@media (orientation: portrait) {
    #tagSphere .close-btn {
        width: 72px;
        height: 72px;
        font-size: 40px;
        line-height: 68px;
        top: 25px;
        right: 25px;
    }
    
    #tagSphere .back-btn {
        width: 72px;
        height: 72px;
        font-size: 36px;
        line-height: 68px;
        top: 25px;
        left: 25px;
    }
}

/* MOBILE PORTRAIT: NOCH GRÖSSER! */
@media (max-width: 768px) and (orientation: portrait) {
    #tagSphere .close-btn {
        width: 80px;
        height: 80px;
        font-size: 48px;
        line-height: 76px;
        top: 20px;
        right: 20px;
        box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
    }
    
    #tagSphere .back-btn {
        width: 80px;
        height: 80px;
        font-size: 42px;
        line-height: 76px;
        top: 20px;
        left: 20px;
        box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
    }
}

/* LANDSCAPE MOBILE */
@media (max-width: 768px) and (orientation: landscape) {
    #tagSphere .close-btn {
        width: 64px;
        height: 64px;
        font-size: 36px;
        line-height: 60px;
    }
    
    #tagSphere .back-btn {
        width: 64px;
        height: 64px;
        font-size: 32px;
        line-height: 60px;
    }
}

#tagSphere .tag-item {
    position: absolute;
    padding: 15px 28px;
    white-space: nowrap;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    background: #FFFFFF;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    min-width: 60px;
    text-align: center;
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
    transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, opacity 0.3s ease;
    pointer-events: auto;
    z-index: 100;
    user-select: none;
}

/* MOBILE: Größere Touch Targets für Tags */
@media (max-width: 768px) {
    #tagSphere .tag-item {
        padding: 20px 35px;
        font-size: 20px;
        min-width: 90px;
    }
}

#tagSphere .tag-item.atom-0 { animation: float-0 4.2s ease-in-out infinite; }
#tagSphere .tag-item.atom-1 { animation: float-1 5.1s ease-in-out infinite; }
#tagSphere .tag-item.atom-2 { animation: float-2 4.7s ease-in-out infinite; }
#tagSphere .tag-item.atom-3 { animation: float-3 5.5s ease-in-out infinite; }
#tagSphere .tag-item.atom-4 { animation: float-4 4.9s ease-in-out infinite; }
#tagSphere .tag-item.atom-5 { animation: float-5 5.3s ease-in-out infinite; }
#tagSphere .tag-item.atom-6 { animation: float-6 4.5s ease-in-out infinite; }
#tagSphere .tag-item.atom-7 { animation: float-7 5.8s ease-in-out infinite; }

@keyframes float-0 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(3px, -4px) rotate(1deg); }
    50% { transform: translate(-3px, -5px) rotate(-1deg); }
    75% { transform: translate(-4px, -2px) rotate(2deg); }
}

@keyframes float-1 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(-3px, -5px) rotate(-1deg); }
    50% { transform: translate(4px, -3px) rotate(1deg); }
    75% { transform: translate(3px, -6px) rotate(-2deg); }
}

@keyframes float-2 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(4px, -3px) rotate(2deg); }
    50% { transform: translate(-3px, -6px) rotate(-1deg); }
    75% { transform: translate(3px, -4px) rotate(1deg); }
}

@keyframes float-3 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(-4px, -6px) rotate(-2deg); }
    50% { transform: translate(3px, -4px) rotate(1deg); }
    75% { transform: translate(-3px, -5px) rotate(-1deg); }
}

@keyframes float-4 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(3px, -5px) rotate(1deg); }
    50% { transform: translate(-4px, -4px) rotate(-2deg); }
    75% { transform: translate(4px, -6px) rotate(2deg); }
}

@keyframes float-5 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(-3px, -4px) rotate(-1deg); }
    50% { transform: translate(4px, -6px) rotate(2deg); }
    75% { transform: translate(-4px, -3px) rotate(-2deg); }
}

@keyframes float-6 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(4px, -6px) rotate(2deg); }
    50% { transform: translate(-3px, -5px) rotate(-1deg); }
    75% { transform: translate(3px, -3px) rotate(1deg); }
}

@keyframes float-7 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(-4px, -4px) rotate(-2deg); }
    50% { transform: translate(3px, -6px) rotate(1deg); }
    75% { transform: translate(-3px, -5px) rotate(-1deg); }
}

#tagSphere.mode-tags .tag-item {
    color: #0066CC;
}

#tagSphere.mode-tags .tag-item:hover {
    color: #0044AA;
    box-shadow: 0 6px 20px rgba(0,102,204,0.5);
    transform: scale(1.3) !important;
    z-index: 9998 !important;
}

#tagSphere.mode-pages .tag-item:hover {
    box-shadow: 0 6px 20px rgba(204,0,0,0.5);
    transform: scale(1.3) !important;
    z-index: 9998 !important;
}

(function() {

var c = null;
var backdrop = null;
var closeBtn = null;
var backBtn = null;
var items = [];
var angleX = 0;
var angleY = 0;
var baseRadius = 120;
var exploded = false;
var drag = false;
var lastX = 0;
var lastY = 0;
var visible = false;
var loading = false;
var mode = 'tags';
var touchStartTime = 0;
var originalTags = [];
var isMobile = false;
var startX = 0;
var startY = 0;
var hasMoved = false;
var isActive = false;
var isLandscape = false;

function detectMobile() {
    isMobile = window.innerWidth <= 768;
}

function detectLandscape() {
    isLandscape = window.innerWidth > window.innerHeight && window.innerWidth >= 900;
}

function getViewportSize() {
    if (window.visualViewport) {
        return {
            width: window.visualViewport.width,
            height: window.visualViewport.height
        };
    }
    return {
        width: window.innerWidth,
        height: window.innerHeight
    };
}

function createContainer() {
    backdrop = document.createElement('div');
    backdrop.id = 'tagSphereBackdrop';
    
    c = document.createElement('div');
    c.id = 'tagSphere';
    c.className = 'mode-tags';
    
    closeBtn = document.createElement('button');
    closeBtn.className = 'close-btn';
    closeBtn.innerHTML = '×';
    closeBtn.title = 'Close';
    
    backBtn = document.createElement('button');
    backBtn.className = 'back-btn';
    backBtn.innerHTML = '◄';
    backBtn.title = 'Back to Tags';
    
    c.appendChild(closeBtn);
    c.appendChild(backBtn);
    
    var body = document.body || document.getElementsByTagName('body')[0];
    body.appendChild(backdrop);
    body.appendChild(c);
}

function extractTags() {
    var box = document.querySelector('.pageTags');
    if (!box) return;
    
    var links = box.getElementsByTagName('a');
    
    for (var i = 0; i < links.length; i++) {
        var link = links[i];
        var txt = (link.textContent || link.innerText || '').replace(/^\s+|\s+$/g, '');
        
        if (txt.indexOf('bearbeiten') !== -1 || txt.indexOf('edit') !== -1) continue;
        
        if (txt.length > 0 && link.href) {
            items.push({
                text: txt,
                url: link.href,
                isTag: true,
                views: 0,
                phi: 0,
                theta: 0
            });
        }
    }
    
    originalTags = items.slice();
    distributeItems();
}

function distributeItems() {
    var count = items.length;
    if (count === 0) return;
    
    var goldenAngle = Math.PI * (3 - Math.sqrt(5));
    
    for (var i = 0; i < count; i++) {
        var y = 1 - (i / (count - 1)) * 2;
        var theta = goldenAngle * i;
        
        items[i].phi = theta;
        items[i].theta = Math.acos(y);
    }
}

function clearItems() {
    var elements = c.getElementsByClassName('tag-item');
    while (elements.length > 0) {
        c.removeChild(elements[0]);
    }
    items = [];
}

function createElements() {
    for (var i = 0; i < items.length; i++) {
        var item = items[i];
        var span = document.createElement('span');
        span.className = 'tag-item atom-' + (i % 8);
        
        var icon = item.isTag ? '�� ' : '�� ';
        span.innerHTML = icon + item.text;
        
        span.title = item.text + (item.views > 0 ? ' (' + item.views + ' views)' : '');
        span.setAttribute('data-text', item.text);
        span.setAttribute('data-url', item.url);
        span.setAttribute('data-istag', item.isTag ? '1' : '0');
        span.setAttribute('data-views', item.views);
        
        if (mode === 'pages') {
            var maxViews = 0;
            var minViews = 999999999;
            var hasViews = false;
            
            for (var j = 0; j < items.length; j++) {
                if (items[j].views > 0) {
                    hasViews = true;
                    if (items[j].views > maxViews) maxViews = items[j].views;
                    if (items[j].views < minViews) minViews = items[j].views;
                }
            }
            
            if (hasViews && item.views > 0) {
                var viewRange = maxViews - minViews;
                if (viewRange > 0) {
                    var normalized = (item.views - minViews) / viewRange;
                    var r = Math.floor(normalized * 204);
                    span.style.color = 'rgb(' + r + ', 0, 0)';
                } else {
                    span.style.color = '#CC0000';
                }
            } else {
                span.style.color = '#000000';
            }
        }
        
        c.appendChild(span);
    }
}

function position() {
    var elements = c.getElementsByClassName('tag-item');
    
    var viewport = getViewportSize();
    var containerSize = isMobile ? Math.min(viewport.width, viewport.height) : Math.min(viewport.width * 0.9, viewport.height * 0.9, 900);
    var radius = exploded ? (isMobile ? containerSize * 0.35 : containerSize * 0.35) : baseRadius;
    var centerPos = exploded ? containerSize / 2 : (isMobile ? 125 : 140);
    
    for (var i = 0; i < elements.length; i++) {
        var elem = elements[i];
        var item = items[i];
        
        var phi = item.phi + angleX;
        var theta = item.theta + (angleY * 0.3);
        
        // LANDSCAPE: Mehr horizontal, weniger vertikal
        // PORTRAIT: Mehr vertikal, weniger horizontal
        var xFactor = isLandscape && exploded ? 1.3 : 0.4;
        var yFactor = isLandscape && exploded ? 0.7 : 1.5;
        
        var x = radius * Math.sin(theta) * Math.cos(phi) * xFactor;
        var y = radius * Math.sin(theta) * Math.sin(phi) * yFactor;
        var z = radius * Math.cos(theta);
        
        var scale = (z + radius) / (radius * 2);
        scale = Math.max(0.7, Math.min(1.4, scale));
        
        elem.style.left = (centerPos + x - 40) + 'px';
        elem.style.top = (centerPos + y - 20) + 'px';
        
        var fontSize = isMobile ? 20 : 16;
        if (mode === 'pages' && item.views > 0) {
            var maxViews = 0;
            var minViews = 999999999;
            for (var j = 0; j < items.length; j++) {
                if (items[j].views > 0) {
                    if (items[j].views > maxViews) maxViews = items[j].views;
                    if (items[j].views < minViews) minViews = items[j].views;
                }
            }
            var viewRange = maxViews - minViews;
            if (viewRange > 0) {
                var normalized = (item.views - minViews) / viewRange;
                fontSize = Math.floor((isMobile ? 18 : 14) + (normalized * 16));
            }
        }
        
        fontSize = Math.floor(fontSize * scale);
        elem.style.fontSize = fontSize + 'px';
        
        var zIndex = 100 + Math.floor(scale * 200);
        elem.style.zIndex = zIndex;
        
        var baseOpacity = 0.7 + (scale * 0.3);
        var positionFactor = 1.0;
        
        if (!exploded) {
            var containerHeight = isMobile ? 250 : 280;
            var yPos = parseFloat(elem.style.top);
            var relativeY = yPos / containerHeight;
            positionFactor = 1.0 - (Math.abs(relativeY - 0.5) * 0.6);
            positionFactor = Math.max(0.6, Math.min(1.0, positionFactor));
        }
        
        var finalOpacity = baseOpacity * positionFactor;
        
        if (!isActive && !exploded) {
            finalOpacity *= 0.4;
        }
        
        elem.style.opacity = finalOpacity;
    }
}

function toggleExplode() {
    exploded = !exploded;
    if (exploded) {
        c.className = c.className + ' exploded';
        backdrop.className = 'visible';
    } else {
        c.className = c.className.replace(/\s*exploded/g, '');
        backdrop.className = '';
        if (mode === 'pages') {
            backToTags();
        }
    }
    position();
}

function backToTags() {
    clearItems();
    items = originalTags.slice();
    mode = 'tags';
    c.className = c.className.replace(/mode-\w+/g, '') + ' mode-tags';
    if (exploded) c.className += ' exploded';
    if (visible) c.className += ' visible';
    createElements();
    position();
}

function handleClick(e) {
    e = e || window.event;
    var target = e.target || e.srcElement;
    
    if (loading) return;
    
    if (hasMoved) return;
    
    if (target === closeBtn) {
        if (exploded) toggleExplode();
        if (e.preventDefault) e.preventDefault();
        return false;
    }
    
    if (target === backBtn) {
        backToTags();
        if (e.preventDefault) e.preventDefault();
        return false;
    }
    
    if (target === backdrop) {
        if (exploded) toggleExplode();
        if (e.preventDefault) e.preventDefault();
        return false;
    }
    
    if (isMobile && exploded && target === c) {
        toggleExplode();
        if (e.preventDefault) e.preventDefault();
        return false;
    }
    
    while (target && target !== c) {
        if (target.className && target.className.indexOf('tag-item') !== -1) {
            var isTag = target.getAttribute('data-istag') === '1';
            var text = target.getAttribute('data-text');
            var url = target.getAttribute('data-url');
            
            if (isTag) {
                if (!exploded) toggleExplode();
                loadPagesForTag(text);
            } else {
                window.location.href = url;
            }
            
            if (e.preventDefault) e.preventDefault();
            return false;
        }
        target = target.parentNode;
    }
    
    if (!exploded) {
        toggleExplode();
    }
}

function loadPagesForTag(tagName) {
    loading = true;
    c.className = c.className.replace(/mode-\w+/g, '') + ' loading';
    
    var url = '/Special:Tags?tag=' + encodeURIComponent(tagName);
    var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
    
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) {
            if (xhr.status === 200) {
                parsePages(xhr.responseText);
            } else {
                loading = false;
                c.className = c.className.replace(/loading/g, '') + ' mode-tags';
                if (visible) c.className += ' visible';
            }
        }
    };
    
    try {
        xhr.open('GET', url, true);
        xhr.send();
    } catch (err) {
        loading = false;
    }
}

function parsePages(html) {
    var tempDiv = document.createElement('div');
    tempDiv.innerHTML = html;
    
    var specialTags = tempDiv.querySelector('#SpecialTags');
    if (!specialTags) {
        loading = false;
        return;
    }
    
    var newItems = [];
    var links = specialTags.getElementsByTagName('a');
    
    for (var i = 0; i < links.length; i++) {
        var link = links[i];
        var txt = (link.textContent || link.innerText || '').replace(/^\s+|\s+$/g, '');
        var href = link.getAttribute('href');
        
        if (txt.length > 0 && href) {
            if (href.indexOf('http') !== 0) {
                href = window.location.protocol + '//' + window.location.host + href;
            }
            
            newItems.push({
                text: txt,
                url: href,
                isTag: false,
                views: 0,
                phi: 0,
                theta: 0
            });
        }
    }
    
    clearItems();
    items = newItems;
    distributeItems();
    mode = 'pages';
    
    loadPopularity();
}

function loadPopularity() {
    var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
    
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) {
            if (xhr.status === 200) {
                parsePopularity(xhr.responseText);
            } else {
                finishPageLoad();
            }
        }
    };
    
    try {
        xhr.open('GET', '/Special:Popularpages', true);
        xhr.send();
    } catch (err) {
        finishPageLoad();
    }
}

function parsePopularity(html) {
    var tempDiv = document.createElement('div');
    tempDiv.innerHTML = html;
    
    var rows = tempDiv.getElementsByTagName('tr');
    var viewData = {};
    
    for (var i = 0; i < rows.length; i++) {
        var cells = rows[i].getElementsByTagName('td');
        if (cells.length >= 2) {
            var link = cells[0].getElementsByTagName('a')[0];
            if (link) {
                var pageName = (link.textContent || link.innerText || '').replace(/^\s+|\s+$/g, '');
                var viewText = (cells[1].textContent || cells[1].innerText || '').replace(/^\s+|\s+$/g, '');
                var views = parseInt(viewText.replace(/[^0-9]/g, ''), 10);
                
                if (pageName && !isNaN(views)) {
                    viewData[pageName] = views;
                }
            }
        }
    }
    
    for (var j = 0; j < items.length; j++) {
        if (viewData[items[j].text]) {
            items[j].views = viewData[items[j].text];
        }
    }
    
    finishPageLoad();
}

function finishPageLoad() {
    createElements();
    position();
    
    loading = false;
    c.className = 'mode-pages exploded';
    if (visible) c.className += ' visible';
}

function updateVisibility() {
    var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
    
    if (scrollTop > 1000 && !visible) {
        c.className += ' visible';
        visible = true;
    } else if (scrollTop <= 1000 && visible) {
        c.className = c.className.replace(/\s*visible/g, '');
        visible = false;
    }
}

function activate() {
    isActive = true;
    position();
}

function deactivate() {
    isActive = false;
    position();
}

function down(e) {
    if (loading) return;
    
    activate();
    
    startX = e.clientX || e.pageX || (e.touches ? e.touches[0].clientX : 0);
    startY = e.clientY || e.pageY || (e.touches ? e.touches[0].clientY : 0);
    lastX = startX;
    lastY = startY;
    touchStartTime = new Date().getTime();
    hasMoved = false;
    drag = true;
    
    if (e.preventDefault) e.preventDefault();
    return false;
}

function move(e) {
    if (!drag) return;
    
    var x = e.clientX || e.pageX || (e.touches ? e.touches[0].clientX : 0);
    var y = e.clientY || e.pageY || (e.touches ? e.touches[0].clientY : 0);
    
    var deltaX = Math.abs(x - startX);
    var deltaY = Math.abs(y - startY);
    
    if (deltaX > 10 || deltaY > 10) {
        hasMoved = true;
        c.className += ' dragging';
        angleX += (x - lastX) * 0.008;
        angleY += (y - lastY) * 0.008;
        position();
    }
    
    lastX = x;
    lastY = y;
    
    if (e.preventDefault) e.preventDefault();
    return false;
}

function up(e) {
    if (!drag) return;
    
    drag = false;
    c.className = c.className.replace(/\s*dragging/g, '');
    
    if (!hasMoved) {
        handleClick(e);
    }
}

function handleMouseEnter() {
    activate();
}

function handleMouseLeave() {
    if (!drag) {
        deactivate();
    }
}

function handleResize() {
    detectMobile();
    detectLandscape();
    if (exploded) {
        position();
    }
}

function handleViewportChange() {
    detectLandscape();
    if (exploded) {
        position();
    }
}

function bind() {
    if (backdrop.addEventListener) {
        backdrop.addEventListener('click', handleClick, false);
    } else if (backdrop.attachEvent) {
        backdrop.attachEvent('onclick', handleClick);
    }
    
    if (c.addEventListener) {
        c.addEventListener('mousedown', down, false);
        c.addEventListener('touchstart', down, false);
        c.addEventListener('mouseenter', handleMouseEnter, false);
        c.addEventListener('mouseleave', handleMouseLeave, false);
        document.addEventListener('mousemove', move, false);
        document.addEventListener('touchmove', move, false);
        document.addEventListener('mouseup', up, false);
        document.addEventListener('touchend', up, false);
    } else if (c.attachEvent) {
        c.attachEvent('onmousedown', down);
        c.attachEvent('onmouseenter', handleMouseEnter);
        c.attachEvent('onmouseleave', handleMouseLeave);
        document.attachEvent('onmousemove', move);
        document.attachEvent('onmouseup', up);
    }
    
    if (window.addEventListener) {
        window.addEventListener('scroll', updateVisibility, false);
        window.addEventListener('resize', handleResize, false);
        if (window.visualViewport) {
            window.visualViewport.addEventListener('resize', handleViewportChange, false);
            window.visualViewport.addEventListener('scroll', handleViewportChange, false);
        }
    } else if (window.attachEvent) {
        window.attachEvent('onscroll', updateVisibility);
        window.attachEvent('onresize', handleResize);
    }
}

function init() {
    try {
        detectMobile();
        detectLandscape();
        createContainer();
        extractTags();
        
        if (items.length === 0) {
            c.style.display = 'none';
            backdrop.style.display = 'none';
            return;
        }
        
        createElements();
        position();
        bind();
        updateVisibility();
        
    } catch (err) {
        if (window.console && console.error) {
            console.error(err);
        }
    }
}

if (document.readyState === 'complete') {
    init();
} else if (document.addEventListener) {
    document.addEventListener('DOMContentLoaded', init, false);
} else {
    window.onload = init;
}

})();