//  COPYRIGHT © 2006 ESRI
//
//  TRADE SECRETS: ESRI PROPRIETARY AND CONFIDENTIAL
//  Unpublished material - all rights reserved under the
//  Copyright Laws of the United States and applicable international
//  laws, treaties, and conventions.
// 
//  For additional information, contact:
//  Environmental Systems Research Institute, Inc.
//  Attn: Contracts and Legal Services Department
//  380 New York Street
//  Redlands, California, 92373
//  USA
// 
//  email: contracts@esri.com

var FloatingPanels=new Array();
var FloatingPanelNames = new Array();
var floatingPanel=null;
var floatingPanelBodyCell=null;
var floatingPanelSideResizeCell=null;
var resizeMode = null;
var stillMoving = false;
    
var leftOffset=null;
var topOffset=null;
var x1=null;
var y1=null;

var esriPanel = null;

var dockContainersOnLoadChecked = false;

var esriMaxFloatingPanelDragRight = 0;
var esriMaxFloatingPanelDragBottom = 0;

///// Added for right button check on resize ****/ 
var resizeFloatingPanelStarted = false;
///// Added added for right button check on resize ****/


function FloatingPanelObject(fpID, transparency, callbackFunctionString, expandedImage, collapsedImage, dockedImage, undockedImage, dockedContextMenuID, dockParent, forcePNG, docked)
{
    this.id = fpID;
    this.callbackFunctionString=callbackFunctionString;
    this.expandedImage=expandedImage;
    this.collapsedImage=collapsedImage;
    this.dockedImage=dockedImage;
    this.undockedImage=undockedImage;
    if (transparency<0) transparency=0;
    if (transparency>100) transparency=100;
    this.transparency=transparency;
    this.minWidth = 0;
    this.minHeight = 0;  
    this.forcePNG = forcePNG;
    
    // functions to call for content action on drag events
    this.contentOnDragStartFunction = null;
    this.contentOnDragMoveFunction = null;
    this.contentOnDragEndFunction = null;
    
    // functions to call for content action on resize events
    this.contentOnResizeStartFunction = null;
    this.contentOnResizeMoveFunction = null;
    this.contentOnResizeEndFunction = null;
    
    // functions to call for content action on hide/show
    this.contentOnHideFunction = null;
    this.contentOnShowFunction = null;
   
    // function to call when docked
    this.onDockFunction = null;   
    
    FloatingPanelNames[FloatingPanelNames.length] = fpID; 
    this.tempMoveFunction = null;
    
    this.borderStyle=null;
    this.backgroundColor=null;
    this.bodyBorderStyle=null;
    getFloatingPanelBorderAndBackground(document.getElementById(fpID), this);
    
    this.htmlContent = null;
    this.dockedContextMenuID=dockedContextMenuID;
    this.dockParent=dockParent;

    // todo: if docked, need to find out if parent element is the dockParent. if not, we need to dock it in there after the page loads.
    this.docked=docked;

    if (window.addEventListener) window.addEventListener("load",esriCheckAllFloatingPanelsDockContainerOnLoad,false);
    else if (window.attachEvent) window.attachEvent("onload",esriCheckAllFloatingPanelsDockContainerOnLoad);
}

function esriBringFloatingPanelToFront(fpID)
{
    if (FloatingPanels[fpID] == null) return;
    if (FloatingPanels[fpID].docked) return;
    
    var fpDiv=document.getElementById(fpID);
    if (fpDiv.style.zIndex=='') fpDiv.style.zIndex=1;
    var zIndex = parseInt(fpDiv.style.zIndex);
    
    for (var i=0;i<FloatingPanelNames.length;i++)
    {
        var id=FloatingPanelNames[i];
        if (FloatingPanels[id].docked) continue;
        var tmp=document.getElementById(id);
        if (tmp!=null) if (parseInt(tmp.style.zIndex) >= zIndex) zIndex=parseInt(tmp.style.zIndex);
    }
    
    fpDiv.style.zIndex=zIndex+1;
    ie6Workarounds(fpID);
    return false; 
}

function esriCheckAllFloatingPanelsDockContainerOnLoad()
{
    if (dockContainersOnLoadChecked) return;
    for (var i=0;i<FloatingPanelNames.length;i++)
    {
        var fpId=FloatingPanelNames[i];
        var fp = FloatingPanels[fpId];
        if (fp!=null)
        {
            esriCheckFloatingPanelDockContainerOnLoad(fp.id);
        }
    }
    dockContainersOnLoadChecked = true;
}

