// *******************************************************************************
// Input map functionality
// *******************************************************************************


// ===============================================================================
// Global variables
// ===============================================================================

var mdvMapsArr = new Array();
var mdvMapConfigs = new Array();
var mdvMiniMapConfig = new Array();
var ctxCoords = null;
var usagesMap = new Array("origin", "destination", "via", "dm", "ttb", "stt", "pp");
// stop or poi ids
var idArr = new Array();


// ===============================================================================
// Configuration
// ===============================================================================

// Configuration of map and mini map.
function initMdvMapConfig() {
	for (var i=0; i < usagesMap.length; i++) {
		var usage = usagesMap[i];
		
		// map
		mdvMapConfigs[usage] = mdvMapConfig.clone();
		mdvMapConfigs[usage].add('serverURL', mapPath);  
		mdvMapConfigs[usage].add('efaURL', 'XML_MAP_REQUEST');
		mdvMapConfigs[usage].add('transparentImg', imgPath + '/MDVMap/transparent.gif');
		mdvMapConfigs[usage].add('imagePath', imgPath + '/MDVMap/');
		mdvMapConfigs[usage].add('network', 'DUB');
		mdvMapConfigs[usage].add('defaultScale', mapDefaultScale);	
		mdvMapConfigs[usage].add('xCenterReal', mapCenterX);
		mdvMapConfigs[usage].add('yCenterReal', mapCenterY);
		mdvMapConfigs[usage].add('mapName', nameMap);
		mdvMapConfigs[usage].add('block', '100');
		mdvMapConfigs[usage].add('toolTimeOut', '20');
		mdvMapConfigs[usage].add('block', '100');
		mdvMapConfigs[usage].add('cursorMove', imgPath + '/grabbing.cur');
		mdvMapConfigs[usage].add('zoomOnDoubleClick', 'true');
		mdvMapConfigs[usage].add('hotspotOnMouseWheel', 'true');
		mdvMapConfigs[usage].add('useMagnifyGlass', 'true');
		mdvMapConfigs[usage].add('useBubbleForEFAInfo', 'true');
		mdvMapConfigs[usage].add('useBubblePinForEFAInfo', 'true');
		mdvMapConfigs[usage].add('useBubbleOverflowForEFAInfo', 'true');
		mdvMapConfigs[usage].add('contextMenu.size.width', '100');
		mdvMapConfigs[usage].add('contextMenu.size.height', '20');
	    mdvMapConfigs[usage].add('info.stop.size.width', '300');
	    mdvMapConfigs[usage].add('info.stop.size.height', '180');
	    mdvMapConfigs[usage].add('info.poi.size.width', '300');
	    mdvMapConfigs[usage].add('info.poi.size.height', '80');
		
		// mini map
		mdvMiniMapConfig[usage] = mdvMiniMapConfig.clone();
		mdvMiniMapConfig[usage].add('serverURL', mapPath);  
		mdvMiniMapConfig[usage].add('efaURL', 'XML_MAP_REQUEST');
		mdvMiniMapConfig[usage].add('transparentImg', imgPath + '/MDVMap/transparent.gif');
		mdvMiniMapConfig[usage].add('imagePath', imgPath + '/MDVMap/');
		mdvMiniMapConfig[usage].add('network', 'DUB');
		mdvMiniMapConfig[usage].add('defaultScale', mapDefaultScale);	
		mdvMiniMapConfig[usage].add('xCenterReal', mapCenterX);
		mdvMiniMapConfig[usage].add('yCenterReal', mapCenterY);
		mdvMiniMapConfig[usage].add('mapName', nameMap);
		mdvMiniMapConfig[usage].add('block', '100');
		mdvMiniMapConfig[usage].add('toolTimeOut', '20');
		mdvMiniMapConfig[usage].add('zoomOnDoubleClick', 'true');
		mdvMiniMapConfig[usage].add('cursorMove', imgPath + '/grabbing.cur');
		mdvMiniMapConfig[usage].add('hotspotOnMouseWheel', 'true');
	}
}


// ===============================================================================
// Common map functionality
// ===============================================================================

// Load map and mini map.
function onLoadMapHandler() {
	if (document.forms['request']) {
		var form = document.forms['request'];
		initMdvMapConfig();
		
		for (var i=0; i < form.length; i++) {
			if (form[i].name && form[i].name.substring(0, 15) == 'itdLPxx_mdvMap_') {
				if(!document.getElementById('nameState_' + form[i].name.substring(15)) || document.getElementById('nameState_' + form[i].name.substring(15)).value!='list') {
					var name = form[i].name.substring(15, form[i].name.length);
					var value = form[i].value;
					if (mdvMapsArr[name] == null) {
						mdvMapsArr[name] = new MDVMapHelper(name, value);
					}
				}
			}
		} 
	}
}

