/// <reference path="../../prototype.js" />

// GalleryDetail.js

var scf;
var currentgallerypage = null;
var galpageback = false;
var currentImageNo = 1;
var numberItem = null;
var totalImages = null;

Event.observe(window, 'load',
    function() { 
   
        loadGallerieItems(1);
    }
);

function loadGallerieItems(pageNo) {

    clearImageViewerDiv();
    clearImageThumbnailDiv();
    
    hideThumbailLeftRightButtons();

    showLoaderImages();
       
    if(typeof(_isCatImages ) !== 'undefined') {
        //used for category images
        TwentyFour.Sites.News.UI.Site.GalleryAjax.GetLinkedImageGalleriesForCollection(_siteId, "Images/Category Images", pageNo, _galleryDetailItemLimit, getLinkedImagesForGalleryResult); 
    }
    else {
        //used for all galleries
        TwentyFour.Sites.News.UI.Site.GalleryAjax.GetLinkedImagesForGalleryPage(_siteId, _galleryId, pageNo, _galleryDetailItemLimit, getLinkedImagesForGalleryResult)
    }
}

function getLinkedImagesForGalleryResult(response) {
    if (response.error == null) {
        hideLoaderImages();
    
        setupLeftRightButtons(response.value);

        setupLeftRightMainImageButtonsTop(response.value); 
        
        setupLeftRightMainImageButtons(response.value);  
        
        loadImageViewerDiv(response.value);
        
        loadImageThumbnailDiv(response.value);
        
        showImageController();
         
        scf = new SimpleCrossfader({ holdingElementId: 'ulGalleryImageViewer', childElementClass: 'crossfadediv' });
        
        // check if we are moving back to a previous page, if so, set the current slide to the last one for the new page.
        if (galpageback) {
            galpageback = false;
            scf.gotoSlide(scf.elements.length - 1);
        }
        
               
    }
    else {
        alert('Gallery images failed to load.  Please try again later.');
    }
}


function loadImageViewerDiv(result) {
    result.Items.each(function(imageItem, index) {

        var width = imageItem.Width;
        var caption = imageItem.Caption;
        var blurb = imageItem.Blurb;
        var heading = imageItem.Caption;
        
        if (caption == null) 
           caption= "";
       
       if ((heading == null) || (heading == ""))
            heading = "";
       else
            heading = "<h4 class=\"bold left\">" + heading + " </h4>";
            
       if (blurb == null)
           blurb= "";
           
        if (width > 620)
            width = 620;
        
        var itemTemplate = '<div class="crossfadediv" style="display:none;">\
                             <a href="#" onclick="loadNextImage(); return false;">\
                             <img src="' + imageItem.CdnUrl + '" style="width:' + width + 'px;" alt="' + caption + '" />\
                             </a>\
                             <div class="caption">' + heading + '<p>' + blurb;
                              
        if((imageItem.Source != null)&&(imageItem.Source != '')&&(typeof(_isCatImages ) == 'undefined'))
                            itemTemplate += ' (' + imageItem.Source + ')</p></div></div>';
        else
                            itemTemplate += '</p></div></div>';
                            
        new Insertion.Bottom('ulGalleryImageViewer', itemTemplate);
    });
}

function loadImageThumbnailDiv(result) {
    result.Items.each(function(imageItem, index) {
        var imageUrl = "";
        var indexNumberItem = null;
        
        if (imageItem.HasThumbnail)
            imageUrl = imageItem.Thumbnail.CdnUrl;// + '?w=85&h=85k&id=' + imageItem.Thumbnail.Id + '&p=true';
        
        //Set values for image number
        if (currentgallerypage.CurrentPage > 1) 
        {
            indexNumberItem = (index + 1) + (_galleryDetailItemLimit * (currentgallerypage.CurrentPage-1));   
        }
        else
        {
            indexNumberItem = index + 1;
        }
        

        var itemTemplate = '<div class="g-outer">\
                              <div class="g-middle">\
                                  <div class="g-inner">\
                                    <div class="item left"><a href="javascript:void(0);" onclick="scf.gotoSlide(' + index + ');updateNumberDisplay(' + (indexNumberItem) + ');"><img src="' + imageUrl + '"  /></a></div>\
                                  </div>\
                              </div>\
                            </div>';
    
        new Insertion.Bottom('divGalleryThumbnails', itemTemplate);
    });
}