function esriCheckFloatingPanelDockContainerOnLoad(fpID)
{
    var fpObj = FloatingPanels[fpID];
    if (fpObj==null) return;
    // if docked and dockparent isnt null or empty we need to dock it in there after the page loads
    if (fpObj.docked)
    {
        if (fpObj.docked && fpObj.dockParent!=null && fpObj.dockParent.length>0)
        {
            dockFloatingPanel(fpID);
        }
    }
    else if (!fpObj.docked)
    {
        // render outside parent if not docked
        var fp = document.getElementById(fpID);
        if (fp==null)return;

        var outsideContainerID=fpID + "_Container";
        var outsideContainer=document.getElementById(outsideContainerID);
        
        // if a container already exists, we need to delete it
        // this may mean that there is on old floatingpanel with the same
        // id in the DOM. So, we also need to re-get the fp.
        if (outsideContainer!=null)
        {
            outsideContainer.removeNode(true);
            outsideContainer=null;
            
            // re-get the new floating panel object  
            fp = document.getElementById(fpID);
            if (fp==null)return;
        }
        
        // create outside container
        outsideContainer=document.createElement('div');
        outsideContainer.id=outsideContainerID;
        outsideContainer.style.margin="0px";
        outsideContainer.style.padding="0px";
        document.body.appendChild(outsideContainer);
        
        fp.removeNode(true);
        outsideContainer.appendChild(fp);
    }
}

function getFloatingPanelBorderAndBackground(floatingPanelDiv, floatingPanel)
{
    if (floatingPanel != null && floatingPanelDiv != null)
    {
        floatingPanel.borderStyle=floatingPanelDiv.style.borderStyle;
        floatingPanel.backgroundColor=floatingPanelDiv.style.backgroundColor;
        floatingPanelBodyCell=document.getElementById(floatingPanelDiv.id+'_BodyCell');
        if (floatingPanelBodyCell != null)
            floatingPanel.bodyBorderStyle=floatingPanelBodyCell.style.borderStyle;
        floatingPanelBodyCell=null;
    }
}
    
function updateStatus()
{
    if (floatingPanel==null)return;
    var hfVisible = document.getElementById(floatingPanel.id + '_hfVisible');
    if (hfVisible!=null)hfVisible.value=document.getElementById(floatingPanel.id).style.display=='none' ? 'false' : 'true';
}

function makeTransparent(elementID)
{
    if (FloatingPanels[elementID].transparency<=0)return;
    
    var element=document.getElementById(elementID);
    if (element==null)return;
    var dragOpacity = 100-FloatingPanels[elementID].transparency;
    var opac = dragOpacity / 100;
    element.style.opacity = opac;
    element.style.mozOpacity = opac;
    element.style.filter = "alpha(opacity=" + dragOpacity + ")";
    
    // hide alpha blended png images
    // because alpha blended images don't get well with setting the alpha on the filter.
    var expandButton=document.getElementById(elementID+'_ExpandButton');
    var closeButton=document.getElementById(elementID+'_CloseButton');
    var dockButton=document.getElementById(elementID+'_DockButton');
    if (expandButton!=null)expandButton.style.visibility='hidden';
    if (closeButton!=null)closeButton.style.visibility='hidden';
    if (dockButton!=null)dockButton.style.visibility='hidden';
}

function makeOpaque(elementID)
{
    if (FloatingPanels[elementID]==null)return;
    if (FloatingPanels[elementID].transparency<=0)return;
       
	// do not do if moving
	if (document.onmousemove == moveWindowDrag) return;
	
    var element=document.getElementById(elementID);
    if (element==null)return;
    element.style.opacity = 1.0;
    element.style.mozOpacity = 1.0;
    element.style.filter = ""; // set this to nothing, which makes it opaque.
    
    // re-show alpha blended png images that were hidden in makeTransparent
    var expandButton=document.getElementById(elementID+'_ExpandButton');
    var closeButton=document.getElementById(elementID+'_CloseButton');
    var dockButton=document.getElementById(elementID+'_DockButton');
    if (expandButton!=null)expandButton.style.visibility='visible';
    if (closeButton!=null)closeButton.style.visibility='visible';
    if (dockButton!=null)dockButton.style.visibility='visible';
}

