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

<?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 Book_Image_Sources = new Array();
    var Book_Image_Width=200;
    var Book_Image_Height=280;
    var Book_Border=true;
    var Book_Border_Color="gray";
    var Book_Speed=15;
    var Book_NextPage_Delay=1500; //1 second=1000
    var Book_Vertical_Turn=0;

    var B_LI,B_MI,B_RI,B_TI,B_Angle=0,B_CrImg=6,B_MaxW,B_Direction=1;
    var B_MSz,B_Stppd=false;B_Pre_Img=new Array();

    function ImageBook()
    {
        if(document.getElementById)
        {
            for(i=0;i&lt;Book_Image_Sources.length;i+=1)
            {
                B_Pre_Img[i]=new Image();
                B_Pre_Img[i].src=Book_Image_Sources[i];
            }
            
            Book_Div=document.getElementById("Book");
            B_LI=document.createElement("img");Book_Div.appendChild(B_LI);  
            B_RI=document.createElement("img");Book_Div.appendChild(B_RI);
            B_MI=document.createElement("img");Book_Div.appendChild(B_MI);  
            
            B_LI.style.position = B_MI.style.position = B_RI.style.position = "absolute";
            
            B_LI.style.zIndex=B_RI.style.zIndex=0;B_MI.style.zIndex=1;
            
            B_LI.style.top=(Book_Vertical_Turn?Book_Image_Height+1:-Book_Image_Height/3)+"px";
            B_LI.style.left=0+"px";
            B_MI.style.top=-Book_Image_Height/3+"px";
            B_MI.style.left=(Book_Vertical_Turn?0:Book_Image_Width+1)+"px";
            B_RI.style.top=-Book_Image_Height/3+"px";
            B_RI.style.left=(Book_Vertical_Turn?0:Book_Image_Width+1)+"px";
            
            B_LI.style.height=Book_Image_Height+"px";
            B_MI.style.height=Book_Image_Height+"px";
            B_RI.style.height=Book_Image_Height+"px";
            B_LI.style.width=Book_Image_Width+"px";
            B_MI.style.width=Book_Image_Width+"px";
            B_RI.style.width=Book_Image_Width+"px";
            
            if(Book_Border)
            {
                B_LI.style.borderStyle=B_MI.style.borderStyle=B_RI.style.borderStyle="solid";
                B_LI.style.borderWidth=1+"px";
                B_MI.style.borderWidth=1+"px";
                B_RI.style.borderWidth=1+"px";
                B_LI.style.borderColor=B_MI.style.borderColor=B_RI.style.borderColor=Book_Border_Color
            }
            
            B_LI.src=B_Pre_Img[0].src;
            B_LI.lnk=Book_Image_Sources[1];
            B_MI.src=B_Pre_Img[2].src;
            B_MI.lnk=Book_Image_Sources[3];
            B_RI.src=B_Pre_Img[4].src;
            B_RI.lnk=Book_Image_Sources[5];
            B_LI.onclick=B_MI.onclick=B_RI.onclick=B_LdLnk;
            B_LI.onmouseover=B_MI.onmouseover=B_RI.onmouseover=B_Stp;
            B_LI.onmouseout=B_MI.onmouseout=B_RI.onmouseout=B_Rstrt;
            BookImages()
        }
    }

    function BookImages(){
        if(!B_Stppd)
        {
            if(Book_Vertical_Turn)
            {
                B_MSz=Math.abs(Math.round(Math.cos(B_Angle)*Book_Image_Height));
                MidOffset=!B_Direction?Book_Image_Height+1:Book_Image_Height-B_MSz;
                B_MI.style.top=MidOffset+"px";
                B_MI.style.height=B_MSz+"px"
            }
            else
            {   
                B_MSz=Math.abs(Math.round(Math.cos(B_Angle)*Book_Image_Width));
                MidOffset=B_Direction?Book_Image_Width+1:Book_Image_Width-B_MSz;
                B_MI.style.left=MidOffset+"px";
                B_MI.style.width=B_MSz+"px"
            }
            B_Angle+=Book_Speed/720*Math.PI;
            if(B_Angle&gt;=Math.PI/2&amp;&amp;B_Direction)
            {
                B_Direction=0;
                if(B_CrImg==Book_Image_Sources.length)B_CrImg=0;
                B_MI.src=B_Pre_Img[B_CrImg].src;
                B_MI.lnk=Book_Image_Sources[B_CrImg];
                B_CrImg+=1
            }
            if(B_Angle&gt;=Math.PI)
            {
                B_Direction=1;
                B_TI=B_LI;
                B_LI=B_MI;
                B_MI=B_TI;
                if(Book_Vertical_Turn)B_MI.style.top=0+"px";
                else B_MI.style.left=Book_Image_Width+1+"px";           
                B_MI.src=B_RI.src;
                B_MI.lnk=B_RI.lnk;

                setTimeout("Book_Next_Delay()",Book_NextPage_Delay)
            }
            else 
            {
                setTimeout("BookImages()",50)
            }
        }
        else 
        {
            setTimeout("BookImages()",50)
        }
    }

    function Book_Next_Delay()
    {
        if(B_CrImg==Book_Image_Sources.length)
        {
            B_CrImg=0;
        }

        B_RI.src=B_Pre_Img[B_CrImg].src;
        B_RI.lnk=Book_Image_Sources[B_CrImg];
        B_MI.style.zIndex=2;
        B_LI.style.zIndex=1;
        B_Angle=0;
        B_CrImg+=1;
        
        setTimeout("BookImages()",50)
    }

    function B_LdLnk()
    {
        if(this.lnk)
        {
            window.location.href=this.lnk
        }
    }
    
    function B_Stp()
    {
        B_Stppd=true;
        this.style.cursor=this.lnk?"pointer":"default"
    }
    
    function B_Rstrt()
    {
        B_Stppd=false
    }
    

  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;

        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;"><xsl:text> </xsl:text>
    </div>

    <div id="Book" style="position:relative;">
        <img src="placeholder.png" width="404"><xsl:text> </xsl:text></img>
    </div>
    
    </td></tr>
    <tr><td><button id="switchImageDisplay" style="display:none; float:right;">Flip Photos</button></td></tr>
    </tbody></table>

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

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)
            {
                var button = document.getElementById("switchImageDisplay");
                var BookDiv = document.getElementById("Book");
                var CollDiv = document.getElementById("collagewrapper");

                button.style.display = "block";
                button.onclick = function()
                {
                    if(button.innerHTML == "Flip Book")
                    {
                        BookDiv.style.display = "block";
                        CollDiv.style.display = "none";
                        button.innerHTML = "Collage";
                    }
                    else
                    {
                        BookDiv.style.display = "none";
                        CollDiv.style.display = "block";
                        button.innerHTML = "Flip Book";
                    }
                }
                initCollage();
                collageNextImage(1);
                ImageBook();
                BookDiv.style.display = "none";
            }
        },
        failed: function(data){alert("FAILED");}
    };
    
    YAHOO.util.Connect.asyncRequest("GET", url , callback);
}

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


</xsl:stylesheet>