root/Chameleon/trunk/Chameleon/js/layer_fn.js

/* ==================================================================== */
/*       check the browser.                                             */
/* ==================================================================== */
var browser ="";
var version = "";
var xpos;
if (navigator.appName == "Netscape")
{
    browser = "netscape";
    if ( navigator.appVersion[0] <= 4)
      version = 4;
    else
      version = 5;
}
else
{
    browser = "ie";
}

/* ==================================================================== */
/*       function FindImage(szImageName)                                */
/*                                                                      */
/* ==================================================================== */

function FindImage(szImageName)
{
    var oImage;
    if (browser == "netscape" )
    {
        if (arguments.length == 2 )
        {
            oImage = document.layers[arguments[1]].document.images[szImageName];
        }
        else
        {
            oImage = document.images[szImageName];
        }
    }
    else  //IE
    {
        oImage = document.getElementById(szImageName);
    }
    return oImage;
}

/* ==================================================================== */
/*       function FindObjectPos(obj)                                    */
/*                                                                      */
/*       Finds the position of an object on the page                    */
/*       Returns the top left x, y coordinates of an object             */
/*       NOTE:                                                          */
/*       - obj is the name/id of any html object, images work well      */
/*       - NN4 If obj is in a layer, please use the second function     */
/*       - Uses function FindObjectPosX(obj)                            */
/*         and function FindObjectPosY(obj)to find the position for     */
/*         Netscape 5+ and IE                                           */
/* ==================================================================== */

function FindObjectPos(oElement)
{
    var aPos = new Array(2);
    aPos[0] = FindObjectPosX( oElement );
    //alert(aPos[0]);
    aPos[1] = FindObjectPosY( oElement );
    //alert(aPos[1]);

    if (arguments.length == 2 && browser == "netscape" && version == 4)
    {
        var oLayer = UTLGetLayer( arguments[1] );
        
        aPos[0] = aPos[0] + oLayer.left;
        aPos[1] = aPos[1] + oLayer.top;
    }
    return aPos;
}

/* ==================================================================== */
/*       function FindObjectPosX(obj)                                   */
/*       function FindObjectPosY(obj)                                   */
/*                                                                      */
/*       Returns the left x coordinate of an object on the page         */
/*       Returns the top y coordinate of an object on the page          */
/*       NOTE:                                                          */
/*       - obj is the name/id of any html object, images work well      */
/* ==================================================================== */

function FindObjectPosX(obj)
{
    var curleft = 0;

    if (browser == "netscape")  //Netscape 4+
    {
        curleft += obj.x;
    }
    else //IE
    {
        while (obj.offsetParent)
        {
            curleft += obj.offsetLeft;
            obj = obj.offsetParent;
        }
    }
    return curleft;
}


function FindObjectPosY(obj)
{
    var curtop = 0;
    if (browser == "netscape")  // Netscape 4+
    {
        curtop += obj.y;
    }
    else // IE
    {
        while (obj.offsetParent)
        {
            curtop += obj.offsetTop;
            obj = obj.offsetParent;
        }
    }
    return curtop;
}


/* ==================================================================== */
/*       SetLayerPos(layerName)                                         */
/*                                                                      */
/*       Dynamically positions a layer in the page                      */
/*       NOTE:                                                          */
/*       - layerName is the id of any DIV type layer                    */
/*       - hspc and vspc may contain values that are the left x         */
/*         and top y cordinates of an object in the page if used in     */
/*         concert with function FindObjectPos(obj)                     */
/* ==================================================================== */

function SetLayerPos(layerName, x, y)
{
    var oLayer = UTLGetLayer(layerName);
    
    if (oLayer != null)
    {
        oLayer.left=x;
        oLayer.top=y;
    }
    else
        alert( "layer " + layerName + " doesn't exist" );
}

function SetLayerVis(layerName, bVisible)
{
    var oLayer = UTLGetLayer(layerName);
    if (browser == "netscape" && version == 4)
    {
        if (bVisible)
            oLayer.visibility = "show";
        else
            oLayer.visibility = "hide";
    }
    else
    {
        if (bVisible)
            oLayer.visibility = "visible";
        else            
            oLayer.visibility = "hidden";
    }
}


/* ==================================================================== */
/*       function UTLGetLayer(name)                                     */
/*       function UTLGetLayerForContents(name)                          */
/*                                                                      */
/*       Returns the browser specific layer handle for accessing the    */
/*       style or the contents of a layer                               */
/*       NOTE:                                                          */
/*       - name is the name/id of any layer                             */
/* ==================================================================== */

function UTLGetLayerForContents(name)
{
    var layer;
    if (browser == "netscape")
    {
        if (version == "4")
          {
          return document.layers[name];
          }
        else
        {
            if (eval('document.getElementById("' + name + '")') != null)
            {
                layer = eval('document.getElementById("' + name + '")');
                return layer;
            }
            else
            {
                return null;
            }
        }
    }
    else if (browser == "ie")
    {
        if (eval('document.all.' + name) != null)
        {
            layer = eval('document.all.' + name);
            return layer;
        } else
        {
            return null;
        }
    }
}