// Unload map and mini map.
function onUnloadMapHandler() {
	for (var i=0; i < usagesMap.length; i++) {
		if (mdvMapsArr[usageMap[i]])
			mdvMapsArr[usageMap[i]].destroy();
	}
		
}

MDVMapHelper.prototype.destroy = function() {
	this.mdvMap.destroy();
	this.mdvMiniMap.destroy();

	this.mdvMap = null;
	this.mdvMiniMap = null;
};

// Create map.
function MDVMapHelper(id, value) {
	this.mdvMap = null;
	this.mdvMiniMap = null;
	this.id = id; // usage
	this.input = document.getElementById('itdLPxx_mdvMap_' + id);
	this.value = value;
	this.marker = null;
	this.markerLayer = null;
	this.sync = null;

	// create context menu
	this.ctxMenuArr = new Array();
	if (this.id == 'origin')
		this.ctxMenuArr[0] = new MDVMapMenuItem(setMapOrigin, this.setCoordinates);
	else if (this.id == 'destination')
		this.ctxMenuArr[0] = new MDVMapMenuItem(setMapDestination, this.setCoordinates);
	else if (this.id == 'via')
		this.ctxMenuArr[0] = new MDVMapMenuItem(setMapVia, this.setCoordinates);
	else 
		this.ctxMenuArr[0] = new MDVMapMenuItem(setMapLocation, this.setCoordinates);
	this.ctxMenu = new MDVMapMenu(this.ctxMenuArr);
	
	// create map
	if (this.mdvMap == null) {
		this.mdvMap = new MDVMap(document.getElementById('mdvMap_' + this.id));
		
		// correct the map control alt texts
		var controlText = new Array();
		controlText['goNorth'] = goNorth;
		controlText['goWest'] = goWest;
		controlText['goEast'] = goEast;
		controlText['goSouth'] = goSouth;
		controlText['lastResult'] = lastResult;
		controlText['zoomIn'] = zoomIn;
		controlText['zoomOut'] = zoomOut;
		
		new MDVMapContextMenu(this.mdvMap, this.ctxMenu);
		new MDVMapEFAInfo(this.mdvMap);
		new MDVMapNavigator(this.mdvMap);
		new MDVMapControl(this.mdvMap, controlText);

		// register events
		this.mdvMap.events.registerEvent(MDVEvent_MAP_INITIALISED, this, this.onNewCentre);
		this.mdvMap.events.registerEvent(MDVEvent_OBJECT_CLICKED, this, this.onObjectClicked);
		this.mdvMap.events.registerEvent(MDVEvent_TOOLTIP, this, this.onToolTip);
		this.mdvMap.events.registerEvent(MDVEvent_CONTEXT_MENU, null, ContextMenuHandler);
		this.mdvMap.events.registerEvent(MDVEvent_LAYER_UPDATED, this, this.highlightPoint);
		
		// layer
		this.markerLayer = this.mdvMap.createLayer('markers');
		this.mdvMap.addLayer(this.markerLayer);
	}

	// create mini map
	if (this.mdvMiniMap == null) {
		this.mdvMiniMap = new MDVMap(document.getElementById('mdvMiniMap_' + this.id));
		new MDVMapNavigator(this.mdvMiniMap); 
	}

	// display map
	if (value.length > 0 && this.mdvMap && this.mdvMiniMap) {
		var mdvMapTarget = document.getElementById('mdvMap_' + this.id);
		if (mdvMapTarget) {
			mdvMapTarget.style.display = 'block';
			// display map help button
			if (document.getElementById('openMapHelp_' + id))
				document.getElementById('openMapHelp_' + id).style.display = 'block';
			this.mdvMap.execute(mdvMapConfigs[this.id]);
			this.mdvMiniMap.execute(mdvMiniMapConfig[this.id]);
			if (this.mdvMap && this.mdvMiniMap)
				this.sync = new MDVMapSyncBound(this.mdvMap, this.mdvMiniMap);
		}
		// display an identified location on the map
		this.doIdentified();
	}
	// hide map
	else if (value.length <= 0) {
		var mdvMapTarget = document.getElementById('mdvMap_' + this.id);
		if (mdvMapTarget)
			mdvMapTarget.style.display = 'none';
	}
}

