Ext.onReady(function(){
    var helpWin;
    
    Ext.get('view-help-win').on('click', function(e){
        e.stopEvent();
        if (!helpWin){
            helpWin = new Ext.Window({
                            applyTo     : 'help-win',
                            layout      : 'fit',
                            width       : 300,
                            height      : 380,
                            closeAction :'hide',
                            autoScroll  : true,
                            plain       : true,
                            buttons: [{
                                text     : 'Tutup',
                                handler  : function(){
                                    helpWin.hide();
                                }
                            }]});
        }    
        helpWin.show();     
    });

    MapForm = function(){
        var optPropinsi = Ext.get('kd_pro');

        var optKotaContainer = Ext.get('opt-kota-container');
        var optKota = Ext.get('kd_kota');
        var optTahun = Ext.get('tahun');

        var optLayerContainer = Ext.get('opt-layer-container');

        var mapTitle = Ext.get('map-image-header');

        function populateOptionKota(kd_pro){
            optKota.dom.length = 0;
            optKota.dom.options[0] = new Option("-- Pilih Kabupaten/Kota --", "", true, false);
            var items = _PROP_KOTA['kota'][kd_pro];
            var i = 1;
            for (var kd_kota in items){
                optKota.dom.options[i] = new Option(items[kd_kota]['nama'], kd_kota);
                i++;
            }
            
            return optKota;
        }

        return {
            setMapTitle: function(title){
                mapTitle.dom.innerHTML = title;
            },
            getKodePropinsi: function(){
                return optPropinsi.getValue();
            },
            getKodeKota: function(){
                if (!optKotaContainer.isVisible()){
                    return '';
                }
                return optKota.getValue();
            },
            getTahun: function(){
                return optTahun.getValue();
            },
            getPopulasi: function(){
                return populasi;
            },
            showOptionKota: function(kd_pro){
                populateOptionKota(kd_pro);
                if (!optKotaContainer.isVisible()){
                    Webi.fx.slide(true, optKotaContainer);
                }
            },
            hideOptionKota: function(){
                if (optKotaContainer.isVisible()){
                    Webi.fx.slide(false, optKotaContainer);
                }
            },
            showOptionLayer: function(content){
                var fs = Ext.get('fs-layer-container');
                if (Ext.isEmpty(content)){
                    optLayerContainer.dom.innerHTML = '<center>Pilihan layer belum tersedia</center>';
                    if (fs.isVisible()) Webi.fx.slide(false, fs);
                }else{
                    optLayerContainer.dom.innerHTML = content;
                    if (!fs.isVisible()) Webi.fx.slide(true, fs);
                }
            },
            showInfo: function(info){
                var title = 'Tidak Ada';
                var details = '<p align="center">Data tidak ditemukan</p>';
                
                if (!Ext.isEmpty(info)){
                    title = info['title'];
                    details = info['details'];
                }
                
                Ext.get('info-title').dom.innerHTML = "INFO : " + title;
                Ext.get('info-content').dom.innerHTML = details;
                
            },
            getOptPropinsi: function(){
                return optPropinsi;
            },
            getOptKota: function(){
                return optKota;
            },
            getOptTahun: function(){
                return optTahun;
            }
        }
    }();

    MapForm.getOptPropinsi().on('change', function(){
        var kd_pro = MapForm.getKodePropinsi();
        if (kd_pro == ''){
            MapForm.getOptKota().dom.value = '';
            MapForm.hideOptionKota();
        }else{
            MapForm.showOptionKota(kd_pro);
        }
        
        loadMap({});
    });

    MapForm.getOptKota().on('change', function(){
        loadMap({});
    });

    MapForm.getOptTahun().on('change', function(){
        loadMap({});
    });

    MapForm.getOptPropinsi().dom.value = '';
    
    var mapimg = Ext.get('mainmap');
    var zoombox = Ext.get('zoombox');
    
    var popControl = Ext.get('populasi-control');
    var popOption = Ext.get('populasi-option');
    var populasi = '';
    
    Webi.fx.slide(popControl.dom.checked, popOption);
    
    popControl.on('click', function(e, t, o){
        Webi.fx.slide(t.checked, popOption);
        if (t.checked == false){
            populasi = '';

            var list = popOption.query('li');
            for (var i=0; i < list.length; i++){
                Ext.get(list[i]).removeClass('button-selected');
            }

            var w = mapimg.getWidth(true);
            var h = mapimg.getHeight(true);

            var x = Math.round(w/2);
            var y = Math.round(h/2);

            lastCmd = cmd;
            cmd = 'PAN';

            var coord = {x:x, y:y};
            getMap(false, coord);                        
        }
    });
    
    var ch = popOption.query('li');
    for (var i=0; i < ch.length; i++){
        Ext.get(ch[i]).on('click', function(e, t, o){
            Ext.get(t).radioClass('button-selected');
            if (t.innerHTML == 'Seluruh SD'){
                populasi = 'sd';
            }else if (t.innerHTML == 'SD Negeri'){
                populasi = 'sdn';
            }else if (t.innerHTML == 'SD Swasta'){
                populasi = 'sds';
            }else{
                populasi = 'rehab';
            }

            var w = mapimg.getWidth(true);
            var h = mapimg.getHeight(true);

            var x = Math.round(w/2);
            var y = Math.round(h/2);

            lastCmd = cmd;
            cmd = 'PAN';

            var coord = {x:x, y:y};
            getMap(false, coord);            
        });
    }
    var xyc = Ext.get('xyc');
    
    var redraw = Ext.get('redraw');

    redraw.on('click', function(){
        getMap(false, {redraw:1});
    });
    
    if (_MAP_CONFIG['layers'].length == 0){
        redraw.hide();
    }
    
    var isDrag = false;

    // default tool
    var cmd = "QUERY_POINT";
    var lastCmd = "";
    
    var mt_zoomin = Ext.get('mt_zoomin');
    mt_zoomin.on('click', function(){
        mapimg.setStyle('cursor', 'pointer');
        setCommand("ZOOM_IN", mt_zoomin);
    });

    var mt_zoomout = Ext.get('mt_zoomout');
    mt_zoomout.on('click', function(){
        mapimg.setStyle('cursor', 'pointer');
        setCommand("ZOOM_OUT", mt_zoomout);     
    });
    
    var mt_recentre = Ext.get('mt_recentre');
    mt_recentre.on('click', function(){
        mapimg.setStyle('cursor', 'pointer');
        setCommand("RECENTER", mt_recentre);    
    });

    var mt_info = Ext.get('mt_info');
    mt_info.on('click', function(){
        mapimg.setStyle('cursor', 'help');
        setCommand("QUERY_POINT", mt_info);  
    });

    var mt_back = Ext.get('mt_back');
    mt_back.on('click', function(){
        if (MapForm.getKodePropinsi() == ''){
            Ext.MessageBox.alert('Info', 'Anda telah berada pada view Indonesia');
            return;
        }
        
        if (MapForm.getKodeKota() != ''){
            MapForm.getOptKota().dom.value = '';
        }else if (MapForm.getKodePropinsi() != ''){
            MapForm.getOptPropinsi().dom.value = '';    
            MapForm.hideOptionKota();
        }
        loadMap({});
    });

    var panleft = Ext.get('pan-left');
    var panright = Ext.get('pan-right');
    var pantop = Ext.get('pan-top');
    var pandown = Ext.get('pan-down');


    panleft.on('click', function(e, t, o){
        e.stopEvent();
        var w = mapimg.getWidth(true);
        var h = mapimg.getHeight(true);
        
        var x = Math.round(w/2);
        var y = Math.round(h/2);

        lastCmd = cmd;
        cmd = 'PAN';

        var coord = {x:(x-x) + 5, y:y};
        getMap(false, coord);
    });

    panright.on('click', function(e, t, o){
        e.stopEvent();
        var w = mapimg.getWidth(true);
        var h = mapimg.getHeight(true);
        
        var x = Math.round(w/2);
        var y = Math.round(h/2);

        lastCmd = cmd;
        cmd = 'PAN';
        
        var coord = {x:(x+x) - 5, y:y};
        getMap(false, coord);        
    });

    pantop.on('click', function(e, t, o){
        e.stopEvent();
        var w = mapimg.getWidth(true);
        var h = mapimg.getHeight(true);
        
        var x = Math.round(w/2);
        var y = Math.round(h/2);

        lastCmd = cmd;
        cmd = 'PAN';

        var coord = {x:x, y:(y-y) + 5};
        getMap(false, coord);        
    });

    pandown.on('click', function(e, t, o){
        e.stopEvent();
        var w = mapimg.getWidth(true);
        var h = mapimg.getHeight(true);
        
        var x = Math.round(w/2);
        var y = Math.round(h/2);

        lastCmd = cmd;
        cmd = 'PAN';

        var coord = {x:x, y:(y+y) - 5};
        getMap(false, coord);        
    });

    setCommand(cmd, mt_info);
    mapimg.setStyle('cursor', 'help');

    var server = new Webi.Server({
        url: _BASEURL + 'ws.php?module=map&type=json&func=getmap'
    });

    server.on('beforerequest', function(){
        Ext.get('map-image-container').mask('Loading...');
    }, this);

    server.on('failure', function(){
        Ext.get('map-image-container').unmask();
    }, this);

    server.on('success', function(s, data){
        if (cmd == "PAN") cmd = lastCmd;
        
        var map = data.map;
        
        mapimg.dom.src = map.url;
        _MAP_CONFIG = map.config;
        MapForm.showOptionLayer(data.layersBox);
        Ext.get('user-scale').dom.innerHTML = 'Skala 1 : ' + map.scale;
        Ext.get('poplegend').dom.innerHTML = data.poplegend;
        
        MapForm.showInfo(data.info);
        
        if (!Ext.isEmpty(data.layersBox)){
            redraw.show();
        }else{
            redraw.hide();
        }

        isDrag = false;
        if (!Ext.isEmpty(data.results.description)){
            var kd_pro = '';
            var kd_kota = '';
            if (data.results.description == 'Indonesia'){
                MapForm.setMapTitle('Indonesia - ' + data.results.items[0].nm_prop);
                kd_pro = data.results.items[0].kd_prop;
                
                if (!Ext.isEmpty(kd_pro)){
                    loadMap({kd_pro:kd_pro});
                    MapForm.getOptPropinsi().dom.value = kd_pro;
                    MapForm.showOptionKota(kd_pro);                
                }
            }else if (data.results.description == 'Propinsi' ||
                      data.results.description == 'Kecamatan'){
                MapForm.setMapTitle('Indonesia - ' + 
                                    data.results.items[0].nm_pro + ' - ' + 
                                    data.results.items[0].nm_kab);

                kd_pro = data.results.items[0].kd_pro;
                kd_kota = data.results.items[0].kd_kab;

                if (!Ext.isEmpty(kd_kota) && data.results.description != 'Kecamatan'){
                        loadMap({kd_pro:kd_pro, kd_kota:kd_kota});
                        MapForm.getOptKota().dom.value = kd_kota;
                }
            }
        }else{
            if (data.info.title == 'Indonesia'){
                MapForm.setMapTitle('Indonesia');
            }else{
                var kd_pro = MapForm.getKodePropinsi();
                var kd_kota = MapForm.getKodeKota();
                
                var title = 'Indonesia';
                if (!Ext.isEmpty(kd_pro)){
                    title += ' - ' + _PROP_KOTA['propinsi'][kd_pro]['nama'];
                    
                    if (!Ext.isEmpty(kd_kota)){
                        title += ' - ' + _PROP_KOTA['kota'][kd_pro][kd_kota]['nama'];
                    }
                }
                MapForm.setMapTitle(title);
            }
        }
        
        Ext.get('map-image-container').unmask();
        
        if(data.map_found == false) {
        	Ext.MessageBox.alert('Info Status', 'Gambar peta ' + data.info.title + ' tidak ada atau tidak dapat ditampilkan. <br><br> Sistem menampilkan peta Indonesia kembali');
        	MapForm.getOptPropinsi().dom.value = '';
        	MapForm.hideOptionKota();
        }
    });

    var dd = mapimg.initDD('mapgroup', {
        scroll:false,
        startX:0,
        startY:0,
        endX:0,
        endY:0,
        mapX:0,
        mapY:0
    });

    dd.startDrag = function(x, y){
        this.constrainTo('map-image');
        isDrag = true;
        
        if (cmd == "ZOOM_IN"){
            zoombox.setBounds(x, y, 1, 1, false);
            zoombox.setOpacity(0.5, false);
            zoombox.show();
        }
    };

    dd.onDrag = function(e){
        if (cmd == "ZOOM_IN"){        
            var startX, startY, endX, endY, width, height;
            
            if (e.getPageX() < Ext.dd.DDM.startX &&
                e.getPageY() > Ext.dd.DDM.startY){
                startX = e.getPageX();
                endX = Ext.dd.DDM.startX;
                
                startY = Ext.dd.DDM.startY;
                endY = e.getPageY();
            }else if(e.getPageX() < Ext.dd.DDM.startX &&
                     e.getPageY() < Ext.dd.DDM.startY){
                startX = e.getPageX();
                endX = Ext.dd.DDM.startX;
                
                startY = e.getPageY();
                endY = Ext.dd.DDM.startY;
            }else if (e.getPageX() > Ext.dd.DDM.startX &&
                      e.getPageY() < Ext.dd.DDM.startY){
                startX = Ext.dd.DDM.startX;
                endX = e.getPageX();
                startY = e.getPageY();   
                endY = Ext.dd.DDM.startY;
            }else{
                startX = Ext.dd.DDM.startX;
                endX = e.getPageX();
                startY = Ext.dd.DDM.startY;
                endY = e.getPageY();
            }
            
            if (startX < mapimg.getX()){
                startX = mapimg.getX();
            }
            
            if (startY < mapimg.getY()){
                startY = mapimg.getY();
            }
            
            if (e.getPageX() > mapimg.getRight(false)){
                endX = mapimg.getRight(false);
            }
            
            if (e.getPageY() > mapimg.getBottom(false)){
                endY = mapimg.getBottom(false);
            }
            
            width = Math.abs(startX - endX);
            height = Math.abs(startY - endY);
            
            this.startX = startX;
            this.startY = startY;
            this.endX = endX;
            this.endY = endY;
            
            zoombox.setBounds(startX, startY, width, height, false);
        }

        this.mapX = e.getPageX() - mapimg.getX();
        this.mapY = e.getPageY() - mapimg.getY();
        
        if (e.getPageX() < mapimg.getX()){
            this.mapX = 0;
        }else if (e.getPageX() > mapimg.getRight(false)){
            this.mapX = mapimg.getWidth(true);
        }

        if (e.getPageY() < mapimg.getY()){
            this.mapY = 0;
        }else if (e.getPageY() > mapimg.getBottom(false)){
            this.mapY = mapimg.getHeight(true);
        }

        this.mapX = Math.round(this.mapX);
        this.mapY = Math.round(this.mapY);

        xyc.dom.innerHTML = this.mapX + ',' + this.mapY;    
    };

    dd.endDrag = function(e){
        var coord;
        if (cmd == "ZOOM_IN"){
            zoombox.hide(false);

            var x1 = Math.round(this.startX - mapimg.getX());
            var y1 = Math.round(this.startY - mapimg.getY());

            var x2 = Math.round(this.endX - mapimg.getX());
            var y2 = Math.round(this.endY - mapimg.getY());
            
            coord = {x1:x1, y1:y1, x2:x2, y2:y2};
            getMap(true, coord);
        }else{
            coord = {x: this.mapX, y:this.mapY};
            getMap(false, coord);
        }
        
    };

    mapimg.on('mousemove', function(e){
        var x = Math.round(e.getPageX() - mapimg.getX());
        var y = Math.round(e.getPageY() - mapimg.getY());
        
        xyc.dom.innerHTML = x + ',' + y;
    });

    mapimg.on('click', function(e, t, o){
        if (isDrag) return;

        var x = Math.round(e.getPageX() - mapimg.getX());
        var y = Math.round(e.getPageY() - mapimg.getY());
        
        var coord = {x:x, y:y};
        getMap(false, coord);
    });

    function setCommand(newCmd, mt){
        switch (cmd){
            case 'ZOOM_IN' : 
                mt_zoomin.setStyle('border-color', '#eee');
                break;
            case 'ZOOM_OUT' : 
                mt_zoomout.setStyle('border-color', '#eee');
                break;
            case 'RECENTER' : 
                mt_recentre.setStyle('border-color', '#eee');
                break;
            case 'QUERY_POINT' : 
                mt_info.setStyle('border-color', '#eee');
                break;
            default: break;
        }

        mt.setStyle('border-color', '#8CE140');
        cmd = newCmd;
    }

    function getMap(isRect, coord){
        server.setParams({});

        server.setParam('minx', _MAP_CONFIG.minx);
        server.setParam('miny', _MAP_CONFIG.miny);
        server.setParam('maxx', _MAP_CONFIG.maxx);
        server.setParam('maxy', _MAP_CONFIG.maxy);
        server.setParam('imagewidth', _MAP_CONFIG.imagewidth);
        server.setParam('imageheight', _MAP_CONFIG.imageheight);
        server.setParam('CMD', cmd);

        var c = 0;
        for (var i in _MAP_CONFIG['layers']) {
            if (_MAP_CONFIG['layers'][i]['status'] == 1){
                c++;
                server.setParam('layers[' + i + ']',_MAP_CONFIG['layers'][i]['status']);
            }
        }

        if (c == 0){
            server.setParam('layers[]','');        
        }

        server.setParam('kd_pro', MapForm.getKodePropinsi());
        server.setParam('kd_kota', MapForm.getKodeKota());                
        server.setParam('tahun', MapForm.getTahun());
        server.setParam('populasi', MapForm.getPopulasi());

        if (!Ext.isEmpty(coord.redraw)){
            server.setParam('redraw', coord.redraw);                
            server.request();
            return;
        }

        if (cmd == "ZOOM_IN"){
            if (isRect){
                server.setParam('INPUT_COORD', coord.x1 + ',' + coord.y1 + ';' + coord.x2 + ',' + coord.y2);
                server.setParam('INPUT_TYPE', 'auto_rect');
            }else{
                server.setParam('mainmap_x', coord.x);
                server.setParam('mainmap_y', coord.y);                
            }
        }else{
            server.setParam('mainmap_x', coord.x);
            server.setParam('mainmap_y', coord.y);
        }

        server.request();
    }
    
    function loadMap(config){
        server.setParams({});

        if (!Ext.isEmpty(config.kd_pro)){
            server.setParam('kd_pro', config.kd_pro);        
        }else{
            server.setParam('kd_pro', MapForm.getKodePropinsi());
        }
        
        if (!Ext.isEmpty(config.kd_kota)){
            server.setParam('kd_kota', config.kd_kota);
        }else{        
            server.setParam('kd_kota', MapForm.getKodeKota());                
        }
        server.setParam('tahun', MapForm.getTahun());
        server.setParam('populasi', MapForm.getPopulasi());
        
        server.request();
    }
});

function setLayerConfig(index, value){
    _MAP_CONFIG['layers'][index]['status'] = value;
}