function startWindowDrag(elementID)
{
    esriPanel = FloatingPanels[elementID];
    if (esriPanel == null) return;
    if (stillMoving) return;
    stillMoving=true;
    leftOffset=null;
    topOffset=null;
    floatingPanel=document.getElementById(elementID);
    floatingPanel.style.position="absolute";
    esriPanel.tempMoveFunction = document.onmousemove; 
    document.onmousemove = moveWindowDrag;
    document.onmouseup = endWindowDrag;
    
    esriMaxFloatingPanelDragRight = getWinWidth() - 15;
    esriMaxFloatingPanelDragBottom = getWinHeight() - 15; 
 
	if (esriPanel.contentOnDragStartFunction!=null) eval(esriPanel.contentOnDragStartFunction);
    return false;
}

function moveWindowDrag(e)
{
    getXY(e);
    if (leftOffset==null || topOffset==null)
    {
        var box = calcElementPosition(floatingPanel.id);
        leftOffset = mouseX - box.left;
        topOffset = mouseY - box.top;
        box = null;
        makeTransparent(floatingPanel.id);
    }
    moveTo(Math.max(mouseX-leftOffset,0), Math.max(mouseY-topOffset,0));
    ie6Workarounds(floatingPanel.id);
    if (esriPanel.contentOnDragMoveFunction!=null) eval(esriPanel.contentOnDragMoveFunction);
    
    //Required to fix IE bug that hides the titlebar background image during and after move
    var fpTitle=document.getElementById(floatingPanel.id+'_Title');
    if (fpTitle!=null && fpTitle.style!=null)
    {
        fpTitle.style.backgroundImage=fpTitle.style.backgroundImage;
    }       
    return false;
}

function moveTo(left, top)
{
    if (left>esriMaxFloatingPanelDragRight) left = esriMaxFloatingPanelDragRight;
    if (top>esriMaxFloatingPanelDragBottom) top = esriMaxFloatingPanelDragBottom;
    
    floatingPanel.style.left = left + "px";
    floatingPanel.style.top = top + "px";
}

function endWindowDrag(e)
{
    if (stillMoving == false)
        return;
        
    document.onmousemove = esriPanel.tempMoveFunction;
    document.onmouseup = null;
    makeOpaque(floatingPanel.id);
    ie6Workarounds(floatingPanel.id);
    
    var hfTop = document.getElementById(floatingPanel.id + '_hfTop');
    var hfLeft = document.getElementById(floatingPanel.id + '_hfLeft');
    if (hfTop!=null)hfTop.value=floatingPanel.style.top;
    if (hfLeft!=null)hfLeft.value=floatingPanel.style.left;
    if (esriPanel.contentOnDragEndFunction!=null) eval(esriPanel.contentOnDragEndFunction);
	
    floatingPanel=null;
    
    // Required to fix IE bug that hides the titlebar background image after move
    // All floatingpanels are done here because possible subpanels may be affected.
    resetAllTitleBarBackgroundImages();
    
    stillMoving=false;
    return false;	
}

// Required to fix IE bug that hides the titlebar background image after move
// All floatingpanels are done here because possible subpanels may be affected.
function resetAllTitleBarBackgroundImages()
{
    if (isIE && ieVersion < 7)
    {
        for (var i=0;i<FloatingPanelNames.length;i++)
        {
            var fp=FloatingPanelNames[i];
            if (fp!=null && fp.length>0)
            {
                var fpTitle=document.getElementById(fp+'_Title');
                if (fpTitle!=null && fpTitle.style!=null)
                {
                    fpTitle.style.backgroundImage=fpTitle.style.backgroundImage;
                }
            }
        }
    }
}
function startWindowResize(elementID, mode)
{
    ///// Added for right button check on resize ****/
    if (resizeFloatingPanelStarted) return;
    resizeFloatingPanelStarted = true;    
    ///// Added for right button check on resize ****/  
    resizeMode = mode;
    x1=null;
    y1=null;
    startWidth=null;
    startHeight=null;
    floatingPanel=document.getElementById(elementID);
    esriPanel = FloatingPanels[elementID];
    floatingPanelBodyCell = document.getElementById(floatingPanel.id+'_BodyCell');
    floatingPanelSideResizeCell=document.getElementById(floatingPanel.id+'_SideResizeCell');
    showFloatingPanelFrame(elementID);
    esriPanel.tempMoveFunction = document.onmousemove;  
    document.onmousemove = dragWindowResize;
    document.onmouseup = endWindowResize;
    if (esriPanel.contentOnResizeStartFunction!=null) eval(esriPanel.contentOnResizeStartFunction);
    return false;
}

