var polyline = new Array();
var rutestore = new Array();
var rutegraphstore = new Array();
var mapwin = new Array();
//var tot_height = new Array();

for(i=0;i<4;i++)
  mapwin[i]=new Ext.Panel({
    rute:i,
    loaded: false,
    layout: 'auto',
    border: false,
    collapsible: true,
    collapsed: false,
    titleCollapse: true,
    iconCls: 'icon-grid',
    items:[new Ext.TabPanel({
      activeTab: 0,
      defaults:{
        autoScroll: true,
        border: false
      },
      enableTabScroll: true,
      items:[{
        layout : 'fit',
        title: 'Info',
        id: 'ruteInfoTabInfo'+i,
        height: 345
      },{
        layout : 'fit',
        title: 'Kort',
        id: 'ruteInfoTabKort'+i,
        height: 600
      },{
        rute:i,
        loaded:false,
        title: 'Højdeprofil',
        id: 'ruteInfoTabProfil'+i,
        height: 605,
        listeners:{
          activate:{
            fn:function(p){
              if(!p.loaded){
                rutegraphstore[p.rute].load({
                  callback: ruteGraphDataLoaded,
                  params: {
                    seq: p.rute
                  }
                });
                p.loaded=true;
              }
            }
          }
        }
      }
      ]
    })],
    listeners:{
      activate:{
        fn:function(p){
          if(!p.loaded){
            rutestore[p.rute].load({
              callback: ruteDataLoaded,
              params: {
                seq: p.rute
              }
            });
            p.loaded=true;
          }
        }
      }
    }
  });
var rute = [30,60,120,180];
var lat,lng

function ruteGraphDataLoaded(records,options,succes)
{
  mapwin[options.params.seq].get(0).get(2).add({
    items : new Ext.Panel({
      height:600,
      border: false,
      layout:'fit',
      items: {
        xtype: 'linechart',
        store: rutegraphstore[options.params.seq],
        xField: 'Dist',
        yField: 'Height',
        seriesStyles:{
          color: 0xff0000,
          alpha:0.3
        },
        yAxis: new Ext.chart.NumericAxis({
          title: 'Meter',
          minimum: 0,
          maximum: 90
        }),
        xAxis: new Ext.chart.NumericAxis({
          title: 'km',
          minimum: 0
        }),
        extraStyle: {
          xAxis: {
            showLabels: true,
            labelRotation: -90
          },
          animationEnabled: true
        }
      }
    })
  })
  mapwin[options.params.seq].doLayout();
}

function ruteDataLoaded(records,options,succes)
{
  var maxlat=-90;
  var minlat=90;
  var maxlng=-90;
  var minlng=90;
  var lh;
  var height=0, min_height=records[0].get("Height"),max_height=min_height;
  var distance = 0;
  var stigpct = 0;
  for(var i=0;i<records.length;i++)
  {
    if(i>0)
    {
      if(lh<records[i].get("Height"))
        height+=records[i].get("Height")-lh;
      if(records[i].get("Dist")>150)
        stigpct=stigpct<(records[i].get("Height")-lh)/records[i].get("Dist")?(records[i].get("Height")-lh)/records[i].get("Dist"):stigpct;      
      distance+=records[i].get("Dist");
    }
    lh=records[i].get("Height");
    max_height=max_height<lh?lh:max_height;
    min_height=min_height>lh?lh:min_height;
    lat=records[i].get("Lat");
    lng=records[i].get("Lng");
    polyline[options.params.seq][i]= new google.maps.LatLng(lat,lng);
    maxlat=maxlat<lat?lat:maxlat;
    maxlng=maxlng<lng?lng:maxlng;
    minlat=minlat>lat?lat:minlat;
    minlng=minlng>lng?lng:minlng;
  }
  bound = new google.maps.LatLngBounds(new google.maps.LatLng(minlat,minlng),new google.maps.LatLng(maxlat,maxlng));
  lat=(maxlat+minlat)/2;
  lng=(maxlng+minlng)/2;
  infodatatext ="<div class='x-panel-mc'>";
  infodatatext+=ruteinfos[options.params.seq];//Array defined in generalinfo.js
  infodatatext+="<div class='x-tab-strip-active'><span class='x-tab-strip-text'>Distance</span></span></div>"+(distance/1000).toFixed(1)+" km + 4.9 km fra mål til Viborg Katedralskole.<br><br>";
  infodatatext+="<div class='x-tab-strip-active'><span class='x-tab-strip-text'>Antal højdemeter</span></span></div>"+height.toFixed(0)+" m<br><br>";
  infodatatext+="<div class='x-tab-strip-active'><span class='x-tab-strip-text'>Højeste punkt</span></span></div>"+max_height.toFixed(0)+" m<br><br>";
  infodatatext+="<div class='x-tab-strip-active'><span class='x-tab-strip-text'>Laveste punkt</span></span></div>"+min_height.toFixed(0)+" m<br><br>";
  infodatatext+="<div class='x-tab-strip-active'><span class='x-tab-strip-text'>Max. stigningsprocent</span></span></div>"+(stigpct*100).toFixed(1)+" %<br><br>";
  infodatatext+="</div>";
  mapwin[options.params.seq].setTitle('Rute info '+title[options.params.seq]);
  mapwin[options.params.seq].get(0).get(0).add({
    html: infodatatext
  });
  mapwin[options.params.seq].get(0).get(1).add({
    xtype: 'gmappanel',
    id: 'map'+options.params.seq,
    //zoom: 10,
    bounds: bound,
    height: 600,
    setCenter: {
      lat: lat,
      lng: lng
    },
    setRoute : polyline[options.params.seq],
    startIcon : true,
    finishIcon : true
  });
  mapwin[options.params.seq].doLayout();
}

for(var i=0;i<4;i++)
{
  polyline[i] = new Array();
  rutestore[i] = new Ext.data.JsonStore({
    // store configs
    autoDestroy: true,
    url: 'php/rutepolylinejasoncreate.php?rute='+rute[i],
    storeId: 'storerutepolyline'+i,
    idProperty: 'sekvens',
    root: 'data',
    totalProperty: 'total',
    fields: [{
      name: 'sekvens',
      type: 'int'
    },{
      name: 'Lat',
      type: 'float'
    },{
      name: 'Lng',
      type: 'float'
    },{
      name: 'Height',
      type: 'float'
    },{
      name: 'Dist',
      type: 'float'
    }]
  });

  rutegraphstore[i] = new Ext.data.JsonStore({
    // store configs
    autoDestroy: true,
    url: 'php/rutegraphjasoncreate.php?rute='+rute[i],
    storeId: 'storerutegraph'+i,
    idProperty: 'Dist',
    root: 'data',
    totalProperty: 'total',
    fields: [{
      name: 'Dist',
      type: 'float'
    },{
      name: 'Height',
      type: 'float'
    }]
  });
}