//************************************************************************************* 
// File     :   swre_details_gallery.js
// Version  :   1.1
// Requires :   mf_domLibrary_0.1.js, prototype.js
// Author   :   Kyle Weems (ksw)
// Origin   :   mindfly.com
// Created  :   November 2, 2007
// Modified :   November 6, 2007 (ksw)
// Purpose  :   On the Listings Detail page, causes the main photo to switch to whichever thumbnail the user
//              clicks on.
//*************************************************************************************

// Version History (only for changes of at least 0.0.1 in version number)
// ===============
// Version 1.0   (11/02/2007) - Basic functionality.
// Version 1.1   (11/06/2007) - Added popup div when user clicks on the main photo.

//=============================================================================================
// loadDetailsGallery()
//=============================================================================================
// Called on page load. Assigns the first thumbnail to the main photo, and adds an onclick event
// to all the thumbnails so that their image is put into the main photo when they are clicked.
function loadDetailsGallery()
{
    // If there's a thumbnail...
    if($('detailsThumbnail_1'))
    {
        // ... then get the url attached to the first thumbnail.
        var firstPhotoURL = $('detailsThumbnail_1').readAttribute('src'); 
        // Attach that url to the main photo.
        $('imgDetailsPhoto').src = firstPhotoURL;
    }
    
    // If there's an imgDetailsPhoto, then attach an onclick event to the main photo to pop up a div when it's clicked.
    if($('imgDetailsPhoto'))
    {
        $('imgDetailsPhoto').onclick = function(){ showBigPhoto();}
    }
    
    // Attach an onclick event to the popup's close box to hide the popup when it's clicked.
    if($('closeBigPhotoPopup'))
    {
        $('closeBigPhotoPopup').onclick = function() { hideBigPhoto(); }
    }
    
    var thumbnailPos = 0;
    
    // Cycle through up to 10 thumbnails.
    for(i=1;i<11;i++)
    {
        // If a thumbnail #i exists...
        if($('detailsThumbnail_'+i))
        {
            //... then attach an onclick event to change the main photo when it's clicked on.
            $('detailsThumbnail_'+i).onclick = function(){ changeMainPhoto(this.id);}
            //... and position the li it's in so it's in the scrollbar properly.
            $('liDetailsGallery_'+i).style.position = 'absolute';
            $('liDetailsGallery_'+i).style.left     = thumbnailPos + 'px';
            $('liDetailsGallery_'+i).style.top      = '0px';
            thumbnailPos = thumbnailPos + $('detailsThumbnail_'+i).offsetWidth + 5;
        }
    }
} // end of function loadDetailsGallery()


//=============================================================================================
// changeMainPhoto()
//=============================================================================================
// Called by onclick events on images assigned by loadDetailsGallery(). Gets the URL attached to
// the image 'photo' and then assigns that url to the main photo.
function changeMainPhoto(photo)
{
    // Get the url for the photo clicked on.
    var photoURL = $(photo).readAttribute('src');
    // Attach the photo's url to the main photo.
    $('imgDetailsPhoto').src = photoURL;
    
} // end of function changeMainPhoto(photo)


//=============================================================================================
// showBigPhoto()
//=============================================================================================
// Called when a user clicks on the main photo. Makes visible a 'popup' div that has a 'full size'
// version of the image.
function showBigPhoto()
{
    // Get the current url for the main photo, and put it into the popup.
    $('imgBigPhotoPopup').src = $('imgDetailsPhoto').readAttribute('src');
    // Make the popup (and its shadow) visible.
    $('bigPhotoPopup').style.display = 'block';  
    $('bigPopupShadow').style.display = 'block';
    // Get the size of the photo.
    var photoWidth = $('imgBigPhotoPopup').offsetWidth;
    // If the photo is too large...
    if (photoWidth > 600)
    {
        // Then set the width to 600px.
        photoWidth = 600;
    } 
    // Make sure the image, popup, and popup's shadow are all the same width.
    $('imgBigPhotoPopup').style.width = photoWidth + 'px';
    $('bigPhotoPopup').style.width    = photoWidth + 'px';
    $('bigPopupShadow').style.width   = photoWidth + 'px';
    // Get the image's height.
    var photoHeight = $('imgBigPhotoPopup').offsetHeight;
    // Make sure the popup and popup's shadow are the same height as the image.
    $('bigPhotoPopup').style.height   = photoHeight + 'px';
    $('bigPopupShadow').style.height  = photoHeight + 'px';
} // end of function showBigPhoto()


//=============================================================================================
// hideBigPhoto()
//=============================================================================================
// Called when a user clicks on the big popup's close button. Hides the popup.
function hideBigPhoto()
{
    // Hide the popup and the popup's shadow.
    $('bigPhotoPopup').style.display = 'none';  
    $('bigPopupShadow').style.display = 'none';
} // end of function hideBigPhoto()

addLoadEvent(loadDetailsGallery);