//************************************************************************************* 
// File     :   mf_alvis_gallery.js
// Version  :   1.4
// Requires :   mf_domLibrary_0.1.js, prototype.js(1.6+)
// Author   :   Design/Concept - Heather Alvis  
//              Code - Kyle Weems (ksw), Rusty Swayne (rss)
// Origin   :   mindfly.com
// Created  :   August 21, 2007
// Modified :   July 3,2007 (ksw)
// Purpose  :   Formats the images in the gallery page with a slide-show appearance.
//*************************************************************************************

// Version History (only for changes of at least 0.0.1 in version number)
// ===============
// Version 1.0   (08/21/2007) - Basic functionality. Strips existing list into the Alvis Gallery slider. Clicking on an image in slider provides fullsize image with associated cite, header, description.
// Version 1.1   (08/22/2007) - Added collapse/expand gallery feature.
// Version 1.2   (08/23/2007) - Made major changes to the code to write elements into the DOM instead of inserting them as text snippets. This prevents conflicts with other scripts.
// Version 1.3   (08/24/2007) - Added 'previous photo' and 'next photo' "buttons" to the displayAlvisGalleryPhoto() function.
// Version 1.3.1 (08/24/2007) - Added some logic to check for presence of Alvis Gallery elements before attempting to run functions.
// Version 1.3.2 (09/06/2007) - Fixed an error in navigation when an image is clicked on and then 'next photo' is pushed. Error occured because function was treating variable 'num' as a string, which when added to 1 only added two strings together. Forced JS to convert it to an integer first by multiplying num by 1. Fixed error.
// Version 1.3.3 (09/20/2007) - Added code near the end of setupAlvisGallery() to remove the first list item in the galleryList (so that it doesn't appear as a duplicate when the gallery is expanded).
// Version 1.4   (07/03/2007) - Replaced display.style references with .addClassName or .removeClassName functions, as well as other Prototype 1.6 fixes.


//=============================================================================================
// Global Variables
//=============================================================================================

// set gallery to the id name of the list that holds the list items with images.
var gallery = 'ulGalleryImages'; 

// set galleryListItem to the class name of the list items that hold the images to
// be put into the Alvis Gallery slideshow.
var galleryListItem = 'liGalleryImages';

// set galleryPlaceBefore to the id of the element that the Alvis Gallery slideshow
// will be inserted before.
var galleryPlaceBefore = 'ulGalleryImages';

// holds the value of the gallery size
var galleryMax = 0;


//=============================================================================================
// setupAlvisGallery()
//=============================================================================================
// Called when the page is loaded. This function finds all the list items of the right class
// and puts them in the Alvis Gallery slider. It then hides the list that the original items
// came from, and puts the default pic (0) up to see.
function setupAlvisGallery()
{
    // Get an array of all list items with the class name for use with Alvis Gallery.
    //var galleryList = document.getElementsByClassName(galleryListItem);
    var galleryList = $$("li." + galleryListItem);
    // If there were any list items found, proceed.
    if(galleryList.length)
    {

        // Insert the Alvis Gallery's element before the element you want them above in the page.
        var expander            =   Element.extend(document.createElement("div"));
        expander.id             =   "alvisExpander";
        var spanExpand          =   Element.extend(document.createElement("span"));
        spanExpand.onclick      =   function() {expandAlvisGallery()};
        spanExpand.appendChild(document.createTextNode("Expand Gallery"));
        expander.appendChild(spanExpand);
        var divGallery          =   Element.extend(document.createElement("div"));
        divGallery.id           =   "alvisGallery";
        ulGallery               =   Element.extend(document.createElement("ul"));
        ulGallery.id            =   "ulAlvisGallery";                    
        // Set the x offset for the slider's pictures to zero.
        var xOff = 5;
        navLIcounter = 0;
        galleryList.each(function(li) 
            {
            // Get the image in the current list item
            var lii               = li.getElementsBySelector('img');
            var listItemImage     = lii[0];  
            // Grab it's width and height
            var imgX              = listItemImage.offsetWidth;
            var imgY              = listItemImage.offsetHeight; 
            
            var navLI       = li.cloneNode(true);
            navLI.id        = "liAlvis_" + navLIcounter;
            navLI.onclick   = function () 
                {
                var temp = new Array();
                temp     = this.id.split('_');
                displayAlvisGalleryPhoto(temp[1]);
                };
            // Create newX and newY for use with the slider image sizing when the time comes.
            var newY            = 75;
            var newX            = Math.round((75/imgY)*imgX);
            var imgs            = navLI.getElementsBySelector('img');
            imgs[0].style.width = newX + 'px';
            imgs[0].style.height= newY + 'px';
            navLI.style.left    = xOff + 'px';
            ulGallery.appendChild(navLI);
            xOff += newX + 7;
            navLIcounter++;
            galleryMax = navLIcounter;
            }); 
        divGallery.appendChild(ulGallery);            
        var divGalleryPhoto     =   Element.extend(document.createElement("div"));
        divGalleryPhoto.id      =   "alvisGalleryPhoto";
        var divLine             =   Element.extend(document.createElement("div"));
        divLine.id              =   "divLine";
        var isExpanded          =   Element.extend(document.createElement("input"));
        isExpanded.id           =   "isExpanded";
        isExpanded.type         =   "hidden";
        isExpanded.value        =   "0";
        var insert_point        =   $("gallery");
        insert_point.insertBefore(expander, $(galleryPlaceBefore));
        insert_point.insertBefore(divGallery, $(galleryPlaceBefore));
        insert_point.insertBefore(divGalleryPhoto, $(galleryPlaceBefore));
        insert_point.insertBefore(divLine, $(galleryPlaceBefore));
        insert_point.insertBefore(isExpanded, $(galleryPlaceBefore));
        // Destroy the first item on the list.
        galleryList[0].remove();
        
        
    } // end of if(GalleryList.length)
    expandAlvisGallery();
    displayAlvisGalleryPhoto(0);
}   // end of function setupAlvisGallery()


