import * as UIL from '../../build/uil.module.js'

import { Main } from '../Main.js';
import { Base } from './Base.js';


//------------------------------------------------------//
//                   HUB INTERFACE                      //
//------------------------------------------------------//


export class Hub {

    constructor () {

        this.mapPath = './assets/textures/'

        // Mobile detection
        this.isMobile = this.checkMobile();
        this.isSmallScreen = window.innerWidth < 768;

        // Listen for resize
        window.addEventListener('resize', () => {
            this.isSmallScreen = window.innerWidth < 768;
            this.updateLayout();
        });

        this.round = [
        '<svg height="66" width="66">',
        '<circle cx="33" cy="33" r="27" stroke="rgb(255,255,255)" stroke-width="1" stroke-opacity="0.0" fill="rgb(0,0,0)" fill-opacity="0.1"/>',
        '</svg>'
        ].join("\n");

        this.roundSelected = [
        '<svg height="66" width="66">',
        '<circle cx="33" cy="33" r="27" stroke="rgb(255,255,255)" stroke-width="2" stroke-opacity="0.5" fill="rgb(0,0,0)" fill-opacity="0.3"/>',
        '</svg>'
        ].join("\n");

        this.roundSelect = [
        '<svg height="66" width="66">',
        '<circle cx="33" cy="33" r="30" stroke="rgb(255,255,255)" stroke-width="4" stroke-opacity="1" fill="rgb(0,0,0)" fill-opacity="0.5"/>',
        '</svg>'
        ].join("\n");

    	this.hub = document.getElementById('hub');
    	this.full = null;
    	this.title = null;

        this.isIntro = true;

    	this.timer = null;
    	this.bg = 1;

        this.R=null;
        this.C=null;
        this.I=null;

        this.isGen = false

        //this.rrr= null;

        //this.colors = ['#ffffff', '#338099'];
        this.colors = ['rgba(255,255,255,1)', 'rgba(0,0,0,0.2)', 'rgba(0,0,0,1)', 'rgba(0,0,0,0.5)', 'rgba(0,0,0,0.8)', 'rgba(255,255,255,0.5)'];

        //this.radius = "-moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px;";
        this.radius = "-moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px;";
        this.radiusL = "-moz-border-top-left-radius: 6px; -webkit-border-top-left-radius: 6px; border-top-left-radius: 6px;";
        this.radiusL += "-moz-border-bottom-left-radius: 6px; -webkit-border-bottom-left-radius: 6px; border-bottom-left-radius: 6px;";
        this.radiusR = "-moz-border-top-right-radius: 6px; -webkit-border-top-right-radius: 6px; border-top-right-radius: 6px;";
        this.radiusR += "-moz-border-bottom-right-radius: 6px; -webkit-border-bottom-right-radius: 6px; border-bottom-right-radius: 6px;";

        this.radiusB = "-moz-border-bottom-left-radius: 6px; -webkit-border-bottom-left-radius: 6px; border-bottom-left-radius: 6px;";
        this.radiusB += "-moz-border-bottom-right-radius: 6px; -webkit-border-bottom-right-radius: 6px; border-bottom-right-radius: 6px;";

        this.windowsStyle = ' top:40px; left:10px; border:1px solid '+this.colors[1]+'; background:'+this.colors[3]+';';


        this.budgetWindow = null;
        this.evaluationWindow  = null;
        this.disasterWindow = null;
        this.exitWindow = null;
        this.queryWindow = null;
        this.overlaysWindow = null;
        this.aboutWindow = null;


        this.selector = null;
        this.select = null;

        this.currentToolName = 0;

        this.disasterTypes = ['None', 'Monster', 'Fire', 'Flood', 'Crash', 'Meltdown', 'Tornado'];
        this.disasterButtons = [];

        this.overlaysTypes = ['None', 'Density', 'Growth', 'Land value', 'Crime Rate', 'Pollution', 'Traffic', 'Power Grid', 'Fire', 'Police'];
        this.overlaysButtons =  [];
                                                    

        //this.intro();

        

        this.full = document.createElement('div'); 
        this.full.style.cssText ='position:absolute; top:0px; left:0px; width:100%; height:100%; pointer-events:none; display:block; background:rgba(144,163,183,1); ' //+ this.degrade();

        this.text = document.createElement('div');
        this.text.style.cssText = 'position:absolute; font-size:18px; left:calc(50% - 150px); top:calc(50% + 80px); width:300px; height:80px; pointer-events:none; text-align:center; font-weight: bold;';
        this.text.innerHTML = "欢迎";


        this.loader = document.getElementById('loader');
        this.loader.style.cssText = 'pointer-events:none; position:absolute; left:calc(50% - 100px); top:calc(50% - 100px); width:200px; height:200px;';

        
        /*this.link = document.createElement('div');
        this.link.style.cssText = 'position:absolute;  left:10px; bottom:10px; width:50px; height:50px; pointer-events:auto; display:block;';
        this.link.innerHTML = '<a href="https://github.com/lo-th/3d.city" target="_blank">' + UIL.Tools.icon('github', '#DEDEDE', 50) + '</a>';
        this.hub.appendChild( this.link )*/

        this.link = UIL.add('button', { 
            target:this.hub, w:64, h:64, pos:{left:'10px', bottom:'10px'}, simple:true, 
            button:'#8397ac' 
        }).icon( UIL.Tools.icon('github', '#DEDEDE', 50) ).onChange( function(v){ let w = window.open('https://github.com/lo-th/3d.city','_blank'); } )

        this.donate = UIL.add('button', { 
            target:this.hub, w:64, h:64, pos:{left:'84px', bottom:'10px'}, simple:true, 
            button:'#8397ac' 
        }).icon( UIL.Tools.icon('donate', '#DEDEDE', 50) ).onChange( function(v){ let w = window.open('https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=8KTXA987XHYNQ','_blank'); } )



        this.version = document.createElement('div');
        this.version.style.cssText = 'position:absolute; font-size:14px; right:10px; bottom:10px; text-align:right; width:100px; pointer-events:none; display:block;';
        this.version.innerHTML = "v " + Base.version;
        this.hub.appendChild( this.version )



        /*this.fullMid.appendChild( this.logo );
        this.fullMid.appendChild( this.title );
        this.fullMid.appendChild( this.subtitle );*/

        this.hub.appendChild( this.full );
        this.hub.appendChild( this.loader );
        this.hub.appendChild( this.text );
    }

    message ( s ){

        if( this.text ) this.text.innerHTML = s;

    }