// Display identified locations on the map.
MDVMapHelper.prototype.doIdentified = function() {
	var nc = null;
	for (var i=0; i<usagesMap.length; i++) {
		if(idArr[usagesMap[i]]) {
			// do nothing if no coordinates available
			if (idArr[usagesMap[i]][0].x <= 0 || idArr[usagesMap[i]][0].y <= 0)
				return;
			
			nc = new MDVCoordinates(nameMap, parseInt(idArr[usagesMap[i]][0].x), parseInt(idArr[usagesMap[i]][0].y));
			
			// set marker for adresses 
			if (idArr[usagesMap[i]][0].type !== 'poi' && idArr[usagesMap[i]][0].type != 'stop') 
				this.setMarker(nc, usagesMap[i]);
			
			// set map center on "main" marker (e.g. origin marker on origin map)
			if (usagesMap[i] == this.id) {
				this.mdvMap.setZoomLevel(6);
				this.mdvMap.setCentre(nc);
			}
			
		}
	}
	this.mdvMap.update();
}

// Sets a marker.
MDVMapHelper.prototype.setMarker = function(obj, usage) {
	var text = '';
	var size = new MDVPoint(220, 70);
	
	// marker name
	if(usage == 'destination') {
		if (document.getElementById('name_destination') && document.getElementById('name_destination').value!='')
			text = document.getElementById('name_destination').value;
		else
			text = mapDestination;
	}
	else if (usage == 'via') {
		if (document.getElementById('name_via') && document.getElementById('name_via').value!='')
			text = document.getElementById('name_via').value;
		else
			text = mapVia;
	}
	else {
		if (document.getElementById('name_origin') && document.getElementById('name_origin').value!='')
			text = document.getElementById('name_origin').value;
		else if (usage == 'origin') 
			text = mapOrigin;
		else
			text = mapLocation;
	}
	
	this.marker = this.mdvMap.createMarker(obj, 0, this.getImage(usage));
	var tool = this.mdvMap.createToolTip(size,'<b>' + text + '</b>');
	this.marker.setToolTip(tool);
	this.marker.toolTip.setPin(true);
	this.markerLayer.addMarker(this.marker);
	// display tooltip of "main" marker (e.g. origin marker on origin map)
	if(usage == this.id) {
		this.marker.toolTip.display();
		this.marker.toolTip.setFixedPin(true);
	}
}

// Creates the marker image 
MDVMapHelper.prototype.getImage = function(usage) {
	var img = imgPath + '/MDVMap/origin.gif';
	
	if(usage) {
		switch(usage) {
			case 'destination':
				img = imgPath + '/MDVMap/destination.gif';
				break;
			case 'via':
				img = 'images/MDVMap/via.gif';
				break;
		}
	}
	else {
		switch(this.id) {
			case 'destination':
				img = imgPath + '/MDVMap/destination.gif';
				break;
			case 'via':
				img = imgPath + '/MDVMap/via.gif';
				break;
		}
	}
	
	var i = new Image();
		i.src = img;

	return img;
}

// Set the new center.
MDVMapHelper.prototype.onNewCentre = function (id, msg, obj) {
	var centre = obj.getCentre();
	this.input.value = centre.x + ':' + centre.y + ':' + centre.mapName + ':' + obj.config.getZoomLevelIndex();
}

// Returns the place state.
MDVMapHelper.prototype.getPlaceState = function() {
	var state = document.getElementById('placeState_' + this.id);
	if (state)
		return state.value;
	else
		return '';
}

// Toggle mini map.
function toggleMiniMap (usage) {
	// open mini map
	if (document.getElementById('miniMapBorder_' + usage) && document.getElementById('miniMapBorder_' + usage).style.display == 'none') {
		if (document.getElementById('closeMiniMap_' + usage) && document.getElementById('openMiniMap_' + usage)) {
			document.getElementById('miniMapBorder_' + usage).style.display = 'block';
			document.getElementById('openMiniMap_' + usage).style.display = 'none';
		}	
	}
	// close mini map
	else {
		if (document.getElementById('closeMiniMap_' + usage) && document.getElementById('openMiniMap_' + usage)) {
			document.getElementById('miniMapBorder_' + usage).style.display = 'none';
			document.getElementById('openMiniMap_' + usage).style.display = 'block';
		}	
	}
}


// ===============================================================================
// Map input functionality
// ===============================================================================

