/*
** Utility functions
*/
function C(name, init)
{
  var e=lm.ce(name);
  for (var n in init) {
    if (n!='style') {
      e[n]=init[n];
    } else {
      for (var m in init[n]) {
        e.style[m]=init[n][m];
      }
    }
  }
  return e;
}


// This will point to the GMap instance (NOT to the DOM object)
var map=undefined;

// This will be the start icon
var startMarkerIcon=null;


/*
** Hover functions for the walk overview buttons
*/
function overviewOver(o)
{
  o.className='walkOverview hover';
}

function overviewOut(o)
{
  o.className='walkOverview';
}




/*
** Initialisation
*/
function init(startIcon)
{
  // Is the browser OK?
  if (!GBrowserIsCompatible()) return alert("Your browser is not compatable with Google maps");

  // Create the map
  map = new GMap2(document.getElementById("GMap"));
  map.setCenter(new GLatLng(51.506944, -0.1275), 13);
  map.addControl(new GSmallMapControl());
  map.addControl(new GMapTypeControl());

  // Create the foot marker
  startMarkerIcon = new GIcon();
  startMarkerIcon.image = startIcon.image;
  startMarkerIcon.shadow = startIcon.shadow;
  startMarkerIcon.transparent = startIcon.transparent;
  startMarkerIcon.iconSize = new GSize(65, 49);
  startMarkerIcon.shadowSize = new GSize(100, 49);
  startMarkerIcon.iconAnchor = new GPoint(28, 48);
  //startMarkerIcon.infoWindowAnchor = new GPoint(16, 5);

  // Populate the 'choose a walk' pulldown
  //var p=lm.e('walkSelect');
  //for (var n=0;n<allWalks.length;++n)
  //  p.options[p.length]=new Option(allWalks[n].name, n);

  // Add each walk to the lhs
  //var c=lm.e('walkOverviewContainer');
  //for (var n=0;n<allWalks.length;++n)
  //  makeWalk(n,c);

  // Make the details table
  //var d=lm.e('compare');
  //d.appendChild(C('table'));
  //d=d.firstChild;
  //d.appendChild(C('tbody'));
  //d=d.firstChild;
  //for (var n=0;n<allWalks.length; ++n)
  //  makeDetails(allWalks[n],d);
}

function makeWalk(n,c)
{
  var walk=allWalks[n];
  var w=C('div', { className: 'walkOverview', onmouseover:function() { overviewOver(this); updateMapArea(n); }, onmouseout:function() { overviewOut(this); } } );
  c.appendChild(w);
  w.appendChild(C('h2', { innerHTML:walk.name } ));
  w.appendChild(C('p', { innerHTML:walk.brief } ));
}

function makeDetails(walk,d)
{
  // Create the row
  var r=C('tr');
  d.appendChild(r);

  // Create the cells
  var t=C('td', { className:'duration', innerHTML:walk.duration } );
  r.appendChild(t);
  t=C('td', { className:'distance', innerHTML:walk.distance } );
  r.appendChild(t);
  t=C('td', { className:'goodFor', innerHTML:walk.goodFor } );
  r.appendChild(t);
  t=C('td', { src: 'icon.png' } );
  r.appendChild(t);
  t=C('td', { className:'icon' } );
  r.appendChild(t);
  var img=C('img', { 'class':'icon', src:walk.icon, alt:walk.name } );
  t.appendChild(img);
}

/*
** Update the map area from a specific walk
*/
function updateMapArea(n)
{
  var walk=allWalks[n];

  // Populate the description
  lm.e('walkInfoTransport').innerHTML='<span class="walkInfoTitle">Transport</span> <span class="walkInfo">'+walk.transport+'</span>';
  lm.e('walkInfoDuration').innerHTML='<span class="walkInfoTitle">| Duration</span> <span class="walkInfo">'+walk.duration+'</span>';
  lm.e('walkInfoDistance').innerHTML='<span class="walkInfoTitle">| Distance</span> <span class="walkInfo">'+walk.distance+'</span>';
  lm.e('walkDescription').innerHTML='<p>'+walk.desc+'</p>';

  // Scroll the map to the correct walk
  if (walk.route.length>0)
  {
    var points=[];
    for (n=0;n<walk.route.length;++n)
      points.push(new GLatLng(walk.route[n][0], walk.route[n][1]));

    map.clearOverlays();
    map.addOverlay(new GPolyline(points, '#FF0099', 4, 0.8));

    var startMarker=new GMarker(new GLatLng(walk.route[0][0],walk.route[0][1]),startMarkerIcon)
    GEvent.addListener(startMarker, "click",
      function()
      {
        if (walk.detailsURL)
          document.location.href=walk.detailsURL;
      } );
    map.addOverlay(startMarker);
    map.panTo(getCentre(walk));
  }
}


/*
** Returns a GLatLng for the centre point of the walk. This is then cached in the walk object as walk.centrePoint
*/
function getCentre(walk)
{
  if (undefined==walk.centrePoint)
  {
    var max=[-10000000,-10000000];
    var min=[100000000,100000000];
    for (var n=0;n<walk.route.length;++n)
    {
      var p=walk.route[n];
      if (p[0]>max[0]) max[0]=p[0];
      if (p[0]<min[0]) min[0]=p[0];
      if (p[1]>max[1]) max[1]=p[1];
      if (p[1]<min[1]) min[1]=p[1];
    }
    
    walk.centrePoint=new GLatLng((min[0]+max[0])/2, (min[1]+max[1])/2);
  }

  return walk.centrePoint;
}



/*
** Compare walks . . .
*/

/*
** Triggers the animation to start / stop comparing the walks
*/
var comparing=false;
function toggleCompare()
{
  var duration=500;
  var fps=20;

  var s=lm.e('detailsSlider');
  var c=lm.e('compare');
  if (!comparing)
  {
    s.className="open";
    var time=0;
    var t=setInterval(function()
      {
        var offset=easeOut(time,0,716,duration);
        s.style.left=(-2+offset)+'px';
        c.style.width=(60+offset)+'px';
        time+=1000/fps;
        if (time>duration) clearInterval(t);
      }, 1000/fps);
  }
  else
  {
    s.className="closed";
    var time=0;
    var t=setInterval(function()
      {
        var offset=easeOut(time,716,-716,duration);
        s.style.left=(-2+offset)+'px';
        c.style.width=(60+offset)+'px';
        time+=1000/fps;
        if (time>duration) clearInterval(t);
      }, 1000/fps);
  }
  comparing=!comparing;
}





// Robert Penner easing equations
function easeInOut (t,b,c,d)
{
  if ((t/=d/2) < 1) return c/2*t*t + b;
  return -c/2 * ((--t)*(t-2) - 1) + b;
}

function easeIn (t,b,c,d)
{
  return c*(t/=d)*t + b;
}

function easeOut (t,b,c,d)
{
  return -c *(t/=d)*(t-2) + b;
}