source: main/trunk/model-cols-dev/peijones/transform/pages/about.xsl@ 24616

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:java="http://xml.apache.org/xslt/java"
    xmlns:util="xalan://org.greenstone.gsdl3.util.XSLTUtil"
    xmlns:gslib="http://www.greenstone.org/skinning"
    extension-element-prefixes="java util"
    exclude-result-prefixes="java util">

    <!-- the page content -->
    <xsl:template match="/page">
  
        <!--Display the description text of the current collection,
        and if some services are available then create a list
        of links for each service within a <ul id="servicelist"> element.-->
    <table><tbody><tr><td style="width:60%;"><gslib:collectionDescriptionTextAndServicesLinks/></td>
    <td>
    
    <xsl:variable name="httpPath"><xsl:value-of select="/page/pageResponse/collection/metadataList/metadata[@name='httpPath']"/></xsl:variable>
    <script language="javascript" src="{$httpPath}/script/collage.js"><xsl:text> </xsl:text></script>

<script language="javascript" type="text/javascript">
<xsl:text disable-output-escaping="yes">



  var collageDelayMsec = 2000;

  var numCollageImages;

  function collageNextImage(collageFrameNum)
  {
    var totalNumKeyframes = Book_Image_Sources.length;
   
    //var archiveDir = "twso2008.dir";
  
    var colframeNum = (collageFrameNum-1) % numCollageImages;

    var collageCanvas = document.getElementById("collagewrapper");

    var collagelet = collageCanvas.getElementsByTagName('div');

    var imgs = collagelet[colframeNum].getElementsByTagName('img');
    var img = imgs[0];

    var i;
    for (i=0; i &lt; numCollageImages-1; i++) {
        var j = (colframeNum+1+i) % numCollageImages;

        console.log("j = " + j);
        var zindex = collagelet[j].style.zIndex;
        if (zindex &gt; 0) {
            zindex--;
            collagelet[j].style.zIndex = zindex;
            var alphaVal = Math.round((zindex/numCollageImages)*100);
            setAlphaVal(collagelet[j],alphaVal);
        }
    }

    img.src = Book_Image_Sources[collageFrameNum-1];
    img.width = 300;
    img.collageFrameNum = collageFrameNum;

    img.onclick = function () { document.location = Book_Image_Sources[collageFrameNum-1]; };

    collagelet[colframeNum].style.zIndex = numCollageImages;
    setAlphaVal(collagelet[colframeNum],100);

    nextcollageFrameNum = (collageFrameNum % totalNumKeyframes) + 1;

    setTimeout('collageNextImage('+nextcollageFrameNum+')',collageDelayMsec);


 }

 
 
function initCollage()
{
 
  
  var collageCanvas = document.getElementById('collagewrapper');

  // var spacediv = 5;

  // var numXCols = spacediv;
  // var numYRows = numCollageImages / spacediv;

  var collageWidth = 400;
  var collageHeight = 300;

  var numXCols = 4;
  var numYRows =3;

  numCollageImages = numXCols * numYRows;


  var placement = new Array(numCollageImages);

  var i;
  for (i=0; i &lt; numCollageImages; i++) {
      var x = i % numXCols;
      var y = Math.floor(i / numXCols);


      var xypos = new Object();
      xypos.x = (x/numXCols) * collageWidth;
      xypos.y = (y/numYRows) * collageHeight;

      placement[i] = xypos;
  }

  // now mix them up

  for (i=0; i &lt; numCollageImages; i++) {

      var swapi = Math.floor(Math.random()*numCollageImages);
      var tmp = placement[i];
      placement[i] = placement[swapi];
      placement[swapi] = tmp;
  }

  for (i=0; i &lt; numCollageImages; i++) {
      var img = document.createElement('img');
      img.id = "fadingimg" + i;
      img.src = gs.collectionMetadata["httpPath"] + "/images/blank.gif" 
      img.border= 0;

      var divImg = document.createElement('div');
      divImg.id = "fadingcanvas" + i;

      var posStyle = "position: absolute; ";
      posStyle += "top: " + placement[i].y +"px; ";
      posStyle += "left: " + placement[i].x + "px; "; 


      visStyle = "visibility: inherit; ";
      zindexStyle = " z-index: " + numCollageImages + "; ";

      var style = posStyle + visStyle + zindexStyle;

      divImg.setAttribute("style",style);

      divImg.appendChild(img);

      collageCanvas.appendChild(divImg);
  }

}


</xsl:text>
</script>


    <div id="collagewrapper"  
        style="background: #ffffd0; 
            width: 600px;
            height: 500px;
            position: relative; left: 0px; top: 0px;">
    </div>
        
    
    </td></tr></tbody></table>

    <script type="text/javascript">
<xsl:text disable-output-escaping="yes">

    var Book_Image_Sources = new Array();


function getImages()
{ 
    var url = "?a=g&amp;s=GetAllImagesInCollection&amp;rt=r&amp;s1.extregex=Photo.*(jpg|png)&amp;s1.c=" + gs.cgiParams.c + "&amp;o=xml";   
    var callback = {
        success: function(data)
        {
            var xml = data.responseXML;

            var imageList = xml.getElementsByTagName("image");
    
            for(var i = 0; i &lt; imageList.length; i++)
            {
                var imageURL = imageList[i].firstChild.nodeValue;
                
                imageURL = imageURL.replace(/\\/gi, "/");
                imageURL = imageURL.replace(/%5C/gi, "/");
                imageURL = imageURL.substring(imageURL.indexOf("sites"));
                
                Book_Image_Sources.push(imageURL);
            }
            
            if(Book_Image_Sources.length &gt; 0)
            {
                initCollage();
                collageNextImage(1);
            }
        },
        failed: function(data){alert("FAILED");}
    };
    
    YAHOO.util.Connect.asyncRequest("GET", url , callback);
}

    
    window.onload=getImages;
    </xsl:text>
</script>
    
    </xsl:template>


</xsl:stylesheet>