// Highlights a preselected stop, poi or address.
MDVMapHelper.prototype.highlightPoint = function(id, msg, layer) {
	// stop or poi
	if (layer && idArr) {
		var markers = layer.getMarkers();
		if(markers) {
			for (var i=0; i<usagesMap.length; i++) {
				for (var m = 0; m < markers.length; m++) {
					var marker = markers[m];			
					var object = marker.getObjectId();
					// display the first stop of the stops array because there is only one stop
					if (idArr[usagesMap[i]] && idArr[usagesMap[i]][0] && object.id == idArr[usagesMap[i]][0].id) {
						var img = marker.getImage();
						if (usagesMap[i] == 'destination')
							img.className='markedIconDestination';
						else if (usagesMap[i] == 'via')
							img.className='markedIconVia';
						else 
							img.className='markedIconOrigin';
						break;
					}
				}
			}
		}
	}
}

// Submit a stop or poi.
MDVMapHelper.prototype.onObjectClicked = function(id, msg, obj) {
	var name 		= document.getElementById('nameInfo_' + this.id);
	var place 		= document.getElementById('placeInfo_' + this.id);
	var placeState 	= this.getPlaceState();
	var type;
	if (document.getElementById('typeInfo_' + this.id))
		type = document.getElementById('typeInfo_' + this.id);
	else
		type = document.getElementById('type_' + this.id);
	var execInst 	= document.forms['request'].execInst;
	
	switch (obj.type) {
		case 'stop':
			name.value = obj.id;
			type.value = 'stopID';
			placeState.value = 'empty';
			place.value = '';
			break;
		case 'poi':
			place.value = obj.omc + ':-1';
			name.value = 'poiID:' + obj.id;
			type.value = 'poi';
			break;
		case 'coord':
			if (obj.id)
				return;
			name.value = obj.x + ':' + obj.y + ':' + obj.mapName + ':' + obj.name;
			type.value = 'coord';
			placeState.value = 'empty';
			place.value = '';
			break;
	}
	
	if(this.id != 'dm' && this.id != 'stt' && this.id != 'ttb') {
		execInst.value = 'verifyOnly';
	}
	if (this.id === 'pp') {
		document.forms['request'].convertCoord2LocationServer.value = '';
	}
	if(this.id === 'stt' || this.id === 'dm') {
		if(document.getElementById('itdLPxx_mdvMap_stt')) {
			document.getElementById('itdLPxx_mdvMap_stt').value='';
		}
		if(document.forms['request'].sessionID) {
			document.forms['request'].sessionID.value='0';
		}
		if(document.forms['request'].requestID) {
			document.forms['request'].requestID.value='0';
		}
	}
	this.mdvMap.mapper.style.cursor = 'wait';
	this.input.value = '';
	document.forms['request'].submit();
}


// ===============================================================================
// Context menu
// ===============================================================================

function ContextMenuHandler(id, status, obj) {
	if (status)
		ctxCoords = obj;
}

// Select location on map
MDVMapHelper.prototype.setCoordinates = function() {
	var name = this.mdvMap.name.substring(this.mdvMap.name.lastIndexOf('_')+1);
	if (mdvMapsArr[name])
		if(this.id == 'stt' || this.id == 'dm') {
			if(document.getElementById('itdLPxx_mdvMap_stt'))
				document.getElementById('itdLPxx_mdvMap_stt').value='';
			if(document.forms['request'].sessionID)
				document.forms['request'].sessionID.value='0';
			if(document.forms['request'].requestID)
				document.forms['request'].requestID.value='0';
		}
	
		// name of the location
		var text = mapLocation;
		if (this.id == 'origin')
			text = mapOrigin;
		else if (this.id == 'destination')
			text = mapDestination;
		else if (this.id == 'via')
			text = mapVia;
		else 
			text = mapLocation;

		mdvMapsArr[name].onObjectClicked(-1, '', { type: 'coord', name: text, x: parseInt(ctxCoords.x), y: parseInt(ctxCoords.y), mapName: ctxCoords.mapName });	
}


// ===============================================================================
// Tooltip
// ===============================================================================

MDVMapHelper.prototype.onToolTip = function(id, msg, obj) {
	switch (obj.getParent().objectId.type) {
		// add text  "landmark"
		case 'poi':
			if (obj && obj.isVisible()) {
				obj.setInnerHTML(mapLandmark + ' <b>'
					+ obj.getParent().objectId.desc
					+ '</b>'); 
			} 
			break;
		// load departure monitor for stop
		case 'stop':	
			if (obj && obj.isVisible()) {
				obj.setInnerHTML('Stop: <b>'
					+ obj.getParent().objectId.desc
					+ '</b><br><br><div id="'
					+ obj.getParent().objectId.id
					+ '">'
					+ mapDepWait
					+ '</div>'); 
				obj.dm = new MDVEFADepartureMonitor(obj.parentMarker.objectId.id, '../dm/XML_DM_REQUEST');
				obj.dm.getDepartures(obj.getParent().objectId.id);
			} 			
			break;
		}
}

