// Globals
var EPIGOOGLE_INFO_WINDOW_IMAGE_MAX_WIDTH = 130;
var EPIGOOGLE_INFO_WINDOW_IMAGE_MAX_HEIGHT = 130;
var EPIGOOGLE_INFO_WINDOW_MAX_WIDTH = 0.8;

function GetDiv(text, className) {
    var elm = document.createElement('div');
    elm.className = className;
    elm.innerHTML = text;
    return elm;
}
function GetImg(src, className) {
    var elm = document.createElement('img');
    elm.alt = '';
    elm.className = className;
    elm.src = src;
    return elm;
}
function BuildImageHandlerSrc(src) {
    return '/Image.axd?file=' + src + '&maxW=' + EPIGOOGLE_INFO_WINDOW_IMAGE_MAX_WIDTH.toString() + '&maxH=' + EPIGOOGLE_INFO_WINDOW_IMAGE_MAX_HEIGHT.toString();
}

//*****************************************************************************
//*****************************************************************************
// EPiGoogleCategory
//*****************************************************************************
//*****************************************************************************
EPiGoogleCategory.prototype.Map = null;
EPiGoogleCategory.prototype.Searcher = null;
EPiGoogleCategory.prototype.Id = null;
EPiGoogleCategory.prototype.Overlays = null;
EPiGoogleCategory.prototype.Objects = null;
EPiGoogleCategory.prototype.MapCategoryJson = null;
EPiGoogleCategory.prototype.LocalSearchMapIcon = null;
EPiGoogleCategory.prototype.LoaderElement = null;
EPiGoogleCategory.prototype.CheckBoxElement = null;

EPiGoogleCategory.prototype.ClearObjects = function() {
    for (var i = 0; i < this.Objects.length; i++) {
        this.Objects[i].RemoveOverlay();
    }
    this.Objects = [];
}
EPiGoogleCategory.prototype.ClearOverlays = function() {
    for (var i = 0; i < this.Overlays.length; i++) {
        this.Map.removeOverlay(this.Overlays[i]);
    }
    this.Overlays = [];
}

EPiGoogleCategory.prototype.OnSearchComplete = function() {
    var results = this.Searcher.results;

    if (this.LoaderElement != null) {
        this.LoaderElement.style.visibility = 'hidden';
    }
    if (this.CheckBoxElement != null) {
        this.CheckBoxElement.disabled = false;
    }


    for (var i = 0; i < results.length; i++) {
        var result = results[i];
        var markerLatLng = new google.maps.LatLng(parseFloat(result.lat), parseFloat(result.lng));

        var marker = null;
        if (this.LocalSearchMapIcon == null && this.MapCategoryJson.Icon == null)
            marker = new google.maps.Marker(markerLatLng); // Create the marker
        else {
            var theIcon = null;
            if (this.MapCategoryJson.Icon == null) {
                theIcon = new GIcon(G_DEFAULT_ICON);
                theIcon.image = this.LocalSearchMapIcon.IconImage;
                theIcon.iconAnchor = new GPoint(this.LocalSearchMapIcon.IconOffsetX, this.LocalSearchMapIcon.IconOffsetY);
                theIcon.shadow = this.LocalSearchMapIcon.IconShadowImage;
                theIcon.iconSize = new GSize(this.LocalSearchMapIcon.Width, this.LocalSearchMapIcon.Height);
                marker = new google.maps.Marker(markerLatLng, { icon: theIcon });
            }
            else {
                theIcon = new GIcon(G_DEFAULT_ICON);
                theIcon.image = this.MapCategoryJson.Icon.IconImage;
                theIcon.iconAnchor = new GPoint(this.MapCategoryJson.Icon.IconOffsetX, this.MapCategoryJson.Icon.IconOffsetY);
                theIcon.shadow = this.MapCategoryJson.Icon.IconShadowImage;
                theIcon.iconSize = new GSize(this.MapCategoryJson.Icon.Width, this.MapCategoryJson.Icon.Height);
                marker = new google.maps.Marker(markerLatLng, { icon: theIcon });
            }
        }

        marker.bindInfoWindow(result.html.cloneNode(true));
        result.marker = marker;
        this.Overlays.push(marker);
        this.Map.addOverlay(marker);
    }
}

