Wizard.editTrackPanel = Ext.extend(Ext.FormPanel, {

    map: null,
    trackId:null,

    initComponent: function(){
        Ext.apply(this, {
            labelAlign: 'top',
            title: 'Track bearbeiten',
            defaults: {
                anchor: '100%'
            },
            items: [{
                html: 'Bitte passen Sie die Metadaten an und bestätigen Sie diese mit "Fertigstellen".',
                border: false
            }, {
                xtype: 'textfield',
                name: 'trackId',
                hideLabel: true,
                hidden: true
            }, {
                layout: 'column',
                border: false,
                items: [{
                    columnWidth: 0.3,
                    layout: 'form',
                    border: false,
                    items: [{
                        xtype: 'combo',
                        name: 'movementtype',
                        fieldLabel: 'Fortbewegungsmittel',
                        store: [['1', 'zu Fuß'], ['2', 'Fahrrad'], ['3', 'Schiff'], ['4', 'Auto'], ['5', 'Zug'], ['6', 'Flugzeug']],
                        hiddenName: 'movementtype',
                        editable: false,
                        triggerAction: 'all',
                        disableKeyFilter: true,
                        selectOnFocus: true,
                        anchor: '90%'
                    }]
                },{
                    columnWidth: 0.2,
                    layout: 'form',
                    border: false,
                    items: [{
                        xtype: 'combo',
                        name: 'provider',
                        fieldLabel: 'Provider',
                        store: [['1', 'T-Mobile'], ['3', 'Vodafone'],  ['2', 'O2'], ['4', 'E-Plus'], ['5', 'Sonstige']],
                        hiddenName: 'provider',
                        editable: false,
                        triggerAction: 'all',
                        disableKeyFilter: true,
                        selectOnFocus: true,
                        anchor: '90%'
                   }]
                }]
            },{
                xtype: 'textfield',
                fieldLabel: 'Name',
                name: 'name',
                allowBlank: false,
                anchor: '100%',
                validWidth: null,
                invalidWidth: null, 
                msgTarget: 'title',
                maxLength: maxTextFieldLength,
   				maxLengthText: maxTextFieldLengthError,
   				allowBlank: false,
   				listeners: {
   					'valid': function() {
   						Ext.getCmp('wzd_btn_next').enable();
   					},
   					'invalid': function() {
   						Ext.getCmp('wzd_btn_next').disable();
   					}
   				}
            }, {
                xtype: 'textfield',
                fieldLabel: 'Keywords',
                name: 'keywords',
                msgTarget: 'title',
      			maxLength: maxTextAreaLength,
      			maxLengthText: maxTextAreaLengthError,
				listeners: {
					'valid': function() {
        				Ext.getCmp('wzd_btn_next').enable();
        			},
        			'invalid': function() {
        				Ext.getCmp('wzd_btn_next').disable();
        			}
				}                
            }, {
                xtype: 'textarea',
                fieldLabel: 'Beschreibung',
                name: 'description',
                height: 40,
                msgTarget: 'title',
      			maxLength: maxTextAreaLength,
      			maxLengthText: maxTextAreaLengthError,
				listeners: {
					'valid': function() {
        				Ext.getCmp('wzd_btn_next').enable();
        			},
        			'invalid': function() {
        				Ext.getCmp('wzd_btn_next').disable();
        			}
				}                 
            }, {
                html: '<div id="mapDiv" style="height: 180px">Google Map goes here!</div>'
            }]
        });

        Wizard.editTrackPanel.superclass.initComponent.apply(this, arguments);

        //this.on('show', this.initPanel);

    },

    initPanel: function(trackId){
        //Laden der Formulardaten
        Ext.Ajax.request({
            url: './STWizardServlet',
            scope: this,
            success: this.setFormValues,
            failure: function(){
                 Ext.MessageBox.alert('ajax request fehlgeschlagen');
            },
            params: {
                'action': 'getMetadata',
                'userId': 2,
                'trackId': trackId
            }
        });

        //Zeichnen der Google Map Karte
        //this.drawGMap();
    },

    setFormValues: function(a, b, c){
        var result = eval('(' + a.responseText + ')');
        if (result.success === false) {
            Ext.MessageBox.alert('Hinweis', 'Fehler beim Laden der Formularwerte');
        }
        else {
            this.getForm().setValues(result);
        }
      //Zeichnen der Google Map Karte
        this.drawGMap(result.trackId);
        this.trackId = result.trackId;

    },

    drawGMap: function(trackId){
        //Abfrage ob Karte bereits angezeigt ect....
        var mapDiv = document.getElementById("mapDiv");
        this.map = new GMap2(mapDiv);
        this.map.enableScrollWheelZoom();
        this.map.setCenter(new GLatLng(51.114728, 9.998672), 5);
        //Track laden!
        //Steuerelemente ect... einblenden!
        this.loadTrack(trackId);
    },


    loadTrack: function(trackId) {
       if(trackId != null){

          this.bounds = new GLatLngBounds();

          Ext.Ajax.request({
             url: './STWizardServlet',
             params: {
                'action': 'getTrackingPoints',
                'trackId': trackId
             },
             scope: this,
             success: function(data){
               var response = Ext.util.JSON.decode(data.responseText);
               this.points = response.Points;
               this.pointCount = this.points.length-1;

               if (pointCount == -1){
                  Ext.Msg.alert("Fehler","Kein Track gefunden");
                  return;
               } else {
                  this.map.clearOverlays();
               }

               this.trackPoints = [];

               for (var i = 0; i <= this.pointCount; i++) {
                  this.curPoint = new GLatLng(parseFloat(this.points[i].la),parseFloat(this.points[i].lo));
                  this.trackPoints.push(this.curPoint);
                  this.bounds.extend(this.curPoint);
               }

               this.polyline = new GPolyline(this.trackPoints,"#EC6600", 4, 1);

               this.map.addOverlay(this.polyline);
               this.map.setCenter(this.bounds.getCenter());
               this.map.setZoom(this.map.getBoundsZoomLevel(this.bounds));

             },
             failure: function(){
                 Ext.Msg.alert('Fehler','ajax request fehlgeschlagen');
             }

         });

       }
    },

    submitContent: function(){
        //Formular abschicken
        this.getForm().submit({
            url: './STWizardServlet',
            params: {
                'action': 'submitMetadata',
                'state': 0
            },
            scope: this,
            success: function(){
                //Nächstes Panel anzeigen
                this.ownerCt.nextPanel();
            },
            failure: function(test){
                //Fehlermeldung
            	console.log(test);
                Ext.Msg.alert('Hinweis', 'Bitte vergeben Sie einen Track-Namen');
            }
        });
    }




});
Ext.reg('editTrackPanel', Wizard.editTrackPanel);