function dragWindowResize(e) {
    ///// Added for right button check on resize ****/
    if (!isLeftButton(e)) return;
    if (!resizeFloatingPanelStarted) return; 
    ///// Added for right button check on resize ****/ 
    getXY(e);
    if (x1==null || y1==null || startWidth==null || startHeight==null)
    {
        var box = calcElementPosition(floatingPanelBodyCell.id);
        startWidth = box.width;
        startHeight = box.height;
        x1 = mouseX;
        y1 = mouseY;
        box = null;
    }
    leftOffset = mouseX - x1;
    topOffset = mouseY - y1;
    tempWidth = startWidth + leftOffset;
    tempHeight = startHeight + topOffset;
    if (isNav)
    {
        tempWidth+=10;
    } 
    resize(tempWidth, tempHeight);
    ie6Workarounds(floatingPanel.id);
    if (esriPanel.contentOnResizeMoveFunction!=null) eval(esriPanel.contentOnResizeMoveFunction);
    return false;
}

function resize(width, height)
{
    if (resizeMode=='width' || resizeMode==null)
    {
        //if (width>0) floatingPanel.style.width = width + "px";
        if (width>esriPanel.minWidth) floatingPanel.style.width = width + "px";
    }
    if (resizeMode=='height' || resizeMode==null)
    {
        //if (height>0)
        if (height>esriPanel.minHeight)
        {
            floatingPanelBodyCell.style.height=height+"px";
            floatingPanelSideResizeCell.style.height=height+"px";
        }
    }
}

function endWindowResize(e) {
    document.onmousemove = esriPanel.tempMoveFunction;
    document.onmouseup = null;
	
    var hfHeight = document.getElementById(floatingPanel.id + '_hfHeight');
    var hfWidth = document.getElementById(floatingPanel.id + '_hfWidth');
    if (hfWidth!=null)hfWidth.value=floatingPanel.style.width;
    if (hfHeight!=null)hfHeight.value=floatingPanelBodyCell.style.height;
    if (esriPanel.contentOnResizeEndFunction!=null) eval(esriPanel.contentOnResizeEndFunction);
    
	
    floatingPanel=null;
    resizeFloatingPanelStarted = false; 
    return false;
}

function hideFloatingPanel(fpID, doCallback, argument)
{   
    floatingPanel=document.getElementById(fpID);
    if (floatingPanel==null)return;                
    esriPanel = FloatingPanels[fpID];
    floatingPanel.style.display='none';
    var hfVisible = document.getElementById(fpID + '_hfVisible');
    if (hfVisible!=null) hfVisible.value='false';
    if (esriPanel.contentOnHideFunction!=null) eval(esriPanel.contentOnHideFunction);
    //show container if directly on page
    var fpContainer = document.getElementById(fpID + "_Container");
    if (fpContainer != null)
        fpContainer.style.display='none';

	ie6Workarounds(fpID);

    if (doCallback == true || doCallback == null)
    {
        if (argument == null)
            argument='EventArg=hidden';
        else
            argument += '&EventArg=hidden';

        var context=null;
        eval(FloatingPanels[fpID].callbackFunctionString);
    }
}

function showFloatingPanel(fpID, doCallback, argument)
{
    floatingPanel=document.getElementById(fpID);
    if (floatingPanel==null)return;                
    esriPanel = FloatingPanels[fpID];
    if (esriPanel==null) return;
    floatingPanel.style.display='';
    var hfVisible = document.getElementById(floatingPanel.id + '_hfVisible');
    if (hfVisible!=null) hfVisible.value='true';
    if (esriPanel.contentOnShowFunction!=null) eval(esriPanel.contentOnShowFunction);
    //show container if directly on page
    var fpContainer = document.getElementById(fpID + "_Container");
    if (fpContainer != null)
        fpContainer.style.display='';
        
    esriBringFloatingPanelToFront(fpID);
	ie6Workarounds(fpID);
	
	if (esriPanel.docked && esriPanel.onDockFunction!=null) esriPanel.onDockFunction(floatingPanel);
	
    if (doCallback == true || doCallback == null)
    {
         if (argument == null)
            argument='EventArg=shown';
        else
            argument += '&EventArg=shown';
        var context=null;
        eval(FloatingPanels[fpID].callbackFunctionString);
    }
}