EPiGoogleCategory.prototype.ExecuteSearch = function(query) {
    this.Searcher.setCenterPoint(this.Map);
    this.Searcher.execute(query);
}

function EPiGoogleCategory(map, searcher, mapCategoryJson, doGoogleSearch, categoryObjects, localSearchMapIcon, loaderElement, checkBoxElement) {
    this.Map = map;
    this.Id = mapCategoryJson.Id;
    this.Searcher = searcher;
    this.MapCategoryJson = mapCategoryJson;

    this.Overlays = [];
    this.Objects = [];

    this.LocalSearchMapIcon = localSearchMapIcon;
    
    if (doGoogleSearch == true && searcher != null && this.MapCategoryJson.GoogleSearchTerm != null && this.MapCategoryJson.GoogleSearchTerm != '') {
        if (loaderElement != null) {
            this.LoaderElement = loaderElement;
            this.LoaderElement.style.visibility = 'visible';
        }
        if (checkBoxElement != null) {
            this.CheckBoxElement = checkBoxElement;
            this.CheckBoxElement.disabled = true;
        }
        this.Searcher.setCenterPoint(this.Map);
        this.Searcher.setSearchCompleteCallback(this, this.OnSearchComplete);

        if (this.MapCategoryJson.GoogleSearchTerm != null)
            this.ExecuteSearch(this.MapCategoryJson.GoogleSearchTerm);
    }
    if (categoryObjects != null && categoryObjects.length > 0) {
        // Objects stored in EPiServer with this category
        for (var i = 0; i < categoryObjects.length; i++)
            this.Objects.push(new EPiGoogleObject(this.Map, categoryObjects[i]));
    }
}

//*****************************************************************************
//*****************************************************************************
// EPiGoogleCluster
//*****************************************************************************
//*****************************************************************************
EPiGoogleCluster.prototype.Map = null;
EPiGoogleCluster.prototype.Id = null;
EPiGoogleCluster.prototype.Objects = null;
EPiGoogleCluster.prototype.MapClusterJson = null;


EPiGoogleCluster.prototype.ClearObjects = function() {
    for (var i = 0; i < this.Objects.length; i++) {
        this.Objects[i].RemoveOverlay();
    }
    this.Objects = [];
}

function EPiGoogleCluster(map, mapClusterJson) {
    this.Map = map;
    this.MapClusterJson = mapClusterJson;
    this.Objects = [];
    this.Id = mapClusterJson.Id;
    this.Name = mapClusterJson.ClusterName;

    this.Map.setCenter(new GLatLng(this.MapClusterJson.StartLat, this.MapClusterJson.StartLong), this.MapClusterJson.ZoomLevel);
    this.Map.savePosition();

    for (var i = 0; i < this.MapClusterJson.MapObjects.length; i++) {
        this.Objects.push(new EPiGoogleObject(this.Map, this.MapClusterJson.MapObjects[i]));
    }
}

//*****************************************************************************
//*****************************************************************************
// EPiGoogleCapitexObject
//*****************************************************************************
//*****************************************************************************
EPiGoogleCapitexObject.prototype.Map = null;
EPiGoogleCapitexObject.prototype.Id = null;
EPiGoogleCapitexObject.prototype.MapObjectJson = null;

EPiGoogleCapitexObject.prototype.MapOverlay = null;

EPiGoogleCapitexObject.prototype.CenterOnThis = function() {
    this.Map.setCenter(new GLatLng(this.MapObjectJson.Lat, this.MapObjectJson.Long), 15);
}

EPiGoogleCapitexObject.prototype.RemoveOverlay = function() {
    this.Map.removeOverlay(this.MapOverlay);
}

EPiGoogleCapitexObject.prototype.BuildInfoWindowHtml = function () {
    var elm = document.createElement('div');
    if (this.MapObjectJson.Image != null)
        elm.appendChild(GetImg(BuildImageHandlerSrc(this.MapObjectJson.Image), 'capitexInfoWindowImg'));
    if (this.MapObjectJson.LocaleTypeName != null)
        elm.appendChild(GetDiv(this.MapObjectJson.LocaleTypeName + '<br />' + Math.round(this.MapObjectJson.ArealSize).toString() + 'm²', 'capitexInfoWindowType'));
    elm.appendChild(GetDiv('<b>' + this.MapObjectJson.AddressStreet + '</b><br />' + this.MapObjectJson.SalesDescription, 'capitexInfoWindowDesc'));
    if (this.MapObjectJson.Url != null)
        elm.appendChild(GetDiv('<a href="' + this.MapObjectJson.Url + '">Läs mer</a>'));
    return elm;
}