    /*intro (){

    	this.full = document.createElement('div'); 
    	this.full.style.cssText ='position:absolute; top:0px; left:0px; width:100%; height:100%; pointer-events:none; display:block; background:rgba(102,102,230,1); ' //+ this.degrade();

        this.fullMid = document.createElement('div'); 
        this.fullMid.style.cssText ='position:absolute; top:10px; left:50%; width:300px; height:300px; margin-left:-150px; pointer-events:none; display:block;';

        this.title = document.createElement('div');
        this.title.innerHTML = "3D.CITY";
    	this.title.style.cssText = 'position:absolute; font-size:44px; top:50%; left:0; margin-top:-30px; width:300px; height:60px; pointer-events:none; text-align:center;';
        
        this.subtitle = document.createElement('div');
        this.subtitle.style.cssText = 'position:absolute; font-size:14px; top:50%; left:0; margin-top:20px; width:300px; height:80px; pointer-events:none; text-align:center;';
        this.subtitle.innerHTML = "正在生成世界...";

        this.logo = document.getElementById('logo');
        this.logo.style.display = 'block';

        this.full.appendChild( this.fullMid );

        this.fullMid.appendChild( this.logo );
    	this.fullMid.appendChild( this.title );
        this.fullMid.appendChild( this.subtitle );

    	this.hub.appendChild( this.full );

    }*/

    start (){
    	if(this.isIntro){
    		this.timer = setInterval(this.fadding, 100, this);
    	}
    }

    fadding (t){
    	t.bg -= 0.1;
    	t.full.style.background = 'rgba(144,163,183,'+t.bg+')';
       // background-image:linear-gradient(60deg, white, black);
    	if(t.bg<=0){
    		clearInterval(t.timer);
            t.hub.removeChild(t.loader);
            t.hub.removeChild(t.text);
    		t.hub.removeChild(t.full);

            console.log('done')

    		//t.initPrevHub();
            t.isIntro = false;
    	}
    }

    generate( b ) {

        if( b ){
            if(!this.isGen) {
                this.hub.appendChild( this.loader );
                this.hub.appendChild( this.text );
                this.text.innerHTML = '正在生成地图...'
                this.isGen = true
            }
        } else {
            if( this.isGen ){
                this.hub.removeChild( this.loader );
                this.hub.removeChild( this.text );
                this.isGen = false
            }
        }
        
    }



    /*degrade  (){
        var a = -160;
        var p = [0, 30, 100]
        var c0 = '#BFDDFF';
        var c1 = '#3C89CD';
        var c2 = '#214F77';
        var deg = [
            'background:-webkit-gradient(linear, top, bottom, color-stop('+p[0]+'%,'+c0+'),  color-stop('+p[1]+'%,'+c1+'), color-stop('+p[2]+'%,'+c2+'));',
            'background:-moz-linear-gradient('+a+'deg, '+c0+' '+p[0]+'%, '+c1+' '+p[1]+'%, '+c2+' '+p[2]+'%);',
            'background:-webkit-linear-gradient('+a+'deg, '+c0+' '+p[0]+'%, '+c1+' '+p[1]+'%, '+c2+' '+p[2]+'%);',
            'background:-o-linear-gradient('+a+'deg, '+c0+' '+p[0]+'%, '+c1+' '+p[1]+'%, '+c2+' '+p[2]+'%);',
            'background:linear-gradient('+a+'deg, '+c0+' '+p[0]+'%, '+c1+' '+p[1]+'%, '+c2+' '+p[2]+'%);'
        ].join("\n");
        return deg;
    },*/

    initPrevHub() {

        /*this.full = document.createElement('div');
        this.full.style.cssText ='position:absolute; top:10px; left:50%; margin-left:-150px; width:300px; height:300px; pointer-events:none;';
        this.full.id = 'fullStart';*/

        //this.hub.appendChild( this.full );
        //var b1 = this.addButton(this.full, 'Play Game', [276,48,40], 'position:absolute; top:10px; left:0px;');
        //let b2 = this.addButton(this.full, 'New Map',  [276, 26, 22], 'position:absolute; top:150px; left:0px;');
        //var b3 = this.addButton(this.full, 'Height Map',  [120, 26, 22], 'position:absolute; top:150px; right:0px;');
        //let b4 = this.addButton(this.full, 'Load Map',  [276, 26, 22], 'position:absolute; top:90px; left:0px;');
        //this.addSelector("DIFFICULTY", ['LOW', 'MEDIUM', 'HARD'], Main.setDifficulty, 0);

        //b1.addEventListener('click',  function ( e ) { e.preventDefault(); Main.playMap(); }, false);
        //b2.addEventListener('click',  function ( e ) { e.preventDefault(); Main.newMap(); }, false);
       // b3.addEventListener('click',  function ( e ) { e.preventDefault(); Main.newHeightMap(); }, false);
        //b4.addEventListener('click',  function ( e ) { e.preventDefault(); Main.loadGame(true); }, false);

    }

    //--------------------------------------start hub

    initStartHub() {

       /* this.full = document.createElement('div');
        this.full.style.cssText ='position:absolute; top:10px; left:50%; margin-left:-150px; width:300px; height:300px; pointer-events:none;';
        this.full.id = 'fullStart';

        this.hub.appendChild( this.full );
        var b1 = this.addButton(this.full, 'Play Game', [276,48,40], 'position:absolute; top:10px; left:0px;');
    	var b2 = this.addButton(this.full, 'New Map',  [120, 26, 22], 'position:absolute; top:150px; left:0px;');
        var b3 = this.addButton(this.full, 'Height Map',  [120, 26, 22], 'position:absolute; top:150px; right:0px;');
        var b4 = this.addButton(this.full, 'Load Map',  [276, 26, 22], 'position:absolute; top:90px; left:0px;');
        this.addSelector("DIFFICULTY", ['LOW', 'MEDIUM', 'HARD'], Main.setDifficulty, 0);

        b1.addEventListener('click',  function ( e ) { e.preventDefault(); Main.playMap(); }, false);
        b2.addEventListener('click',  function ( e ) { e.preventDefault(); Main.newMap(); }, false);
        b3.addEventListener('click',  function ( e ) { e.preventDefault(); Main.newHeightMap(); }, false);
        b4.addEventListener('click',  function ( e ) { e.preventDefault(); Main.loadGame(true); }, false);*/

    }


    //--------------------------------------game hub

