// JavaScript Document

//create the Counter overlay object
function TravelersWindow(marker,agent,width) {
	this.agent_ = agent;
	this.agentID_ = agent.id;
	this.width_ = (width ? width + 'px' : 'auto');
	this.marker_ = marker;
	var a = this.agent_;
a.agency = a.agency.replace(/\`/g, "\'");
	
	var wu = a.web;
	if ((null != wu) && (wu.indexOf("http") < 0))
		wu = "http://" + wu;
	
	this.html_ = '<span class="company">' + a.agency + '</span><br />';
	this.html_ += '<br /><span class="street-address">' + a.address + '</span><br />';
	//this.html_ += '<span class="name">' + a.name + '</span><br />';
	this.html_ += '<span class="locality">' + a.city + ', </span><span class="region">'+a.state+'</span> <span class="postal-code">' + a.zip + '</span><br />';
	if(a.phone){this.html_ += '<span class="tel">Phone: ' + a.phone + '</span><br />'};
	if(a.fax){this.html_ += '<span class="tel">Fax: ' + a.fax + '</span><br />'};
	if(a.web){this.html_ += '<span class="name"><a class="content" href="javascript:var a=window.open(\'' + wu + '\');">Visit Website</a></span><br />'};
	if(a.email){this.html_ += '<span class="name"><a class="content" href="mailto:' + a.email + '?cc=inquiry@travelers.com">' + a.email + '</a></span><br />'};
	this.html_ += '<span class="name">Get directions: <a class="content" href="#">To here</a> &#183; <a class="content" href="#">From here</a></span><br />';
	this.html2_ = '<h3 class="company">' + a.agency + '</h3>';
	this.html2_ += '<ul id="infoAddress">';
	//this.html2_ += '<li>' + a.name + '</li>';
	this.html2_ += '<li class="street-address">' + a.address + '</li>';
	this.html2_ += '<li class="locality">' + a.city + ', '+a.state+' '+ a.zip + '</li>';
	if(a.phone){this.html2_ += '<li class="tel">Phone: ' + a.phone + '</li>'};
	if(a.fax){this.html2_ += '<li class="tel">Fax: ' + a.fax + '</li>'};
	if(a.web){this.html2_ += '<li class="link"><a class="content" href="javascript:var a=window.open(\'' + wu + '\');">Visit Website</a></li>'};
	if(a.email){this.html2_ += '<li class="link">Email: <a class="content" href="mailto:' + a.email + '?cc=inquiry@travelers.com">' + a.email + '</a></li>'};

	this.html2_ += '<li class="link">Get directions: <strong><a id="toHere" class="content" href="#">To here</a></strong> &#183; <strong><a id="fromHere" class="content" href="#">From here</a></strong></li>';
	this.html2_ += '</ul>';
}

TravelersWindow.prototype = new GOverlay();

cp = TravelersWindow.prototype;

cp.initialize = function(map){
	var div = document.createElement("div");
	div.style.display = 'none';
	map.getPane(G_MAP_FLOAT_PANE).appendChild(div);
	this.map_ = map
	this.container_ = div;
}

cp.redraw = function(force) {
	if(!force) return; 
	//get the content div
	var content = document.createElement("span");
	content.innerHTML = this.html_;
	content.style.font = '10px verdana';
	content.style.textAlign = 'left';
	content.style.margin = '0';
	content.style.padding = '0';
	content.style.border = '0';
	content.style.display = 'inline';
	
	if(!this.width_ || this.width_=='auto' || this.width_ <= 0) {
		content.style.minWidth = '10px';
		content.style.maxWidth = '500px';
		content.style.width = 'auto';
	}else{
		content.style.width = this.width_ + 'px';
	}

	content.style.visibility='hidden';
	
	//temporarily append content to the map container
	this.map_.getContainer().appendChild(content);
	
	//retrieve the rendered width and height
	var contentWidth = content.offsetWidth+45;
	var contentHeight = content.offsetHeight+15;
	//remove the content from the map
	content.parentNode.removeChild(content);
	content.style.visibility='visible';
	content.innerHTML = this.html2_;
	//set width and height to ensure they remain the same as drawn
	content.style.width = contentWidth+'px';
	content.style.height = contentHeight+'px';
	content.style.position = 'absolute';
	content.style.left = '48px';
	content.style.top = '28px';
	content.style.background = 'white';
	this.width_ = contentWidth;
	var wrapper = document.createElement("div");
	//append the content so the wrapper is above
	wrapper.appendChild(content);
	var wrapperParts = {
		l:{l:24, t:53, w:24, h:(contentHeight-23)},
		r:{l:(contentWidth+48), t:53, w:62, h:(contentHeight-23)},
		t:{l:61, t:0, w:contentWidth, h:28},
		tr:{l:(contentWidth+48), t:0, w:62, h:53},
		tl:{l:0, t:0, w:61, h:53},
		bl:{l:0, t:(contentHeight+28), w:36, h:23},
		b:{l:36, t:(contentHeight+28), w:(contentWidth+55), h:23},
		br:{l:(contentWidth+91), t:(contentHeight+28), w:19, h:23}
	};

	//create the image DOM objects
	for (i in wrapperParts) {
		var img = document.createElement('img');
		
		// load the image from your local image directory
		// based on the property name of the wrapperParts object
		
		//if ((i == 'tl') && (this.agent_.elite == 'E'))
		//	img.src = '/findagent/img/infowindow/' + i + '_star.png';
		//else
		img.src = '/findagent/img/infowindow/' + i + '.png';
		
		// set the appropriate positioning attributes
		img.style.position = 'absolute';
		img.style.top = wrapperParts[i].t+'px';
		img.style.left = wrapperParts[i].l+'px';
		img.style.width = wrapperParts[i].w+'px';
		img.style.height = wrapperParts[i].h+'px';
		wrapper.appendChild(img);
		wrapperParts[i].img = img;
	}

	//add event handlers like the close box
	var marker = this.marker_;
	GEvent.addDomListener(wrapperParts.tr.img, "click", function(){
		marker.closeTravelersWindow();												 
	});
	
	//get the X,Y pixel location of the marker
	var pixelLocation = this.map_.fromLatLngToDivPixel(
		this.marker_.getPoint()
	);
	console.log("pixelLocation = %o", pixelLocation);
	//position the container div for the window
	this.container_.style.position = 'absolute';
	this.container_.style.left = (pixelLocation.x-contentWidth-108) + "px";
	this.container_.style.top = (pixelLocation.y - contentHeight - 40 - this.marker_.getIcon().iconSize.height) + "px";
	this.container_.style.border = '0';
	this.container_.style.margin = '0';
	this.container_.style.padding = '0';
	this.container_.style.display = 'block';
	
	//append the styled info window to the container
	this.container_.appendChild(wrapper);

	//pan if necessary so it shows on the screen
	var mapNE = this.map_.fromLatLngToDivPixel(this.map_.getBounds().getNorthEast());
	var mapSW = this.map_.fromLatLngToDivPixel(this.map_.getBounds().getSouthWest());
	var panX = 0;
	var panY = 0;
	if(this.container_.offsetTop < mapNE.y){
		//top of the window is above the top edge of the map container
		panY = Number(mapNE.y) - Number(this.container_.offsetTop);
	}
	if(this.container_.offsetLeft-138 < mapSW.x){
		panX = (this.container_.offsetLeft-158) - mapSW.x;
	}
	if(panX!=0 || panY!=0){
		this.map_.panBy(new GSize(-panX-118,panY+30));
	}

}

cp.remove = function(){
	this.container_.parentNode.removeChild(this.container_);
}

cp.copy = function(){
	return new Counter(this.html_);
}

GMarker.prototype.TravelersWindowInstance = null;
GMarker.prototype.openTravelersWindow = function(content, width){
	if(this.TravelersWindowInstance == null){
		if(this.ActiveMarker){
			this.ActiveMarker.closeTravelersWindow();
		}
		this.TravelersWindowInstance = new TravelersWindow(this, content, width);
		GMarker.prototype.ActiveMarker = this;
		map.addOverlay(this.TravelersWindowInstance);
	}
}
GMarker.prototype.closeTravelersWindow = function(){
	if(this.TravelersWindowInstance != null) {
		map.removeOverlay(this.TravelersWindowInstance);
		this.TravelersWindowInstance = null;
	}
}