function EPiGoogleCapitexObject(map, mapObjectJson, createInfoWindow) {
    this.Map = map;
    this.Id = mapObjectJson.Id;
    this.MapObjectJson = mapObjectJson;

    var theIcon = new GIcon(G_DEFAULT_ICON);

    theIcon.image = mapObjectJson.Icon.IconImage;
    theIcon.iconAnchor = new GPoint(mapObjectJson.Icon.IconOffsetX, mapObjectJson.Icon.IconOffsetY);
    theIcon.shadow = mapObjectJson.Icon.IconShadowImage;
    theIcon.iconSize = new GSize(mapObjectJson.Icon.Width, mapObjectJson.Icon.Height);

    this.MapOverlay = new GMarker(new GLatLng(mapObjectJson.Lat, mapObjectJson.Long), { icon: theIcon });

    var mapSize = this.Map.getSize();

    if(createInfoWindow != false)
        this.MapOverlay.bindInfoWindow(this.BuildInfoWindowHtml(), { maxWidth: EPIGOOGLE_INFO_WINDOW_MAX_WIDTH * (mapSize.width) });

    this.Map.addOverlay(this.MapOverlay);
}


//*****************************************************************************
//*****************************************************************************
// EPiGoogleObject
//*****************************************************************************
//*****************************************************************************
EPiGoogleObject.prototype.Map = null;
EPiGoogleObject.prototype.Id = null;
EPiGoogleObject.prototype.MapObjectJson = null;

EPiGoogleObject.prototype.MapOverlay = null;

EPiGoogleObject.prototype.CenterOnThis = function() {
    this.Map.setCenter(new GLatLng(this.MapObjectJson.Lat, this.MapObjectJson.Long), this.MapObjectJson.Zoom);
}

EPiGoogleObject.prototype.RemoveOverlay = function() {
    this.Map.removeOverlay(this.MapOverlay);
}

function EPiGoogleObject(map, mapObjectJson) {
    this.Map = map;
    this.Id = mapObjectJson.Id;
    this.MapObjectJson = mapObjectJson;

    var theIcon = new GIcon(G_DEFAULT_ICON);
    theIcon.image = mapObjectJson.Icon.IconImage;
    theIcon.iconAnchor = new GPoint(mapObjectJson.Icon.IconOffsetX, mapObjectJson.Icon.IconOffsetY);
    theIcon.shadow = mapObjectJson.Icon.IconShadowImage;
    theIcon.iconSize = new GSize(mapObjectJson.Icon.Width, mapObjectJson.Icon.Height);

    this.MapOverlay = new GMarker(new GLatLng(mapObjectJson.Lat, mapObjectJson.Long), { icon: theIcon });

    var mapSize = this.Map.getSize();

    this.MapOverlay.bindInfoWindow(mapObjectJson.Description, { maxWidth: EPIGOOGLE_INFO_WINDOW_MAX_WIDTH * (mapSize.width) });

    this.Map.addOverlay(this.MapOverlay);

}

//*****************************************************************************
//*****************************************************************************
// EPiGoogleMap
//*****************************************************************************
//*****************************************************************************

EPiGoogleMap.prototype.TargetDiv = null;
EPiGoogleMap.prototype.Map = null;
EPiGoogleMap.prototype.Geocoder = null;
EPiGoogleMap.prototype.PositionSelectEventHandler = null;
EPiGoogleMap.prototype.ZoomLevelChangeEventHandler = null;
EPiGoogleMap.prototype.PositionMarker = null;

EPiGoogleMap.prototype.SearchControl = null;
EPiGoogleMap.prototype.Searcher = null;

EPiGoogleMap.prototype.Objects = null;
EPiGoogleMap.prototype.CapitexObjects = null;
EPiGoogleMap.prototype.Clusters = null;
EPiGoogleMap.prototype.Categories = null;

// Hack for moving the "Powered by Google" logo
// Contructor param logoOffset example {"left": "40px", "top": null, "copyTextSize", "70%"}
EPiGoogleMap.prototype.LogoTopLeft = null;
EPiGoogleMap.prototype.LogoTopLeftTimer = null;