    initGameHub  (){

        this.link.dispose()
        this.donate.dispose()

        var _this = this;
        //this.removeSelector("DIFFICULTY");
        //this.clearElement('fullStart');

        this.toolScroll = document.createElement('div');
        this.toolScroll.style.cssText = 'position:absolute; margin:0px; padding:0px; top:60px; right:12px; width:198px; max-height:calc(100% - 80px); overflow-y:auto; overflow-x:hidden; pointer-events:auto; touch-action:pan-y; -webkit-overflow-scrolling:touch;';
        this.hub.appendChild( this.toolScroll );

        // prevent camera gestures when scrolling tools on mobile
        this.toolScroll.addEventListener('touchstart', (e) => e.stopPropagation(), { passive: true });
        this.toolScroll.addEventListener('touchmove', (e) => e.stopPropagation(), { passive: true });
        this.toolScroll.addEventListener('pointerdown', (e) => e.stopPropagation(), { passive: true });
        this.toolScroll.addEventListener('pointermove', (e) => e.stopPropagation(), { passive: true });

        this.toolSet = document.createElement('div');
        this.toolSet.style.cssText ='position:relative; margin:0px; padding:0px; width:198px; height:456px; pointer-events:none;';
        this.toolScroll.appendChild( this.toolSet );
        this.toolInfo = document.createElement('div');
        this.toolInfo.style.cssText ='position:absolute; top:15px; right:12px; width:198px; height:50px; pointer-events:none; font-size:16px;';
        this.hub.appendChild( this.toolInfo );
        this.toolInfo.innerHTML = "选择<br>工具";

        var b;
        for(var i = 0; i<18; i++){
            b = this.addSVGButton(this.toolSet);
            b.name = i+1;
        }

        this.selector = document.createElement('div');
        this.selector.style.cssText = "position:absolute; top:0px; left:0px; pointer-events:none; display:none;"
        this.selector.innerHTML = this.roundSelected;
        this.toolSet.appendChild( this.selector );

        this.select = document.createElement('div');
        this.select.style.cssText = "position:absolute; top:0px; left:0px; pointer-events:none; display:none;"
        this.select.innerHTML = this.roundSelect;
        this.toolSet.appendChild( this.select );

        var img = document.createElement("img");
        img.src = this.mapPath + "interface.png";
        this.toolSet.appendChild(img);
        img.style.cssText ='position:absolute; margin:0px; padding:0px; top:0px; right:0px; width:198px; height:396px; pointer-events:none;';

        this.addSelector("Speed", ['II', '>', '>>', '>>>', '>>>'], Main.setSpeed, 2, [20,20,20,20,20]);

        var b1 = this.addButton(this.hub, '预算', [75,16,14], 'position:absolute; left:10px; top:-7px; font-weight:bold;', true);
        b1.addEventListener('click',  function ( e ) { e.preventDefault(); Main.getBudjet(); }, false);

        var b2 = this.addButton(this.hub, '评估', [75,16,14], 'position:absolute; left:110px; top:-7px; font-weight:bold;', true);
        b2.addEventListener('click',  function ( e ) { e.preventDefault(); Main.getEval(); }, false);

        /*var b3 = this.addButton(this.hub, 'Disaster', [75,16,14], 'position:absolute; left:210px; top:-7px; font-weight:bold;', true);
        b3.addEventListener('click',  function ( e ) { e.preventDefault();  _this.openDisaster(); }, false);*/

        var b4 = this.addButton(this.hub, '退出', [75,16,14], 'position:absolute; left:310px; top:-7px; font-weight:bold;', true);
        b4.addEventListener('click',  function ( e ) { e.preventDefault();  _this.openExit();  }, false);

        var b5 = this.addButton(this.hub, '关于', [75,16,14], 'position:absolute; left:410px; top:-7px; font-weight:bold;', true);
        b5.addEventListener('click',  function ( e ) { e.preventDefault();  _this.openAbout();  }, false);


        this.H = [];
        

        this.roo = document.createElement('div');
        this.roo.style.cssText = "position:absolute; bottom:11px; left:10px; width:60px; height:60px; pointer-events:none; transform:rotate(45deg); ";
        this.roo.style.cssText += "-moz-border-radius: 30px; -webkit-border-radius: 30px; border-radius: 30px; overflow:hidden; ";
        this.hub.appendChild( this.roo );

        var dd;
        for(i = 0; i<4; i++){
            dd = document.createElement('div');
            if(i==0)dd.style.cssText = "position:absolute; top:0px; left:0px; width:30px; height:30px; pointer-events:auto; cursor:pointer; background:#ffffff;";
            if(i==1)dd.style.cssText = "position:absolute; top:0px; right:0px; width:30px; height:30px; pointer-events:auto; cursor:pointer;";
            if(i==2)dd.style.cssText = "position:absolute; bottom:0px; right:0px; width:30px; height:30px; pointer-events:auto; cursor:pointer;";
            if(i==3)dd.style.cssText = "position:absolute; bottom:0px; left:0px; width:30px; height:30px; pointer-events:auto; cursor:pointer;";
            dd.name = i;
            this.roo.appendChild( dd );
            dd.addEventListener('click',  function ( e ) { 
                e.preventDefault();
                _this.hideoldSel();
                _this.H[this.name].style.background = '#ffffff';
                Main.setTimeColors(this.name);
                 }, false);
            this.H[i]=dd;
        }


        var winter = document.createElement("div");
        winter.style.cssText = "position:absolute; bottom:80px; left:25px; width:30px; height:30px; pointer-events:auto; cursor:pointer; background:rgba(0,0,0,0); ";
        winter.style.cssText += "-moz-border-radius: 30px; -webkit-border-radius: 30px; border-radius: 30px; ";
        this.hub.appendChild(winter);

        winter.addEventListener('click',  function ( e ) { 
            view3d.winterSwitch();
            if(view3d.isWinter) this.style.background = 'rgba(255,255,255,0.5);';
            else  this.style.background = 'rgba(0,0,0,0);';
        }, false);

        this.bottomMenuImg = document.createElement("img");
        this.bottomMenuImg.src = this.mapPath + "basemenu.png";
        this.hub.appendChild(this.bottomMenuImg);
        this.bottomMenuImg.style.cssText ='position:absolute; margin:0px; padding:0px; bottom:0px; left:0px; width:630px; height:120px; pointer-events:none;';

        this.initCITYinfo();

        // Apply responsive layout
        this.updateLayout();
    }

    hideoldSel  (){
        for(var i = 0; i<4; i++){
            this.H[i].style.background = 'none';
        }
    }

    //-----------------------------------CITY INFO

    initCITYinfo  (){

        this.date = document.createElement('div');
        this.date.style.cssText = 'font-size:14px; position:absolute; width:70px; height:19px; bottom:15px; left:65px; text-align:right; font-weight:bold;';

        this.money = document.createElement('div');
        this.money.style.cssText = 'font-size:14px; position:absolute; width:70px; height:19px; bottom:15px; left:295px; text-align:right; font-weight:bold;';

        this.population = document.createElement('div');
        this.population.style.cssText = 'font-size:14px; position:absolute; width:70px; height:19px; bottom:15px; left:180px; text-align:right; font-weight:bold;';

        this.score = document.createElement('div');
        this.score.style.cssText = 'font-size:14px; position:absolute; width:70px; height:19px; bottom:15px; left:410px; text-align:right; font-weight:bold;';

        this.msg = document.createElement('div');
        this.msg.style.cssText = 'font-size:14px; letter-spacing:0.02em; position:absolute; width:420px; height:20px; bottom:44px; left:76px; text-align:left; color:'+this.colors[4]+'; font-weight:bold;';

        this.hub.appendChild( this.date );
        this.hub.appendChild( this.money );
        this.hub.appendChild( this.population );
        this.hub.appendChild( this.score );
        this.hub.appendChild( this.msg );

        this.initRCI();
    }

    updateCITYinfo  (infos){
        this.date.innerHTML = infos[0];
        this.money.innerHTML = infos[4];
        this.population.innerHTML = infos[3];
        this.score.innerHTML =  infos[2];

        this.msg.innerHTML = infos[8];

        this.updateRCI( infos[5], infos[6], infos[7] );
    }