// Set tooltip fixed
MDVToolTip.prototype.setFixedPin = function(state) {
	if (state) {
        this.setPin(state);
        this.setFixed(state);
        this.display(); 
        this.getContainer().complex['pin'].firstChild.style.left = '-681px';
	}
}    


// ===============================================================================
// Departure monitor (in tooltip) 
// ===============================================================================

function MDVEFADepartureMonitor(id, url) {
	this.id 	= id;
	this.url 	= url;
}

MDVEFADepartureMonitor.prototype.getDepartures = function(identifier) {
	var _params = { itdLPxx_id: identifier, name_dm: this.id, type_dm: 'stopID', mode: 'direct', limit: '5' };
		_params = $H(_params);
		_params = _params.toQueryString();

	var ajax = new Ajax.Request(this.url, { method: 'post', parameters: _params, onComplete: MDVEFADepartureMonitor_onAjaxComplete });
};

function MDVEFADepartureMonitor_onAjaxComplete(request) {
	if (request && request.responseXML) {

		var firstChild = request.responseXML.firstChild;

		while (firstChild.nodeType != 1) {
			firstChild = firstChild.nextSibling;
		}

		var id = firstChild.getAttribute('id');
		var text = request.responseText;

		var target = document.getElementById(id);
			target.innerHTML = text;
	}
}


// ==================================================================
// Overwritten map functionality: corrects the highlightning of an icon 
// on map.
// ==================================================================
function MDVMarker_onload (e) {
	e = e ? e : window.event;           

	// We need to wait for the onload event in Firefox as it doesn't provide proper values for img width and height, if we don't wait.
	if (this.marker) {
		this.marker.update();
		if (!this.marker.append && this.marker.layer) {
			this.mdvMap.markerObjects.appendChild(this);
			this.marker.append = true;	   
	   }
	}
}

