var visibleInfoBox = null
var infoBoxIsEnlarged = false
var infoBoxTimeoutID = null
var originalMapCenter = null

function openInfoBox(oMarker) {
	// close currently visible info box if it isn't the selected one
	if (visibleInfoBox != null) closeInfoBox()
	// create new info box
	visibleInfoBox = new infoBox(oMarker)
	gMap.addOverlay(visibleInfoBox)
	// get height of infobox contents
	var infoBoxHeight = document.getElementById('infoBoxContents').offsetHeight
	// strech infobox
	stretchInfoBox(0, 13, 360, 17, infoBoxHeight)
}

function closeInfoBox() {
	if (visibleInfoBox != null) gMap.removeOverlay(visibleInfoBox)
	visibleInfoBox = null
	infoBoxIsEnlarged = false
}

function stretchInfoBox(step, width_from, width_to, height_from, height_to) {
	steps = 8
	if ( navigator.userAgent.indexOf('Firefox') > -1 ) steps -= 4
	
	if (!infoBoxIsEnlarged) {
		step ++
		var factor = factorVersnelVertraag(step / steps)
		var width = Math.ceil(width_from + (width_to - width_from) * factor) + 'px'
		var height = Math.ceil(height_from + (height_to - height_from) * factor) + 'px'
		// set new size
		document.getElementById('infoBoxContents').style.width = width
		document.getElementById('infoBoxContents').style.height = height
		// move to original position
		visibleInfoBox.redraw(true)
		// need to call myself again?
		if (step < steps && (width <= width_to && height <= height_to)) {
			setTimeout('stretchInfoBox(' + step + ',' + width_from + ','  + width_to + ',' + height_from + ',' +  height_to + ')', 15)
		} else {
			infoBoxIsEnlarged = true
		}
	}
}

function factorVersnelVertraag(f) {
	return .5 - Math.cos(f * Math.PI) * .5
}

function infoBox(oMarker) {
	this.oMarker = oMarker
}

infoBox.prototype = new GOverlay();

// Creates the DIV representing this rectangle.
infoBox.prototype.initialize = function(map) {  
	// Create the DIV representing our rectangle
	var div = document.createElement("div")
	div.style.position = "absolute"
	div.oMarker = this.oMarker
	
	// set extention for image used
	var baseClass = ((browserDetect.isWinIE && !(browserDetect.isWinIE7 || browserDetect.isWinIEVista)) ? 'Gif' : '')
	sHTML = '<table id="infoBox" class="infoBox' + baseClass + '" cellspacing="0" cellpadding="0" border="0" onmouseover="clearTimeout(infoBoxTimeoutID)">'
	
	sHTML += '<tr><td class="infoBoxTopLeft' + baseClass + '"><img src="' + _gfxfolder_maps + 'spacer.gif" width="4" height="4"/></td>'
	sHTML += '<td class="infoBoxTopCenter' + baseClass + '"><img src="' + _gfxfolder_maps + 'spacer.gif" width="1" height="4"/></td>'
	sHTML += '<td class="infoBoxTopRight' + baseClass + '"><img src="' + _gfxfolder_maps + 'spacer.gif" width="10" height="4"/></td></tr>'
	
	sHTML += '<tr><td class="infoBoxMiddleLeft' + baseClass + '"><img src="' + _gfxfolder_maps + 'spacer.gif" width="4" height="1"/></td>'
	sHTML += '<td class="infoBoxMiddleCenter' + baseClass + '"><table id="infoBoxContents" cellspacing="0" cellpadding="0" border="0"><tr><td><div id="infoBoxText" class="infoBoxText">'
	
	sHTML += div.oMarker.html
	
	sHTML += '</div></td></tr></table></td>'
	sHTML += '<td class="infoBoxMiddleRight' + baseClass + '"><img src="' + _gfxfolder_maps + 'spacer.gif" width="10" height="1"/></td></tr>'
	
	sHTML += '<tr><td class="infoBoxBottomLeft' + baseClass + '" style=""><img src="' + _gfxfolder_maps + 'spacer.gif" width="4" height="25"/></td>'
	sHTML += '<td><table cellspacing="0" cellpadding="0" border="0" style="width: 100%"><tr><td class="infoBoxBottomPointer' + baseClass + '"><img src="' + _gfxfolder_maps + 'spacer.gif" width="45" height="25"/></td><td class="infoBoxBottomCenter' + baseClass + '"><img src="' + _gfxfolder_maps + 'spacer.gif" width="1" height="25"/></td></tr></table></td>'
	sHTML += '<td class="infoBoxBottomRight' + baseClass + '"><img src="' + _gfxfolder_maps + 'spacer.gif" width="10" height="25"/></td></tr>'
	
	sHTML += '</table>'
	
	div.innerHTML = sHTML
	
	//alert(div.innerHTML)
	
	this.map_ = map;
	this.div_ = div;
	
	// add to map
	//map.getPane(G_MAP_FLOAT_PANE).appendChild(this.div_)
	
	// add to page
	document.body.appendChild(this.div_)
}

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

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

// Redraw the rectangle based on the current projection and zoom level
infoBox.prototype.redraw = function(force) {
	// We only need to redraw if the coordinate system has changed
	if (!force) return;
	
	var mapPosLeft = 0
	var mapPosTop = 0
	var diffLeft = 0 
	var diffTop = 0
	var left = 0
	var top = 0
	
	// get position of map on page
	objMap = document.getElementById('gMap')
	
	mapPosTop = objMap.offsetTop
	mapPosLeft = objMap.offsetLeft
	
	//alert('mapPosTop: ' +mapPosTop  + '\nmapPosLeft: ' + mapPosLeft)
	
	var c = this.map_.fromLatLngToDivPixel(this.oMarker.coord)
	left = c.x
	top = c.y
	
	//alert('left: ' + c.x + '\ntop: ' + c.y + '\nthis.div_.offsetWidth: ' + this.div_.offsetWidth + '\nthis.div_.offsetHeight: ' + this.div_.offsetHeight)
	
	var mapCenter = this.map_.getCenter()
	if (mapCenter != null) {
		var mapCenter = this.map_.fromLatLngToDivPixel(mapCenter)
		
		if (originalMapCenter != null) {
			//alert('originalMapCenter left: ' + originalMapCenter.x + '\noriginalMapCenter top: ' + originalMapCenter.y + '\nmapCenter left: ' + mapCenter.x + '\nmapCenter top: ' + mapCenter.y + '\nleft: ' + c.x + '\ntop: ' + c.y)
			
			diffLeft = originalMapCenter.x - mapCenter.x
			diffTop = originalMapCenter.y - mapCenter.y
			//alert('diffLeft: ' + diffLeft + '\ndiffTop: ' + diffTop)
			
			if (diffLeft != 0 || diffTop != 0) {
				if (diffLeft != 0) left = diffLeft + c.x
				if (diffTop != 0) top = diffTop + c.y
			}
		}
		
		// Now position our DIV based on the DIV coordinates of our bounds
		this.div_.style.left = mapPosLeft + (left - 33) + "px"
		
		if (browserDetect.isFF == true) {
			this.div_.style.top = mapPosTop + ((top - 10) - this.div_.offsetHeight) + "px"
		} else {
			this.div_.style.top = mapPosTop + (top - (this.div_.offsetHeight + 11)) + "px"
		}
	} else {
		closeInfoBox()
	}
	
	// if no value for 
	if (originalMapCenter == null && mapCenter != null) originalMapCenter = mapCenter
}