//ImageMap -- jQuery
    function newMap(id,data) {
        var M = {
            config:{
                id:id,
                regios: $(id).parent().find('.regios ul'),
                nonRegioText: '<li style="text-align:center"> -- Kies eerst een regio -- </li>',
                RegioNotFound: '<li style="text-align:center"> -- Hier zijn geen UNICEF teams actief -- </li>',
                data: data,
                activeMap:'',
                speedIn:300,
                speedOut:300,
                listSpeed:50,
                listMultiplier:1
            },
            // constructor
            init: function() {
                this.renderMap();
                //clear regios list if non-javascript was rendered
                this.config.regios.html(this.config.nonRegioText)
            },

            //private Functions
            // -- render map, sets divs and loops to map area's
            renderMap: function(){
                var self = this;

                var container = $(self.config.id);
                var img2 = container.find('.map_overlay').after(container.find('> img').clone().addClass('map_bg'));
                $(container).find(".map_bg").attr({'usemap':'','class':'map_bg'})

                $.each($(container).find(' > map area'),function(){
                    var t = $(this);
                    var alt = t.attr('alt');

                    self.setEvents(t,alt)
                });
            },
            // -- sets events to the map area tags.
            setEvents: function(t,alt){
                var self = this;

                t.click(function(){
                    //Custom Callback based on (alt) name. example outcome: window.MAPgroningen();
                    if(window['MAP'+alt] != null)window['MAP'+alt](t);

                    if(self.config.activeMap !== alt){
                        $('.map_overlay').attr('class','map_overlay map_'+alt);
                        self.config.activeMap = alt;
                        self.fillRegions();
                    }
                    return false;
                });
                // -- animation effects by hovering over/out a map selection
                t.hover(function(){
                        $('.map_overlay').attr('class','map_overlay map_'+alt).fadeIn(self.config.speedIn);
                    }, function(){
                        var revert =  'map_'+self.config.activeMap || 'map_'+alt;
                        if(alt !== self.config.activeMap)$('.map_overlay').attr('class','map_overlay '+revert).hide().fadeIn(self.config.speedOut);
                });
            },
            // - fills the .regios ul element (first .regios element after specified self.config.id element)
            fillRegions: function(){
                var r = this.config.data.regios[this.config.activeMap];
                var classname;
                var N = 0;

                if(r.length > 0){
                    this.config.regios.empty();
                    for(var i in r){
                        N += this.config.listMultiplier;
                        classname = 'list_'+this.config.activeMap+'_'+r[i][0].split(' ').join('_');
                        this.config.regios.append('<li class="' + classname + '"><a href="' + r[i][1] + '">' + r[i][0] + '</a></li>');
                        $('.'+classname).hide().fadeIn(this.config.listSpeed*N);
                    }
                }else{
                    this.config.regios.html(this.config.RegioNotFound);
                }
            }
        }
        M.init();
    }