var map = function() {

    var that = this;

    this.url = 'external/maps/Data/data.xml';
    this.steunpunten = null;
    this.clicked = null;
    this.clickedtitle = null;

    this.clickmap = $("#clicked");
    this.items = $('#items');
    this.province = $("#provincie");
    this.title = $('#title-provincie > h3');
    this.areas = $('.area');

    this.onMouseClick = function(e) {
        if ($(e.target).attr('title') == that.clicked) {
            that.clicked = null;
            that.clickedtitle = null;
            that.clickmap.css('display', 'none')
        } else {
            that.clicked = $(e.target).attr('title');
            that.clickedtitle = $(e.target).attr('alt');
            that.clickmap.css('display', 'block').attr('src', 'external/maps/images/' + that.clicked +'.png');
        }
        return false;
    }

    this.onMouseOver = function(e) { that.setMap($(e.target).attr('title'), $(e.target).attr('alt'), 'external/maps/images/' + $(e.target).attr('title') +'.png'); }

    this.onMouseOut = function(e) {
        if (that.clicked != null && that.clickedtitle != null) {
            that.setMap(that.clicked, that.clickedtitle, 'external/maps/images/dots.png');
        } else {
            that.setMap(null, null, 'external/maps/images/dots.png');
        }
    }

    this.createItem = function(data) { return $("<li><span class='arrows'>>> </span><a href='" + data.replace(/\s+/g,'-') + "'>" + data + "</a></li>"); }

    this.createItems = function(list) {
        that.items.html("");
        for (var i = 0; i < list.length; i++) {
            that.items.append(that.createItem(list[i].childNodes[0].nodeValue));
        }
    }

    this.setMap = function(title, alt, province) {
        if (title) that.createItems(steunpunten.getElementsByTagName(title)[0].getElementsByTagName('steunpunt'));
        if (alt) that.title.html(alt);
        if (province) that.province.attr('src', province);
    }

    this.areas.click(onMouseClick).hover(onMouseOver, onMouseOut);

    $.ajax({
        url: url,
        dataType: "xml",
        success: function(data) {
            that.steunpunten = data;
        }
    });
}

$(function() {
    map();
})