// JScript File
/* object: List */
function List() {
    this.gapCount = 0;
}

List.prototype.length = 0;
List.prototype.gapCount = 0;
List.prototype.remove = function(index) {
    var index = 0;
    this[index] = null;
    this.length = 0;
    return index;
}
List.prototype.add = function(image) {
    var i = 0;
    this[i] = image;
    this.length = 1;
    return (i + 1);
}

/* object: Image */
function Image(src, originalWidth, originalHeight, topLeft, bottomRight) {
    this.src = src;
    this.width = originalWidth;
    this.height = originalHeight;
    this.topLeft = topLeft;
    this.bottomRight = bottomRight;
    this.show = true;
    this.id = false;
}

/* object: ImageLayer */
function ImageLayer(map) {
    ImageLayer.images = new List();
    ImageLayer.map = map;
    map.AttachEvent('onendzoom', ImageLayer.reload);
    map.AttachEvent('onstartzoom', ImageLayer.hide);
    ImageLayer.width = "0px";
    ImageLayer.height = "0px";
    ImageLayer.topLeftX = "0";
    ImageLayer.topLeftY = "0";
    ImageLayer.bottomRightX = "0";
    ImageLayer.bottomRightY = "0";
    //map.AttachEvent('onendzoom', function() {alert('start');}); 
    return ImageLayer;
}

ImageLayer.addImage = function(image) {
    //ImageLayer.deleteImages();
    return ImageLayer.images.add(image);
}

ImageLayer.deleteImage = function(id) {
    var el = document.getElementById(id);
    if (el) {
        var VElyrs = document.getElementById('VELayerListDiv');
        VElyrs.removeChild(el);
    }
    return ImageLayer.images.remove(id - 1);
}

ImageLayer.deleteImages = function() {
    var VElyrs = document.getElementById('VELayerListDiv');
    for (var i = 0; i < ImageLayer.images.length; i++) {
        var temp = ImageLayer.images[i];
        if (temp) {
            var tempEl = document.getElementById(temp.id);
            if (tempEl)
                VElyrs.removeChild(tempEl);
        }
    }
}
ImageLayer.hide = function() {
    for (var i = 0; i < ImageLayer.images.length; i++) {
        var temp = ImageLayer.images[i];
        if (temp) {
            var tempEl = document.getElementById(temp.id);
            if (tempEl)
                tempEl.style.display = 'none';
        }
    }
}

ImageLayer.show = function() {
    for (var i = 0; i < ImageLayer.images.length; i++) {
        var temp = ImageLayer.images[i];
        if (temp) {
            var tempEl = document.getElementById(temp.id);
            if (tempEl)
                tempEl.style.display = 'block';
        }
    }
}

ImageLayer.reload = function() {
    var el = document.getElementById('VELayerListDiv').parentNode;
    var refLeft = -el.offsetLeft;
    var refTop = -el.offsetTop;
    for (var i = 0; i < ImageLayer.images.length; i++) {
        var temp = ImageLayer.images[i];
        if (temp && temp.show
        //&& Utilities.isRectangularInView(temp.topLeft, temp.tottomRight, this.map)
            ) {
            if (window.screenX) {
                var tempEl;
                if (!temp.id) {
                    temp.id = i + 1;
                    tempEl = document.createElement('img');
                    tempEl.setAttribute('id', temp.id);
                    tempEl.setAttribute('src', temp.src);
                    tempEl.setAttribute('style', 'z-index:500; opacity: 0.7; filter: alpha(opacity=70);position:relative;display:none;');
                    var VElyrs = document.getElementById('VELayerListDiv');
                    //var VElyrs = document.getElementById('myMap');
                    VElyrs.appendChild(tempEl);
                } else {
                    tempEl = document.getElementById(temp.id);
                }

                // display the img at the right position and scale
                var topLeft = ImageLayer.map.LatLongToPixel(temp.topLeft);
                var bottomRight = ImageLayer.map.LatLongToPixel(temp.bottomRight);
                if (topLeft != null && bottomRight != null) {
                    ImageLayer.topLeftX = topLeft.x;
                    ImageLayer.topLeftY = topLeft.y;
                    ImageLayer.bottomRightX = bottomRight.x;
                    ImageLayer.bottomRightY = bottomRight.y;
                    ImageLayer.width = ImageLayer.bottomRightX - ImageLayer.topLeftX;
                    ImageLayer.height = ImageLayer.bottomRightY - ImageLayer.topLeftY;
                }
                //var width = bottomRight.x - topLeft.x;
                //var height = bottomRight.y - topLeft.y;
                tempEl.style.top = refTop + ImageLayer.topLeftY + 'px';
                tempEl.style.left = refLeft + ImageLayer.topLeftX + 'px';
                tempEl.setAttribute('width', ImageLayer.width);
                tempEl.setAttribute('height', ImageLayer.height);
                tempEl.style.display = 'block';
            } else {
                var x = [];
                x.push('<img ');
                x.push('id="' + (i + 1) + '" ');
                x.push('src="' + temp.src + '" ');
                x.push('style="z-index:500; opacity: 0.7; filter: alpha(opacity=70);position:relative;display:none;" />');
                if (temp.id == false) {
                    temp.id = i + 1;
                    var VElyrs = document.getElementById('VELayerListDiv');
                    VElyrs.innerHTML += x.join('');
                }
                // display the img at the right position and scale
                var topLeft = ImageLayer.map.LatLongToPixel(temp.topLeft);
                var bottomRight = ImageLayer.map.LatLongToPixel(temp.bottomRight);
                if (topLeft != null && bottomRight != null) {
                    ImageLayer.topLeftX = topLeft.x;
                    ImageLayer.topLeftY = topLeft.y;
                    ImageLayer.bottomRightX = bottomRight.x;
                    ImageLayer.bottomRightY = bottomRight.y;
                    ImageLayer.width = ImageLayer.bottomRightX - ImageLayer.topLeftX;
                    ImageLayer.height = ImageLayer.bottomRightY - ImageLayer.topLeftY;
                }
                //var width = bottomRight.x - topLeft.x;
                //var height = bottomRight.y - topLeft.y;
                var tempEle = document.getElementById(temp.id);
                tempEle.style.top = refTop + ImageLayer.topLeftY + 'px';
                tempEle.style.left = refLeft + ImageLayer.topLeftX + 'px';
                tempEle.width = ImageLayer.width;
                tempEle.height = ImageLayer.height;
                tempEle.style.display = 'block';
            }
        }
    }
}

var Utilities = new Object();
Utilities.isRectangularInView = function(topLeft, bottomRight, map) {
    var view = map.GetMapView();
    if (topLeft.Latitude <= view.TopLeftLatLong.Latitude
    && topLeft.Latitude >= view.BottomRightLatLong.Latitude
    && topLeft.Longitude >= view.TopLeftLatLong.Longitude
    && topLeft.Longitude <= view.BottomRightLatLong.Longitude)
        return true;
    if (bottomRight.Latitude <= view.TopLeftLatLong.Latitude
    && bottomRight.Latitude >= view.BottomRightLatLong.Latitude
    && bottomRight.Longitude >= view.TopLeftLatLong.Longitude
    && bottomRight.Longitude <= view.BottomRightLatLong.Longitude)
        return true;
    return false;
}