//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.
function SInfoOverlay(toilet) {
	this.toilet = toilet;	
}
SInfoOverlay.prototype = new GOverlay();




var toiletPopupTemplate = new Template(
	'<div class="toiletPopupBg"><img src="/sitorsquat/images/toilet_popup/frame.png"/></div>' +
	'<div class="toiletPopupSide"><img src="/sitorsquat/images/toilet_popup/side_#{howToGoTypeId}.png"/></div>' +
	'<div class="toiletPopupClose"><a href="#" onclick="app.hideToiletDetails();"><img border="0" src="/sitorsquat/images/toilet_popup/icon_x.png"/></a></div>' +
	'<div class="toiletPopupContent"><div class="toiletPopupImageThumb" onclick="#{thumbImageClick}"><img src="#{thumbImageSrc}"/></div>' +
	'<div class="toiletPopupLinks"><a href="#" onclick="showPopup(\'/sitorsquat/toilet/details?groupId=#{groupId}\',\'toiletdetails\');"><img border="0" src="/sitorsquat/images/toilet_popup/icon_more_info.png"/></a><br/>' +
	'<a href="#" onclick="sendAlertRequest(\'/sitorsquat/toilet/addFavorite?toiletGroupId=#{groupId}\');"><img border="0" src="/sitorsquat/images/toilet_popup/icon_add_to_favs.png"/></a><br/>' +
	'<a href="#" onclick="sendAlertRequest(\'/sitorsquat/toilet/share?toiletGroupId=#{groupId}\');"><img border="0" src="/sitorsquat/images/toilet_popup/icon_share.png"/></a><br/>' +
	'</div>' +
	'<div class="toiletPopupText"><span class="toiletPopupTitle">#{locationName}</span><br/>' +
	'<span class="toiletPopupAddress">#{address}</span><br/>' +
	'<span class="toiletPopupDescription">#{description}</span><br/></div></div>');

    // Creates the DIV representing this rectangle.
SInfoOverlay.prototype.initialize = function (map, toilet) {
      // Create the DIV representing our rectangle
	var div = document.createElement("div");
	var style = div.style;
	
	div.className="toiletPopup";
	div.id = "toiletPopup" + this.toilet.id;
	style.position = "absolute";
	style.width = "498px";
	style.height="261px";
	style.margin = "0px";
	
	console.log("Toilet with id overlay ", this.toilet.groupId);
	var thumbImageSrc = (this.toilet.image.id > 0) ? "/sitorsquat/toilet/getImageThumbData?id=" + this.toilet.image.id : "/sitorsquat/images/spacer.gif";
	var thumbImageClick =  (this.toilet.image.id > 0) ? 
		"showToiletAddImagePreview(true," + this.toilet.image.id + "," + 
			this.toilet.image.imageWidth + "," + this.toilet.image.imageHeight + ");" 
		: "";
		
	var description = this.toilet.description;
	if (description.length > 500) {
		description = description.substring(0,500) + ".....";
	}
	console.log("Thumb click = " + thumbImageClick);
	var values = {howToGoTypeId: this.toilet.howToGoType,
		groupId: this.toilet.groupId, 
		locationName: this.toilet.locationName,
		address: this.toilet.address,
		description: description,
		thumbImageSrc: thumbImageSrc,
		thumbImageClick: thumbImageClick};
	var html = toiletPopupTemplate.evaluate(values);
	
	div.innerHTML = html;
      // Our rectangle is flat against the map, so we add our selves to the
      // MAP_PANE pane, which is at the same z-index as the map itself (i.e.,
      // below the marker shadows)
     //console.log(div.innerHTML);
    
	map.getPane(G_MAP_FLOAT_PANE).appendChild(div);
	this.map_ = map;
	this.div_ = div;
};

    // Remove the main DIV from the map pane
SInfoOverlay.prototype.remove = function () {
	this.div_.parentNode.removeChild(this.div_);
};

    // Copy our data to a new Rectangle
SInfoOverlay.prototype.copy = function () {
	return new SInfoOverlay(this.toilet);
};

    // Redraw the rectangle based on the current projection and zoom level
SInfoOverlay.prototype.redraw = function (force) {
      // We only need to redraw if the coordinate system has changed
	if (!force) {
		return;
	}

      // 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 c1 = this.map_.fromLatLngToDivPixel(this.toilet.latlng);
	this.div_.style.left = (c1.x - 140) + "px";
	this.div_.style.top = (c1.y - 261) + "px";
	var div = $('toiletPopup' + this.toilet.id);
	if (isIE6)
    	supersleight.runKids(div);
};