/*
 * Google Maps Plugins
 */
var map,map_small,icon,info;
var mid = 0;
var GMAP_CONFIG = [];
var markers = [];
var markers_list=[];
var markers_info=[];

function fromto(_ft,_name,_ll){
 if (_ft == 'from') {
    var html = 'Get Directions : ';
    html  += '<a href="javascript:;" onclick="fromto(\'to\',\''+ _name + '\',\''+ _ll + '\')">To here</a>';
    html  += ' - ';
    html  += '<strong>From here</strong><br />';
    html  += '<form method="get" action="http://maps.google.com/" onsubmit="fromto(null,null,null)">';
    html  += '<input type="text" size=40 name="daddr" value="End Address" onfocus="this.value=\'\'" /><br />' +
        '<select name="dirflg" class="text"><option value="">By Car</option><option value="w">Walking</option><option value="r">Public Transit</option></select> ' +
        '<input value="Get Direction" type="submit" class="button"> <input value="Cancel" type="button" class="button" onclick="fromto(null,null,null)">' +
        '<input type="hidden" name="sll" value="' + _ll + '"/>' +
        '<input type="hidden" name="saddr" value="' + _name + '"/>';
    html   += "</form>";
 } else if (_ft == 'to') {
    var html = 'Get Directions : ';
    html  += '<strong>To here</strong>';
    html  += ' - ';
    html  += '<a href="javascript:;" onclick="fromto(\'from\',\''+ _name + '\',\''+ _ll + '\')">From here</a><br />';
    html  += '<form method="get" action="http://maps.google.com/" onsubmit="fromto(null,null,null)">';
    html  += '<input type="text" size=40 name="saddr" value="Start Address" onfocus="this.value=\'\'" /><br />' +
        '<select name="dirflg" class="text"><option value="">By Car</option><option value="w">Walking</option><option value="r">Public Transit</option></select> ' +
        '<input value="Get Directions" type="submit" class="button"> <input value="Cancel" type="button" class="button" onclick="fromto(null,null,null)">' +
        '<input type="hidden" name="sll" value="' + _ll + '"/>' +
        '<input type="hidden" name="daddr" value="'+ _name + '"/>';
   html   += "</form>";
 } else {
    var html = 'Get Directions : ';
    html  += '<a href="javascript:;" onclick="fromto(\'to\',\''+ info.address.toString() + '\',\''+ info.lat + ','+ info.lng + '\')">To here</a>';
    html  += ' - ';
    html  += '<a href="javascript:;" onclick="fromto(\'from\',\''+ info.address.toString() + '\',\''+ info.lat + ','+ info.lng + '\')">From here</a><br />';
    html    += 'Go to Location : <a href="javascript:;" onclick="map.getInfoWindow().hide();map.setCenter(new GLatLng( parseFloat(info.lat), parseFloat(info.lng) ),16);">Zoom here</a>';
 }
 $('#directionForm').slideUp('fast',function(){
   $(this).html(html).fadeIn().slideDown();
 });
}
/*
 * htmlDir
 * @param    type    'html'=>marker's information, 'to'=>direction to here, 'from'=>direction from here (string)
 * @param   id       marker's id number (integer)
 * @description
 *        Open bubles info
 *        This function is for the bubble's info
 *        I wrapped the container into infoBubbles div so it will be easier style it with CSS
 */
function htmlDir(type, id) {
  info = markers[id];

  // infoBubbles div to hold the information. Easy to styling with CSS
  var html      = "<div id=\"infoBubbles\">";
      html    += '<h3>'+ info.name.toString() + '</h3>';
      html    += '<img src="'+ info.streetview.toString() + '" alt="" /><br />';
      html    += info.address.toString()    + "<br />";
      html    += info.city.toString()        + ", ";
      html    += info.region.toString()    + "<br />";
      html    += "<strong>" + info.phone.toString()    + "</strong><br />";
      html    += '<a href="'+ info.url.toString() + '">'+ info.url.toString() + '</a>';
      html    += '<hr />';
      html  += '<div id="directionForm"></div>';
      html  += "</div>";
  return html;
}

/*
 * create_small_marker
 * @param    point    marker's position (new GLatLng)
 * @param   id       marker's id number (integer)
 * @description
 *        Create Marker for larger viewport
 */
function create_small_marker(point,id) {
  icon = new GIcon();
  icon.image = (GMAP_CONFIG.icon) ? GMAP_CONFIG.icon : 'http://labs.google.com/ridefinder/images/mm_20_red.png';
  icon.iconSize = new GSize(12, 20);
  icon.iconAnchor = new GPoint(6, 20);
  icon.shadow = (GMAP_CONFIG.shadow) ? 'http://labs.google.com/ridefinder/images/mm_20_shadow.png' : '';
  icon.shadowSize = new GSize(22, 20);
  icon.infoWindowAnchor = new GPoint(5, 1);

  var markr = new GMarker(point,icon);

  GEvent.addListener(markr, 'click', function() {
    mid = id;
    view_map_large();
  });

  return markr;
}

/*
 * create_marker
 * @param    point    marker's position (new GLatLng)
 * @param   id       marker's id number (integer)
 * @description
 *        Create Marker for larger viewport
 */
