// setup for map

var Map = new Map();
Map.loadOnMove = false;
Map.iconPath = '/assets/imap/images/map';

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

// set type icons
Map.setTypeDefault('icon', createIcon('marker-reef.png'));
Map.setTypeDefault('mouseover', showOverlay);

var infoTemplate = $.template('\
<div class="info-bg"></div>\
<div class="place">\
	<div class="details">\
		<h2><a href="${link}" target="_parent">${name}</a></h2>\
		<div class="detail-body">\
            <div class="image" ${image_style}>\
                <a href="${link}" target="_parent">${image}</a>\
            </div>\
            <p>${desc}</p>\
            <p><strong>Address:</strong> ${address}<br /><strong>City:</strong> ${city}</p>\
            <br class="clear" />\
		</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-toggle">Toggle Zoom</a>\
        </div>\
    </div>\
</div>\
');

var typeControlTpl = $.template('\
<div class="mapControl">\
    <div class="mtButton mtHybrid">Terrain</div>\
    <div class="mtButton mtDefault">Map</div>\
    <div class="mtButton mtSatellite">Satellite</div>\
</div>\
');

var mapControl = new InMapControl();
mapControl.setPositionSize(new GSize(20,20));
mapControl.setControlTpl(controlTpl);

var mapTypeControl = new InMapTypeControl();

var activeMarker = false;
var tout = null;

function showOverlay(markerKey)
{
    
	if (activeMarker)
	{
		closeOverlay();
	}

	if (markerKey != null && typeof(markerKey) != 'object')
	{
		newMarker = Map.getMarker(markerKey);
	}
	else
	{
		newMarker = this;
	}
	
	if (newMarker === activeMarker) { return; }

	if (!newMarker) { return; }

    activeMarker = newMarker;

    var position = getInfoPosition(Map, activeMarker, 415, 194);

	activeMarker.overlay = new InfoBox( activeMarker, position.width, position.height, position.className, infoTemplate, position.offsetX, position.offsetY);
    
	Map.setActiveKey(activeMarker.key);
	Map.getMap().addOverlay(activeMarker.overlay);

    $('div.details-footer > div.add > a, div.details-footer > div.remove > a').click(function(){
        shortlist(this);
    });

}

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'
    }

    if (markerCoords.x < ((mapContainer.width() / 20) * 11)){
        position.offsetX = 8;
    }else{
        position.offsetX = position.width - 10;
        pLeft = false;
    }
    
    if (markerCoords.y < (mapContainer.height() / 2)){
        position.offsetY = -147;
    }else{
        position.offsetY = -45;
        pTop = false;
    }
    
    if (pLeft && !pTop){
        position.className += ' bottom-left';
    }else if(!pLeft && pTop){
        position.className += ' top-right';
    }else if(!pLeft && !pTop){
        position.className += ' bottom-right';
    }
    
    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) + 10));
    } else if (infoBottom > mapContainer.height()) {
        Map.getMap().panBy(new GSize(0, (0 - (infoBottom - mapContainer.height() + 15))));
    }
    
    return position;
}

function closeOverlay()
{	
	
	if (activeMarker)
	{
		
		Map.getMap().removeOverlay(activeMarker.overlay);
		
		if (link = $($(activeMarker.place.key + '-link')))
		{
			link.removeClass('active');
		}
	}
	Map.setActiveKey(false);
	activeMarker = false;
	return false;
}

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

// In Array JS method from
// http://andrew.hedges.name/experiments/javascript_optimization/in_array.html
Array.prototype.inArray = function(srch) {
    var i = this.length - 1;
    if (i >= 0) {
        do {
            if (this[i] == srch) { return true; }
        } while (i--);
    }
    return false;
}

function filterType(){
    $('#spinner').show();
    var type = $('#type').val();
    var markers = Map.getMarkers();
    var bounds = Map.getMap().getBounds();
    for (var marker in markers){
        if ('function' == typeof(markers[marker].setImage)){
            if (false == bounds.containsLatLng(markers[marker].getLatLng()))
            {
                continue;
            }
            if (0 == type || markers[marker].place.type >= type){
                markers[marker].show();
            }else{
                markers[marker].hide();
            }
        }
    }
    $('#spinner').hide();

}

function inspect(obj, ret){
    msg = ''
    for (var p in obj){
        if (typeof obj[p] == 'function'){
            msg += 'function ' + p + ', ';
        } else {
            msg += p + ':' + obj[p] + ', ';
        }
    }
    if (ret === undefined){
        alert(msg);
        return;
    }
    return msg;
}