function UTLGetLayer(name)
{
    var layer;
    if (browser == "netscape")
    {
        if (version == "4")
          return document.layers[name];
        else
        {
            if (eval('document.getElementById("' + name + '")') != null)
            {
                layer = eval('document.getElementById("' + name + '").style');
                return layer;
            }
            else
            {
                return null;
            }
        }
    }
    else if (browser == "ie")
    {
        if (eval('document.all.' + name) != null)
        {
            layer = eval('document.all.' + name + '.style');
            return layer;
        } else
        {
            return null;
        }
    }
}


/* ========================================================================= */
/* function PositionLayer( szLayer, szImage [, position, xoffset, yoffset] ) */
/*                                                                           */
/* ========================================================================= */

function PositionLayer( szLayer, szImage )
{
    var oLayer = UTLGetLayer( szLayer );
    var oImage = FindImage( szImage );
    var szPosition;
    var aPos;
    var x, y;

    //If no position specified then put the layer to the top left
    if (arguments.length > 2)
        szPosition = arguments[2];
    else
        szPosition = "tl";
  
    //Are there offsets set?
    if (arguments.length == 5)
    {
        nXOffset = arguments[3];
        nYOffset = arguments[4];
    }
    else
    {
        nXOffset = 0;
        nYOffset = 0;
    }

    //Get the Image position
    aPos = FindObjectPos( oImage );
    x = aPos[0] + nXOffset;;
    y = aPos[1] + nYOffset;
    
    if (szPosition == "tr" ) //top right
    {
        x = x + oImage.width;
    }
    else if (szPosition == "bl" ) //bottom left
    {
        y = y + oImage.height;
    }
    else if (szPosition == "br" ) //bottom right
    {
        x = x + oImage.width;
        y = y + oImage.height;
    }
   
    oLayer.left = x;
    oLayer.top = y;
    
}


/* ==================================================================== */
/*       function ShowContents(szLayerName,szContents)                  */
/*                                                                      */
/*       Writes the HTML contents to the specified layer                */
/*       style or the contents of a layer                               */
/*       NOTE:                                                          */
/*       - szLayerName is the name of the layer to modify               */
/*       - szContents is the HTML to place in the layer                 */
/* ==================================================================== */

function ShowContents(szLayerName,szContents)
{
    var oLayer = UTLGetLayerForContents(szLayerName);
    if (browser == "netscape" && version == 4)
    {   
        oLayer.document.open();
        oLayer.document.write(szContents);
        oLayer.document.close();
    }
    else
    {
        oLayer.innerHTML = szContents;
    }
}   


function CreateLayer( szLayerName, szContents, width, height, visible )
{
    var vis;
    var str;
    var end;
    if (browser == "netscape" && version == 4)
    {
    str = '<layer id="' + szLayerName + '" left=0 top=0' +
    ' width=' + width + ' height=' + height +
    ' visibility=' + (visible ? '"show"' : '"hide"') + '>';  
        end = "</layer>";
    }
    else
    {
        str = '<div id="' + szLayerName + '" name="' + szLayerName +
        '" style="position:absolute; overflow:none; left:0px; top:0px; ' +
        'width:' + width + 'px; height:' + height +
        'px;' + ' visibility:' + (visible ? 'visible;' : 'hidden;') +  '">';
        end = "</div>";
    }
    document.writeln(str);
    document.writeln(szContents);
    document.writeln(end);
    
    //alert( str + szContents + '</div>' );
}


/************************************************************************************************/
/*                                                                                              */
/*  @function :  PositionDynLayer( layerName, imageName, position, xOffset, yOffset, visible )  */
/*  @purpose  :  Places a layer [top,bottom,left,right] under an image for use with ShiftLayer  */
/*  @example  :  PositionDynLayer( 'container', 'mapimage', 'top', 0, 0, true )                 */
/*                                                                                              */
/************************************************************************************************/  
function PositionDynLayer( layerName, imageName, position, xOffset, yOffset, visible )
{
    
    SetLayerVis(layerName, visible);
    
    //Get Handles on Objects
    var oLayer = UTLGetLayer( layerName );
    var oImage = FindImage( imageName );
    
    //Set Local Vars
    var x, y;
    var imgWidth = oImage.width;
    var imgHeight = oImage.height;
    
    //Get the Image position
    aPos = FindObjectPos( oImage );
    x = aPos[0];
    y = aPos[1];

    //If LEFT then shift it left but keep it beneath image
    if( position == "left" )   
    {
        var layerWidth = parseInt(oLayer.width);
        var xoff = imgWidth - layerWidth;
        x = x + xoff;
    }
    
    //If BOTTOM then shift it down but keep it hidden beneath image
    if( position == "bottom" ) 
    {
        var layerHeight = parseInt(oLayer.height);
        var yoff = imgHeight - layerHeight;
        y = y + yoff;
    }

    //Apply the Offsets
    x = x + xOffset;
    y = y + yOffset;

    //Apply new coords to the Layer    
    oLayer.left = x;
    oLayer.top = y;
            
}