function toggleFloatingPanelVisibility(fpID, doCallback, argument)
{
    var hfVisible = document.getElementById(fpID + '_hfVisible');
    if (hfVisible.value=='true')
    {
        hideFloatingPanel(fpID, doCallback, argument);
    }
    else if (hfVisible.value=='false')
    {
        showFloatingPanel(fpID, doCallback, argument);
    }
    else
    {
        floatingPanel=document.getElementById(fpID);
        if (floatingPanel!=null)
        {
            hfVisible.value=floatingPanel.style.display=='none'?'false':'true';
            floatingPanel=null;
            if (hfVisible.value=='true')
            {
                hideFloatingPanel(fpID, doCallback, argument);
            }
            else if (hfVisible.value=='false')
            {
                showFloatingPanel(fpID, doCallback, argument);
            }
        }
    }
    return false;
}

function hideFloatingPanelFrame(fpID)
{
    // do not hide, if collapsed
    var hfExpanded = document.getElementById(fpID + '_hfExpanded');
	if (hfExpanded.value=='false') return;
	// do not hide if resizing
	if (document.onmousemove == dragWindowResize) return;
	// do not hide if moving
	if (document.onmousemove == moveWindowDrag) return;
	
    floatingPanel=document.getElementById(fpID);
    floatingPanelBodyCell=document.getElementById(fpID+'_BodyCell');
    floatingPanelSideResizeCell=document.getElementById(fpID+'_SideResizeCell');
    
    floatingPanel.style.borderStyle='none';
    floatingPanel.style.backgroundColor='';
    floatingPanelBodyCell.style.borderStyle='none';
    floatingPanelBodyCell.style.backgroundColor='';
    floatingPanelSideResizeCell.style.borderStyle='none';
    floatingPanelSideResizeCell.style.backgroundColor='';
	var fpTitle=document.getElementById(fpID+'_Title');
	fpTitle.style.visibility='hidden';
}

function showFloatingPanelFrame(fpID)
{
	// do not hide if resizing
	if (document.onmousemove == dragWindowResize) return;
	// do not hide if moving
	if (document.onmousemove == moveWindowDrag) return;
	
    floatingPanel=document.getElementById(fpID);
    floatingPanelBodyCell=document.getElementById(fpID+'_BodyCell');
    floatingPanelSideResizeCell=document.getElementById(fpID+'_SideResizeCell');
    
    floatingPanel.style.borderStyle=FloatingPanels[fpID].borderStyle;
    floatingPanel.style.backgroundColor=FloatingPanels[fpID].backgroundColor;
    floatingPanelBodyCell.style.borderStyle=FloatingPanels[fpID].bodyBorderStyle;
    floatingPanelBodyCell.style.backgroundColor=FloatingPanels[fpID].backgroundColor;
    floatingPanelSideResizeCell.style.borderStyle=FloatingPanels[fpID].bodyBorderStyle;
    floatingPanelSideResizeCell.style.backgroundColor=FloatingPanels[fpID].backgroundColor;
    
	var fpTitle=document.getElementById(fpID+'_Title');
	fpTitle.style.visibility='visible';
}

function toggleFloatingPanelState(fpID, fireServerSideExpandEvent, fireServerSideCollapseEvent)
{
    if (fireServerSideExpandEvent==null) fireServerSideExpandEvent=false;
    if (fireServerSideCollapseEvent==null) fireServerSideCollapseEvent=false;
    
	var fpBody=document.getElementById(fpID+'_BodyRow');

	if (fpBody.style.display=='none')
	{
	    expandFloatingPanel(fpID);
	    if (fireServerSideExpandEvent)
	    {
	        var argument='EventArg=expanded';
	        var context=null;
            eval(FloatingPanels[fpID].callbackFunctionString);
	    }
	}
	else
	{
	    collapseFloatingPanel(fpID);
	    if (fireServerSideCollapseEvent)
	    {
	        var argument='EventArg=collapsed';
	        var context=null;
            eval(FloatingPanels[fpID].callbackFunctionString);
	    }
	}
}

function expandFloatingPanel(fpID)
{
    var floatingPanel=document.getElementById(fpID);
	var fpBody=document.getElementById(fpID+'_BodyRow');
	var expandButton=document.getElementById(fpID + '_ExpandButton');
	var resizeRow=document.getElementById(fpID+'_ResizeRow');
    var hfExpanded = document.getElementById(floatingPanel.id + '_hfExpanded');
	if (fpBody==null || expandButton==null || floatingPanel==null) return;

	if (fpBody.style.display=='none')
	{
		fpBody.style.display='';
		if (resizeRow!=null)resizeRow.style.display='';
		switchImageSourceAndAlphaBlend(expandButton,FloatingPanels[fpID].expandedImage, FloatingPanels[fpID].forcePNG);
		hfExpanded.value='true';
		makeOpaque(fpID);
	}
	ie6Workarounds(fpID);
}