function clearImageViewerDiv() {
    var childElements = $('ulGalleryImageViewer').childElements();
    
    childElements.each(function(childElement) {
        childElement.remove();
    });
}

function clearImageThumbnailDiv() {
    var childElements = $('divGalleryThumbnails').childElements();
    
    childElements.each(function(childElement) {
        childElement.remove();
    });
}

function hideLoaderImages() {
    $('divLoaderLeft').setStyle({ display: 'none' });
    $('divLoaderRight').setStyle({ display: 'none' });
}

function showLoaderImages() {
    $('divLoaderLeft').setStyle({ display: '' });
    $('divLoaderRight').setStyle({ display: '' });
}

function showThumbailLeftRightButtons() {
    $('divThumbnails').setStyle({ display: '' });
}

function hideThumbailLeftRightButtons() {
    $('divThumbnails').setStyle({ display: 'none' });
}

function showMainLeftRightButtons() {
    $('divMainImageButtons').setStyle({ display: '' });
    $('divMainImageButtonsTop').setStyle({ display: '' });
}

function hideMainLeftRightButtons() {
    $('divMainImageButtons').setStyle({ display: 'none' });
    $('divMainImageButtonsTop').setStyle({ display: 'none' });
}


function showImageController() {
    $('img_controller').setStyle({ display: '' });
    $('img_controllerTop').setStyle({ display: '' });
}

function hideImageController() {
    $('img_controller').setStyle({ display: 'none' });
    $('img_controllerTop').setStyle({ display: 'none' });
}

function setupLeftRightButtons(result) {
    // clear the left image
    var childElements = $('divThumbnails').childElements();
    
    childElements.each(function(childElement) {
        childElement.remove();
    });
    
    var itemTemplate = "";
    
    if (result.PreviousPage != null) {

        itemTemplate = '<a href="#" onclick="loadGallerieItems(' + result.PreviousPage + '); updateNumberOnPagingNav(' + result.PreviousPage + '); return false;" class="prev absolute"></a>';
    }

    itemTemplate = itemTemplate + '<div>&nbsp;&nbsp;Page <span class="bold">' + result.CurrentPage + '</span> of <span class="bold">' + Math.ceil(result.TotalUnPaged/_galleryDetailItemLimit) + '</span>&nbsp;&nbsp;</div>';
    
    if (result.NextPage != null) {
        itemTemplate = itemTemplate + '<a href="#" onclick="loadGallerieItems(' + result.NextPage + '); updateNumberOnPagingNav(' + result.NextPage + '); return false;" class="next absolute"></a>';
    }
    
    new Insertion.Bottom('divThumbnails',itemTemplate);
    showThumbailLeftRightButtons();
}

function setupLeftRightMainImageButtonsTop(result) {
    // clear the left image
    var childElements = $('divMainImageButtonsTop').childElements();

    childElements.each(function(childElement) {
        childElement.remove();
    });

    var itemTemplate = "";

    totalImages = result.TotalUnPaged;
    //used for next page when paging images
    currentgallerypage = result;

    //Set next image display
    if (currentImageNo == 1)
        itemTemplate = '<a href="#" id="imgPreviousTop" onclick="loadPrevImage(); return false; " class="prev absolute" style="display:none;">previous image</a>';
    else
        itemTemplate = '<a href="#" id="imgPreviousTop" onclick="loadPrevImage(); return false; " class="prev absolute">previous image</a>';

    itemTemplate = itemTemplate + '<div>&nbsp;&nbsp;Image <span id="currentImageNoDisplayTop" class="bold">' + currentImageNo + '</span> of <span class="bold">' + result.TotalUnPaged + '</span>&nbsp;&nbsp;</div>';

    if (currentImageNo != result.TotalUnPaged)
        itemTemplate = itemTemplate + '<a href="#" id="imgNextTop" onclick="loadNextImage(); return false; " class="next absolute">next image</a>';

    new Insertion.Bottom('divMainImageButtonsTop', itemTemplate);
}

