var map;
var endicon;
var starticon;
var reddoticon;
var lreddoticon;
var highlighticon;

var startPoint;
var highlightPoint;






//ngIcon v0.1. B. Abbott, 16/07/08.
//Public domain! Free! Etc!
	
// These really need to be set. You have been warned. NgIcon is designed to be used with 24-bit PNGs for transparency effects.
var ngIcon_iconWidth;var ngIcon_iconHeight;var ngIcon_blankImage;var ngIcon_isExplorer;

//Usage: setupNgIcon(int ImageWidth, int ImageHeight, str BlankGifUrl, bool isInternetExplorer)
//Example: setupNgIcon(28,36,"images/googlemap_icons/blank.gif",document.all,document.getElementById('map'));
function setupNgIcon(w,h,b,i){
	ngIcon_iconWidth=w;ngIcon_iconHeight=h;ngIcon_blankImage=b;ngIcon_isExplorer=i;
}

//Usage: var marker = new ngIcon(GLatLng Point, str Title, str IconUrl,(int width?,int height?))
//Example: var marker=new ngIcon(pt,label,"images/googlemap_icons/mIcon.png",10,10);
//Example: var marker=new ngIcon(pt,label,"images/googlemap_icons/lm-p.png"); //defaults to ngIcon_iconWidth, iconHeight.
function ngIcon(point,title,icon,width,height){
	this.point_=point;
	this.title_=title;
	this.icon_=icon;
	if(width&&height){this.width_=width;this.height_=height;}else{this.width_=ngIcon_iconWidth;this.height_=ngIcon_iconHeight;};
}


//internal functions - probably don't need editing for your usage.
ngIcon.prototype=new GOverlay();

ngIcon.prototype.initialize=function(m) {
	//alert('initialised');
	this.map_=m;
	var img=document.createElement("img");  
	with(img.style){zIndex=GOverlay.getZIndex(this.point_.lat());position="absolute";width=this.width_+"px";height=this.height_+"px";}
	//hack to enable ie5.5+ png alpha. Fails on 5.0. Horribly.
	if(!ngIcon_isExplorer || self.opera != null){
		img.src=this.icon_;
	}else{
		img.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.icon_ + "')";
		img.src=ngIcon_blankImage;
	}
	img.title=this.title_;
	img.alt=this.title_;
	img.style.cursor="pointer";
	this.map_.getPane(G_MAP_MARKER_PANE).appendChild(img);
	this.img_=img;
	var me=this;
	GEvent.addDomListener(this.img_, 'click', function(){
		GEvent.trigger(me,"click");
	});
	GEvent.addDomListener(this.img_, 'mouseover', function(){
		GEvent.trigger(me,"mouseover");
	});
	GEvent.addDomListener(this.img_, 'mouseout', function(){
		GEvent.trigger(me,"mouseout");
	});
}

ngIcon.prototype.getLatLng=function() {
  return this.point_;
}

ngIcon.prototype.remove=function() {
	this.img_.parentNode.removeChild(this.img_);
   }

ngIcon.prototype.copy=function() {
	return new ngIcon(this.point_,this.title_,this.icon_,this.width_,this.height_);
}

ngIcon.prototype.redraw=function(force) {
	if (!force) return;
	var p=this.map_.fromLatLngToDivPixel(this.point_);
	this.img_.style.left=(p.x-parseInt(this.width_/2)) + "px";
	this.img_.style.top=(p.y-parseInt(this.height_/2)) + "px";
}

ngIcon.prototype.hide=function(){
  this.img_.style.display='none';
}

ngIcon.prototype.show=function(){
  this.img_.style.display='block';
}

ngIcon.prototype.openInfoWindowHtml=function(c){
	var q=this.point_;
	this.map_.openInfoWindowHtml(q,c);
}

ngIcon.prototype.openInfoWindowTabs=function(c){
	var q=this.point_;
	this.map_.openInfoWindowTabs(q,c);
}

ngIcon.prototype.getPoint=function(){
	//var p=this.map_.fromLatLngToDivPixel(this.point_);
	//return new GPoint(p.x,p.y);
	return this.point_;
}
//setupNgIcon(28,36,"blank.gif",document.all,document.getElementById('map')); 










var transit_layer;
var transit_overlay;
var transit_overlay_added = 0;

function transit_toggle() {
  if (!GBrowserIsCompatible()) return;
  
  if (transit_overlay_added == 0)
  {
    transit_overlay_added = 1;
    transit_overlay = new GTileLayerOverlay(transit_layer);
    map.addOverlay(transit_overlay);
  }
  
  var checky = document.getElementById('transit_toggle_checkbox');
  if (checky.checked)
  {
    if (transit_overlay) transit_overlay.show();
    map.setZoom(13);
  }
  else
  {
    if (transit_overlay) transit_overlay.hide();
  }
}