    //-----------------------------------QUERY

    //-----------------------------------ALL WINDOW

    testOpen  (){
        var t = "";
        if(this.budgetWindow !== null && this.budgetWindow.className == "open"){
            this.closeBudget();
            t = 'budget';
        }
        if(this.evaluationWindow !== null && this.evaluationWindow.className == "open"){
            this.closeEval();
            t = 'evaluation';
        }
        if(this.disasterWindow !== null && this.disasterWindow.className == "open"){
            this.closeDisaster();
            t = 'disaster';
        }
        if(this.exitWindow !== null && this.exitWindow.className == "open"){
            this.closeExit();
            t = 'exit';
        }
        if(this.queryWindow !== null && this.queryWindow.className == "open"){
            this.closeQuery();
            t = 'query';
        }
        if(this.overlaysWindow !== null && this.overlaysWindow.className == "open"){
            this.closeOverlays();
            t = 'overlays';
        }
        if(this.aboutWindow !== null && this.aboutWindow.className == "open"){
            this.closeAbout();
            t = 'about';
        }

        return t;

    }

    //-----------------------------------ABOUT WINDOW

    openAbout  (data){
        var _this = this;

        var test = this.testOpen();
        if(test == 'about') return;

        if(this.aboutWindow == null){
            this.aboutWindow = document.createElement('div');
            this.aboutWindow.style.cssText = this.radius+ 'position:absolute; width:200px; height:210px; pointer-events:none; display:block;'+ this.getWindowStyle(200, 210);
            this.hub.appendChild( this.aboutWindow );
            var bg1 = this.addButton(this.aboutWindow, 'X', [16,16,14], 'position:absolute; left:10px; top:10px;');
            bg1.addEventListener('click',  function(e){ e.preventDefault(); _this.closeAbout(); }, false);

            this.fps = document.createElement('div');
            this.fps.style.cssText ='position:absolute; top:20px; left:60px; width:120px; height:20px; pointer-events:none; font-size:12px; text-align:center; color:'+this.colors[0]+';';
            this.aboutWindow.appendChild( this.fps );
            this.abb = document.createElement('div');
            this.abb.style.cssText ='position:absolute; top:60px; left:10px; width:180px; height:180px; pointer-events:none; font-size:12px; text-align:center; color:'+this.colors[0]+';';
            this.aboutWindow.appendChild( this.abb );
            this.linke = document.createElement('div');
            this.linke.style.cssText ='position:absolute; top:160px; left:10px; width:180px; height:20px; pointer-events:auto; font-size:12px; text-align:center; color:'+this.colors[0]+';';
            this.aboutWindow.appendChild( this.linke );

            this.abb.innerHTML = "3D CITY<br><br>All 3d side made by Lo.th<br>Simulation from MicropolisJS<br><br><br>More info and source<br>";
            this.linke.innerHTML = "<a href='https://github.com/lo-th/3d.city' target='_blank'>https://github.com/lo-th/3d.city";



        } else {
            this.aboutWindow.style.display = 'block';
        }

        Main.showStats();

        this.aboutWindow.className = "open";

    }

    upStats  (fps, memory){
        this.fps.innerHTML = 'Fps: '+ fps + ' <br> geometry: ' + memory;
    }

    closeAbout  (){
        Main.hideStats();

        this.aboutWindow.style.display = 'none';
        this.aboutWindow.className = "close";
    }


    //-----------------------------------OVERLAYS WINDOW  

    openOverlays  (data){
        var _this = this;     

        var test = this.testOpen();
        if(test == 'overlays') return;

        if(this.overlaysWindow == null){
            this.overlaysWindow = document.createElement('div');
            this.overlaysWindow.style.cssText = this.radius+ 'position:absolute; width:140px; height:420px; pointer-events:none; display:block;'+ this.getWindowStyle(140, 420);
            this.hub.appendChild( this.overlaysWindow );

            //var bg1 = this.addButton(this.overlaysWindow, 'X', [16,16,14], 'position:absolute; left:50px; top:10px;');
            //bg1.addEventListener('click',  function(e){ e.preventDefault(); _this.closeQuery(); }, false);

            for(var i=0; i<this.overlaysTypes.length; i++){
                this.overlaysButtons[i] = this.addButton(this.overlaysWindow, this.overlaysTypes[i].toUpperCase(), [96,16,14],'position:absolute; left:10px; top:'+(10+(i*40))+'px;');
                this.overlaysButtons[i].name = this.overlaysTypes[i];
                this.overlaysButtons[i].addEventListener('click',  function(e){ e.preventDefault(); setOverlays(this.name); }, false);
            }
        } else {
            this.overlaysWindow.style.display = 'block';
        }
        this.overlaysWindow.className = "open";
    }

    closeOverlays  (){
        this.overlaysWindow.style.display = 'none';
        this.overlaysWindow.className = "close";
    }


    //-----------------------------------QUERY WINDOW

    openQuery  (data){
        var _this = this;

        //var test = this.testOpen();
        //if(test == 'query') return;

        if(this.queryWindow == null){
            this.queryWindow = document.createElement('div');
            this.queryWindow.style.cssText =this.radius+ 'position:absolute; width:140px; height:180px; pointer-events:none; display:block;'+ this.getWindowStyle(140, 180);
            this.hub.appendChild( this.queryWindow );

            var bg1 = this.addButton(this.queryWindow, 'X', [16,16,14], 'position:absolute; left:50px; top:10px;');
            bg1.addEventListener('click',  function(e){ e.preventDefault(); _this.closeQuery(); }, false);

            this.queryResult = document.createElement('div');
            this.queryResult.style.cssText ='position:absolute; top:60px; left:10px; width:110px; height:100px; pointer-events:none; font-size:12px; text-align:center; color:'+this.colors[0]+';';
            this.queryWindow.appendChild( this.queryResult );
        } else {
            this.queryWindow.style.display = 'block';
        }

        this.queryResult.innerHTML = data;
        this.queryWindow.className = "open";
    }

    closeQuery  (){
        this.queryWindow.style.display = 'none';
        this.queryWindow.className = "close";
    }

    //-----------------------------------BUDGET WINDOW

