source: main/trunk/greenstone3/web/interfaces/default/js/collage_scripts.js--for-gs311@ 35811

window.onload=function(){ getImages() };

var _allImagesURLS = new Array();
var _allDocids = new Array();

var _allImages = new Array();

var _collageDelayMsec    = 4000; // used to be 10000
var _collageFadeTime     = 25000;
var _oversizedHeightFrac = 0.9;
var _oversizedWidthFrac  = 0.9;

var clonedImageQueue = new Array();
var anchoredClonedImageQueue = new Array();

var cFrameNum;
var timer;

var COLLAGE_DEBUG = true;

function removeClonedImage(clonedImage,anchoredClonedImage)
{
    clonedImagePos = clonedImageQueue.indexOf(clonedImage);
    if (clonedImagePos>=0) {
    clonedImageQueue.splice(clonedImagePos,1); // del element from array
    }
    else {
    // This shouldn't happen, unless there has been an issue with incorrectly removing an image
    // from the Queue
    if (COLLAGE_DEBUG) {
        console.log("**** Warning: in unpause::remove() failed to file cloned collage image: ");
        console.log(clonedImage);
    }
    }
    
    anchoredClonedImagePos = anchoredClonedImageQueue.indexOf(anchoredClonedImage);
    if (anchoredClonedImagePos>=0) {
    anchoredClonedImageQueue.splice(anchoredClonedImagePos,1); // del element from array
    }
    else {
    // This shouldn't happen, unless there has been an issue with incorrectly removing an image
    // from the Queue
    if (COLLAGE_DEBUG) {
        console.log("**** Warning: failed to file anchored cloned collage image: " + anchoredClonedImage);
    }
    }
    
    anchoredClonedImage.remove();
}


function scaleOversizedImage(newImage,imageWidth,imageHeight,wrapperWidthThreshold,wrapperHeightThreshold)
{
    var xDifference = imageWidth - wrapperWidthThreshold;
    var yDifference = imageHeight - wrapperHeightThreshold;

    //console.log("xDifference = " + xDifference);
    //console.log("yDifference = " + yDifference);
    
    var xScaleDown = 1;
    if (xDifference>0) {
    // oversized by width
    xScaleDown = Math.ceil(imageWidth / wrapperWidthThreshold);     
    }

    var yScaleDown = 1;
    if (yDifference>0) {
    // oversized by height
    yScaleDown = Math.ceil(imageHeight / wrapperHeightThreshold);       
    }

    var maxScaleDown = Math.max(xScaleDown,yScaleDown);

    // ****
    //console.log("**** scaling down by: " + maxScaleDown);
    
    newImage.height(imageHeight / maxScaleDown);
    newImage.width(imageWidth / maxScaleDown);        
}

function collageNextImage(collageFrameNum)
{
    collageFrameNum = collageFrameNum % _allImages.length; // keep counter cyclic    
    cFrameNum = collageFrameNum;
    
    var wrapper = $("#collagewrapper");
    
    var wrapperWidth = wrapper.width();
    var wrapperHeight = wrapper.height();
    //console.log("wrapperWidth = " + wrapperWidth);
    //console.log("wrapperHeight = " + wrapperHeight);
    
    var image_i_pos = collageFrameNum;
    var clonedImage = _allImages[image_i_pos].clone();

    var imageWidth = clonedImage[0].width;
    var imageHeight = clonedImage[0].height;
    //console.log("ImageWidth = " + imageWidth);
    //console.log("ImageHeight = " + imageHeight);
    
    if ((imageHeight == 0) || (imageWidth == 0)) {
    // looks like the image hasn't had time to load in yet
    console.log("For image-frame-number=" + image_i_pos + ", zero dimension encountered => skipping" );
    }
    else {

    var wrapperWidthThreshold  = wrapperWidth * _oversizedWidthFrac;
    var wrapperHeightThreshold = wrapperHeight * _oversizedHeightFrac;

    //console.log("wrapperWidthThreshold = " + wrapperWidthThreshold);
    //console.log("wrapperHeightThreshold = " + wrapperHeightThreshold);
    
    if (imageWidth > wrapperWidthThreshold || imageHeight > wrapperHeightThreshold)
    {
        scaleOversizedImage(clonedImage,imageWidth,imageHeight,wrapperWidthThreshold,wrapperHeightThreshold);
        // Need to update width and height, as scaledOversizedImage changes this
        imageWidth  = clonedImage.width();
        imageHeight = clonedImage.height();

        // ****
        //console.log("new ImageWidth = " + imageWidth);
        //console.log("new ImageHeight = " + imageHeight);

    }
    
    var x = Math.random() * (wrapperWidth - imageWidth);
    var y = Math.random() * (wrapperHeight - imageHeight);
    //console.log("var x = " + x);
    //console.log("var y = " + y);
    
    clonedImage.css({position:"absolute", visibility:"visible", opacity:"1"});
    clonedImage.offset({top:y, left:x});

    var doc_href = gs.xsltParams.library_name + "/collection/" + gs.cgiParams.c + "/document/" + _allDocids[image_i_pos];
    var anchoredClonedImage = $('<a>', {'href': doc_href, 'target': '_blank'} );
    anchoredClonedImage.append(clonedImage);
    
    wrapper.append(anchoredClonedImage);

    var queue_next_free_pos = clonedImageQueue.length;
    clonedImageQueue.push(clonedImage);
    anchoredClonedImageQueue.push(anchoredClonedImage);
    
    clonedImage.fadeTo(_collageFadeTime, 0, function() {
        removeClonedImage(clonedImage,anchoredClonedImage);
    });
    }
    
    timer = setTimeout(function() {
    collageNextImage(collageFrameNum + 1);
    }, _collageDelayMsec);
}