function setupLeftRightMainImageButtons(result) {
    // clear the left image
    var childElements = $('divMainImageButtons').childElements();
    
    childElements.each(function(childElement) {
        childElement.remove();
    });
    
    var itemTemplate = "";
    
    totalImages = result.TotalUnPaged;
    //used for next page when paging images
    currentgallerypage = result;
   
    //Set next image display
    if (currentImageNo == 1)
        itemTemplate = '<a href="#" id="imgPrevious" onclick="loadPrevImage(); return false; " class="prev absolute" style="display:none;">previous image</a>';
    else
        itemTemplate = '<a href="#" id="imgPrevious" onclick="loadPrevImage(); return false; " class="prev absolute">previous image</a>';
        
    itemTemplate = itemTemplate + '<div>&nbsp;&nbsp;Image <span id="currentImageNoDisplay" class="bold">' + currentImageNo + '</span> of <span class="bold">' + result.TotalUnPaged + '</span>&nbsp;&nbsp;</div>';
    
    if (currentImageNo != result.TotalUnPaged)
        itemTemplate = itemTemplate + '<a href="#" id="imgNext" onclick="loadNextImage(); return false; " class="next absolute">next image</a>';
    
    new Insertion.Bottom('divMainImageButtons',itemTemplate);
    showThumbailLeftRightButtons();
}

//Updates the number display below the gallery image and hides buttons
function updateNumberDisplay(numberItem)
{
    if (numberItem != null)
    {
        document.getElementById("currentImageNoDisplay").innerHTML = numberItem;
        document.getElementById("currentImageNoDisplayTop").innerHTML = numberItem;
        currentImageNo = numberItem;
    }
    
     //Hide or display next previous buttons
    if (currentImageNo > 1) {
        $('imgPrevious').setStyle({ display: '' });
        $('imgPreviousTop').setStyle({ display: '' });
    }
    else {
        $('imgPrevious').setStyle({ display: 'none' });
        $('imgPreviousTop').setStyle({ display: 'none' });
    }
    if (currentImageNo == totalImages)
    {
         if (null === $('imgNext'))
        {}
        else
        {
            $('imgNext').setStyle({ display: 'none' });
        }
        
         if (null === $('imgNextTop'))
        {}
        else
        {
            $('imgNextTop').setStyle({ display: 'none' });
        }
    }
    else
    {
        if (null === $('imgNext'))
        {}
        else
        {
            $('imgNext').setStyle({ display: '' });
        }
        
        if (null === $('imgNextTop'))
        {}
        else
        {
            $('imgNextTop').setStyle({ display: '' });
        }        
        
    }
        
}

function updateNumberOnPagingNav(PageNo)
{
    if ((currentImageNo >= 1) && (PageNo > 1))
    {
         if (currentImageNo == 1)
            currentImageNo = (currentImageNo) + (_galleryDetailItemLimit * (PageNo-1));   
         else
            currentImageNo = (1) + (_galleryDetailItemLimit * (PageNo-1));   
            
            updateNumberDisplay(currentImageNo);
    }
    else if ((currentImageNo >= 1) && (PageNo == 1))
    {
         currentImageNo = 1;
         updateNumberDisplay(currentImageNo);
    }
}

function loadNextImage() {

    if (scf) {
        // check if we are on the last image
        var tmpSlideNumber = scf.elementIndex + 1;
    	
	    if (tmpSlideNumber == scf.elements.length) {
	        if (currentgallerypage) {
	            // if we are on the last image and there is a next page, move to it
	            if (currentgallerypage.NextPage != null) {
    	            loadGallerieItems(currentgallerypage.NextPage);
    	        }
	        }
	    } else {
            scf.next();
        }
        if((currentImageNo + 1) <= totalImages)
        {
            updateNumberDisplay(++currentImageNo);
        }
    }
    return false;
}


function loadPrevImage() {

    if (scf) {
        // check if we are on the last image
        var tmpSlideNumber = scf.elementIndex - 1;
    	
	    if (tmpSlideNumber < 0) {
    	    if (currentgallerypage) {
    	     // if we are on the last image and there is a prev page, move to it
    	        if (currentgallerypage.PreviousPage != null) {
    	            // set flag so we know to go to the last image on the page.
    	            galpageback = true;
    	            loadGallerieItems(currentgallerypage.PreviousPage);
    	        }
	        }
	    } else {
	        scf.previous();
	    }
	    updateNumberDisplay(--currentImageNo);
    }   
    return false;
}