$('.js-tooltip-wrapper').each(function () {
    var $span,
    $text,
    $arrow,
    $wrapper,
    $close,
    resizeEvent,
    hasArrow,
    align,
    name,
    size,
    $currspan;

    $wrapper = $(this);
    name = $wrapper.attr('data-tooltip-for');
    hasArrow = $wrapper.attr('data-tooltip-arrow').toLowerCase() == 'yes';
    align = $wrapper.attr('data-tooltip-align');
    size = parseInt($wrapper.attr('data-tooltip-arrow-size'), 10);
    if (isNaN(size)) {
        size = 10;
    }

    $text = $wrapper.find('.js-tooltip-text');

    $wrapper.removeClass('hidden')
        .css({
            position: 'absolute',
            'z-index': 900001,
            'max-width': '80%',
            'padding': '5px',
            border: '2px solid #428bb5',
            background: '#fff',
            'box-shadow': '5px 5px 5px -2px #333',
        });


    $span = $('span.js-tooltip-click[data-tooltip-name="' + name + '"]');
    $span.removeClass('hidden')
        .text('?')
        .css({
            color: 'white',
            background: 'gray',
            'border-radius': '2em',
            border: '2px solid grey',
            cursor: 'pointer',
            padding: '0 0.3em',
        })
        .attr('title', 'Click for explanation, click again to close');



    $arrow = $('<div>');
    $arrow.addClass('js-tooltip-arrow')
        .css({
            position: 'absolute',
            top: ($wrapper.outerHeight() * 0.3) + 'px',
            left: ('-' + (size+2) + 'px'), // width of arrow + width of text div border
            'z-index': 900001,
            width: 0,
            height: 0,
            'margin-top': ('-' + (size/2) + 'px'),
            'border-color': 'transparent',
            'border-style': 'solid',
            'border-width': size + 'px', //actual width of the arrow
        });

    $close = $('<button>');
    $close.html('<img src="http://slot1.images.wikia.nocookie.net/__cb1458766163/common/skins/oasis/images/icon_close.png">')
        .addClass('close wikia-chiclet-button')
        .click(function(){
            $wrapper.hide();
            $currspan = null;
        })
        .css({
            float: 'right',
        });
    $text.prepend($close);

    if (hasArrow) {
        $wrapper.prepend($arrow);
    }

    resizeEvent = function () {
        if ($currspan == null) {
            return;
        }
        var offset, width;
        offset = $currspan.position();
        width = $currspan.outerWidth();
        $wrapper.css({
                top: (offset.top - $wrapper.outerHeight()*0.3) + 'px',
        });
        $arrow.css({
                top: ($wrapper.outerHeight() * 0.3) + 'px',
        });

        if (offset.left > 0.6 * $('#mw-content-text').width()) {
            $wrapper.css({
                right: (($('#mw-content-text').width() - offset.left) - 5 + size) + 'px',
            });
            $arrow.css({
                left: 'unset',
                right: ('-' + (size+2) + 'px'),
                'border-left-color': '#428bb5',
                'border-right-width': 0,
                'border-right-color': 'transparent',
                'border-left-width': size + 'px',
            });
        } else {
            $wrapper.css({
                left: (offset.left + width - 5 + size) + 'px',
            });
            $arrow.css({
                right: 'unset',
                left: ('-' + (size+2) + 'px'),
                'border-right-color': '#428bb5',
                'border-left-width': 0,
                'border-left-color': 'transparent',
                'border-right-width': size + 'px',
            });
        }

        //$arrow.css('left', ($wrapper.outerHeight() * 0.3) + 'px');
    };

    $(window).resize(resizeEvent);
    $span.click(function () {
        $currspan = $(this);
        $wrapper.toggle();
        resizeEvent();
    });

    $wrapper.hide();
    $span.show();
    $('#WikiaArticle').css('position','unset')
        .parent().css('position','relative'); //move relative up a level to allow overlap
    resizeEvent();
});