MDVToolTipBubble.prototype.createBubble = function () {
        // cancle event bubbling when scrolling bubble content with mouse
        function bubbleMouseWheel (e) {
            e = e ? e : window.event;
            e.cancelBubble = true;
  			e.returnValue  = false;
            if (e.stopPropagation)
                e.stopPropagation();
        
            if (e.preventDefault)
                e.preventDefault();
        }
        
		// upper left corner

	  	var ipath = 'images/';
	  	if (this.mdvMap.config.get('imagePath'))
	  		ipath = this.mdvMap.config.get('imagePath');
	
		
		var tempImg = document.createElement('img');
		tempImg.src = ipath + 'bubble.png';
		tempImg.style.position = 'relative';
		tempImg.style.left = 0 + 'px';
		tempImg.style.top = 0 + 'px';
		tempImg.galleryimg = 'no';
		tempImg.unselectable = 'no';
		
		this.complex['upperLeftCorner'] = document.createElement('div');
		this.complex['upperLeftCorner'].appendChild(tempImg);
		this.div.appendChild(this.complex['upperLeftCorner']);
		
		// end upper left corner
		
		// upper border
		
		var tempImg = document.createElement('img');
		tempImg.src = ipath + 'bubble.png';
		tempImg.style.position = 'relative';
		tempImg.style.left = -30 + 'px';
		tempImg.style.top = 0 + 'px';
		tempImg.galleryimg = 'no';
		tempImg.unselectable = 'no';
		
		this.complex['upperBorder'] = document.createElement('div');
		this.complex['upperBorder'].appendChild(tempImg);
		this.div.appendChild(this.complex['upperBorder']);
		
		// end upper border
		
		// upper right corner
		
		var tempImg = document.createElement('img');
		tempImg.src = ipath + 'bubble.png';
		tempImg.style.position = 'relative';
		tempImg.style.left = -672 + 'px';
		tempImg.style.top = 0 + 'px';
		tempImg.galleryimg = 'no';
		tempImg.unselectable = 'no';
		
		this.complex['upperRightCorner'] = document.createElement('div');
		this.complex['upperRightCorner'].appendChild(tempImg);
		this.div.appendChild(this.complex['upperRightCorner']);
		
		// end upper right corner
		
		// left border & body background
		
		var tempImg = document.createElement('img');
		tempImg.src = ipath + 'bubble.png';
		tempImg.style.position = 'relative';
		tempImg.style.left = 0 + 'px';
		tempImg.style.top = -30 + 'px';
		tempImg.galleryimg = 'no';
		tempImg.unselectable = 'no';
		
		this.complex['leftBorderBody'] = document.createElement('div');
		this.complex['leftBorderBody'].appendChild(tempImg);
		this.div.appendChild(this.complex['leftBorderBody']);
		
		// end left border & body background
		
		// lower right corner
		
		var tempImg = document.createElement('img');
		tempImg.src = ipath + 'bubble.png';
		tempImg.style.position = 'relative';
		tempImg.style.left = -670 + 'px';
		tempImg.style.top = -670 + 'px';
		tempImg.galleryimg = 'no';
		tempImg.unselectable = 'no';
		
		this.complex['lowerRightCorner'] = document.createElement('div');
		this.complex['lowerRightCorner'].appendChild(tempImg);
		this.div.appendChild(this.complex['lowerRightCorner']);
		
		// end lower right corner
		
		
		// right border
		
		var tempImg = document.createElement('img');
		tempImg.src = ipath + 'bubble.png';
		tempImg.style.position = 'relative';
		tempImg.style.left = -698 + 'px';
		tempImg.style.top = 0 + 'px';
		tempImg.galleryimg = 'no';
		tempImg.unselectable = 'no';
		
		this.complex['rightBorder'] = document.createElement('div');
		this.complex['rightBorder'].appendChild(tempImg);
		this.div.appendChild(this.complex['rightBorder']);
		
		// end right border
		
		// lower left corner
		
		var tempImg = document.createElement('img');
		tempImg.src = ipath + 'bubble.png';
		tempImg.style.position = 'relative';
		tempImg.style.left = 0 + 'px';
		tempImg.style.top = -670 + 'px';
		tempImg.galleryimg = 'no';
		tempImg.unselectable = 'no';
		
		this.complex['lowerLeftCorner'] = document.createElement('div');
		this.complex['lowerLeftCorner'].appendChild(tempImg);
		this.div.appendChild(this.complex['lowerLeftCorner']);
		
		// end lower left corner
		
		// lower border
		
		var tempImg = document.createElement('img');
		tempImg.src = ipath + 'bubble.png';
		tempImg.style.position = 'relative';
		tempImg.style.left = -30 + 'px';
		tempImg.style.top = -670 + 'px';
		tempImg.galleryimg = 'no';
		tempImg.unselectable = 'no';
		
		this.complex['lowerBorder'] = document.createElement('div');
		this.complex['lowerBorder'].appendChild(tempImg);
		this.div.appendChild(this.complex['lowerBorder']);
		
		// end lower border
		
		// body

		this.complex['body'] = document.createElement('div');
		this.complex['body'].className = 'MDVToolTipBubble_Body';
		this.complex['body'].onmouseover = function () {this.focus();};
        if (window.addEventListener && navigator.product && navigator.product == 'Gecko') {
            this.complex['body'].addEventListener('DOMMouseScroll', bubbleMouseWheel, false);
        }
        else {
            this.complex['body'].onmousewheel = bubbleMouseWheel;
        }
		this.div.appendChild(this.complex['body']);
	
		// end body
		
		// pointer
		var tempImg = document.createElement('img');
		tempImg.src = ipath + 'bubble.png';
		tempImg.style.position = 'relative';
		tempImg.style.left = this.pointerState * -64 + 'px';
		tempImg.style.top = -704 + 'px';
		tempImg.galleryimg = 'no';
		tempImg.unselectable = 'no';
		
		this.complex['pointer'] = document.createElement('div');
		this.complex['pointer'].appendChild(tempImg);
		this.div.appendChild(this.complex['pointer']);
		
		// end pointer
		
		// pin
		var tempImg = document.createElement('img');
		tempImg.src = ipath + 'bubble.png';
		tempImg.style.position = 'relative';
		tempImg.style.left = -662 + 'px';
		tempImg.style.top = -701 + 'px';
		tempImg.galleryimg = 'no';
		tempImg.unselectable = 'no';
		tempImg.onclick = MDVToolTipBubble_OnPinClick;
		tempImg.bubble = this;
		
		this.complex['pin'] = document.createElement('div');
		this.complex['pin'].mdvMap = this.mdvMap;
		this.complex['pin'].appendChild(tempImg);
		this.div.appendChild(this.complex['pin']);
    };