function create_marker(point,id) {
  icon = new GIcon();
  icon.image = (GMAP_CONFIG.icon) ? GMAP_CONFIG.icon : 'http://www.google.com/mapfiles/marker.png';
  icon.iconSize = new GSize(20, 32);
  icon.iconAnchor = new GPoint(9, 32);
  icon.shadow = (GMAP_CONFIG.shadow) ? 'http://www.google.com/mapfiles/shadow50.png' : '';
  icon.shadowSize = new GSize(37, 34);
  icon.infoWindowAnchor = new GPoint(9, 2);

  var markr = new GMarker(point,icon);
  markers_list[id] = markr;

  GEvent.addListener(markr, 'click', function() {
    markers_info[id] = htmlDir('html', id);
    var center = markr.getLatLng();
    var zLevel = map.getZoom();
    markr.openInfoWindowHtml(markers_info[id]);
    GEvent.addListener(map.getInfoWindow(), 'closeclick', function() {
      map.panTo(center);
    });
  });

  return markr;
}

/*
 * map_small
 * @description
 *        Map initialisation for smaller viewport
 */
function map_small(){
  if (GBrowserIsCompatible()){
      map_small = new GMap2(document.getElementById('map_small'));
      map_small.setCenter(new GLatLng(0,0), 13);
      //map_small.setUIToDefault();
      map_small.disableScrollWheelZoom();
      map_small.addControl(new GSmallZoomControl3D());

      var zLevel = {"minX":90,"minY":180,"maxX":-90,"maxY":-180};
      for (var i in markers){
        // store the best map boundaries (minimum and maximun LatLon)
        if (parseFloat(markers[i].lat) < parseFloat(zLevel.minX)) zLevel.minX = parseFloat(markers[i].lat);
        if (parseFloat(markers[i].lng) < parseFloat(zLevel.minY)) zLevel.minY = parseFloat(markers[i].lng);
        if (parseFloat(markers[i].lat) > parseFloat(zLevel.maxX)) zLevel.maxX = parseFloat(markers[i].lat);
        if (parseFloat(markers[i].lng) > parseFloat(zLevel.maxY)) zLevel.maxY = parseFloat(markers[i].lng);

        //markers
        var point = new GLatLng(parseFloat(markers[i].lat), parseFloat(markers[i].lng));
        var poi = create_small_marker(point,i);
        // add markers overlay each
        map_small.addOverlay(poi);
        if (markers.length == 1) map_small.setCenter(point,13);
        else {
          // calculate and set map boundaries (extent)
          var bound = new GLatLngBounds( new GLatLng((zLevel.minX-0.00075),(zLevel.minY-0.00075)) , new GLatLng((zLevel.maxX+0.00075),(zLevel.maxY+0.00075)));
          var c = bound.getCenter();
          var z = map_small.getBoundsZoomLevel(bound);
          map_small.setCenter(c,z);
        }
      }
  }
}

/*
 * mapInit
 * @description
 *        Map initialisation for larger viewport
 */
function mapInit(_md){
  var mapdiv = (_md) ? _md.toString() : 'map';
  if (GBrowserIsCompatible()){
    if (map) {
      map.checkResize();
    } else {
      map = new GMap2(document.getElementById(mapdiv));
      map.setCenter(new GLatLng(0,0), 13);
      map.setUIToDefault();
      if (GMAP_CONFIG.overview) map.addControl(new GOverviewMapControl());
      //map.disableScrollWheelZoom();

      var zLevel = {"minX":90,"minY":180,"maxX":-90,"maxY":-180};
      for (var i in markers){
        // store the best map boundaries (minimum and maximun LatLon)
        if (parseFloat(markers[i].lat) < parseFloat(zLevel.minX)) zLevel.minX = parseFloat(markers[i].lat);
        if (parseFloat(markers[i].lng) < parseFloat(zLevel.minY)) zLevel.minY = parseFloat(markers[i].lng);
        if (parseFloat(markers[i].lat) > parseFloat(zLevel.maxX)) zLevel.maxX = parseFloat(markers[i].lat);
        if (parseFloat(markers[i].lng) > parseFloat(zLevel.maxY)) zLevel.maxY = parseFloat(markers[i].lng);

        //markers
        var point = new GLatLng(parseFloat(markers[i].lat), parseFloat(markers[i].lng));
        var poi = create_marker(point,i);
        // add markers overlay each
        map.addOverlay(poi);
        if ((markers.length == 1) || (i == mid)) map.setCenter(point,13);
        else {

          if (GMAP_CONFIG.centre && GMAP_CONFIG.zoom) {
            map.setCenter(new GLatLng(GMAP_CONFIG.centre[0],GMAP_CONFIG.centre[1]), GMAP_CONFIG.zoom);
          }
          else {
            // calculate and set map boundaries (extent)
            var bound = new GLatLngBounds( new GLatLng((zLevel.minX-0.00075),(zLevel.minY-0.00075)) , new GLatLng((zLevel.maxX+0.00075),(zLevel.maxY+0.00075)));
            var c = bound.getCenter();
            var z = map.getBoundsZoomLevel(bound);
            if (z>13) z=13;
            map.setCenter(c,z);
          }

        }
      }
      GEvent.addListener(map, 'infowindowopen', function(){
       $('#infoBubbles').hide().fadeIn('slow');
       fromto(null,null,null);
      });
    }
  }
}

function view_map_large(){
 $.fn.colorbox({
  inline:true,
  href:"#popmap",
  title:(markers[mid]) ? markers[mid].name : markers[1].name,
  onComplete:function(){
   mapInit('map_large');
   if (mid>0) {
    var point = new GLatLng(parseFloat(markers[mid].lat), parseFloat(markers[mid].lng));
    map.panTo(point);
    GEvent.trigger(markers_list[mid], 'click', function(){
      map.getInfoWindow().hide().show();
    });
   }
  },
  onLoad:function(){
   $(".video").hide();
  },
  onClosed:function(){
   $(".video").show();
  }
 });
}