bhajs.defineClass("BHA.Web.UI.Ags", "DataframeLayer2", 
    function (id,loadingImage) {
        this.$id = id;
        this.$classInfo = bhajs.getClassInfo("BHA.Web.UI.Ags.DataframeLayer2");
        this.$classInfo.registerObject(this.$id, this);
        this.$loadingImage = loadingImage;
        
        this.$tileWidth = null;
        this.$tileHeight = null;
        
        this.$getElement = function() {
            return document.getElementById(this.$id);
        };
        
        this.$setTileSize = function(width, height) {
            this.$tileWidth = width;
            this.$tileHeight = height;
        };
        
        this.$setCurrentTiles = function(tileIndexes) {
            var element = this.$getElement();
            var tileIndex;
            var newTiles = {};
            var tileElements;
            var tileElement;
            var i;
            //alert(tileIndexes.length);
            for (i = 0; i < tileIndexes.length; i++) {
                tileIndex = tileIndexes[i];
                
                var x = tileIndex[0];
                var y = tileIndex[1];
                var tileId = this.$id + "_" + String(x) + "_" + String(y);
                tileElement = document.getElementById(tileId);
                if (!tileElement){
                    tileElement = this.$createTileElement(x,y);
                }
                newTiles[tileId] = tileElement;
            }
           
//            for (tileIndex in tileIndexes) {
//                alert(tileIndex);
//                var x = tileIndex[0];
//                var y = tileIndex[1];
//                var tileId = this.$id + "_" + String(x) + "_" + String(y);
//                tileElement = document.getElementById(tileId);
//                if (!tileElement){
//                    tileElement = this.$createTileElement(x,y);
//                }
//                newTiles[tileId] = tileElement;
//            }
//            alert(element);
//            alert(element.childNodes);
//            alert(element.removeChild);
//            tileElements = element.childNodes;
//            if (tileElements) {
//                for (tileElement in tileElements) {
//                    alert("removing " + tileElement);
//                    element.removeChild(tileElement);
//                }
//            }
            element.innerHTML = '';

             //alert("gotHere");
            for (tileId in newTiles) {
                tileElement = newTiles[tileId];
                element.appendChild(tileElement);
            }
             //alert("gotHere");
        };
        
        this.$createTileElement = function(x, y) {
            var newElement = document.createElement('div');
            newElement.id = this.$id + "_" + String(x) + "_" + String(y);
            newElement.style.position = 'absolute';
            newElement.style.left = String(x * this.$tileWidth) + 'px';
            newElement.style.top = String(y * this.$tileHeight) +'px';
            newElement.style.width = String(this.$tileWidth) + 'px';
            newElement.style.height = String(this.$tileHeight) + 'px';
//            newElement.style.borderStyle = "solid";
//            newElement.style.borderWidth = "1px";
//            newElement.style.borderColor = "black";

            if (this.$loadingImage) {
                newElement.style.backgroundImage = "url('" + loadingImage +"')";
                newElement.style.backgroundPosition = "center";
                newElement.style.backgroundRepeat = "no-repeat";
            }
            return newElement;
   
        };
        
        this.$getTileElement = function(x,y) {
            var tileId = this.$id + "_" + String(x) + "_" + String(y);
            var tileElement = document.getElementById(tileId);
            return tileElement;
        }
        
        this.$setTileUrl = function (x, y, url) {
            var tileElement = this.$getTileElement(x,y);
            if (!tileElement) return;
            tileElement.style.backgroundImage = "url('" + url + "')";
        }
        
    }
);