    openEval  (data){
        var _this = this;

        var test = this.testOpen();
        if(test == 'evaluation') return;

        if(this.evaluationWindow == null){
            this.evaluationWindow = document.createElement('div');
            this.evaluationWindow.style.cssText =this.radius+ 'position:absolute; width:200px; height:300px; pointer-events:none; display:block;'+ this.getWindowStyle(200, 300);
            this.hub.appendChild( this.evaluationWindow );

            this.evaltOpinion = document.createElement('div');
            this.evaltOpinion.style.cssText ='position:absolute; top:10px; left:10px; width:180px; height:100px; pointer-events:none; color:'+this.colors[0]+';';
            this.evaluationWindow.appendChild( this.evaltOpinion );

            this.evaltYes = document.createElement('div');
            this.evaltYes.style.cssText ='position:absolute; top:46px; left:26px; width:60px; height:20px; pointer-events:none; color:#33FF33; font-size:16px; font-weight:bold;';
            this.evaluationWindow.appendChild( this.evaltYes );

            this.evaltNo = document.createElement('div');
            this.evaltNo.style.cssText ='position:absolute; top:46px; right:26px; width:60px; height:20px; pointer-events:none; color:#FF3300;  font-size:16px; font-weight:bold;';
            this.evaluationWindow.appendChild( this.evaltNo );

            this.evaltProb = document.createElement('div');
            this.evaltProb.style.cssText ='position:absolute; top:100px; left:10px; width:180px; height:60px; pointer-events:none; color:'+this.colors[0]+'; font-size:16px; ';
            this.evaluationWindow.appendChild( this.evaltProb );

            this.evaltOpinion.innerHTML = "<b>Public opinion</b><br>Is the mayor doing a good job ?<br> <br> <br> <br>What are the worst problems ?<br>"

        } else {
            this.evaluationWindow.style.display = 'block';
        }

        this.evaltYes.innerHTML = 'YES:' + data[0] + '%';
        this.evaltNo.innerHTML = 'NO:' +(100-data[0] )+ '%';

        this.evaltProb.innerHTML = data[1];

        this.evaluationWindow.className = "open";
    }

    closeEval  (){
        this.evaluationWindow.style.display = 'none';
        this.evaluationWindow.className = "close";
    }

    //-----------------------------------EXIT WINDOW

    openExit  (data){
        var _this = this;

        var test = this.testOpen();
        if(test == 'exit') return;

        if(this.exitWindow == null){
            this.exitWindow = document.createElement('div');
            this.exitWindow.style.cssText =this.radius+ 'position:absolute; width:140px; height:180px; pointer-events:none; display:block;'+ this.getWindowStyle(140, 180);
            this.hub.appendChild( this.exitWindow );

            var bg1 = this.addButton(this.exitWindow, 'X', [16,16,14], 'position:absolute; left:50px; top:10px;');
            var bg2 = this.addButton(this.exitWindow, 'NEW MAP', [96,16,14], 'position:absolute; left:10px; top:50px;');
            var bg3 = this.addButton(this.exitWindow, 'SAVE', [96,16,14], 'position:absolute; left:10px; top:90px;');
            var bg4 = this.addButton(this.exitWindow, 'LOAD', [96,16,14], 'position:absolute; left:10px; top:130px;');

            bg1.addEventListener('click',  function(e){ e.preventDefault(); _this.closeExit(); }, false);
            bg2.addEventListener('click',  function(e){ e.preventDefault(); Main.newGameMap(); }, false);
            bg3.addEventListener('click',  function(e){ e.preventDefault(); Main.saveGame(); }, false);
            bg4.addEventListener('click',  function(e){ e.preventDefault(); Main.loadGame(); }, false);

            /*var x = document.createElement("INPUT");
            x.setAttribute("id", "fileToLoad");
            x.setAttribute("type", "file");
            x.style.cssText = "pointer-events:auto; opacity:0; position:absolute; left:10px; top:130px; width:120px; height:40px; overflow:hidden;";
            */
           // x.addEventListener( 'mouseover', function ( e ) { e.preventDefault(); bg4.style.border = '4px solid '+_this.colors[0];  bg4.style.backgroundColor = _this.colors[0]; bg4.style.color = _this.colors[1]; }, false );

           // x.addEventListener( 'mouseout', function ( e ) { e.preventDefault(); bg4.style.border = '4px solid '+_this.colors[1]; bg4.style.backgroundColor = _this.colors[1]; bg4.style.color = _this.colors[0];  }, false );

           // x.addEventListener( 'mouseover', function ( e ) { e.preventDefault();  bg4.style.backgroundColor = _this.colors[2]; }, false );
           // x.addEventListener( 'mouseout', function ( e ) { e.preventDefault();  bg4.style.backgroundColor = _this.colors[1];  }, false );

            //x.addEventListener('change', loadGame, false);


            //"fileToLoad"
            //this.exitWindow.appendChild( x );

        } else {
            this.exitWindow.style.display = 'block';
            //this.setBudgetValue();
        }

        this.exitWindow.className = "open";
    }

    closeExit  (){
        this.exitWindow.style.display = 'none';
        this.exitWindow.className = "close";
    }


    //-----------------------------------BUDGET WINDOW

    openBudget  (data){
        var _this = this;

        var test = this.testOpen();
        if(test == 'budget') return;

        /*if(this.budgetWindow !== null && this.budgetWindow.className == "open"){
            this.closeBudget(); 
            return;
        }*/

        this.dataKeys = ['roadFund', 'roadRate', 'fireFund', 'fireRate','policeFund', 'policeRate', 'taxRate', 'totalFunds', 'taxesCollected'];

        var i = this.dataKeys.length;

        var elem;
        while(i--){
            this[this.dataKeys[i]] = data[this.dataKeys[i]];
        }

        var previousFunds = data.totalFunds;
        var taxesCollected = data.taxesCollected;
        var cashFlow = taxesCollected - this.roadFund - this.fireFund - this.policeFund;
        var currentFunds = previousFunds + cashFlow;

        if(this.budgetWindow == null){
            this.budgetWindow = document.createElement('div');
            this.budgetWindow.style.cssText =this.radius+ 'position:absolute; width:200px; height:300px; pointer-events:none; display:block;'+ this.getWindowStyle(200, 300);
            this.hub.appendChild( this.budgetWindow );

            this.addSlider(this.budgetWindow, 10, 'Tax', this.taxRate, null, 'green', 20);
            this.addSlider(this.budgetWindow, 70, 'Roads', this.roadRate, this.roadFund, 'red', 100);
            this.addSlider(this.budgetWindow, 110, 'Fire', this.fireRate, this.fireFund, 'red', 100);
            this.addSlider(this.budgetWindow, 150, 'Police', this.policeRate, this.policeFund, 'red', 100);

            this.budgetResult = document.createElement('div');
            this.budgetResult.style.cssText ='position:absolute; top:200px; left:10px; width:180px; height:300px; pointer-events:none; color:'+this.colors[0]+';';
            
            this.budgetWindow.appendChild( this.budgetResult );

            var bg1 = this.addButton(this.budgetWindow, '关闭', [70,16,14], 'position:absolute; left:10px; bottom:10px;');
            var bg2 = this.addButton(this.budgetWindow, '应用', [70,16,14], 'position:absolute; rigth:10px; bottom:10px;');

            bg1.addEventListener('click',  function(e){ e.preventDefault(); _this.closeBudget(); }, false);
            bg2.addEventListener('click',  function(e){ e.preventDefault(); _this.applyBudget(); }, false);

        } else {
            this.budgetWindow.style.display = 'block';
            this.setBudgetValue();
        }

        this.budgetResult.innerHTML = "年度收支：" + cashFlow + "￥" + "<br>税收：" + taxesCollected + "￥";

        this.budgetWindow.className = "open";

    }