function collapseFloatingPanel(fpID)
{
    var floatingPanel=document.getElementById(fpID);
	var fpBody=document.getElementById(fpID+'_BodyRow');
	var expandButton=document.getElementById(fpID + '_ExpandButton');
	var resizeRow=document.getElementById(fpID+'_ResizeRow');
    var hfExpanded = document.getElementById(floatingPanel.id + '_hfExpanded');
	if (fpBody==null || expandButton==null || floatingPanel==null) return;
	
	if (fpBody.style.display!='none')
	{
		fpBody.style.display='none';
		if (resizeRow!=null)resizeRow.style.display='none';
		switchImageSourceAndAlphaBlend(expandButton,FloatingPanels[fpID].collapsedImage, FloatingPanels[fpID].forcePNG);
		hfExpanded.value='false';
		makeTransparent(fpID);
	}
	ie6Workarounds(fpID);
}

function hideAllFloatingPanels()
{
    for (var i=0;i<FloatingPanelNames.length;i++)
    {
        var fp=FloatingPanelNames[i];
        if (fp!=null && fp.length>0)
        {
            hideFloatingPanel(fp);
        }
    }
}

function dockFloatingPanel(fpID)
{
    var fp = document.getElementById(fpID);
    if (fp==null)return;
    if (FloatingPanels[fpID]==null)return;
   
   ie6SaveCheckboxState(fp); 
    
    // first set some dock settings
    fp.style.width="100%";
    fp.style.position="relative";
    fp.style.top="0px";
    fp.style.left="0px";
    
    //var dockParent=FloatingPanels[fpID].dockParent;
    var dockParent=document.getElementById(FloatingPanels[fpID].dockParent);
    if (dockParent==null)return;
    //
    // add floatingpanel to dock parent
    //
    // this is to work-around a netscape 8.1.2 bug. If the floatingpanel parent
    // is the same as the node we are appending it to, then it will crash netscape.
    // this workaround just checks to see if the floatingpanel parent is the same as
    // the docking container, if so, we remove the node first before we dock it.
    fp.removeNode(true); // for some reason, it needs to be removed twice for netscape 8.1.2
    if (dockParent==fp.parentElement) fp.removeNode(true); 
    dockParent.appendChild(fp);
    // make floatingpanel not draggable
    var fpTitleRow=document.getElementById(fpID+"_Title");
    fpTitleRow.style.cursor="";
    fpTitleRow.onmousedown=null;
    // turn on contextmenu
    if (FloatingPanels[fpID].dockedContextMenuID!=null && FloatingPanels[fpID].dockedContextMenuID.length>0)
    {
        fpTitleRow=document.getElementById(fpID+"_Title");
        fpTitleRow.oncontextmenu=function(e){esriShowContextMenu(e,FloatingPanels[fpID].dockedContextMenuID,"","TitleRow");return false;};
    }    
    // make width not resizable
    var fpResizeImage=null;
    fpResizeImage=document.getElementById(fpID+"_SideResizeImage");
    fpResizeImage.style.cursor="";
    fpResizeImage.onmousedown=null;
    // make corner not resizable
    fpResizeImage=document.getElementById(fpID+"_CornerResizeImage");
    fpResizeImage.style.cursor="";
    fpResizeImage.onmousedown=null;
    
    // switch from undockedImage to dockedImage
    var dockButton=document.getElementById(fpID+"_DockButton");
    switchImageSourceAndAlphaBlend(dockButton,FloatingPanels[fpID].dockedImage, FloatingPanels[fpID].forcePNG);
    
    FloatingPanels[fpID].docked=true;
	ie6Workarounds(fpID);
	ie6RetrieveCheckboxState(fp);
	if (FloatingPanels[fpID].onDockFunction != null) FloatingPanels[fpID].onDockFunction(fp);
}

