if (Garmin == undefined) var Garmin = {};
if (Garmin.Foto == undefined) Garmin.Foto = {};


/** Extends GOverlay to display photo icon on map.
 * This class was necisary because GMarker does not allow fine-grained
 * access to it's GIcon to allow border minipulation.
 */
Garmin.Foto.IconOverlay = Class.create();
Garmin.Foto.IconOverlay.prototype = Object.extend(new GOverlay(), {

	/** Creates an icon DIV representing this photo on the map.  
	 * The initialize method is called twice in different contexts:
	 * 1) by the prototype constructor method (map should be null)
	 * 2) by Google Maps when map renders (map will not be null)
	 * @param {GMap2} map Google Map instance
	 * @param {AbstractPhoto} photo instance
	 */
	initialize: function(map, photo, iconWidth, iconHeight) {
		if (map) {
			this.map_ = map;
			var self = this;
			var a = document.createElement("A");
			// a.href = "#";
			a.onclick = function(event) { GEvent.trigger(self, "click", event); };
			a.onmouseover = function(event) { GEvent.trigger(self, "mouseover", event); };
			a.onmouseout = function(event) { GEvent.trigger(self, "mouseout", event); };
			a.ondblclick = function(event) { GEvent.trigger(self, "dblclick", event); };
			var img = document.createElement("IMG");
			img.setAttribute('title', this.photo.getTitle());
			img.setAttribute('id', "t" + this.photo.getPhotoID());
			img.setAttribute('src', this.photo.getImageUrl("thumbnail", this.photo.getPhotoID()));
			// need to be set after src because IE will reset width and height to image size if not
			img.setAttribute('width', this.markerWidth_- 2);
			img.setAttribute('height', this.markerHeight_- 2);

		 	a.appendChild(img);
			this.div_ = document.createElement("div");
			this.div_.appendChild(a);
			var s = this.div_.style;
			s.border = "1px solid white";
			s.width = (this.markerWidth_ - 2) + "px";
			s.height = (this.markerHeight_ - 2) + "px";
			s.backgroundPosition = "-1px " + (this.markerHeight_ - 1) + "px";
			s.position = "absolute";
			s.cursor = "pointer";
			this.toDefaultDepth();
			map.getPane(G_MAP_MARKER_PANE).appendChild(this.div_);
		} else {
			this.photo = photo;
			this.point_ = new GLatLng(photo.getLat(), photo.getLng());
			this.markerWidth_ = iconWidth || 34;
			this.markerHeight_ = iconHeight || 34;
			this.selected = false;
			this.infoWindowAnchor = new GPoint(this.markerWidth_ / 2, -(this.markerHeight_ / 2));
		}			
	},

	getPoint: function() {
		return this.point_;
	},

	remove: function(map) {
		this.div_.parentNode.removeChild(this.div_);
	 	GEvent.clearInstanceListeners(this.div_);
	 	this.photo = null;
	},

	copy: function() {
		return new Garmin.Foto.IconOverlay(null, this.photo, this.markerWidth_, this.markerHeight_);
	},
	
	redraw: function(force) {
		if (!force)
			 return;
		var c = this.map_.fromLatLngToDivPixel(this.point_);
		var s = this.div_.style;
		s.left = (c.x - this.markerWidth_ / 2 - 1) + "px";
		s.top = (c.y - this.markerHeight_ / 2 - 1) + "px";
	},
	
	toTopDepth: function() {
		var s = this.div_.style;
		s.zIndex = GOverlay.getZIndex(-90.0);
	},
	
	toDefaultDepth: function() {
		if ( ! this.isSelected()) {
			var s = this.div_.style;
			s.zIndex = GOverlay.getZIndex(this.photo.getLat());
		}
	},
	
	unselect: function() {
		var s = this.div_.style;
		s.border = "1px solid white";
		s.left = (parseInt(s.left) + 1) + "px";
		s.top = (parseInt(s.top) + 1) + "px";
		this.toDefaultDepth();
		this.selected = false;
	},
	
	select: function() {
		var s = this.div_.style;
		s.border = "3px solid #4390fd";
		s.padding = "1px";
		s.backgroundColor = "white";
		s.left = (parseInt(s.left) - 1) + "px";
		s.top = (parseInt(s.top) - 1) + "px";
		this.toTopDepth();
		this.selected = true;
	},
	
	isSelected: function() {
		return this.selected;
	},
	
	setSelect: function(select) {
		if (this.selected != select) {
			if (select) {
				this.select();
			} else {
				this.unselect();
			}
		}
	},

	toString: function() {
		return "IconOverlay(selected="+this.selected+", " + this.photo + ")";
	}

});