<!--
/*--------------------------------------------------------------------------------*/
/*------------------  SCROLLING LAYERS SCRIPT V1.0  ------------------------------*/
/*--------------------------------------------------------------------------------*/
/*
- DESCRIPTION:

  This script provides functions for showing, hiding and scrolling of layers.
  (note: layers are defined using the following HTML code:

  <div id="layerx">
   Layer's HTML-content goes here.
  </div>

  where x is an integer.)

- COMPATIBILITY:

  Succesfully tested using NN 4.7, IE 5.5 and NN 6.1 on a PC.

- USAGE:
  <html>
        <head>
        <STYLE TYPE="text/css">
                                      @ TO BE CHANGED ACCORDING TO YOUR NEEDS
        DIV {
                position: absolute;
                top: 10px;
                left: 690px;
                width: 300px;
                background: #999999;
                layer-background-color: #999999;
                padding: 10px;
                border: none;
                visibility: hidden;
        }
        </STYLE>
        <SCRIPT>
                numberOfLayers = 2;     @ TO BE CHANGED ACCORDING TO YOUR NEEDS: COMMENT THIS OUT WHEN COPYING !
                layerTopY = 10;         @ TO BE CHANGED ACCORDING TO YOUR NEEDS: COMMENT THIS OUT WHEN COPYING !
                activeLayer = 'layer0';@ TO BE CHANGED ACCORDING TO YOUR NEEDS: COMMENT THIS OUT WHEN COPYING !
        </SCRIPT>
        <SCRIPT language="JavaScript" src="scrollingLayers.js">
        </SCRIPT>
        </head>
        <body bgcolor="#ffffff" onLoad="initAllLayers()">
                layer1&nbsp;:<a href ="javascript:makeLayerActive('layer1');" onmouseover="showLayer('layer1');" onmouseout="hideLayer('layer1');">show</a>&nbsp;<a href="#" onMouseOver="scrollLayer('layer1',-3,40)" onMouseOut="stopScroll()">up</a>&nbsp;<a href="#"  onMouseOver="scrollLayer('layer1',1,55)" onMouseOut="stopScroll()">down</a><br>
                layer2&nbsp;:<a href ="javascript:makeLayerActive('layer2');" onmouseover="showLayer('layer2');" onmouseout="hideLayer('layer2');">show</a>&nbsp;<a href="#" onMouseOver="scrollLayer('layer2',-2,20)" onMouseOut="stopScroll()">up</a>&nbsp;<a href="#"  onMouseOver="scrollLayer('layer2',2,20)" onMouseOut="stopScroll()">down</a><br>
                <DIV ID="layer0">
                        Welcome to the Scrolling Layers.<br>Instructions go here.
                </DIV>
                <DIV ID="layer1">
                        <P>Rackspace providing additional hosting for PHP project [17-Sep-2001] Thanks to the generous folks at Rackspace, we have added additional capacity for hosting the PHP project's efforts. Currently, the machine they have provided is serving downloads for www.php.net and snaps.php.net. We will continue to re-balance our resource needs across all of the machines provided by our supporters.<br><img src="images/1.jpg"><br> blablabla balblabla ablb</P>
                </DIV>
                <DIV ID="layer2">
                        <P>PHP-GTK version 0.1 released [02-Aug-2001] The 0.1 release of PHP-GTK is now available. PHP-GTK is a PHP extension that provides an object-oriented interface to GTK+ toolkit and enables you to write client-side cross-platform GUI applications. Win32 binary version should be available a little later. Note that this version requires PHP CVS version to compile, but it can be run under 4.0.5 and later. A talk on PHP-GTK was presented by Andrei Zmievski and Frank Kromann at the 2001 O'Reilly Open Source Conference in San Diego. The slides from the talk can be viewed online. For more information, visit http://gtk.php.net/.</P>
                </DIV>
        </body>
  </html>
*/
/*--------------------------------------------------------------------------------*/
// VARIABLES

// The top of the layers (y-coordinate)
//layerTopY = 10;     // @ TO BE CHANGED ACCORDING TO THE CSS VALUE 'top' ABOVE
                    //
                    // Must be the same as value 'top' in the the CSS above
// Total number of layers
//numberOfLayers = 13; // @ TO BE CHANGED ACCORDING TO THE NUMBER OF LAYERS IN THE HTML
                    // PART OF THIS DOCUMENT
                    //
                    // This one is without the default layer named 'layer0'
                    // Therefore, if you numbered all layers correctly
                    // this should be equal to the last layer's number.
//clipTopY = 0;       // @ TO BE CHANGED
                      //
                      // How much should initially clipped off from the top of the layer
//clippingWidth = 300;// @ TO BE CHANGED
                      //
                      // The width of the layer. Should be equal to the css-value.
//clippingBottom = 150;// @ TO BE CHANGED
                       //
                       // Y-coordinate of the bottom-clipping
//layerHeightDY_0 = 20;// @ TO BE CHANGED
                       //
                       // ?? play with this one ??