function undockFloatingPanel(fpID)
{
    var fp = document.getElementById(fpID);
    if (fp==null)return;
    if (FloatingPanels[fpID]==null)return;

	ie6SaveCheckboxState(fp);
	
    var outsideContainerID=fpID + "_Container";
    var outsideContainer=document.getElementById(outsideContainerID);
    
    // create outside container if it doesn't exist
    if (outsideContainer==null)
    {
        outsideContainer=document.createElement('div');
        outsideContainer.id=outsideContainerID;
        outsideContainer.style.margin="0px";
        outsideContainer.style.padding="0px";
        document.body.appendChild(outsideContainer);
    }
    
    // add floatingpanel to outside container
    //
    // first set style height and width to clientheight and clientwidth
    fp.style.width=fp.clientWidth+"px";
    //fp.style.height=fp.clientHeight+"px";
    // set some undock settings
    var rect=calcElementPosition(fpID);
    fp.style.left=rect.left+rect.width+10+"px";
    fp.style.top=rect.top+"px";
    fp.style.position="absolute";
    // store dockParent
    FloatingPanels[fpID].dockParent=fp.parentNode.id;
    // add floatingpanel to outside container
    outsideContainer.appendChild(fp);
    // make floatingpanel draggable
    var fpTitleRow=document.getElementById(fpID+"_Title");
    fpTitleRow.style.cursor="move";
    fpTitleRow.onmousedown=function(e){if(!isLeftButton(e))return; esriBringFloatingPanelToFront(fpID);startWindowDrag(fpID);};
 
    // turn off dockedContextMenu
    fpTitleRow=document.getElementById(fpID+"_Title");
    fpTitleRow.oncontextmenu=null;
    // make width resizable
    var fpResizeImage=null;
    fpResizeImage=document.getElementById(fpID+"_SideResizeImage");
    fpResizeImage.style.cursor="w-resize";
    fpResizeImage.onmousedown=function(){startWindowResize(fpID,'width');if(!isIE)return false;};
    // make height resizable
    fpResizeImage=document.getElementById(fpID+"_BottomResizeImage");
    fpResizeImage.style.cursor="s-resize";
    fpResizeImage.onmousedown=function(){startWindowResize(fpID,'height');if(!isIE)return false;};
    // make corner resizable
    fpResizeImage=document.getElementById(fpID+"_CornerResizeImage");
    fpResizeImage.style.cursor="nw-resize";
    fpResizeImage.onmousedown=function(){startWindowResize(fpID);if(!isIE)return false;};
    // switch from dockedImage to undockedImage
    var dockButton=document.getElementById(fpID+"_DockButton");
    switchImageSourceAndAlphaBlend(dockButton,FloatingPanels[fpID].undockedImage, FloatingPanels[fpID].forcePNG);
    FloatingPanels[fpID].docked=false;
    esriBringFloatingPanelToFront(fpID);
	ie6Workarounds(fpID);
	ie6RetrieveCheckboxState(fp);
}

function toggleFloatingPanelDockState(fpID)
{
    if (FloatingPanels[fpID].docked)
    {
        //
        // undock
        //
        undockFloatingPanel(fpID);
    }
    else
    {
        //
        // dock
        //
        dockFloatingPanel(fpID);
    }
}

function esriMoveDockedFloatingPanelUp(fpID)
{
    var fp=document.getElementById(fpID);
    if (fp==null)return;
    if (FloatingPanels[fpID]==null)return;
    var parentNode=fp.parentNode;
    var refNode=esriGetPreviousSibling(fp);
    if (refNode==null) return;
    parentNode.removeChild(fp);
    parentNode.insertBefore(fp,refNode);
}
function esriMoveDockedFloatingPanelDown(fpID)
{
    var fp=document.getElementById(fpID);
    if (fp==null)return;
    if (FloatingPanels[fpID]==null)return;
    var parentNode=fp.parentNode;
    if (parentNode==null) return;
    var nextNode=esriGetNextSibling(fp);
    if (nextNode==null) return;
    var refNode=esriGetNextSibling(nextNode);
    if (refNode==null)
    {
        parentNode.removeChild(fp);
        parentNode.appendChild(fp);
    }
    else
    {
        parentNode.removeChild(fp);
        parentNode.insertBefore(fp,refNode);
    }
}
function esriMoveDockedFloatingPanelTop(fpID)
{
    var fp=document.getElementById(fpID);
    if (fp==null)return;
    if (FloatingPanels[fpID]==null)return;
    var parentNode=fp.parentNode;
    var refNode=esriGetFirstSibling(fp);
    if (refNode==null || refNode==fp)return;
    parentNode.removeChild(fp);
    parentNode.insertBefore(fp,refNode);
}
function esriMoveDockedFloatingPanelBottom(fpID)
{
    var fp=document.getElementById(fpID);
    if (fp==null)return;
    if (FloatingPanels[fpID]==null)return;
    var parentNode=fp.parentNode;
    parentNode.removeChild(fp);
    parentNode.appendChild(fp);
}

