source: main/trunk/model-sites-dev/twso/collect/twso/transform/pages/about.xsl@ 34223

<?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">
        <script language="javascript" type="text/javascript">
            <xsl:text disable-output-escaping="yes">
                window.onload=function(){getImages()};

                var _allImagesURLS = new Array();
                var _allImages = new Array();
                var _collageDelayMsec = 10000;
                var currentImage;
                var cFrameNum;
                var timer;
                //var Caption = "More Pre-history";
        
                function collageNextImage(collageFrameNum)
                {


                    cFrameNum = collageFrameNum;
                    var wrapper = $("#collagewrapper");
                    var wrapperHeight = 586;
                    if(window != window.top){wrapperHeight=400;}
                    var wrapperWidth = wrapper.width();
                    
                    currentImage = _allImages[collageFrameNum % _allImages.length];
                    var imageHeight = currentImage.height();
                    var imageWidth = currentImage.width();
                    
                    var x = Math.random() * (wrapperWidth - imageWidth) + wrapper.offset().left;
                    var y = Math.random() * (wrapperHeight - imageHeight) + wrapper.offset().top;

                    currentImage.css({position:"absolute", visibility:"visible", opacity:"1"});
                    currentImage.offset({top:y, left:x});

                    wrapper.append(currentImage);


                    
                    currentImage.fadeTo(25000, 0, function()
                    {
                        $(this).css({position:"absolute", top:"0px", left:"0px", visibility:"hidden"});
                    });
                    
                    timer = setTimeout(function()
                    {
                        
                        collageNextImage(collageFrameNum + 1);
                    }, _collageDelayMsec);
                }

                function initCollage()
                {

                    for(var i = 0; i &lt; _allImagesURLS.length; i++)
                    {
                        var wrapper = $("#collagewrapper");
                        var newImage = $("&lt;img&gt;", {src:_allImagesURLS[i]});
                        newImage.css({position:"absolute", top:"0px", left:"0px", visibility:"hidden"});
                        wrapper.append(newImage);
                        
                        var wrapperHeight = 586;
                        if(window != window.top){wrapperHeight=400;}
                        var wrapperWidth = wrapper.width();
                    
                        var imageHeight = newImage.height();
                        var imageWidth = newImage.width();
                        
                        if(imageWidth &gt; wrapperWidth || imageHeight &gt; wrapperHeight)
                        {
                            var xDifference = imageWidth - wrapperWidth;
                            var yDifference = imageHeight - wrapperHeight;
                            if(xDifference > yDifference)
                            {
                                newImage.width(wrapperWidth);
                            }
                            else
                            {
                                newImage.height(wrapperHeight);
                            }
                        }
                        _allImages.push(newImage);
                    }

                    
                }

                function changeClick(){

                    var div = document.getElementById("collagewrapper");
                    div.onclick = function(){pause()};
                    
                }

                function pause(){
        
                    currentImage.stop();
                    clearTimeout(timer);
                    var div = document.getElementById("collagewrapper");
                    div.onclick = function(){stopPause()};
                
                    
                    
                }

                function stopPause(){
                    
                    currentImage.fadeTo(25000, 0, function()
                    {
                        $(this).css({position:"absolute", top:"0px", left:"0px", visibility:"hidden"});
                    });

                    timer = setTimeout(function()
                    {
                        collageNextImage(cFrameNum + 1);
                    }, _collageDelayMsec);

                    
                    changeClick()
                }

                function caption(event){
                    
                    var div = document.getElementById('collagewrapper');
                    var node = document.createElement('div');
                    node.style.top = event.layerY + 'px';   
                    node.style.left = event.layerX + 'px';
                    node.style.textAlign = "center";
                    node.style.background = "#FEFDE1";
                    node.style.border = "1px solid black";
                    node.style.position = "absolute";
                    node.id = 'popBox';
                    node.innerHTML = Caption;
                    div.appendChild(node);
                    
                }

                function hideCaption(){
                    node = document.getElementById('popBox');
                    node.parentNode.removeChild(node);
                }

                
            </xsl:text>
        </script>
        <div id="collagewrapper" style="width: 800px; height: 643px; position: relative; background-image:url('sites/{$site_name}/collect/twso/images/oldimagebackground1.png'); text-align: center;" alt="Click to start/stop a collage of newspaper clippings" title="Click to start/stop a collage of newspaper clippings" onclick="collageNextImage(0); changeClick();" onmouseover="" onmouseout=""><xsl:text> </xsl:text></div>
        <!--<div id="text" style="text-align: center; background-color:#ffffff; background-color:rgba(255, 255, 255, 0.3)">
            <div id="textcontent">
                <h3>Hamilton Orchestral Society, 1903</h3>(precursor to the Trust Waikato Symphony Orchestra)
            </div>
        </div>-->
        <script type="text/javascript">
            <xsl:text disable-output-escaping="yes">
                
              function getImages()
              
                { 
                var extregex = "image.*(jpg$|png$)";
                extregex = extregex.replace(/\|/g, "%7C");
                
                var url = gs.xsltParams.library_name + "?a=g&amp;s=GetAllImagesInCollection&amp;rt=r&amp;s1.extregex="+extregex+"&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"));
                                
                                _allImagesURLS.push(imageURL);
                            }
                            
                            if(_allImagesURLS.length &gt; 0)
                            {
                                initCollage();
                                //collageNextImage(0);
                            }
                        },
                        failed: function(data){alert("FAILED");}
                    };
                    
                    YAHOO.util.Connect.asyncRequest("GET", url , callback);
                }
            </xsl:text>
        </script>
    </xsl:template>
</xsl:stylesheet>