Norgeskart

// Strategy is to plant the population value
// as attribute to path element, to get direct
// access when clicked
// kommune data. picked up from js-file
// logo addres common
var kroot=kdata.logoLocation;
// list of kommune objects
var list=kdata.list;
// all kommune paths in svg
var allPaths=null;
    
// path elements that should be ignored when counting
// those not found in list 
var ignorable=0;
// kommune selection:
var selected="fill:#990000;fill-opacity:1;stroke:none";
var cleared="fill:#eeeeee;fill-opacity:1;stroke:#000000";
var belove="fill:#eeee00;fill-opacity:1;stroke:#000000";
var above="fill:#888800;fill-opacity:1;stroke:#000000";

// the  element where we show data for a kommune
var msgElt;

//-------------------------------------        
// when user click a kommune
function kommune_click(evt) {
    var target=evt.target;
    var kname=target.getAttribute("label");
    var kid=target.getAttribute("id");
    // show data and mark all according to population
    display(kid,kname);
    // mark selected
    target.setAttribute("style",selected);
}
//-----------------------------
// show all we know about this kommune
function display(kid,kname){
    // find the object
    for(var ix=0;ix < list.length;ix++)
        if(list[ix].id==kid){
            var lim=markLimit(list[ix].pop);
            var S='<hr/><div class="count">'+lim[1]+' har flere innbyggere og<br/>'
                  +(lim[0]-ignorable)+' har færre</div>';
            var im='<img class="im" src="'+kroot+list[ix].logo+'" alt=""/>'
            var N='<div class="kname">'+list[ix].name+'</div>';
            var F='<div class="fylke"> i '+list[ix].fylke+'</div>';
            var P='<div class="pop"> Innbyggere: '+list[ix].pop+'</div>';            
            var A='<div class="areal"> Areal: '+list[ix].area+' km<sup>2</sup></div>';
            var ppa=list[ix].pop/list[ix].area;
            ppa=ppa.toFixed(2);
            var PA='<div class="areal">( pr. km<sup>2</sup> : '+ppa+') </div>';
            msgElt.innerHTML=im+N+F+A+P+PA+S;
            return;
        }
    
    // have not found it, 
    clearAll();
    msgElt.innerHTML="Klikk på en kommune";
    console.log("Not found: ",kname);
}    
//----------------------------------
// find a kommune with a given id
function findKommuneInDataList(kid){
    for(var ix=0;ix < list.length;ix++)
        if(list[ix].id==parseInt(kid))
            return list[ix];
        return null;    
}
//------------------------------------------
// walk svg and plant style according to population
// count
function markLimit(poplimit){
    var countAbove=0;
    var countBelove=0;
    for(kix=0;kix < allPaths.length;kix++){
        //console.log(allPaths[kix].getAttribute("pop"),poplimit);
        var val=allPaths[kix].getAttribute("pop");
        if(val > poplimit){
            allPaths[kix].setAttribute("style",above);
            countAbove++;
        }
        else if(val < poplimit){
            allPaths[kix].setAttribute("style",belove);
            countBelove++;
        }
    }
    return[countBelove,countAbove];
}
//--------------------------
// as we start it
function clearAll(){
    for(var ix=0;ix < allPaths.length;ix++){
        allPaths[ix].setAttribute("style",cleared)
    }
}
//--------------------------------------
// walk the svg-document and plant click function
// add the population value as property to path    
function setUp(){
    
    // set up msg elements
    msgElt=document.getElementById("kommune");
    cmpElt=document.getElementById("compare");
    
    // find all pathelements, plant onclick, style and population
    allPaths=document.getElementsByTagName("path");
    for(var ix=0;ix < allPaths.length;ix++){
        allPaths[ix].setAttribute("onclick","kommune_click(evt)");
        // set population attribute to path-tag
        var K=findKommuneInDataList(allPaths[ix].getAttribute("id"));
        if(K!=null)    
            allPaths[ix].setAttribute("pop",K.pop);
        else{
            console.log("cannot match: ",
                         allPaths[ix].getAttribute("id"),
                         allPaths[ix].getAttribute("label"));
            allPaths[ix].setAttribute("pop","-1");
            // ignore this when counting
            ignorable++;
        }
    }
    clearAll();
}