/************************************************************************************************/
/*                                                                                              */
/*  @function :  ShiftDynLayer(layerName, position, method, offset, visible)                    */
/*  @purpose  :  Shifts Layer as set by PositionDynLayer                                        */
/*  @example  :  PositionDynLayer( 'container', 'left, 'pop', 0, true )                         */
/*                                                                                              */
/************************************************************************************************/  
function ShiftDynLayer(layerName, position, method, offset, visible, direction)
{

    SetLayerVis(layerName, visible);
    
    //Get Handle on Object
    var oLayer = UTLGetLayer( layerName );

    var x, y;
    
    var layerWidth = parseInt(oLayer.width);
    var layerHeight = parseInt(oLayer.height);
    y = parseInt(oLayer.top);
    x = parseInt(oLayer.left);

    if( method == "pop" )
    {
    
        if ( position == "left" )
        {
            x = x + (layerWidth + offset);
        }
        else if ( position == "right" )
        {
            x = x - (layerWidth - offset);
        }
        else if ( position == "bottom" )
        {
            y = y + (layerHeight + offset);
        }
        else if ( position == "top" )
        {
            y = y - (layerHeight - offset);
        }

        SetLayerPos( layerName, x, y );

    } 
    else
    {
        SlideDynLayer(layerName, position, 5, 15, offset, direction);
    }

}

/************************************************************************************************/
/*                                                                                              */
/*  @function :  SlideDynLayer(layerName, position, increment, speed, offset, direction)        */
/*  @purpose  :  Animates PositionDynLayer layer (used as stand alone or with ShiftDynLayer     */
/*  @example  :  SlideDynLayer('container', 'left', 10, 20, 0, 'out')                           */
/*                                                                                              */
/************************************************************************************************/  
function SlideDynLayer(layerName, position, increment, speed, offset, direction)
{

    //Layer Visibility
    if( direction == "out" )
        SetLayerVis( layerName, true );

    var oLayer = UTLGetLayer( layerName );

    //Set global vars for called functions
    slideLayer = UTLGetLayer( layerName );
    layerIncrement = increment;
    layerSpeed = speed;
    
    if( position == "left" )                               //move the layer to the right
    {
        var x = parseInt( oLayer.left );
        var layerWidth = parseInt( oLayer.width );
        if( direction == "out" )
        {
            layerEP = x + layerWidth + offset;
            objectRightPos = x;
            ShiftRight();
        }
        else
        {
            layerEP = x - layerWidth - offset;
            objectLeftPos = x;
            ShiftLeft();
        }
    }
    else if( position == "right" )                         //move the layer to the left
    {
        var x = parseInt( oLayer.left );
        var layerWidth = parseInt( oLayer.width );
        if( direction == "out" )
        {
            layerEP = x - layerWidth - offset;
            objectLeftPos = x;
            ShiftLeft();
        }
        else
        {
            layerEP = x + layerWidth + offset;
            objectRightPos = x;
            ShiftRight();
        }
    
    }
    else if( position == "top" )                           //move the layer to the bottom
    {
        var y = parseInt( oLayer.top );
        var layerHeight = parseInt( oLayer.height );
        alert( 'this direction not yet ready' );
        if( direction == "out" )
        {
            layerEP = y + layerWidth + offset;
            objectTopPos = y;
            ShiftDown();
        }
        else
        {
            layerEP = y - layerWidth - offset;
            objectBottomPos = y;
            ShiftUp();
        }
    }
    else                                                   //move the layer to the top
    {
        var y = parseInt( oLayer.top );
        var layerHeight = parseInt( oLayer.height );
        alert( 'this direction not yet ready' );
        if( direction == "out" )
        {
            layerEP = y + layerWidth + offset;
            objectBottomPos = y;
            ShiftUp();
        }
        else
        {
            layerEP = y - layerWidth - offset;
            objectTopPos = y;
            ShiftDown();
        }
    }

}

function ShiftRight()
{
    if ( objectRightPos < layerEP ) 
    {
        objectRightPos += layerIncrement;
        slideLayer.left = objectRightPos;
        setTimeout( "ShiftRight()", layerSpeed );
    }
}

function ShiftLeft()
{
    if ( objectLeftPos > layerEP ) 
    {
        objectLeftPos = objectLeftPos - layerIncrement;
        slideLayer.left = objectLeftPos;
        setTimeout( "ShiftLeft()", layerSpeed );
    }
}

function ShiftDown()
{
    alert('function not complete');
}    

function ShiftUp()
{
    alert('function not complete');
}