    applyBudget  (){
        this.budgetWindow.style.display = 'none';
        this.budgetWindow.className = "close";

        Main.setBudjet([this.taxRate, this.roadRate, this.fireRate, this.policeRate ]);
    }

    closeBudget  (){
        this.budgetWindow.style.display = 'none';
        this.budgetWindow.className = "close";
    }

    setBudgetValue (){
        this.setSliderValue('Tax', this.taxRate, 20, null);
        this.setSliderValue('Roads', this.roadRate, 100, this.roadFund);
        this.setSliderValue('Fire', this.fireRate, 100, this.fireFund);
        this.setSliderValue('Police', this.policeRate, 100, this.policeFund);
    }

    //-----------------------------------DISASTER WINDOW

    openDisaster  (){
        var _this = this;
        var test = this.testOpen();
        if(test == 'disaster') return;
        if(this.disasterWindow == null){
            this.disasterWindow = document.createElement('div');
            this.disasterWindow.style.cssText =this.radius+ 'position:absolute; width:140px; height:300px; pointer-events:none; display:block;'+ this.getWindowStyle(140, 300);
            this.hub.appendChild( this.disasterWindow );

            for(var i=0; i<this.disasterTypes.length; i++){
                this.disasterButtons[i] = this.addButton(this.disasterWindow, this.disasterTypes[i].toUpperCase(), [96,16,14],'position:absolute; left:10px; top:'+(10+(i*40))+'px;');
                this.disasterButtons[i].name = this.disasterTypes[i];
                this.disasterButtons[i].addEventListener('click',  function(e){ e.preventDefault(); Main.setDisaster(this.name); }, false);
            }
        } else {
            this.disasterWindow.style.display = 'block';
            //this.setBudgetValue();
        }

        this.disasterWindow.className = "open";

    }

    closeDisaster  (){
        this.disasterWindow.style.display = 'none';
        this.disasterWindow.className = "close";
    }


    //-----------------------------------SLIDER

    addSlider  (target, py, name, value, v2, color, max){
        var _this = this;
        var labelMap = { Tax:'税率', Roads:'道路', Fire:'消防', Police:'警察' };
        var label = labelMap[name] || name;
        var txt = document.createElement( 'div' );
        var bg = document.createElement( 'div' );
        var sel = document.createElement( 'div' );
        txt.style.cssText ='position:absolute; left:10px; top:-18px; pointer-events:none; width:180px; height:20px; font-size:12px; color:'+this.colors[0]+';';
        bg.style.cssText =this.radius+'position:absolute; left:10px; top:'+(py+20)+'px; padding:0; cursor:w-resize; pointer-events:auto; width:180px; height:20px; background-color:'+ _this.colors[1]+';';
        sel.style.cssText =this.radius+'position:absolute; pointer-events:none; margin:5px; width:100px; height:10px; background-color:'+color+';';
        target.appendChild( bg );
        bg.appendChild( sel );
        bg.appendChild( txt );
        bg.name = name;
        bg.id = name;

        if(v2!==null){
            txt.innerHTML = label + " " + value + '%（' + v2 + "￥ × " + value + "% = " + Math.floor(v2 * (value / 100)) + "￥）";
        } else {
            txt.innerHTML = label + " " + value + '%';
        }

        sel.style.width = 170*(value/max)+'px';
        bg.className = "up";

        bg.addEventListener( 'mouseout', function(e){ e.preventDefault();this.className = "up"; this.style.backgroundColor = _this.colors[1]; }, false );
        bg.addEventListener( 'mouseover', function(e){ e.preventDefault(); this.style.backgroundColor = _this.colors[2]; }, false );
        bg.addEventListener( 'mouseup', function(e){ e.preventDefault(); this.className = "up"; }, false );
        bg.addEventListener( 'mousedown', function(e){ e.preventDefault(); this.className = "down"; _this.dragSlider(this, e.clientX, max); }, false );
        bg.addEventListener( 'mousemove', function(e){ e.preventDefault(); _this.dragSlider(this, e.clientX, max); } , false );
    }

    setSliderValue (name, value, max, v2){
        var labelMap = { Tax:'税率', Roads:'道路', Fire:'消防', Police:'警察' };
        var label = labelMap[name] || name;
        var slide = document.getElementById(name);
        var children = slide.childNodes;
        children[0].style.width = 170*(value/max)+'px';
        if(v2!==null){
            children[1].innerHTML = label + " " + value + '%（' + v2 + "￥ × " + value + "% = " + Math.floor(v2 * (value / 100)) + "￥）";
        } else {
            children[1].innerHTML = label + " " + value + '%';
        }
    }

    dragSlider  (t, x, max){
        if(t.className == "down"){
            var children = t.childNodes;
            var rect = t.getBoundingClientRect();
            var value = Math.round(((x-rect.left)/170)*max);
            if(value<0) value = 0;
            if(value>max) value = max;
            children[0].style.width = 170*(value/max)+'px';
            var labelMap = { Tax:'税率', Roads:'道路', Fire:'消防', Police:'警察' };
            var label = labelMap[t.name] || t.name;

            switch(t.name){
                case 'Tax': children[1].innerHTML = label+" "+value+'%'; this.taxRate = value; break;
                case 'Roads': children[1].innerHTML = label+" "+value+'%（'+this.roadFund+"￥ × "+value+"% = " + Math.floor(this.roadFund * (value / 100))+"￥）"; this.roadRate = value; break;
                case 'Fire': children[1].innerHTML = label+" "+value+'%（'+this.fireFund+"￥ × "+value+"% = " + Math.floor(this.fireFund * (value / 100))+"￥）"; this.fireRate = value; break;
                case 'Police': children[1].innerHTML = label+" "+value+'%（'+this.policeFund+"￥ × "+value+"% = " + Math.floor(this.policeFund * (value / 100))+"￥）"; this.policeRate = value; break;
            }
        }
    }


    //-----------------------------------RCI

    initRCI  (){

        var cont = document.createElement('div');
        cont.id = 'RCI';
        cont.style.cssText = 'font-size:10px; position:absolute; width:70px; height:70px; bottom:20px; right:20px;';

        var txt = document.createElement('div');
        txt.style.cssText = 'font-size:10px; position:absolute; width:46px; height:14px; bottom:28px; left:10px; background:#cccccc; padding:0px 2px;  letter-spacing:12px; text-align:center; color:#000000;';
        txt.innerHTML = "RCI";

        this.R = document.createElement('div');
        this.R.id = 'R';
        this.R.style.cssText = 'position:absolute; width:10px; height:20px; bottom:42px; left:10px; background:#30ff30;';
        cont.appendChild( this.R );

        this.C = document.createElement('div');
        this.C.id = 'C';
        this.C.style.cssText = 'position:absolute; width:10px; height:20px; bottom:42px; left:30px; background:#3030ff;';
        cont.appendChild( this.C );

        this.I = document.createElement('div');
        this.I.id = 'I';
        this.I.style.cssText = 'position:absolute; width:10px; height:20px; bottom:42px; left:50px; background:#ffff30;';
        cont.appendChild( this.I );

        cont.appendChild( txt );
        this.hub.appendChild( cont );
    }

