FindProperty = function() {

    var _listOnView;
    var _listOnMap;

    var map, cluster, eventListeners = [], markersArray = [];

    function createTabs() {
        $("ul.Tagtop li").each(function(index) {
            $(this).wrapInner("<a href='#'></a>")
            .children("a").click(function() { return activeTab(index); });
        });
    }

    function activeTab(tabId) {

        $("ul.Tagtop li").removeClass("active").eq(tabId).toggleClass("active");
        $("div.Test").hide().eq(tabId).show();
        if (tabId == 0) {
            viewOnList();
        }
        else if (tabId == 1) {
            viewOnMap();
        }

        return false;
    }

    function viewOnList() {
        $.blockUI({ message: '<h1><img src="/images/wait_anim.gif" /> Please wait...</h1>' });
        $.ajax({
            data: { Type: 1 },
            type: "POST",
            url: "Services/FindApartmentService.ashx",
            timeout: 30000,
            cache: false,
            dataType: "json",
            success: function(data, status) {
                // attach the template
                $("#result").setTemplateElement("template");

                // process the template
                $("#result").processTemplate(data);

                setTimeout(function() {$.unblockUI();}, 1000);
            },
            error: function(request, status, error) {
                //displayMessage(index, error);
            },
            complete: function(request, status) {
            }
        });
    }

    function viewOnMap() {
        $.ajax({
            data: { Type: 2 },
            type: "POST",
            url: "Services/FindApartmentService.ashx",
            timeout: 30000,
            cache: false,
            dataType: "json",
            success: function(data, status) {
                loadMap(data.table);
            },
            error: function(request, status, error) {
                //displayMessage(index, error);
            },
            complete: function(request, status) {
            }
        });
    }

    function onClusterClick(args) {
        cluster.defaultClickAction = function() {
            map.setCenter(args.clusterMarker.getLatLng(), map.getBoundsZoomLevel(args.clusterMarker.clusterGroupBounds))
            delete cluster.defaultClickAction;
        }
        var html = '<h4 style="width:350px;">' + args.clusteredMarkers.length + ' Apartments:</h4><div style="height:5px; width:350px;" ></div><div style="height:8em; overflow:auto; width:350px;">';
        for (i = 0; i < args.clusteredMarkers.length; i++) {
            html += '<img src="/images/arrow.gif" /> <a href="javascript:FindProperty.clusterItemClick(' + args.clusteredMarkers[i].index + ')" class="gmaplink">' + args.clusteredMarkers[i].getTitle() + '</a><br />';
        }
        html += '<br /><a href="javascript:void(0)" onclick="FindProperty.clusterZoomClick();" class="gmaplink">Zoom</a> in to show these apartments.</div>';
        //	args.clusterMarker.openInfoWindowHtml(html);
        map.openInfoWindowHtml(args.clusterMarker.getLatLng(), html);
    }

    function loadMap(data) {
        if (GBrowserIsCompatible()) {
            $.blockUI({ message: '<h1><img src="/images/wait_anim.gif" /> Please wait...</h1>' });
            map = new GMap2(document.getElementById('divMap'));
            var customUI = map.getDefaultUI();

            customUI.maptypes.physical = false;
            customUI.controls.scalecontrol = false;
            customUI.controls.smallzoomcontrol3d = false;
            customUI.controls.largemapcontrol3d = false;
            customUI.zoom.scrollwheel = false;
            map.setUI(customUI);
            map.addControl(new GLargeMapControl());

            var australia = new GLatLng(-31.353636941500987, 146.953125);
            map.setCenter(australia, 3);

            GEvent.addListener(map, 'zoomend', function() { map.closeInfoWindow(); });

            cluster = new ClusterMarker(map, { clusterMarkerTitle: 'Click to see info about %count apartments', clusterMarkerClick: onClusterClick });

            markersArray = [];
            for (i = eventListeners.length - 1; i >= 0; i--) {
                GEvent.removeListener(eventListeners[i]);
            }
            eventListeners = [];
            //eval(file);
            var marker, newIcon, j = 1, title, lat, lng;

            var jsonData = [], lat, lng;

            for (i = 0; i < data.length; i++) {
                jsonData.push({
                    PropertyId: data[i].PropertyId,
                    HotelCode: data[i].HotelCode,
                    BrandId: data[i].BrandId,
                    lat: data[i].Latitude,
                    lng: data[i].Longitude,
                    PropertyName: data[i].PropertyName,
                    Highlight: data[i].Highlight
                });
            }

            for (var i = 0; i < jsonData.length; i++) {

                var newIcon = new GIcon();
                newIcon.image = '/images/markers/image.png';
                newIcon.shadow = '/images/markers/shadow.png';
                newIcon.iconSize = new GSize(32, 35);
                newIcon.shadowSize = new GSize(50, 35);
                newIcon.iconAnchor = new GPoint(16, 35);
                newIcon.infoWindowAnchor = new GPoint(16, 0);
                newIcon.printImage = '/images/markers/printImage.gif';
                newIcon.mozPrintImage = '/images/markers/mozPrintImage.gif';
                newIcon.printShadow = '/images/markers/printShadow.gif';
                newIcon.transparent = '/images/markers/transparent.png';
                newIcon.imageMap = [24, 0, 27, 1, 29, 2, 29, 3, 30, 4, 30, 5, 30, 6, 31, 7, 31, 8, 31, 9, 31, 10, 31, 11, 31, 12, 31, 13, 31, 14, 31, 15, 31, 16, 31, 17, 31, 18, 31, 19, 31, 20, 31, 21, 31, 22, 31, 23, 31, 24, 30, 25, 30, 26, 30, 27, 29, 28, 29, 29, 27, 30, 25, 31, 23, 32, 22, 33, 20, 34, 11, 34, 9, 33, 8, 32, 6, 31, 4, 30, 2, 29, 2, 28, 1, 27, 1, 26, 1, 25, 0, 24, 0, 23, 0, 22, 0, 21, 0, 20, 0, 19, 0, 18, 0, 17, 0, 16, 0, 15, 0, 14, 0, 13, 0, 12, 0, 11, 0, 10, 0, 9, 0, 8, 0, 7, 1, 6, 1, 5, 1, 4, 2, 3, 2, 2, 4, 1, 7, 0];

                lat = Math.round(jsonData[i].lat * 100) / 100;
                lng = Math.round(jsonData[i].lng * 100) / 100;

                marker = newMarker(new GLatLng(jsonData[i].lat, jsonData[i].lng), jsonData[i].PropertyId, jsonData[i].HotelCode, jsonData[i].BrandId, jsonData[i].PropertyName, jsonData[i].Highlight, newIcon);
                markersArray.push(marker);
            }

            cluster.removeMarkers();
            cluster.addMarkers(markersArray);
            cluster.refresh(true);
            //cluster.fitMapToMarkers();
            setTimeout($.unblockUI, 1000);
        }
    }

    function newMarker(markerLocation, propertyId, hotelCode, brandId, propertyName, highlight, markerIcon) {
        var marker = new GMarker(markerLocation, { title: propertyName, icon: markerIcon });
        eventListeners.push(GEvent.addListener(marker, 'click', function() {
            var html = '';

            html += '<div style="width:250px; height:90px;">';

            if (brandId == 1)
                html += '<a href="/' + hotelCode + '" class="gmaplink">' + propertyName + '</a>';
            else
                html += '<a href="http://www.accorhotels.com/' + hotelCode + '" class="gmaplink">' + propertyName + '</a>';

            html += '<div style="height:5px"></div>';

            if (highlight.length > 0)
                html += '<div style="width:250px; height:60px; overflow:auto">' + highlight + '</div>';
            else
                html += '';

            html += '</div>';
            marker.openInfoWindowHtml(html);
        }));
        return marker;
    }

    return {
        init: function() {
            createTabs();
            activeTab(0);
        },

        clusterItemClick: function(idx) {
            cluster.triggerClick(idx);
        },

        clusterZoomClick: function() {
            cluster.defaultClickAction();
        }
    }
} ();

$(document).ready(function() {   
    FindProperty.init();                            
});