var wheel, highlight;

$(function() {

    wheel = $('.wheel');
    var mainImg = wheel.find('img');
    wheel.append('<img class="highlight" style="display:none" alt=""/>');
    highlight = wheel.find('.highlight');

    var canClick = false;

    wheel.hover(
        function() {
            mainImg.attr('src', '/images/wheel-plain.jpg');
            wheel.animate({ width: 300, height: 300 }, { complete: function() { canClick = true; wheel.mousemove(highlightSegment); } });
        },
        function() {
            canClick = false;
            highlight.hide();
            mainImg.attr('src', '/images/wheel-nav.jpg');
            wheel.animate({ width: 150, height: 150 }, { complete: function() { wheel.unbind('mousemove', highlightSegment); } });
        }
    ).click(function(e) {
        if (!canClick) return;
        var id = getSegmentId(e);
        wheel.animate({ width: 150, height: 150 }, { complete: function() { window.location = '/segment/' + id; } });
    });

});

var segmentIds = ['gather-organise', 'identify', 'generate', 'decide', 'implement', 'evaluate', 'communicate', 'learn-from-experience'];

function getSegmentId(e) {
    var offset = wheel.offset();
    var x = e.clientX - offset.left - wheel.width() / 2;
    var y = e.clientY - offset.top - wheel.height() / 2;
    var degrees = Math.atan2(x, y) * 180 / Math.PI;
    var index = Math.floor(degrees / -45) + 4;
    var id = segmentIds[index];
    return id;
}

var highlightSegment = (function() {
    var currentIndex = null;
    function fn(e) {
        var id = getSegmentId(e)
        if (id != currentIndex) {
            highlight.attr('src', '/images/' + id + '.png').show();
            currentIndex = id;
        }
    }
    return fn;
})();