EPiGoogleMap.prototype.DefaultLocalSearchMapIconJson = null;


//*****************************************************************************
// OBJECTS
//*****************************************************************************
EPiGoogleMap.prototype.AddObject = function(mapObjectJson) {
    this.Objects.push(new EPiGoogleObject(this.Map, mapObjectJson));
}
EPiGoogleMap.prototype.AddObjectAndCenter = function(mapObjectJson) {
    this.Objects.push(new EPiGoogleObject(this.Map, mapObjectJson));
    this.Map.setCenter(new GLatLng(mapObjectJson.Lat, mapObjectJson.Long));
    this.Map.savePosition();
}
EPiGoogleMap.prototype.RemoveObject = function(objectId) {
    var idx = this.GetObjectIndex(objectId);
    if (idx != null) {
        this.Objects[idx].RemoveOverlay();
        this.Objects.splice(idx, 1);
    }
}
EPiGoogleMap.prototype.ClearObjects = function() {
    for (var i = 0; i < this.Objects.length; i++)
        this.Objects[i].RemoveOverlay();
    this.Objects = [];
}
EPiGoogleMap.prototype.GetObject = function(id) {
    for(var i = 0; i < this.Objects.length; i++)
        if(this.Objects[i].Id == id)
            return this.Objects[i];
    return null;
}
EPiGoogleMap.prototype.GetObjectIndex = function(id) {
    for (var i = 0; i < this.Objects.length; i++)
        if (this.Objects[i].Id == id)
        return i;
    return null;
}



//*****************************************************************************
// CAPITEX OBJECTS
//*****************************************************************************
EPiGoogleMap.prototype.AddCapitexObject = function(mapObjectJson, createInfoWindow) {
    if (Math.floor(mapObjectJson.Lat) == 0 || Math.floor(mapObjectJson.Long) == 0) return;
    this.CapitexObjects.push(new EPiGoogleCapitexObject(this.Map, mapObjectJson, createInfoWindow));
}
EPiGoogleMap.prototype.AddCapitexObjectAndCenter = function(mapObjectJson, createInfoWindow) {
    if (Math.floor(mapObjectJson.Lat) == 0 || Math.floor(mapObjectJson.Long) == 0) return;
    this.CapitexObjects.push(new EPiGoogleCapitexObject(this.Map, mapObjectJson, createInfoWindow));
    this.Map.setCenter(new GLatLng(mapObjectJson.Lat, mapObjectJson.Long));
    this.Map.savePosition();
}
EPiGoogleMap.prototype.RemoveCapitexObject = function(objectId) {
    var idx = this.GetCapitexObjectIndex(objectId);
    if (idx != null) {
        this.CapitexObjects[idx].RemoveOverlay();
        this.CapitexObjects.splice(idx, 1);
    }
}
EPiGoogleMap.prototype.ClearCapitexObjects = function() {
    for (var i = 0; i < this.CapitexObjects.length; i++)
    this.CapitexObjects[i].RemoveOverlay();
    this.CapitexObjects = [];
}
EPiGoogleMap.prototype.GetCapitexObject = function(id) {
    for (var i = 0; i < this.CapitexObjects.length; i++)
        if (this.CapitexObjects[i].Id == id)
            return this.CapitexObjects[i];
    return null;
}
EPiGoogleMap.prototype.GetCapitexObjectIndex = function(id) {
    for (var i = 0; i < this.CapitexObjects.length; i++)
        if (this.CapitexObjects[i].Id == id)
        return i;
    return null;
}


//*****************************************************************************
// CLUSTERS
//*****************************************************************************
EPiGoogleMap.prototype.AddCluster = function(mapClusterJson) {
    this.Clusters.push(new EPiGoogleCluster(this.Map, mapClusterJson));
}
EPiGoogleMap.prototype.RemoveCluster = function(clusterId) {
    var idx = this.GetClusterIndex(clusterId);
    if (idx != null) {
        this.Clusters[idx].ClearObjects();
        this.Clusters.splice(idx, 1);
    }
}
EPiGoogleMap.prototype.ClearClusters = function() {
    for (var i = 0; i < this.Clusters.length; i++)
        this.Clusters[i].ClearObjects();
    this.Clusters = [];
}
EPiGoogleMap.prototype.GetCluster = function(id) {
    for (var i = 0; i < this.Clusters.length; i++) {
        if (this.Clusters[i].Id == id)
            return Clusters[i];
    }
    return null;
}
EPiGoogleMap.prototype.GetClusterIndex = function(id) {
    for (var i = 0; i < this.Clusters.length; i++) {
        if (this.Clusters[i].Id == id)
            return i;
    }
    return null;
}



