
bhajs.defineClass("BHA.Web.UI.Ags", "MapView", 
    function (id, asyncRequest, loadingImage, loadingImagePosition) {
        this.$id = id;
        this.$classInfo = bhajs.getClassInfo("BHA.Web.UI.Ags.MapView");
        this.$classInfo.registerObject(this.$id, this);
        this.$asyncRequest = new Function("requestData", asyncRequest);
        this.$window = bhajs.getObject("BHA.Web.UI.ClientControls.Window", this.$id);
        this.$clientViewCenterAnchor = null;
        this.$windowResizeHandler = null;
        this.$loadingImage = loadingImage;
        this.$currentMapViewTool = null;
        this.$indicators = {};
        this.$indicators.$count = 0;
        this.$onClientSizeChangedDirtyId = 0;
        
        this.$getElement = function () {
            return document.getElementById(this.$id);
        };
        
        this.setCursor = function(cursor) {
            this.$getElement().style.cursor = cursor;
        }
        
        this.$getMapLayersElement = function() {
            return document.getElementById(this.$id + "_maplayers");
        };
        this.$getForegroundElement = function() {
            return document.getElementById(this.$id + "_foreground");
        }
        
        this.$addLoadIndicator = function(id) {
            
            if (!this.$loadingImage) return;
            
            if (this.$indicators[id]) return;
            this.$indicators[id] = true;
            this.$indicators.$count = this.$indicators.$count + 1;
            
            var indicator = document.getElementById(this.$id + "__loadIndicator");
            if (indicator) return;
            
            indicator = document.createElement("div");
            indicator.id = this.$id + "__loadIndicator";
            indicator.style.position = 'absolute';
            indicator.style.left = '0px';
            indicator.style.top = '0px';
            indicator.style.width = '100%';
            indicator.style.height = '100%';
            if (loadingImagePosition) {
                indicator.style.backgroundPosition = loadingImagePosition;
            }
            indicator.style.backgroundRepeat = "no-repeat";
            indicator.style.backgroundImage = "url('" + this.$loadingImage +"')";
            
            var foreground = this.$getForegroundElement();
            foreground.appendChild(indicator);
            
            
            
        }
        this.$removeLoadIndicator = function(id) {
//            var indicator = document.getElementById(id + "_loadIndicator");
//            if (indicator) {
//                var foreground = this.$getForegroundElement();
//                foreground.removeChild(indicator);
//            }
    
            //alert(id + " $removeLoadIndicator");
            if (this.$indicators[id]) {
                delete this.$indicators[id];
                this.$indicators.$count = this.$indicators.$count - 1;
                //alert(id + " $removeLoadIndicator");
            }
            
            if (this.$indicators.$count < 0) {
                this.$indicators.$count = 0;
            }
    
            var indicator = document.getElementById(this.$id + "__loadIndicator");
            if (!indicator) return;
            
            if (this.$indicators.$count == 0) {
                var parent = indicator.parentNode;
                parent.removeChild(indicator);
                //alert(id + " $removeLoadIndicator");
            }
        }
        
        this.$clearForeground = function() {
            var foreground = this.$getForegroundElement();
            foreground.innerHTML = "";
            this.$indicators = {};
            this.$indicators.$count = 0;
        }
        
        this.$getClientSize = function() {
            var clientElement = document.getElementById(this.$id);
            var clientSize = {};
            clientSize.width = clientElement.offsetWidth;
            clientSize.height = clientElement.offsetHeight;
            return clientSize;
        };
        this.$getClientViewOffset = function() {
            var mapElement = this.$getMapLayersElement();
            var offset = {};
            offset.x = mapElement.offsetLeft * -1;
            offset.y = mapElement.offsetTop * -1;
            return offset;
        };
        this.$calcClientViewArea = function() {
            var offset = this.$getClientViewOffset();
            var size = this.$getClientSize();
            var area = {};
            area.left = offset.x;
            area.top = offset.y;
            area.right = area.left + size.width;
            area.bottom = area.top + size.height;
            area.width = size.width;
            area.height = size.height;
            return area;
        };
        this.$calcClientViewCenter = function () {
//            var area = this.$calcClientViewArea();
//            var center = {};
//            center.x = parseInt((area.left + area.right) / 2);
//            center.y = parseInt((area.top + area.bottom) / 2);
//            return center;
            var offset = this.$getClientViewOffset();
            var size = this.$getClientSize();
            var center = {};
            center.x = offset.x + parseInt(size.width / 2);
            center.y = offset.y + parseInt(size.height / 2);
            return center;
        };
        this.$setClientViewOffset = function(x, y) {
            var mapElement = this.$getMapLayersElement();
            mapElement.style.left = String(x * -1) + "px";
            mapElement.style.top = String(y * -1) + "px";
        };
        this.$setClientViewCenter = function(x, y) {
            var size = this.$getClientSize();
            var offsetX = x - parseInt(size.width / 2);
            var offsetY = y - parseInt(size.height / 2);
            this.$setClientViewOffset(offsetX, offsetY);
        };
        this.$setClientViewCenterAnchor = function(x, y) {
            if ((x == null) || (y == null)) {
                this.$clientViewCenterAnchor = null;
                return;
            }
            
            this.$setClientViewCenter(x,y);
            this.$clientViewCenterAnchor = {};
            this.$clientViewCenterAnchor.x = x;
            this.$clientViewCenterAnchor.y = y;
        };
        this.$centerClientViewToAnchor = function() {
            if (!this.$clientViewCenterAnchor) return;
            this.$setClientViewCenter(this.$clientViewCenterAnchor.x, this.$clientViewCenterAnchor.y);
        };
        
        this.$setWindowResizeHandler = function() {
            if (this.$windowResizeHandler) {
                this.$clearWindowResizeHandler();
            }
            var call = "bhajs.getObject('BHA.Web.UI.Ags.MapView','" + this.$id + "').$onClientSizeChangedSetTimeout();";
 
            this.$windowResizeHandler = new Function(call);
            var element = this.$getElement();
            if (window.addEventListener) {
                window.addEventListener("resize", this.$windowResizeHandler, false);
                //alert("attached");
            }else if (window.attachEvent) {
                window.attachEvent("onresize", this.$windowResizeHandler);
                //alert("attached");
            }
        };
        this.$clearWindowResizeHandler = function() {
            if (!this.$windowResizeHandler) return;
            var element = this.$getElement();
            if (window.removeEventListener) {
                window.removeEventListener("resize", this.$windowResizeHandler, false);
            }else if (window.detachEvent) {
                window.detachEvent("onresize", this.$windowResizeHandler);
            }
            this.$windowResizeHandler = null;
        };
        
        this.$onClientSizeChangedSetTimeout = function() {
            //alert(this.$onClientSizeChangedDirtyId);
            this.$onClientSizeChangedDirtyId++;
            var call = "var mapView = bhajs.getObject('BHA.Web.UI.Ags.MapView','" + this.$id + "');" 
                + "mapView.$onClientSizeChanged(" + String(this.$onClientSizeChangedDirtyId) + ");"             
            window.setTimeout(call, 100);
        }
        this.$onClientSizeChanged = function(dirtyId) {
            if (dirtyId) {
                if (dirtyId != this.$onClientSizeChangedDirtyId) {
                    return;
                }
            }
            //alert(dirtyId);
            this.$centerClientViewToAnchor();
            this.update();
        };
        this.getClientViewCenter = function() {
            return this.$calcClientViewCenter();
        };
        this.setClientViewCenter = function(x, y) {
            this.$setClientViewCenterAnchor(x,y);
        };
        
        this.clear = function () {
//            var requestData = "CLEAR";
//            this.$asyncRequest(requestData);
        };
        
        this.update = function () {
            var clientSize = this.$getClientSize();
            var viewOffset = this.$getClientViewOffset();
            var requestData = "UPDATE";
            requestData = requestData + "|" + this.$encodeSize(clientSize);
            requestData = requestData + "|" + this.$encodePoint(viewOffset);
            this.$asyncRequest(requestData);
        };
        
        this.updateClientSize = function() {
            var clientSize = this.$getClientSize();
            var viewOffset = this.$getClientViewOffset();
            var requestData = "UPDATE_CLIENT_SIZE";
            requestData = requestData + "|" + this.$encodeSize(clientSize);
            requestData = requestData + "|" + this.$encodePoint(viewOffset);
            this.$asyncRequest(requestData);
        };
        
        this.rebuild = function () {
            var clientSize = this.$getClientSize();
            var viewOffset = this.$getClientViewOffset();
            var requestData = "REBUILD";
            requestData = requestData + "|" + this.$encodeSize(clientSize);
            requestData = requestData + "|" + this.$encodePoint(viewOffset);
            this.$asyncRequest(requestData);
        };
        
        this.setMapViewTool = function(tool) {
            if (tool == this.$currentMapViewTool) return;
            
            if (this.$currentMapViewTool) {
                this.$currentMapViewTool.setChecked(false);
            }
            this.$currentMapViewTool = tool;
            if (!tool) return;
            this.$currentMapViewTool.setChecked(true);
            this.$window.setWindowBehavior(tool.$windowBehavior);
        
        }
        
        
//        this.clearLayer = function () {
//            var requestData = "CLEAR_LAYER";
//            this.$asyncRequest(requestData);
//        };
//        
//        this.updateLayer = function () {
//            var requestData = "UPDATE_LAYER";
//            this.$asyncRequest(requestData);
//        };
//        
//        this.rebuildLayer = function () {
//            var requestData = "REBUILD_LAYER";
//            this.$asyncRequest(requestData);
//        };





        this.$encodeSize = function (objSize) {
            var strSize = 
                objSize.width + ":" + 
                objSize.height;
            return strSize;
        };
        this.$encodePoint = function (objPoint) {
            var strPoint = 
                objPoint.x + ":" + 
                objPoint.y;
            return strPoint;
        };
        this.$encodeRectangle = function (objRect) {
            var strRect = 
                objRect.xmin + ":" + 
                objRect.ymin + ":" + 
                objRect.xmax + ":" +
                objRect.ymax;
            return strRect;
        };
        this.$decodeRectangle = function (strRect) {
            var objRect = {};
            var arrRect = strRect.split(":");
            objRect.xmin = arrRect[0];
            objRect.ymin = arrRect[1];
            objRect.xmax = arrRect[2];
            objRect.ymax = arrRect[3];
            return objRect;
        };




        
//        var viewCenter = this.$calcClientViewCenter();
//        //alert(bhajs.Utility.describeObject(viewCenter));
//        this.$setClientViewCenterAnchor(viewCenter.x,viewCenter.y);
        this.$setWindowResizeHandler();
        this.rebuild();
        
    }
);