//=============================================================================================
// displayAlvisGalleryPhoto()
//=============================================================================================
// Called when an image in the Alvis Gallery slider is clicked. This changes the image being
// displayed to the image just clicked.
function displayAlvisGalleryPhoto(num)
{
    if($('alvisGalleryPhoto'))
    {

        // Get the list item that was clicked.
        var galleryPhoto = $('liAlvis_'+num);
        // Insert the HTML from that item into the alvisGalleryPhoto div.
        var photoItemParent = $('alvisGalleryPhoto').parentNode;
        var photoItem       = Element.extend(document.createElement("div"));
        photoItemParent.replaceChild(photoItem, $('alvisGalleryPhoto'));
        photoItem.id = 'alvisGalleryPhoto';
        // Create the photo navigation div
        var photoItemNav = Element.extend(document.createElement('div'));
        photoItemNav.id  = 'galleryPhotoNav';
        // If you're not on the first photo, add a previous photo button to photo navigation div
        if(num > 0)
        {
            var photoItemNavPrev = Element.extend(document.createElement('span'));
            photoItemNavPrev.id  = 'galleryPhotoNavPrev';
            photoItemNavPrev.appendChild(document.createTextNode("Previous Photo"));
            photoItemNavPrev.onclick   = function () { displayAlvisGalleryPhoto((num * 1) - 1); };
            photoItemNav.appendChild(photoItemNavPrev);
        }
        // If you're not on the last photo, add a next photo button to photo navigation div
        if(num < (galleryMax-1) )
        {
            var photoItemNavNext = Element.extend(document.createElement('span'));
            photoItemNavNext.id  = 'galleryPhotoNavNext';
            photoItemNavNext.appendChild(document.createTextNode("Next Photo"));
            photoItemNavNext.onclick   = function () { displayAlvisGalleryPhoto((num * 1) + 1); };
            photoItemNav.appendChild(photoItemNavNext);
        }    
        // append the photo navigation div in front of alvisGalleryPhoto
        if($('galleryPhotoNav'))
        {
            photoItemParent.replaceChild(photoItemNav, $('galleryPhotoNav'));

        } else
        {
            $('gallery').insertBefore(photoItemNav, $('alvisGalleryPhoto'));
        }
        if(galleryPhoto)
        {
            for(i=0; i < galleryPhoto.childNodes.length; i++) 
                {
                    photoItem.appendChild(galleryPhoto.childNodes[i].cloneNode(true));
                }
        }
        var gpi = $('alvisGalleryPhoto').getElementsBySelector('img');
        galleryPhotoImage = gpi[0];
        galleryPhotoImage.style.width = '';
        galleryPhotoImage.style.height = '';
    }
} // end of function displayAlvisGalleryPhoto()


//=============================================================================================
// expandAlvisGallery()
//=============================================================================================
// Function called when the 'expand gallery' or 'collapse gallery' text is clicked at the top of
// Alvis Gallery. Depending on whether the gallery is expanded or collapsed, it'll do the reverse.
function expandAlvisGallery()
{
    if($('isExpanded'))
    { 
        var toggle = $('isExpanded').value;
        if(toggle == 1)
        {
            // If the Gallery is collapsed, expand it. first set the functional text to read 'Collapse Gallery'
            var span = $('alvisExpander').getElementsBySelector('span'); 
            span[0].innerHTML = "Click to Collapse Gallery";
            // Make the slider and dividing line at the bottom dissapear.
            $('alvisGallery').addClassName('displayNone');
            $('alvisGallery').removeClassName('displayBlock');
            $('divLine').addClassName('displayNone');
            $('divLine').removeClassName('displayBlock');
            // Set the top picture to the 1st image.
            displayAlvisGalleryPhoto(0);
            $('galleryPhotoNav').addClassName('displayNone');
            $('galleryPhotoNav').removeClassName('displayBlock');
            // Make the full gallery list appear.
            $(gallery).addClassName('displayBlock');
            $(gallery).removeClassName('displayNone');
            $('isExpanded').value = 0;
        }
        else if (toggle == 0)
        {
            // If the gallery is expanded, collapse it. First set the functional text to read 'Expand Gallery'
            var span = $('alvisExpander').getElementsBySelector('span'); 
            span[0].innerHTML = "Click to Expand Gallery";
            // Make the slider and dividing line at the bottom appear.
            $('alvisGallery').addClassName('displayBlock');
            $('alvisGallery').removeClassName('displayNone');
            $('divLine').addClassName('displayBlock');
            $('divLine').removeClassName('displaynone');
            // Make the full gallery list disspaear.
            displayAlvisGalleryPhoto(0);
            if($('galleryPhotoNav'))
            {
                $('galleryPhotoNav').addClassName('displayBlock');
                $('galleryPhotoNav').removeClassName('displayNone');
            }
            $(gallery).addClassName('displayNone');
            $(gallery).removeClassName('displayBlock');
            $('isExpanded').value = 1;
        }
    }
} // end of function expandAlvisGallery


addLoadEvent(setupAlvisGallery);