//SitOrSquat, copyrighted 2008
//Google overlay code

// A Rectangle is a simple overlay that outlines a lat/lng bounds on the
    // map. It has a border of the given weight and color and can optionally
    // have a semi-transparent background color.

var popupThumbWidth = 48;
var popupThumbHeight = 51;

var popupTemplate = new Template('<div class="mapPopupHeaderRow"><div class="mapPopupHeaderRowText">#{title}</div><div class="mapPopupCloseBtn" onclick="app.popupHide();"><img border=\"0\" src=\"/sitorsquat/images/map/overlays/popup_close.png\"/></div></div>' +
	'<div class="mapPopupBg" style="height: #{bgHeight}px;"></div>' +
	'<div class="mapPopupContent" style="height: #{contentHeight}px;">#{content}</div>');

var popupContentRowTemplate = new Template(
	'<div class="mapPopupContentRow" style="#{extraStyle}" onclick="app.selectToilet(#{groupId});">' +
		'<div class="mapPopupContentImgContainer"><img class="mapPopupContentImg" src="#{thumbSrc}" width="#{thumbWidth}" height="#{thumbHeight}"/></div>' +
		'<div class="mapPopupContentName">#{name}</div>' +
		'<div class="mapPopupContentAddress">#{address}</div>' +
		'<div class="mapPopupContentRating">#{ratingImages}</div>' +
	'</div>');
	

//var popupRowSeperatorTemplate = new Template('<div class="mapPopupContentRowSeperator"  style="#{extraStyle}"></div>');
var popupRowSeperatorTemplate = new Template('<div class="mapPopupContentRowSeperator"></div>');


    // Creates the DIV representing this rectangle.
function SPopupOverlay(point, toilets) {
	this.toilets = toilets;	
	this.point = point;

      // Create the DIV representing our rectangle
	//console.log("Init overlay");
	var div = document.createElement("div");
	var style = div.style;
	
	
	div.className="mapPopup";
	div.id = "mapPopup";
	style.position = "absolute";
	style.display = "none";
	//console.log("Init overlay height");
	var contentHeight =  (this.toilets.length > 3) ? 3 * 71 + 2 : (this.toilets.length * 71) + ((this.toilets.length -1)) ;
	var bgHeight = contentHeight + 4;
	var height = 22 + bgHeight;
	var extraStyle = (this.toilets.length > 3) ? "width: 225px; max-width: 225px;" : "";
	style.height= height + "px";
	//style.margin = "0px";
	
	//console.log("Init overlay looping toilets");
	
	var content = "";
	for (var i = 0; i < this.toilets.length;i++) {
		if (i > 0)
			content += popupRowSeperatorTemplate.evaluate({extraStyle: extraStyle});
			
		var toilet = this.toilets[i];
		
		//console.log("Creating stats");
		var ratingAvg = toilet.stats.averageRating;
		var ratingImages = "";
		ratingAvg = (Math.round((ratingAvg * 10) / 5) * 5) / 10;
		
		for (var j = 0; j < 5;j++) {
			var starType;
			if (ratingAvg >= j + 1) {
				 starType = "red";
			} else if (ratingAvg >= j + 0.5) {
				starType = "half";
			} else {
				starType = "grey";
			}
			ratingImages = ratingImages + "<img src=\"/sitorsquat/images/map/overlays/star_" + starType + ".png\"/>";
			
		}
		//console.log("Created stats");
		
		var thumbSrc; "/sitorsquat/images/spacer.gif";
		var thumbHeight;
		var thumbWidth;
		if (toilet.image.id > 0) {
			thumbSrc = "/sitorsquat/toilet/getImageThumbData?id=" + toilet.image.id;
			thumbWidth = toilet.image.imageThumbWidth;
			thumbHeight = toilet.image.imageThumbHeight;
			
			if (thumbWidth < thumbHeight) {
				var ratio = thumbWidth / thumbHeight;
				thumbWidth = ratio * popupThumbHeight;
				thumbHeight = popupThumbHeight;
			} else if (thumbHeight < thumbWidth) {
				var ratio = thumbHeight / thumbWidth;
				thumbHeight = ratio * popupThumbWidth;
				thumbWidth = popupThumbWidth;
			} else {
				thumbWidth = 48;
				thumbHeight = 48;
			}			
		} else {
			thumbSrc ="/sitorsquat/images/map/overlays/no_image_available_small.png";
			thumbHeight = 51;
			thumbWidth = 48; 
		}
		var rating = toilet.rating;
		var name = toilet.locationName;
		var address = toilet.address;
		if (name.length > 25) {
			name = name.substring(0,22) + "...";
		}
		if (address.indexOf(",") > 0) {
			address = address.substring(0,address.indexOf(","));
		}
		if (address.length > 35) {
			address = address.substring(0,32) + "...";
		}
		//console.log("Checked lengths")
		content += popupContentRowTemplate.evaluate({
			groupId: toilet.groupId, 
			name: name, 
			address: address, 
			thumbSrc: thumbSrc, 
			thumbHeight: thumbHeight, 
			thumbWidth: thumbWidth, 
			extraStyle: extraStyle,
			ratingImages: ratingImages});		
	}
	
	
	var title = this.toilets.length + " toilets shown";
	var html = popupTemplate.evaluate({title: title, bgHeight: bgHeight, contentHeight: contentHeight, content: content});
	//console.log(html);
	div.innerHTML = html;
	//console.log("Inited overlay");
	
	$('mapContainer').appendChild(div);
    //map.getPane(G_MAP_FLOAT_PANE).appendChild(div);
    
	this.div_ = div;
};

    // Remove the main DIV from the map pane