var layerTop = new Array();
// The tops of the clipping rectangles
var clipTop = new Array();
// The widths of the clipping rectangles
var clipWidth = new Array();
// The bottoms of the clipping rectangles
var clipBottom = new Array();
//
var layerHeight = new Array();
// Initilaization of some properties defining the
// appearance of the layers. If each property of
// all the layers has the same value one can
// use this for-loop for initialization.
for (var k=0;k<(numberOfLayers+1);k++) {
        clipTop[k] = clipTopY;
        clipWidth[k] = clippingWidth;
        clipBottom[k] = clippingBottom;
        layerHeight[k] = clipBottom[k]-clipTop[k];
        layerTop[k] = layerTopY;
}
var time,amount,theTime,theHeight,isDHTML;

/*--------------------------------------------------------------------------------*/
// FUNCTIONS

// saves the reference to the object 'name' regardless of which browser is used
function getObject(name) {
  // Netscape 6, Explorer 5 (Opera 5, Konqueror)
  if (document.getElementById) {
        this.obj = document.getElementById(name);
        this.style = document.getElementById(name).style;
  }
  // Explorers other (e.g. 4.x) than mentioned above
  else if (document.all) {
        this.obj = document.all[name];
        this.style = document.all[name].style;
  }
  // Netscape 4.x
  else if (document.layers) {
           this.obj = document.layers[name];
           this.style = document.layers[name];
  }
}

// Initializes clipping area of layers
function initLayer(layerName) {
        isDHTML = (document.getElementById || document.all || document.layers)
        if (!isDHTML) return;
        var x = new getObject(layerName);
        var i = getLayerNumber(layerName);
        if (document.layers) {
                layerHeight[i] = x.style.clip.bottom;
                layerHeight[i] += layerHeightDY_0;
                x.style.clip.top = clipTop[i];
                x.style.clip.left = 0;
                x.style.clip.right = clipWidth[i];
                x.style.clip.bottom = clipBottom[i];
        }
        else if (document.getElementById || document.all) {
                layerHeight[i] = x.obj.offsetHeight;
                x.style.clip = 'rect('+clipTop[i]+' '+clipWidth[i]+' '+clipBottom[i]+' 0)'
        }
}

// Do the initialization for all layers
function initAllLayers() {
        for (var k=0;k<(numberOfLayers+1);k++) {
             initLayer('layer'+k);
        }
        // show the default layer
        setLayerVisibility(activeLayer,'visible');
}

// Does the scrolling of layers
function scrollLayer(layerName,amt,tim) {
        if (!isDHTML) return;
        thelayer = new getObject(layerName);
        if (!thelayer) return;
        amount = amt;
        theTime = tim;

        // get the layer's number out of its name to make sure the right layer is scrolled
        var i = getLayerNumber(layerName);
        scroll(i);
}

// Does the actual change of the variables defining
// the layers and their respecting clipping areas.
function scroll(i) {
        if (!isDHTML) return;
        clipTop[i] += amount;
        clipBottom[i] += amount;
        layerTop[i] -= amount;
        if (clipTop[i] < 0 || clipBottom[i] > layerHeight[i]) {
                clipTop[i] -= amount;
                clipBottom[i] -= amount;
                layerTop[i] += amount;
                return;
        }

        if (document.getElementById || document.all) {
                clipstring = 'rect('+clipTop[i]+' '+clipWidth[i]+' '+clipBottom[i]+' 0)'
                thelayer.style.clip = clipstring;
                thelayer.style.top = layerTop[i];
        }
        else if (document.layers) {
                thelayer.style.clip.top = clipTop[i];
                thelayer.style.clip.bottom = clipBottom[i];
                thelayer.style.top = layerTop[i];
        }
        time = setTimeout('scroll('+i+')',theTime);
}

// Stops the scrolling of layers
function stopScroll() {
        if (time) clearTimeout(time);
}
// Sets visibilities of layers
function setLayerVisibility(target,state) {
        if (!isDHTML) return;
        var f = new getObject(target);
        f.style.visibility = state;
}

// Show only one layer and make sure all others are hidden
//activeLayer = 'layer0';
function showLayer(layerName) {
         if (!isDHTML) return;
         for (var j=0;j<layerTop.length; j++) {
              name = 'layer'+j;
              if (name != layerName) {
                     setLayerVisibility(name,'hidden');
              } else {
                     setLayerVisibility(name,'visible');
              }
         }
}

// Hide the corresponding layer and show the Active Layer
function hideLayer(layerName) {
          if (activeLayer != layerName) {
              setLayerVisibility(layerName,'hidden');
          }
          setLayerVisibility(activeLayer,'visible');
}

// Make the depicted layer active and show it
function makeLayerActive(layerName) {
         activeLayer = layerName;
         showLayer(layerName);
}

function getLayerNumber(layerName) {
         l = layerName.length;
         var number = parseInt(layerName.substring(5,l));
         return number;
}
/*--------------------------------------------------------------------------------*/
/*------------------  END OF SCROLLING LAYERS  -----------------------------------*/
/*--------------------------------------------------------------------------------*/
//-->
