Norgeskart

// svg elementet
var svgElt=null;
// bubbling sequence
var bubbleKommuneIx=0;
var myBubbler=null;
// all kommuner
var koms=null;
// actual fylke
var hilitedFylke=null;
// actual kommune
var hilitedKom=null;
// preserve original shape
// add textareas
// remove style set class to kommuner
function prepareMap(){
 svgElt=document.getElementById('NO')
 // append g-elements for bubble and fylkestext
 var T='<g id="appendBubble">  </g>'
      +'<g id="appendFylke">  </g>';
 svgElt.innerHTML+=T; 
 // identify kommuner
 koms=document.querySelectorAll("#NO path");
 for(var i=0; i < koms.length;i++){
    var fyid=koms[i].parentNode.getAttribute("id");
    // set style according to css
    koms[i].removeAttribute("style");
    //koms[i].setAttribute("class","fy"+fyid);
    koms[i].parentNode.setAttribute("class","fyOff");
    // set original shape in a "self-invented" attribute
    koms[i].setAttribute('originald',koms[i].getAttribute('d'));
    // plant click
    koms[i].setAttribute("onclick","kommune_click(evt)");
 } 
 //init zoomer according to svg atts
 var z=document.getElementById("zoomer");
 z.value=400;
}
//------------------
// handle the click
function kommune_click(evt) {
    target=evt.target;
    clearBubbling();
    if(hilitedKom && (myBubbler!=null)){
        hilitedKom.removeAttribute("class");
    }
    drawBubble(target.getAttribute("id"));
}
// reset when stop bubling or reached last
function clearBubbling(){
    for(var i=0;i < koms.length;i++){
        koms[i].setAttribute("class","koOff")    
    }
    if(hilitedFylke)
        hilitedFylke.setAttribute("class","fyOff")}
//----bubbling---
// either based on a click 
// or next in sequence (bubbleKommuneIx)
function drawBubble(koid){
    var ko=document.querySelector('path[id="'+koid+'"]');
    // if not given kommunename or not found
    // show next in bubble sequence
    if(ko){
        for(var i=0;i < koms.length;i++){
            if(koms[i].getAttribute("id")==koid)
                bubbleKommuneIx=i;    
        }
    }
    else{
        if(bubbleKommuneIx >=koms.length)
            bubbleKommuneIx=0;        
    }
    ko=koms[bubbleKommuneIx];
    /*if(hilitedKom){
        hilitedKom.removeAttribute("class");
    }*/
    hilitedKom=ko;    
    hilitedKom.setAttribute("class","koOn");        
    
    var fy=ko.parentNode;
    if(hilitedFylke!=fy){
        if(hilitedFylke)
            hilitedFylke.setAttribute("class","fyOff");
        fy.setAttribute("class","fyOn");
        hilitedFylke=fy;
    }
    
    // identify startpos for shape
    var vals=ko.getAttribute("d").split(' ');
    if(!vals)// in case we are on squares only modus
        vals=ko.getAttribute("m").split(' ');
    var startvals=vals[1].split(',');
    var appB=document.querySelector("g[id=appendBubble]");
    var x1=startvals[0]; 
    var y1=startvals[1];
    // bubble coords off country (Sverige)
    var x2=1500;
    var y2=2000;    
    var T='<line x1="'+x1+'" y1="'+y1+'" x2="'+x2
    +'" y2="'+y2+'" stroke="red" stroke-width="10"/>';
    T+='<ellipse cx="'+x2+'" cy="'+y2
    +'" rx="350" ry="200" fill="rgb(255,255,255)"\
    stroke="blue" stroke-width="5"/>';
    T+='<text text-anchor="middle" x="'+x2+'" y="'+y2
    +'" font-size="70px" fill="red" >'
    +ko.getAttribute("label")+'</text>';
    appB.innerHTML=T;
    // fylkeText coords off country (Nordsjøen)
    var komCount=hilitedFylke.querySelectorAll("path").length;
    x2=150;
    y2=600;
    var appF=document.querySelector("g[id=appendFylke]");
    // fylkename
    T='<text text-anchor="middle" x="'+x2+'" y="'+y2
    +'" font-size="120px" fill="green" >'
    +hilitedFylke.getAttribute("label")+'</text>';
    // kommune count
    T+='<text text-anchor="middle" x="'+x2+'" y="'+(y2+150)
    +'" font-size="120px" fill="green" >'
    +'('+komCount+')</text>';
    
    bubbleKommuneIx++;
    appF.innerHTML=T;
}
function startBubbling(){
    if(myBubbler)
        return;
    myBubbler=setInterval(drawBubble,400);
}
function stopBubbling(){
    if(myBubbler){
        clearInterval(myBubbler);
        myBubbler=null;
        clearBubbling();
    }
}
//---- only small squres or full map -------
function onlySquares(){
    for(var i=0; i< koms.length;i++){
        var ko=koms[i];
        var vals=ko.getAttribute("d").split(' ');
        var svals=vals[1].split(',');
        var x1=svals[0]; 
        var y1=svals[1];
        ko.removeAttribute('d');
        var T='m '+x1+','+y1+' 30,0 0,30 -30,0 z';
        ko.setAttribute("d",T);        
    }
}
// fullmap
function undoSquares(){
    for(var i=0; i< koms.length;i++){
        var ko=koms[i];
        // get back original
        ko.setAttribute('d',ko.getAttribute('originald'));
    }
}
//zooming
function Zoom(){
    var v=document.getElementById("amount").value;
    svgElt.setAttribute("width",''+v+'px');
    svgElt.setAttribute("height",''+v+'px');
}