    updateRCI  (r,c,i){
        this.R.style.height = r/100+'px'; 
        this.C.style.height = c/100+'px';
        this.I.style.height = i/100+'px';
        //console.log(r/100)
        if(r>0){ this.R.style.bottom ='42px';}
        else { this.R.style.bottom =28+(r/100)+'px';}

        if(c>0){ this.C.style.bottom ='42px';}
        else { this.C.style.bottom =28+(c/100)+'px'; }

        if(i>0){ this.I.style.bottom ='42px';;}
        else { this.I.style.bottom =28+(i/100)+'px'; }
    }

    //---------------------------------- SELECTOR 

    addSelector  ( type, names, fun, current, size){
        var _this = this;
        var cont = document.createElement('div');
        //cont.style.cssText = 'position:absolute; width:300px; height:50px; font-size:16px; top:0; left:webkit-clac(50% -150px);';
        cont.style.cssText = 'font-size:14px; margin-top:10px; color:'+this.colors[0]+';';
        if(type=='Speed') cont.style.cssText = 'font-size:20px; position:absolute; bottom:8px; left:497px; ';
        else cont.innerHTML = type+"<br>";
        cont.id = type;
        var t = [];
        for(var i=0; i!==names.length; i++){
            t[i] = document.createElement( 'div' );
           // t[i].style.cssText = 'font-size:14px; border:4px solid '+this.colors[1]+'; background:'+this.colors[1]+';'
           // t[i].style.cssText +=' width:70px; height:16px; margin:4px; padding:4px; pointer-events:auto;  cursor:pointer; display:inline-block; font-weight:bold;' + this.radius;
            t[i].style.cssText = 'font-size:14px; border:1px solid '+this.colors[5]+'; background:'+this.colors[1]+'; color:'+this.colors[0]+';';
            if(type=='Speed')t[i].style.cssText +=' width:70px; height:16px; margin-left:2px; padding:6px; pointer-events:auto;  cursor:pointer; display:inline-block; ';
            else t[i].style.cssText +=' width:70px; height:16px; margin:2px; padding:7px; pointer-events:auto;  cursor:pointer; display:inline-block; ';

            if(i==0) t[i].style.cssText += this.radiusL;
            if(i==names.length-1)t[i].style.cssText += this.radiusR;
           // if(type=='Speed'){ if(i>0) t[i].style.width = '16px'; else t[i].style.width = '60px'; }
            if(size){if(size[i]){t[i].style.width = size[i] + 'px'; t[i].style.height = size[i] + 'px'; t[i].style.padding ='0px'; } else t[i].style.width = '60px';}
            else t[i].style.width = '60px';
            t[i].className = "none";
            if(type!=='Speed')t[i].textContent = names[i];
            if(i==current){
                //t[i].style.border = '4px solid '+this.colors[0];
                t[i].style.backgroundColor = this.colors[5];
                t[i].style.color = this.colors[2];
                t[i].className = "select";
            }
            t[i].name = i;
            t[i].id = type+i;
            cont.appendChild( t[i] );
            //t[i].addEventListener( 'mouseover', function ( e ) { e.preventDefault(); this.style.border = '4px solid '+_this.colors[0];  }, false );
            //t[i].addEventListener( 'mouseout', function ( e ) { e.preventDefault();  if(this.className == 'none')this.style.border = '4px solid '+_this.colors[1];  }, false );

            t[i].addEventListener( 'mouseover', function ( e ) { e.preventDefault(); this.style.border = '1px solid '+_this.colors[0];  }, false );
            t[i].addEventListener( 'mouseout', function ( e ) { e.preventDefault();  this.style.border = '1px solid '+_this.colors[5];  }, false );

            t[i].addEventListener( 'click', function ( e ) { e.preventDefault(); fun( this.name ); _this.setActiveSelector(this.name, type); }, false );
        }
        //this.hub.appendChild( cont );
        if(type=='DIFFICULTY'){this.full.appendChild( cont ); cont.style.position = 'absolute'; cont.style.top = '200px';cont.style.width = '300px';}
        else this.hub.appendChild( cont );
    }

    setActiveSelector   (n, type) {
        var h = 10, def;
        while(h--){
            if(document.getElementById(type+h)){
                def = document.getElementById(type+h);
                def.style.color = this.colors[0];
               // def.style.border = '4px solid '+_this.colors[1]; 
                def.style.backgroundColor = this.colors[1];
                def.className = "none";
            }
        }
        var select = document.getElementById(type+n);
        //select.style.border = '4px solid '+_this.colors[0]; 
        select.style.backgroundColor = this.colors[5];
        select.style.color = this.colors[2];
        select.className = "select";
    }

    removeSelector  (type){
        var h = 10, def;
        var target = document.getElementById(type);
        while(h--){
            if(document.getElementById(type+h)){
                def = document.getElementById(type+h);
                target.removeChild(def);
            }
        }
        this.full.removeChild(target);
    }

    //------------------------------------------ TOOLS MENU

    showToolSelect  (id){
        if(id.name !==  this.currentToolName){
            this.currentToolName = id.name;
           // var px = (id.getBoundingClientRect().left - _this.toolSet.getBoundingClientRect().left );
            //var py= (id.getBoundingClientRect().top - _this.toolSet.getBoundingClientRect().top );
            var px = (id.getBoundingClientRect().left - this.toolSet.getBoundingClientRect().left );
            var py= (id.getBoundingClientRect().top - this.toolSet.getBoundingClientRect().top );
            this.select.style.left = px + 'px'; 
            this.select.style.top = py + 'px';
            this.select.style.display = 'block';
        } else {
            this.select.style.display = 'none';
            this.currentToolName = 0;
        }

        Main.selectTool(this.currentToolName);

    }

    showToolInfo  (id, t){
        const toolNameMap = {
            none: '无',
            residential: '住宅区',
            commercial: '商业区',
            industrial: '工业区',
            police: '警察局',
            park: '公园',
            fire: '消防局',
            road: '道路',
            bulldozer: '推土机',
            rail: '铁路',
            coal: '煤电厂',
            wire: '电线',
            nuclear: '核电站',
            port: '港口',
            stadium: '体育场',
            airport: '机场',
            query: '查询',
        };

        const toolKey = Base.toolSet[id.name]?.tool;
        const name = toolNameMap[toolKey] || toolKey || '';

        if(id.name===16) t.toolInfo.innerHTML = '拖拽视角';
        else if(id.name===17) t.toolInfo.innerHTML = '查询信息';
        else if(id.name===18) t.toolInfo.innerHTML = '旋转视角';
        else t.toolInfo.innerHTML = name + '<br>价格：' + Base.toolSet[id.name].price + "￥";
    }

