jQuery(document).ready(function($) {

    if ($('#interactive-map').length < 1) {
        return;
    }

    var mapBase = $('#interactive-map-images-base').val();

    var points = [
        [360, 24],
        [301, 40],
        [233, 51],
        [219, 67],
        [240, 93],
        [227, 117],
        [253, 117],
        [199, 114],
        [203, 123],
        [173, 93],
        [172, 107],
        [165, 120],
        [158, 125],
        [185, 143],
        [182, 155],
        [175, 159],
        [145, 137],
        [131, 187],
        [177, 193],
        [172, 217],
        [134, 220],
        [142, 226],
        [144, 249], [154, 254],
        [191, 236],
        [163, 301],
        [169, 317],
        [201, 275],
        [199, 284],
        [207, 303],
        [305, 266],
        [373, 255]
            ];

    var mapName = 'interactive-map-map',
        pointSize = 5,
        imageCache = $('<div></div>').hide(),
        overlayShown = false,
        map = $('<map></map>').attr('name', mapName),
        img = $('#interactive-map img');

    $('#interactive-map').append(imageCache);

    var preload = function(src) {
        imageCache.append($('<img />').attr('src', src));
    };

    var makeImageURL = function(i) {
        if (i !== null) {
            return mapBase + '/images/interactive-map/map-overlay-' + i + '.png';
        }
        else {
            return mapBase + '/images/interactive-map/map-base.png';
        }
    };

    for (var i = 0, len = points.length; i < len; i++) {
        var point = points[i],
            coords = point[0] + ',' + point[1] + ',' + pointSize,
            area = $('<area shape="circle" href="#"/>').attr('coords', coords).data('pointNum', i);

        area.hover(function() {
            img.prop('src', makeImageURL($(this).data('pointNum')));
        }, function() {
            img.prop('src', makeImageURL(null));
        });
        
        area.click(function() {
            img.prop('src', makeImageURL($(this).data('pointNum')));
            overlayShown = true;
            return false;
        });

        map.append(area);

        preload(makeImageURL(i));
    }
    
    $('#interactive-map').click(function() {
        img.prop('src', makeImageURL(null));
        overlayShown = false;
        return false;
    });

    $('#interactive-map').append(map);

    img.attr('usemap', '#' + mapName);
});