function createIcon(image)
{
	var icon = new GIcon();
	icon.image = Map.iconPath + '/' + image;
	icon.iconSize = new GSize(35, 35);
	icon.iconAnchor = new GPoint(20, 18);
	return icon;
}

var infoTemplate = $.template('\
<div class="info-bg"></div>\
<div class="place" onclick="return closeOverlay();">\
	<div class="details">\
		<div class="detail-body">\
            ${desc}\
		</div>\
	</div>\
</div>\
');

var controlTpl  = $.template('\
<div id="map-control-w">\
    <div id="map-control">\
        <a id="map-up">Up</a>\
        <a id="map-down">Down</a>\
        <a id="map-left">Left</a>\
        <a id="map-right">Right</a>\
        <a id="map-centre">Centre</a>\
        <div id="zoom-control">\
            <a id="zoom-in">Zoom In</a>\
            <a id="zoom-out">Zoom Out</a>\
        </div>\
    </div>\
</div>\
');

var InfoContent = '<p>\
15 City Business Centre<br />\
Basin Road<br />\
Chichester<br />\
PO19 8DU<br />\
</p>';

function panCallback(m,d){
	switch (d){
		case "up":
			size = new GSize(0,35);
			break;
		case "down":
			size = new GSize(0,-35);
			break;
		case "left":
			size = new GSize(35,0);
			break;
		case "right":
			size = new GSize(-35,0);
			break;
		default:
			size = false;
			break;
	}
	if (false !== size){
		m.panBy(size);
	}
}

function zoomCallback(){
	Map.getMap().setCenter(ol, Map.getMap().getZoom());
}

function pc(){
	Map.getMap().setCenter(ol, Map.getMap().getZoom());
	$('#map-control-w').css('left', $('#header div.inner').offset().left + 20);
}

function so()
{	
	closeOverlay();
    var position = getInfoPosition(Map, activeMarker, 210, 140);
	activeMarker.overlay = new InfoBox( activeMarker, position.width, position.height, position.className, infoTemplate, position.offsetX, position.offsetY);
	Map.getMap().addOverlay(activeMarker.overlay);
	activeMarker.hide();
	infoOn = true;
}

function getInfoPosition(Map, activeMarker, boxWidth, boxHeight){
    var mapContainer = $(Map.getMap().getContainer());
    var markerCoords = Map.getMap().fromLatLngToContainerPixel(activeMarker.getLatLng());
    var pTop = true;
    var pLeft = true;
    var position = {
        markerX: markerCoords.x,
        markerY: markerCoords.y,
        width: boxWidth,
        height: boxHeight,
        className: 'map-info-box',
		offsetX: 109,
		offsetY: -22
    }

    var infoTop     = markerCoords.y - (position.height + position.offsetY);
    var infoBottom  = infoTop + position.height;
    var infoLeft    = markerCoords.x + position.offsetX;
    var infoRight   = infoLeft + position.width;
    
    if (infoTop < 1){
        Map.getMap().panBy(new GSize(0, (0 - infoTop) + 40));
    } else if (infoBottom > mapContainer.height()) {
        Map.getMap().panBy(new GSize(0, (0 - (infoBottom - mapContainer.height() + 40))));
    }
    
    return position;
}

function closeOverlay()
{	
	if (infoOn)
	{
		Map.getMap().removeOverlay(activeMarker.overlay);
		activeMarker.show();
	}
	infoOn = false;
	return false;
}

window.onunload = function() {
	GUnload();
}

var infoOn = false;
var activeMarker = null;
var Map = new Map();
Map.loadOnMove = false;
Map.iconPath = '/images/map';
Map.setTypeDefault('minZoom', 1);
Map.setTypeDefault('maxZoom', 20);

var mapControl = new InMapControl();
mapControl.setPositionSize(new GSize(20,20));
mapControl.setControlTpl(controlTpl);
mapControl.setPanCallback(panCallback);
mapControl.setZoomCallback(zoomCallback);

d3rIcon = createIcon('marker.png');