<?xml version="1.0" encoding="UTF-8" ?> 
<Module>
<ModulePrefs title="State Example" height="300">
  <Require feature="wave-preview" /> 
</ModulePrefs>
<Content type="html">
<![CDATA[ 
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="http://code.google.com/intl/cs-CZ/apis/gears/gears_init.js"></script>

    <style  type="text/css" media="screen">
        #map        {height: 400px;}
        #title      {margin: 10px 0 5px 0;}
    </style>
</head>
<body>
    <div id="content_div"></div>
    <p id="title">Zobrazení polohy uživatele: <strong id="titleName"></strong></p>
    <div id="controls">
        <button id="addViewerPosition" onclick="app.addViewerPosition();">Přidej moji polohu</button>
    </div>
    <div id="messages"></div>
    <div id="map"></div>
    <script type="text/javascript">
        bind = function(obj,fnc){
        	return function() {
        		return fnc.apply(obj,arguments);
        	}
        };

    
        function Application() {
            this.map = null;
            this.dom = {};
            this.dom.msg = document.getElementById('messages');
            this.stateName = 'aichiStateHolder';
            this.host = null;
            this.viewer = null;
            this.inited = false;
            
            this.init = bind(this, this.init);
            this.stateUpdated = bind(this, this.stateUpdated);
            this.addViewerPosition = bind(this, this.addViewerPosition);
            this.setHostPositionState = bind(this, this.setHostPositionState);
            this._showGeoLocationError = bind(this, this._showGeoLocationError);
        }
    
        /**
         * init po nacteni gadgetu
         */                 
        Application.prototype.init = function() {
            //console.log('init start');
            if (wave && wave.isInWaveContainer()) {
                wave.setStateCallback(this.stateUpdated);
            }
            
            //praha
            var lat = 50.083;
            var lon = 14.467;
            var latlng = new google.maps.LatLng(lat, lon);
        
            var myOptions = {
                zoom: 8,
                center: latlng,
                mapTypeControl: true,
                navigationControl: false,
                scaleControl: false,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
        
            this.map = new google.maps.Map(document.getElementById("map"),myOptions);
            //console.log(this.map);
        }
        
        /**
         * volano pokazde, kdyz se zmeni stav ve vlne
         */         
        Application.prototype.stateUpdated = function() {
            //console.log('start updated');
            
            this.host = wave.getHost();
            this.viewer = wave.getViewer();

            
            if (!this.inited) {
                //schovani cudliku pro update mapy
                if (this.host.getId() != this.viewer.getId()) {
                    var elm = document.getElementById('addViewerPosition').disabled = true;
                }
                
                //upraveni nadpisu gadgetu
                document.getElementById('titleName').innerHTML += this.host.getDisplayName();
            }
        
            var state = this.getPositionState();
            //console.log(state);
            
            if (state[this.createName(this.host.getId())]) {
                //console.log('pozicovani na host souradnice');
                var pos = state[this.createName(this.host.getId())];
                this._showHostPosition(pos);
            }
            
            this.inited = true;
        }
        
        /**
         * udalost na tlacitku
         */                 
        Application.prototype.addViewerPosition = function() {
            //console.log('addViewerPosition()');
            if (navigator.geolocation) {  
                /* firefox geolocation is available */
                //console.log('firefox');
                navigator.geolocation.getCurrentPosition(this.setHostPositionState);
            } else if (google && google.gears) {
                /* gears geolocation is aviable */
                //console.log('gears');
                var geo = google.gears.factory.create('beta.geolocation');
                geo.getCurrentPosition(this.setHostPositionState, this._showGeoLocationError);
            } else {  
                this._showGeoLocationError();  
            }  
        }
        
       
        /**
         * zobrazeni pozice na mape
         */                        
        Application.prototype._showHostPosition = function(position) {
            //console.log('_showHostPosition()');
            //console.log(position);
            
            //nastaveni pozice na mape
            var p = new google.maps.LatLng(position.latitude, position.longitude);
            this.map.setCenter(p);
            this.map.setZoom(13);
            
            //zobrazeni ikony cloveka na mape
            var participant = this.host;
            var m = new google.maps.Marker({
                position: p, 
                visible: true, 
                title: participant.getDisplayName(),
                icon: new google.maps.MarkerImage(
                    participant.getThumbnailUrl(),
                    new google.maps.Size(96,96,'px', 'px'),
                    new google.maps.Point(0,0),
                    new google.maps.Point(48, 96)
                ),
                map: this.map
            });
            
            //zobrazeni zeleneho puntiku
            var m1 = new google.maps.Marker({
                position: p, 
                visible: true, 
                title: participant.getDisplayName(),
                icon: new google.maps.MarkerImage(
                    'http://www.czechdesign.cz/open/gb.png',
                    new google.maps.Size(11,11,'px', 'px'),
                    new google.maps.Point(0,0),
                    new google.maps.Point(6, 6)
                ),
                map: this.map
            });
            
            
            var i = new google.maps.InfoWindow({
                content: '<h3>'+participant.getDisplayName()+'</h3><br /><img src="'+participant.getThumbnailUrl()+'" />'
            });
            google.maps.event.addListener(m1, 'click', function() {
                //console.log('click');
                i.open(this.map, m1);    
            });
           
            //console.log('_showHostPosition() done');
        }
        
        Application.prototype._showGeoLocationError = function() {
            this.dom.msg.innerHTML = 'Geolokace se nezdařila.';
        }
        
        /**
         * ulozeni souradnic toho kdo to zadal
         */                 
        Application.prototype.setHostPositionState = function(position) {
            //console.log('setHostPositionState()');
            var position = position.coords || position;
            //console.log('position');
            //console.log(position);
            var state = this.getPositionState();
            //console.log('state');
            //console.log(state);
            var viewer = wave.getViewer();
            state[this.createName(viewer.getId())] = {latitude: position.latitude, longitude: position.longitude};
            
            var serializedState = wave.util.printJson(state)+'';
            //console.log(serializedState);
            var delta = {};
            delta[this.stateName] = serializedState;
            wave.getState().submitDelta(delta);
            
            //console.log('setHostPositionState() done');
        } 
        
        /**
         * ziskani stavu vsech pozic
         */                 
        Application.prototype.getPositionState = function() {
            //console.log('getPositionState()');
            var value = wave.getState().get(this.stateName, '{}');
            eval('var state = '+value+';');
            //console.log(state);
            return state;
        }
        
        /**
         * vytvoreni klice z ID uzivatele
         */                 
        Application.prototype.createName = function(name) {
            return name.replace(/[^a-z]/gi, '');
        }

        
        
        var app = new Application();
        gadgets.util.registerOnLoadHandler(app.init);
    </script>
    
</body>    
  ]]> 
  </Content>
</Module>