SPopupOverlay.prototype.remove = function () {
	if (this.div_ != null && this.div_.parentNode != null)
		this.div_.parentNode.removeChild(this.div_);
};

    // Copy our data to a new Rectangle
SPopupOverlay.prototype.copy = function () {
	return new SHoverOverlay(this.point, this.toilets);
};



    // Redraw the rectangle based on the current projection and zoom level
SPopupOverlay.prototype.redraw = function (force) {
      // We only need to redraw if the coordinate system has changed
	if (!force) {
		return;
	}
	
	//console.log("Drawing");
      // Calculate the DIV coordinates of two opposite corners of our bounds to
      // get the size and position of our rectangle
	
	

      // Now position our DIV based on the DIV coordinates of our bounds
	//this.div_.style.width = Math.abs(c2.x - c1.x) + "px";
	//this.div_.style.height = Math.abs(c2.y - c1.y) + "px";
	//var latlng = this.map_.fromContainerPixelToLatLng(this.point);
	var map = app.map;
	var point = this.point;//this.map_.fromLatLngToDivPixel(latlng);
	var mapSize = map.getSize();
	
	
	//console.log("Getting style values");
	var height = getCurrentStyleNumeric(this.div_,"height") + 20;
	var width = getCurrentStyleNumeric(this.div_,"width") + 20;
	
	var spaceRight = (this.point.x + width) < mapSize.width;
	var spaceLeft = (this.point.x - width) > 0;
	var spaceAbove = (this.point.y - height) > 0;
	var spaceBelow = (this.point.y + height) < mapSize.height;
	
	var x = 0;
	var y = 0;
	
	//console.log ("Point, Map Size, height/width, Space Right,Left,Above,Below",this.point.x, this.point.y, mapSize.width, mapSize.height, width, height, spaceRight,spaceLeft,spaceAbove,spaceBelow);
	if (spaceRight || (!spaceAbove && !spaceLeft && !spaceBelow)) {
		x = point.x + 20;
		y = (point.y - ((height - 20) / 2));
		
		if (y < 5)
			y = 5;
		else if (y + height > mapSize.height)
			y = mapSize.height - height;
		
	} else if (spaceAbove) {
		y = point.y - height;
		x = point.x
		if (x < 5)
			x = 5;
		else if (x + width > mapSize.width)
			x = mapSize.width - width;
			
	} else if (spaceBelow) {
		y = point.y + 10;
		x = point.x
		if (x < 5)
			x = 5;
		else if (x + width > mapSize.width)
			x = mapSize.width - width;
	} else if (spaceLeft) {
		x = point.x - width;
		y = (point.y - ((height - 20) / 2));
		
		if (y < 5)
			y = 5;
		else if (y + height > mapSize.height)
			y = mapSize.height - height;
		
	}
	
	//console.log("Setting location");
	//var latlng = this.map_.fromContainerPixelToLatLng(new GPoint(x,y));
	var finalPoint = new GPoint(x,y);//this.map_.fromLatLngToDivPixel(latlng);
	if (isContentPanelVisible()) {
		finalPoint.x += margin;
	}
	this.div_.style.left = finalPoint.x + "px";//(point.x - width - 20) + "px";
	this.div_.style.top = finalPoint.y + "px";//(point.y - (height /2)) + "px";
	this.div_.style.display = "block";
	if (isIE6) {
		//console.log("Doing ie6 cleanup");
    	var div = $('mapPopup');
    	supersleight.runKids(div);
    }
};