function drawRegionMap() {
    drawMap("#map_canvas", "./data/markers.xml", false, 298, 220, false)
}

function drawCountryMap() {
    drawMap("#map_canvas", "./data/country_markers.xml", false, 700, 320, false)
}

function drawPropertyMap() {
    drawMap("#map_canvas", "./data/country_markers.xml", false, 675, 320, true)
}

function drawSearchMap() {
    var markerUrl = "./data/country_markers.xml?" + document.location.href.split('?')[1];
    drawMap("#map_canvas", markerUrl, false, 675, 320, true);
}

function drawDoubleMap() {
    drawMap("#map_canvas", "./data/markers.xml", false, 298, 220, false)
    drawMap("#map_canvasProperty", "./data/country_markers.xml", false, 675, 320, true)
}

function drawMap(elementID, dataURL, showRelated, elementWidth, elementHeight, extendZoomLevel, tooltipId) {
    var mapContainer = $(elementID)[0];
    var bounds = new GLatLngBounds();
    var markers = [];
    var descs = [];
    var contents = [];
    var points = [];
    var ids = [];
    var tooltips = [];
    var i = 0;

    var messageId = '#message';
    if (tooltipId != undefined) {
        messageId = tooltipId;
    }

    mapContainer.setAttribute('style', 'width:' + elementWidth + 'px' + ';height:' + elementHeight + 'px');

    if (GBrowserIsCompatible()) {
        if (mapContainer) {
            var map = new GMap2(mapContainer);
            map.setCenter(new GLatLng(0, 0), 0);

            var comPointer = new GIcon(G_DEFAULT_ICON);
            comPointer.image = "/assets/images/marker_red.png";
            comPointer.iconSize = new GSize(32, 33);
            comPointer.shadow = "";
            markerOptions_com = { icon: comPointer, title: "test" };

            var resPointer = new GIcon(G_DEFAULT_ICON);
            resPointer.image = "/assets/images/markers/green.png";
            resPointer.iconSize = new GSize(32, 33);
            resPointer.shadow = "";
            markerOptions_res = { icon: resPointer, title: "test" };
        }

        // read contents of xml file
        $.get(dataURL, function(data) {
            // find markers
            $(data).find('marker').each(function() {
                var id = $(this).attr('id');
                var lat = $(this).attr('lat');
                var lng = $(this).attr('lng');
                var content = $(this).attr('content');
                var desc = $(this).attr('label');
                var markerType = $(this).attr('type');
                var point = new GLatLng(lat, lng);
                var icontype = $(this).attr('type');
                var tooltipUrl = $(this).attr('tooltipLocation');
                var marker;

                marker = createMarker(point, [i + 1], markerType);

                markers[i] = marker;
                descs[i] = desc;
                contents[i] = content;
                points[i] = point;
                ids[i] = id;
                tooltips[i] = tooltipUrl;

                map.addOverlay(marker);
                map.addControl(new GSmallZoomControl3D());

                // extend the map to added point
                bounds.extend(point);

                i++;
            });

            $(markers).each(function(i, marker) {
                if (showRelated) {
                    $("<li />")
						.html("Point " + i)
						.click(function() {
						    displayPoint(marker, i, ids[i], messageId);
						}).appendTo("#related_projects");
                }

                GEvent.addListener(marker, "click", function() {
                    displayPoint(marker, i, tooltips[i], messageId);
                });
            });

            map.setCenter(bounds.getCenter());

            if (extendZoomLevel) {
                map.setZoom(map.getBoundsZoomLevel(bounds) - 1);
            }
            else {
                map.setZoom(map.getBoundsZoomLevel(bounds));
            }

        });

        function createMarker(point, index, markerType) {

            var marker;

            if (markerType == 'res') {
                var comPointer = new GIcon(G_DEFAULT_ICON);
                //comPointer.image = "/assets/markers/icomap_res/icomap_res_" + index + ".png";
                comPointer.image = "/assets/markers/new_marker.png";
                comPointer.iconSize = new GSize(23, 39);
                comPointer.shadow = "";
                markerOptions = { icon: comPointer };

                marker = new GMarker(point, markerOptions);
            }
            else if (markerType == 'com') {
                var comPointer = new GIcon(G_DEFAULT_ICON);
                //comPointer.image = "/assets/markers/icomap_com/icomap_com_" + index + ".png";
                comPointer.image = "/assets/markers/new_marker.png";
                comPointer.iconSize = new GSize(23, 39);
                comPointer.shadow = "";
                markerOptions = { icon: comPointer };

                marker = new GMarker(point, markerOptions);
            }
            else {
                var resPointer = new GIcon(G_DEFAULT_ICON);
                //resPointer.image = "/assets/markers/icomap_pro/icomap_pro_" + index + ".png";
                resPointer.image = "/assets/markers/new_marker.png";
                resPointer.iconSize = new GSize(23, 39);
                resPointer.shadow = "";
                markerOptions = { icon: resPointer };

                marker = new GMarker(point, markerOptions);
            }

            return marker;
        }


        // custom tooltip
        $(messageId).appendTo(map.getPane(G_MAP_FLOAT_SHADOW_PANE));

        function displayPoint(marker, index, url, messageId) {
            $(messageId).hide();

            var moveEnd = GEvent.addListener(map, "moveend", function() {
                var markerOffset = map.fromLatLngToDivPixel(marker.getLatLng());
                $(messageId)
							.fadeIn()
							.css({ top: markerOffset.y, left: markerOffset.x })
							.html(createToolTip(url));

                GEvent.removeListener(moveEnd);
            });
            map.panTo(marker.getLatLng());
        }

        function createToolTip(fileURL) {
            var html = $.ajax({
                url: fileURL,
                async: false,
                cache: false
            }).responseText;

            return createToolTipElement(html);
        }

        function createToolTipElement(html) {
            var tt_container = $('<div class="box_maps">');
            var tt_head = $('<div class="top">');
            tt_container.append(tt_head);

            var tt_middle = $('<div class="middle">').html(html);

            var tt_clear = $('<div class="clear">');
            tt_middle.append(tt_clear);

            tt_container.append(tt_middle);

            var tt_bottom = $('<div class="bottom">');
            tt_container.append(tt_bottom);


            return tt_container;

        }
    }
}