//*****************************************************************************
// CATEGORIES
//*****************************************************************************
EPiGoogleMap.prototype.AddCategory = function(mapCategoryJson, doGoogleSearch, categoryObjects, loaderElement, checkBoxElement) {
    this.Categories.push(new EPiGoogleCategory(this.Map, this.Searcher, mapCategoryJson, doGoogleSearch, categoryObjects, this.DefaultLocalSearchMapIconJson, loaderElement, checkBoxElement));
}
EPiGoogleMap.prototype.RemoveCategory = function(categoryId) {
    var idx = this.GetCategoryIndex(categoryId);
    if (idx != null) {
        this.Categories[idx].ClearObjects();
        this.Categories[idx].ClearOverlays();
        this.Categories.splice(idx, 1);
    }
}
EPiGoogleMap.prototype.ClearCategories = function() {
    for (var i = 0; i < this.Categories.length; i++) {
        this.Categories[i].ClearObjects();
        this.Categories[i].ClearOverlays();
    }
    this.Categories = [];
}
EPiGoogleMap.prototype.GetCategory = function(id) {
    for (var i = 0; i < this.Categories.length; i++) {
        if (this.Categories[i].Id == id)
            return this.Categories[i];
    }
    return null;
}
EPiGoogleMap.prototype.GetCategoryIndex = function(id) {
    for (var i = 0; i < this.Categories.length; i++) {
        if (this.Categories[i].Id == id)
            return i;
    }
    return null;
}

//*****************************************************************************
// CONTROL
//*****************************************************************************

EPiGoogleMap.prototype.GetZoomToFitBounds = function() {
    if (this.Objects.length == 0 && this.CapitexObjects.length == 0)
        return null;

    var bounds = new GLatLngBounds();
    for (var i = 0; i < this.Objects.length; i++)
        bounds.extend(this.Objects[i].MapOverlay.getLatLng());
    for (i = 0; i < this.CapitexObjects.length; i++)
        bounds.extend(this.CapitexObjects[i].MapOverlay.getLatLng());
    return bounds;
}

EPiGoogleMap.prototype.ZoomToFit = function(minZoom, maxZoom) {
    var bounds = this.GetZoomToFitBounds();
    if (bounds == null)
        return;
    var level = this.Map.getBoundsZoomLevel(bounds);

    if (minZoom != null && level < minZoom) level = minZoom;
    if (maxZoom != null && level > maxZoom) level = maxZoom;

    this.Map.setZoom(level);
    this.Map.setCenter(bounds.getCenter());
}


