if(typeof(Folia) == "undefined") {
    Folia = new Object();
}

if(typeof(Folia.UI) == "undefined") {
    Folia.UI = new Object();
}

Folia.UI.FoliaBox = function(options) {
    
    options = options ? options : new Object();
    this.collapse = options.collapse;
    
    this.initialize = function(map) {
        this.map = map;
        for(var i = 0; i < this.Controls.length; i++) {
            try{
                this.Content.appendChild(this.Controls[i].initialize(this.map));
            }
            catch(ex) {
                this.Content.appendChild(this.Controls[i]);
            }
        }
        this.map.getContainer().appendChild(this.Container);
        return this.Container;   
    }
    
    
    
    this.PNGisSupported = !(/MSIE ((5\.5)|6)/.test(navigator.userAgent) && navigator.platform == "Win32");
    
    this.Controls = new Array();
    
    this.Container = document.createElement("table");
    this.Container.className = "FoliaBox";
    this.Container.cellSpacing = 0;
    this.Container.cellPadding = 0;
    
    TopRow = this.Container.insertRow(0);
    TopRow.insertCell(0);
    TopRow.insertCell(1); 
    TopRow.insertCell(2); 

    TopRow.cells[1].className = this.PNGisSupported ? "Top" : "Top_IE6";
    
    CenterRow = this.Container.insertRow(1);
    CenterRow.insertCell(0);
    CenterRow.insertCell(1);
    CenterRow.insertCell(2);
    
    CenterRow.cells[0].className = this.PNGisSupported ? "Left" : "Left_IE6";
    CenterRow.cells[1].className = this.PNGisSupported ? "Center" : "Center_IE6";
    CenterRow.cells[2].className = this.PNGisSupported ? "Right" : "Right_IE6";
    
    BottomRow = this.Container.insertRow(2);
    BottomRow.insertCell(0);
    BottomRow.insertCell(1);
    BottomRow.insertCell(2);
    
    if(this.PNGisSupported) {
    
        TopRow.cells[0].className = "Corner TopLeft";
        TopRow.cells[2].className = "Corner TopRight";
        BottomRow.cells[0].className = "Corner BottomLeft";
        BottomRow.cells[2].className = "Corner BottomRight";
        
    } else {
    
        TopRow.cells[0].className = "TopLeft";
        TopRow.cells[2].className = "TopRight";
        BottomRow.cells[0].className = "BottomLeft";
        BottomRow.cells[2].className = "BottomRight";
        
        TopRow.cells[0].appendChild(document.createElement("div")).appendChild(document.createElement("img"));
        TopRow.cells[2].appendChild(document.createElement("div")).appendChild(document.createElement("img"));
        BottomRow.cells[0].appendChild(document.createElement("div")).appendChild(document.createElement("img"));
        BottomRow.cells[2].appendChild(document.createElement("div")).appendChild(document.createElement("img"));
        
        var top = new Object();
        var bottom = new Object();

        top.left = TopRow.cells[0].firstChild;
        top.left.img = top.left.firstChild;
        top.right = TopRow.cells[2].firstChild;
        top.right.img = top.right.firstChild;
        bottom.left = BottomRow.cells[0].firstChild;
        bottom.left.img = bottom.left.firstChild;
        bottom.right = BottomRow.cells[2].firstChild;
        bottom.right.img = bottom.right.firstChild;
        
        top.left.className = "TopLeft";
        top.right.className = "TopRight";
        bottom.left.className = "BottomLeft";
        bottom.right.className = "BottomRight";
        
        top.left.style.position = top.right.style.position = "relative";
        bottom.left.style.position = bottom.right.style.position = "relative";
        
        top.left.style.overflow = top.right.style.overflow = "hidden";
        bottom.left.style.overflow = bottom.right.style.overflow = "hidden";

        top.left.img.src = top.right.img.src = "http://api.folia.dk/images/folia/blank.gif";
        bottom.left.img.src = bottom.right.img.src = "http://api.folia.dk/images/folia/blank.gif";
        top.left.img.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://api.folia.dk/images/foliabox/shadow_01.png',sizingMethod='image')";
        top.right.img.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://api.folia.dk/images/foliabox/shadow_01.png',sizingMethod='image')";
        bottom.left.img.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://api.folia.dk/images/foliabox/shadow_01.png',sizingMethod='image')";
        bottom.right.img.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://api.folia.dk/images/foliabox/shadow_01.png',sizingMethod='image')";
        
        top.left.img.style.position = top.right.img.style.position = bottom.left.img.style.position = bottom.right.img.style.position = "absolute";
        top.left.img.style.top = top.right.img.style.top = top.left.img.style.left = bottom.left.img.left = "0px";
        top.right.img.style.left = bottom.left.img.style.top = bottom.right.img.style.top = bottom.right.img.style.left = "-8px";
    }
    
    BottomRow.cells[1].className = this.PNGisSupported ? "Bottom" : "Bottom_IE6";
    
    
    if(this.collapse == true) {
        CenterRow.cells[1].appendChild(document.createElement("div"))
        CenterRow.cells[1].firstChild.style.position = "relative";
        CenterRow.cells[1].firstChild.style.height = "10px";
        
        this.ToggleButton = CenterRow.cells[1].firstChild.appendChild(new Image());
        this.ToggleButton.container = CenterRow.cells[1].firstChild;
        this.ToggleButton.src = "http://libs.folia.dk/UI/FoliaBox/1.1/Images/collapse.png";
        this.ToggleButton.style.position = "absolute";
        this.ToggleButton.style.top = "-4px";
        this.ToggleButton.style.right = "-4px";
        this.ToggleButton.style.cursor = "pointer"; 
        this.ToggleButton.parent = this;   
        this.ToggleButton.collapsed = false;
        
        this.ToggleButton.onclick = function() {
            if(this.collapsed) {
                this.parent.expand();
                this.src = "http://libs.folia.dk/UI/FoliaBox/1.1/Images/collapse.png";
                this.container.style.height = "10px";
                this.collapsed = false;
            } else {
                this.parent.collapse();
                this.src = "http://libs.folia.dk/UI/FoliaBox/1.1/Images/expand.png"
                this.container.style.height = "9px";;
                this.collapsed = true;
            }
        }
    }
    
    this.Content = CenterRow.cells[1].appendChild(document.createElement("div"));
    this.Content.className = "Content";
    
    this.Content.clear = function(){
        while(this.hasChildNodes()) {
            this.removeChild(this.childNodes[0]);
        }
    }

//    for(Control in this.Controls) {
//        try{
//            alert(this.Controls.length);
//            this.Content.appendChild(this.Controls[Control].initialize(this.map));
//        }
//        catch(ex) {
//            alert(ex);
//            this.Content.appendChild(this.Controls[Control]);
//        }
//    }

    this.show = function() {
        this.Container.style.display = ""; 
    }
    
    this.hide = function() {
        this.Container.style.display = "none"; 
    }
    
    this.setWidth = function(width) {
        switch(typeof(width)) {
            case "string":
                this.Content.style.width = width;
                break;
            case "number":
                this.Content.style.width = width + "px";
                break;
        }
    }
    
    this.setHeight = function(height) {
        switch(typeof(height)) {
            case "string":
                this.Content.style.height = height;
                break;
            case "number":
                this.Content.style.height = height + "px";
                break;
        } 
    }
    
    this.collapse = function() {
        this.Content.style.height = "1px";
        this.Content.style.overflow = "hidden";
    }
    
    this.expand = function() {
        this.Content.style.height = "auto";
        this.Content.style.overflow = "";
    }
    
    this.addControl = function(Control) {
        this.Controls.push(Control)
        this.Content.clear();
        
        if (this.map) {
            for(var i = 0; i < this.Controls.length; i++) {
                try{
                    this.Content.appendChild(this.Controls[i].initialize(this.map));
                }
                catch(ex) {
                    this.Content.appendChild(this.Controls[i]);
                }
            }
        }
    }
    
    this.appendChild = function(element) {
       this.addControl(element);
    }
    
    this.removeChild = function(element) {
        this.Content.removeChild(element);
    }
    
    this.getDefaultPosition = function() {
        return new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(7, 35));
    }      
    
    return this;
}

Folia.UI.FoliaBox.prototype = new GControl(false, true);