    addSVGButton  (target){
        var _this = this;
        var b = document.createElement( 'div' );
        b.style.cssText =" margin:0px; padding:0px; width:66px; height:66px; pointer-events:auto; cursor:pointer; display:inline-block; line-height:0px; vertical-align: top;";
        b.innerHTML = this.round;
        b.addEventListener( 'mouseover', function ( e ) { 
            e.preventDefault();
            var px = (this.getBoundingClientRect().left - _this.toolSet.getBoundingClientRect().left );
            var py= (this.getBoundingClientRect().top - _this.toolSet.getBoundingClientRect().top )
            _this.selector.style.left = px+ 'px'; 
            _this.selector.style.top = py + 'px';
            _this.selector.style.display = 'block';
            _this.showToolInfo(this, _this);
        }, false );
        b.addEventListener( 'mouseout', function ( e ) { e.preventDefault(); _this.selector.style.display = 'none';}, false );
        b.addEventListener('click',  function(e){ e.preventDefault();  _this.showToolSelect(this); }, false);
        target.appendChild( b );
        return b;
    }

    //------------------------------------------ DEF BUTTON

    addButton  (target, name, size, style, top){
        var _this = this;
        if(!size) size = [128, 30, 22];
        //var b = this.createLabel(name, size, true);
        var b = document.createElement( 'div' );

        //var defStyle = 'font-size:'+size[2]+'px; border:4px solid '+this.colors[1]+'; background:'+this.colors[1]+'; width:'+size[0]+'px; height:'+size[1]+'px;'
        //defStyle += 'margin:4px; padding:4px; pointer-events:auto;  cursor:pointer; display:inline-block; font-weight:bold;' + this.radius;

        var defStyle = 'font-size:'+size[2]+'px;  border:1px solid '+this.colors[5]+'; background:'+this.colors[1]+'; width:'+size[0]+'px; height:'+size[1]+'px; color:'+this.colors[0]+';';
        if(top)defStyle += 'margin:4px; padding:7px; pointer-events:auto;  cursor:pointer; display:inline-block; ' + this.radiusB;
        else defStyle += 'margin:4px; padding:7px; pointer-events:auto;  cursor:pointer; display:inline-block; ' + this.radius;

        b.textContent = name;
        if(style) b.style.cssText = defStyle+ style;
        else b.style.cssText = defStyle+ 'margin-top:20px;';
        
       // b.addEventListener( 'mouseover', function ( e ) { e.preventDefault(); this.style.border = '4px solid '+_this.colors[0];  this.style.backgroundColor = _this.colors[0]; this.style.color = _this.colors[1]; }, false );
       // b.addEventListener( 'mouseout', function ( e ) { e.preventDefault(); this.style.border = '4px solid '+_this.colors[1]; this.style.backgroundColor = _this.colors[1]; this.style.color = _this.colors[0];  }, false );

        b.addEventListener( 'mouseover', function ( e ) { e.preventDefault();  this.style.backgroundColor = _this.colors[5];this.style.color = _this.colors[2]; }, false );
        b.addEventListener( 'mouseout', function ( e ) { e.preventDefault(); this.style.backgroundColor = _this.colors[1];this.style.color = _this.colors[0]; }, false );

        target.appendChild( b );

        return b;
    }

    clearElement  (id){
        var el = document.getElementById(id);
        var children = el.childNodes;
        var i = children.length;
        while(i--) el.removeChild( children[i] );
        this.hub.removeChild( el );
    }

    //------------------------------------------ MOBILE SUPPORT

    getWindowStyle(width, height) {
        const w = window.innerWidth;
        const h = window.innerHeight;

        // On small screens, center the window
        if (w < 500 || this.isMobile) {
            const left = Math.max(10, (w - width) / 2);
            const top = Math.max(60, (h - height) / 3);
            return ` top:${top}px; left:${left}px; border:1px solid ${this.colors[1]}; background:${this.colors[3]};`;
        }
        return this.windowsStyle;
    }

    checkMobile() {
        return navigator.userAgent.match(/Android/i) ||
               navigator.userAgent.match(/webOS/i) ||
               navigator.userAgent.match(/iPhone/i) ||
               navigator.userAgent.match(/iPad/i) ||
               navigator.userAgent.match(/iPod/i) ||
               navigator.userAgent.match(/BlackBerry/i) ||
               navigator.userAgent.match(/Windows Phone/i) ||
               window.innerWidth < 768;
    }

    updateLayout() {
        if (!this.toolSet && !this.toolScroll) return;

        const w = window.innerWidth;
        const h = window.innerHeight;

        // Tool list: keep buttons large, scroll vertically when space is limited
        if (this.toolScroll) {
            const top = w < 600 ? 40 : w < 768 ? 50 : 60;
            this.toolScroll.style.top = `${top}px`;
            this.toolScroll.style.maxHeight = `${Math.max(240, h - top - 20)}px`;
        }

        // Update tool info
        if (this.toolInfo) {
            if (w < 600) {
                this.toolInfo.style.transform = 'scale(0.6)';
                this.toolInfo.style.transformOrigin = 'top right';
            } else if (w < 768) {
                this.toolInfo.style.transform = 'scale(0.75)';
                this.toolInfo.style.transformOrigin = 'top right';
            } else {
                this.toolInfo.style.transform = 'scale(1)';
            }
        }

        // Update bottom menu image
        if (this.bottomMenuImg) {
            if (w < 630) {
                const menuScale = w / 630;
                this.bottomMenuImg.style.transform = `scale(${menuScale})`;
                this.bottomMenuImg.style.transformOrigin = 'bottom left';
            } else {
                this.bottomMenuImg.style.transform = 'scale(1)';
            }
        }

        // Update city info positions for small screens
        this.updateCityInfoLayout(w);
    }

    updateCityInfoLayout(w) {
        if (!this.date) return;

        if (w < 480) {
            const scale = w / 480;
            if (this.date) this.date.style.transform = `scale(${scale})`;
            if (this.money) this.money.style.transform = `scale(${scale})`;
            if (this.population) this.population.style.transform = `scale(${scale})`;
            if (this.score) this.score.style.transform = `scale(${scale})`;
            if (this.msg) {
                this.msg.style.width = (w - 80) + 'px';
                this.msg.style.fontSize = '12px';
            }
        } else if (w < 630) {
            const scale = w / 630;
            if (this.date) {
                this.date.style.transform = `scale(${scale})`;
                this.date.style.transformOrigin = 'bottom left';
            }
            if (this.money) {
                this.money.style.transform = `scale(${scale})`;
                this.money.style.transformOrigin = 'bottom left';
            }
            if (this.population) {
                this.population.style.transform = `scale(${scale})`;
                this.population.style.transformOrigin = 'bottom left';
            }
            if (this.score) {
                this.score.style.transform = `scale(${scale})`;
                this.score.style.transformOrigin = 'bottom left';
            }
            if (this.msg) {
                this.msg.style.width = (w - 80) + 'px';
            }
        } else {
            if (this.date) this.date.style.transform = 'scale(1)';
            if (this.money) this.money.style.transform = 'scale(1)';
            if (this.population) this.population.style.transform = 'scale(1)';
            if (this.score) this.score.style.transform = 'scale(1)';
            if (this.msg) this.msg.style.width = '420px';
        }
    }
}