// replaces ".map" divs with their fancy google counterparts
$(function() {

  // comment out the following line to enable the map overlay ()
  //$('.map').css('border','1px solid #ffd0d0').append($('<p>if you want to see the map, you\'ll need to paste your api key in /app/views/layout/page.html.haml and uncomment the "return true" in /public/javascripts/maps.js</p>').css('color','#c0c0c0')); return true;
  
  if (!GBrowserIsCompatible()) return;
	
  reddoticon = new GIcon(G_DEFAULT_ICON);
	reddoticon.image = "/images/red_10_dot.gif";
	reddoticon.shadow = "";
	reddoticon.iconSize = new GSize(10, 10);
	reddoticon.iconAnchor = new GPoint(5, 5);

  lreddoticon = new GIcon(reddoticon);
  lreddoticon.iconSize = new GSize(6, 6);
  lreddoticon.iconAnchor = new GPoint(3, 3);
  
  endicon = new GIcon(G_DEFAULT_ICON);
  endicon.image = "/images/markerE.png";
  endicon.printImage = "/images/markerE.png";
  endicon.mozPrintImage = "/images/markerE.png";
  endicon.shadow = "";
  endicon.iconSize = new GSize(20, 20);
  endicon.iconAnchor = new GPoint(10, 10);

  starticon = new GIcon(endicon);
  starticon.image = "/images/markerS.png";
  starticon.printImage = "/images/markerS.png";
  starticon.mozPrintImage = "/images/markerS.png";

  highlighticon = new GIcon(endicon);
  highlighticon.image = "/images/markerBlank.png";
  highlighticon.printImage = "/images/markerBlank.png";
  highlighticon.mozPrintImage = "/images/markerBlank.png";

  setupNgIcon(10, 10, "blank.gif", document.all);
  
  function transit_toggle_control() {
    
  }
  
  transit_toggle_control.prototype = new GControl();
  
  transit_toggle_control.prototype.initialize = function(map) {
    var container = document.createElement("div");
    container.style.backgroundColor = "#fff";
    container.style.width = "81px";
    container.style.padding = "0px";
    container.style.border = "1px solid black";
    container.innerHTML = "<table style='border-width:1px;border-style:solid;border-color:white #BBB #BBB white;width:100%'><tr><td style='height:12px;overflow:hidden'><input type='checkbox' onClick='transit_toggle()' id='transit_toggle_checkbox'></td><td style='padding-left:2px;font:12px Arial;font-weight:bold'>Routes</td></tr></table>";
    
    map.getContainer().appendChild(container);
    return container;
  }
  
  transit_toggle_control.prototype.getDefaultPosition = function() {
    return new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(7,30));
  }
  
  $('.map').each(function(){
    var copyright = new GCopyright(1, new GLatLngBounds(new GLatLng(-90, -180), new GLatLng(90, 180)), 0, "");
    var copyrightCollection = new GCopyrightCollection('');
    copyrightCollection.addCopyright(copyright);
    
    transit_layer = new GTileLayer(copyrightCollection, 13, 13);
    var map_layers = [new GTileLayer(copyrightCollection, 1, 22)];
    
    // this is for the cloudmade tiles
    map_layers[0].getTileUrl = function(tile, zoom) { return "http://"+['a.','b.','c.',''][(tile.x+tile.y)%4]+"tile.cloudmade.com/aa7822c3eb0651638c68e1f54f068003/3288/256/"+zoom+'/'+tile.x+'/'+tile.y+".png"; };
    map_layers[0].isPng = function() { return true; };
    map_layers[0].getOpacity = function() { return 1.0; }
    map_layers[0].minResolution = function() { return 1; }
    map_layers[0].maxResolution = function() { return 22; }
    
    var cloudmade_maptype = new GMapType(map_layers, new GMercatorProjection(23), "MyTTC");
    
    map = new GMap2($(this).get(0),{mapTypes: [cloudmade_maptype, G_PHYSICAL_MAP, G_NORMAL_MAP, G_HYBRID_MAP]});
    map.addControl(new transit_toggle_control());
    map.addControl(new GSmallZoomControl());
    map.addControl(new GMenuMapTypeControl());
    
    // THIS IS A HACK - Google Maps doesn't even try to load mt1.myttc.ca AT ALL. dunno why.
    //transit_layer.getTileUrl = function(tile, zoom) { return "http://mt"+((tile.x+tile.y)%4)+".myttc.ca/tiles/z"+zoom+"x"+tile.x+"y"+tile.y+".png"; };
    transit_layer.getTileUrl = function(tile, zoom) { return "http://mt"+((tile.x+tile.y)%4 == 1 ? '0' : (tile.x+tile.y)%4)+".myttc.ca/tiles/z"+zoom+"x"+tile.x+"y"+tile.y+".png"; };
    
    transit_layer.isPng = function() { return true;};
    transit_layer.getOpacity = function() { return 1.0; }
    transit_layer.minResolution = function() { return 13; }
    transit_layer.maxResolution = function() { return 13; }
    
    if ($(this).attr('lat') && $(this).attr('lng'))
      map.setCenter(new GLatLng($(this).attr('lat'), $(this).attr('lng')), 15);
    else
      map.setCenter(new GLatLng(43.6702346802, -79.3867568970), 15);
    
    highlightPoint = new GMarker(new GLatLng(0,0), {icon:highlighticon, zIndexProcess:function (marker,b){ return 102; }});
    map.addOverlay(highlightPoint);
    highlightPoint.hide();
    
    startPoint = new GMarker(new GLatLng(0,0), {icon:starticon, zIndexProcess:function (marker,b){ return 100; }});
    map.addOverlay(startPoint);
    startPoint.hide();

    GEvent.addListener(map, "zoomend", function (oldzoom, newzoom) {
      var checky = document.getElementById('transit_toggle_checkbox');
      if (newzoom != 13)
        checky.checked = '';

      if (!checky.checked && transit_overlay)
        transit_overlay.hide();
    });
    GEvent.addListener(map, "maptypechanged", function () {
      if (!document.getElementById('transit_toggle_checkbox').checked && transit_overlay)
        transit_overlay.hide();
    });
    
  }).css('overflow', 'hidden');
  
  
  /*$('.map').each(function(){
    if ($(this).attr('lat') && $(this).attr('lng') && $(this).attr('dlng') == null)
    {
      marker = new GMarker(new GLatLng($(this).attr('lat'), $(this).attr('lng')), {icon:reddoticon});
      map.addOverlay(marker);
    }
  })*/

  
});