function initCollage()
{
    var wrapper = $("#collagewrapper");
    var wrapperHeight = wrapper.height();
    var wrapperWidth = wrapper.width();

    for (var i=0; i<_allImagesURLS.length; i++) {
    
    var newImage = $("<img>", {src:_allImagesURLS[i]});
    newImage.css({position:"absolute", top:"0px", left:"0px", visibility:"hidden"});

    wrapper.append(newImage);

    _allImages.push(newImage);
    }    
}



function pause()
{
    // console.log("**** pause()");

    if (clonedImageQueue.length > 0) {
    var queue_len = clonedImageQueue.length;
    for (var i=0; i<queue_len; i++) {
        var clonedImage = clonedImageQueue[i];
        clonedImage.stop(true,false); // clearQueue=true, jumpToEnd=false
    }
    }
    clearTimeout(timer);

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


function callbackClosure(clonedImageI, anchoredClonedImageI, callback) {
  return function() {
      return callback(clonedImageI, anchoredClonedImageI);
  }
}

function unpause()
{
    //console.log("**** unpause()");

    if (clonedImageQueue.length > 0) {
    var queue_len = clonedImageQueue.length;
    for (var i=0; i<queue_len; i++) {

        var clonedImageI = clonedImageQueue[i];
        var anchoredClonedImageI = anchoredClonedImageQueue[i];

        var opacity = clonedImageI.css('opacity');
        var fade_time = opacity * _collageFadeTime;
/*      
        clonedImageI.fadeTo(fade_time, 0,
                callbackClosure(clonedImageI, anchoredClonedImageI,
                        function(clonedImageJ, anchoredClonedImageJ) {
                            //console.log("***** unpause delayed remove with clonedImage:!");
                            //console.log(clonedImageJ);
                            removeClonedImage(clonedImageJ,anchoredClonedImageJ)
                   })
                  );
*/
        clonedImageI.fadeTo(fade_time, 0,
                callbackClosure(clonedImageI, anchoredClonedImageI, removeClonedImage)
                   );
    }
    }
    
    timer = setTimeout(function() {
    collageNextImage(cFrameNum + 1);
    }, _collageDelayMsec);


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


function getImages()
{ 
    var extregex = ".*(jpg$|png$)";
    extregex = extregex.replace(/\|/g, "%7C");
    
    var url = gs.xsltParams.library_name + "?a=g&s=GetAllImagesInCollection&rt=r&s1.extregex="+extregex+"&s1.c=" + gs.cgiParams.c + "&o=xml";      
    var callback = {
    success: function(data)
    {
        var xml = data.responseXML;

        var imageList = xml.getElementsByTagName("image");
        
        
        for(var i = 0; i < imageList.length; i++)
        {

        var imageElem = imageList[i];
        var docid = imageElem.getAttribute("docid");
        //console.log("****docid = " + docid);
        var imageURL = imageElem.firstChild.nodeValue;
        
        imageURL = imageURL.replace(/\\/gi, "/");
        imageURL = imageURL.replace(/%5C/gi, "/");
        
        imageURL = imageURL.substring(imageURL.indexOf("sites"));
        // assoc file paths now need to start with the library name
        _allImagesURLS.push("library/"+imageURL);
        _allDocids.push(docid);
        }
        
        if(_allImagesURLS.length > 0)
        {
        initCollage();
        var collagewrapper = document.getElementById("collagewrapper");
        collagewrapper.onclick = function(){ pause() };

        // start the collaging of the img tags
        collageNextImage(0);

        
        }
    },
    failed: function(data){alert("Failed to retrieve list of images to collage from Greenstone3 server");}
    };
    
    YAHOO.util.Connect.asyncRequest("GET", url , callback);
}