function esriGetNextSibling(element)
{
    if (element==null)return null;
    var p=element.parentNode;
    var sib=element.nextSibling;
    while(sib!=null)
    {
        if (sib.nodeType==1 && sib.clientHeight>0)
        {
            // make sure it is a floating panel
            if (FloatingPanels[sib.id]!=null) return sib;
        }
        sib=sib.nextSibling;
    }
    return null;
}
function esriGetPreviousSibling(element)
{
    if (element==null)return null;
    var p=element.parentNode;
    var sib=element.previousSibling;
    while(sib!=null)
    {
        if (sib.nodeType==1 && sib.clientHeight>0)
        {
            // make sure it is a floating panel
            if (FloatingPanels[sib.id]!=null) return sib;
        }
        sib=sib.previousSibling;
    }
    return null;
}
function esriGetFirstSibling(element)
{
    if (element==null)return null;
    var p=element.parentNode;
    if (p==null) return null;
    if (p.childNodes==null) return null;
    for (var i=0; i<p.childNodes.length; i++)
    {
        var sib=p.childNodes[i];
        if (sib==null)continue;
        if (sib.nodeType==1 && sib.clientHeight>0)
        {
            // make sure it is a floating panel
            if (FloatingPanels[sib.id]!=null) return sib;
        }
    }
    return null;
}

// ie 6 select box workaround (windowed controls)
// and workaround for background image on the title bar disappearing.
function ie6Workarounds(fpID)
{
    if (isIE && ieVersion < 7)
    {
        var fp=document.getElementById(fpID)
        if (fp==null)return;
        
        // workaround for ie bug that makes the background image disappear
        var titleBarRow= document.getElementById(fpID + '_Title');
        if (titleBarRow!=null) titleBarRow.style.backgroundImage=titleBarRow.style.backgroundImage;
        
        var ifrmID = fpID + "_BackgroundIFrame";
        var ifrm = document.getElementById(ifrmID);
        // create background iframe if it doesn't exist
        if (ifrm==null)
        {
            ifrm=document.createElement('iframe');
            ifrm.id=ifrmID;
            ifrm.style.position="absolute";
            ifrm.src="javascript:false;";
            ifrm.frameborder="0";
            ifrm.scrolling="no";
            ifrm.style.margin="0px";
            ifrm.style.display="none";
            ifrm.style.padding="0px";
            ifrm.style.filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)';
            document.body.appendChild(ifrm);
        }
        
        if (fp.style.position=="absolute")
        {
            ifrm.style.zIndex=fp.style.zIndex-1;
            ifrm.style.width=fp.offsetWidth;
            ifrm.style.height=fp.offsetHeight;
            ifrm.style.top=fp.style.top;
            ifrm.style.left=fp.style.left;
            ifrm.style.display=fp.style.display;   
        }
        else
        {
            ifrm.style.zIndex=fp.style.zIndex-1;
            ifrm.style.width="0px";
            ifrm.style.height="0px";
            ifrm.style.top="0px";
            ifrm.style.left="0px";
            ifrm.style.display="none";
        }
    }
    return false; 
}

function ie6SaveCheckboxState(fp)
{
    if (isIE && ieVersion < 7)
    {
        if (fp==null)return;
        var cbs=fp.getElementsByTagName('input');
        if (cbs==null)return;
        for (var i=0; i<cbs.length; i++)
        {
            var cb = cbs[i];
            if (cb==null)continue; 
            if (cb.type!='checkbox')continue;
            cb.savedCheckedState=cb.checked;
        }
   } 
}

function ie6RetrieveCheckboxState(fp)
{
    if (isIE && ieVersion < 7)
    {
        if (fp==null)return;
        var cbs=fp.getElementsByTagName('input'); 
        if (cbs==null)return;
        for (var i=0; i<cbs.length; i++)
        {
            var cb = cbs[i];
            if (cb==null)continue; 
            if (cb.type!='checkbox')continue;
            if (cb.savedCheckedState!=null)
                cb.checked=cb.savedCheckedState;
        }
    }
}