//*****************************************************************************
// ADMIN
//*****************************************************************************
EPiGoogleMap.prototype.SetSelectPointMode = function(coordInputElement) {
    this.Map.getDragObject().setDraggableCursor('crosshair');

    if (coordInputElement.value.length > 0) {
        var parts = coordInputElement.value.split('$');
        var lat = parseFloat(parts[0]);
        var lng = parseFloat(parts[1]);
        var zoomLevel = this.Map.getZoom();
        if (parts.length == 3)
            zoomLevel = parseInt(parts[2]);
        this.Map.setCenter(new GLatLng(lat, lng), zoomLevel);
        this.PositionMarker = new GMarker(new GLatLng(lat, lng), { draggable: true });
        this.Map.addOverlay(this.PositionMarker);
        var me = this;
        GEvent.addListener(this.PositionMarker, "dragend", function(latlng) {
            if (latlng)
                coordInputElement.value = latlng.lat().toString() + '$' + latlng.lng().toString() + '$' + me.Map.getZoom().toString();
        });
    }
    this.PositionSelectEventHandler = GEvent.bind(this.Map, "click", this, function(overlay, latlng) {
        if (latlng) {
            if (this.PositionMarker == null) {
                this.PositionMarker = new GMarker(latlng, { draggable: true });
                this.Map.addOverlay(this.PositionMarker);
                var me = this;
                GEvent.addListener(this.PositionMarker, "dragend", function(latlng) {
                    if (latlng)
                        coordInputElement.value = latlng.lat().toString() + '$' + latlng.lng().toString() + '$' + me.Map.getZoom().toString();
                });
            }
            else {
                this.PositionMarker.setLatLng(latlng);
            }
            coordInputElement.value = latlng.lat().toString() + '$' + latlng.lng().toString() + '$' + this.Map.getZoom().toString();
        }
    });
    this.ZoomLevelChangeEventHandler = GEvent.bind(this.Map, "zoomend", this, function(prevLevel, newLevel) {
        coordInputElement.value = this.PositionMarker.getLatLng().lat().toString() + '$' + this.PositionMarker.getLatLng().lng().toString() + '$' + newLevel.toString();
    });
}
EPiGoogleMap.prototype.CancelSelectPointMode = function() {
    this.Map.getDragObject().setDraggableCursor('hand');
    GEvent.removeListener(this.PositionSelectEventHandler);
    GEvent.removeListener(this.ZoomLevelChangeEventHandler);
    this.Map.removeOverlay(this.PositionMarker);
}
EPiGoogleMap.prototype.SearchAndCenter = function(searchText) {
    if (this.Geocoder) {
        var me = this;
        this.Geocoder.getLatLng(searchText, function(latlng) {
            if (latlng) {
                me.Map.setCenter(latlng, 15);
            }
        });
    }
}

EPiGoogleMap.prototype.Destroy = function() {
    this.Map.clearOverlays();
}

//*****************************************************************************
// CONSTRUCTOR
//*****************************************************************************
function EPiGoogleMap(targetDiv, mapInfo, enableGoogleLocalSearch, logoTopLeft) {
    this.TargetDiv = targetDiv;

    var mapOpts = { size: new GSize(mapInfo.MapWidth, mapInfo.MapHeight) };
    this.TargetDiv.style.width = mapInfo.MapWidth.toString() + 'px';
    this.TargetDiv.style.height = mapInfo.MapHeight.toString() + 'px';

    this.Map = new GMap2(this.TargetDiv, mapOpts);
    this.Map.setCenter(new GLatLng(mapInfo.CenterOnLat, mapInfo.CenterOnLong), mapInfo.InitialZoomLevel);
    var Ui = this.Map.getDefaultUI();
    Ui.maptypes.normal = mapInfo.MapTypes_Normal;
    Ui.maptypes.satellite = mapInfo.MapTypes_Satellite;
    Ui.maptypes.hybrid = mapInfo.MapTypes_Hybrid;
    Ui.maptypes.physical = mapInfo.MapTypes_Physical;
    Ui.zoom.scrollwheel = mapInfo.Zoom_ScrollWheel;
    Ui.zoom.doubleclick = mapInfo.Zoom_DoubleClick;
    Ui.controls.largemapcontrol3d = mapInfo.Controls_LargeMapControl3d;
    Ui.controls.smallzoomcontrol3d = mapInfo.Controls_SmallZoomControl3d;
    Ui.controls.maptypecontrol = mapInfo.Controls_MapTypeControl;
    Ui.controls.menumaptypecontrol = mapInfo.Controls_MenuMapTypeControl;
    Ui.controls.scalecontrol = mapInfo.Controls_ScaleControl;
    this.Map.setUI(Ui);

    this.Objects = [];
    this.CapitexObjects = [];
    this.Clusters = [];
    this.Categories = [];
    
    this.Geocoder = new GClientGeocoder();

    if (enableGoogleLocalSearch == true) {
        this.Searcher = new google.search.LocalSearch();
    }

    if (logoTopLeft != null) {
        this.LogoTopLeft = logoTopLeft;
        var me = this;
        this.LogoTopLeftTimer = window.setInterval(function() {

            if ($("#logocontrol") != null) {
                window.clearInterval(me.LogoTopLeftTimer);
                if (me.LogoTopLeft.left) $("#logocontrol").css("left", me.LogoTopLeft.left);
                if (me.LogoTopLeft.top) $("#logocontrol").css("top", me.LogoTopLeft.top);
                if (me.LogoTopLeft.copyTextSize)$("#smallMapOverflowStop span").css("font-size", me.LogoTopLeft.copyTextSize);
            }
        }, 500);
    }
}