$(function() {
    $('#noScript').hide();
    $('#kompetenzen-img').show();
    $('#box1, #box2, #box3, #box4, #box5, #box6, #box7, #box8, #box9, #box10, #box11')
        .bind('mouseover', function(event) {

            // Zeige die Box mit dem richtigen Content an
            showBox('content-' + this.id);

            // Extrahiere die Ziffer, die hinter dem Wort Box kommt
            bubbleId = this.id.substring(3,7);

            // Koordinaten an denen das Bubble Highlight angezeigt werden soll
            bubblePositions = Array(
                Array(200,-10), // Suppliers _
                Array(106,58),  // IT-Service Provider
                Array(261,46),  // IT Due-Diligence
                Array(266,158), // IT-Benchmarking
                Array(267,315), // IT-Merger
                Array(100,132), // Source _
                Array(40,254),  // IT strategy _
                Array(135,441), // IT operations
                Array(40,361),  // IT governance _
                Array(140,254), // Development
                Array(100,254)  // MAKE
            );

            // Zeige den Bubble an
            showBubble(bubblePositions[bubbleId-1]);
        })
        .bind('click', function(event) {
			event.preventDefault();
            hideBox();
            hideBubble();
        });
    $('body').bind('click', function(event) {
        hideBox();
        hideBubble();
    });
});

function showBox(contentBox) {
    // Lese die Daten aus dem Alternativtext aus, der angezeigt wird, wenn JS deaktiviert ist.
    ueberschrift = $('#' + contentBox + ' span.headline').text();
    inhalt = $('#' + contentBox + ' span.textlist').html();

    // Erstelle den Inhalt der Box
    $('#box .top').html('<h1>' + ueberschrift + '</h1>' + inhalt);

    // Füge den weissen Punkt ein
    // $('#box li').prepend('<span style="background:url(http://wp1139944.vwp2692.webpack.hosteurope.de/qb3corporate_1/assets/images/bgLi.gif) no-repeat 0 50%; width:4px; padding-right:9px"></span>');

    // Füge den Inhalt in die Box ein und zeige Sie an.
    $('#box').show('2'); // Zeige die Box an.
}

function hideBox() {
    $('#box').hide('3');
}

function showBubble(position) {
    $('#bubble').css('position', 'absolute').css('top', position[0]).css('left', position[1]).show();
}

function hideBubble() {
    $('#bubble').hide();
}