/// <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.Volksblad.UI.Site.GalleryAjax.GetLinkedImageGalleriesForCollection(_siteId, "Fotos/Kategorie Fotos", pageNo, _galleryDetailItemLimit, getLinkedImagesForGalleryResult);
    }
    else {
        //used for all galleries
        TwentyFour.Sites.Volksblad.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;Bladsy <span class="bold">' + result.CurrentPage + '</span> van <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;">vorige</a>';
    else
        itemTemplate = '<a href="#" id="imgPreviousTop" onclick="loadPrevImage(); return false; " class="prev absolute">vorige</a>';

    itemTemplate = itemTemplate + '<div>&nbsp;&nbsp;Foto <span id="currentImageNoDisplayTop" class="bold">' + currentImageNo + '</span> van <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">volgende</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;">vorige</a>';
    else
        itemTemplate = '<a href="#" id="imgPrevious" onclick="loadPrevImage(); return false; " class="prev absolute">vorige</a>';

    itemTemplate = itemTemplate + '<div>&nbsp;&nbsp;Foto <span id="currentImageNoDisplay" class="bold">' + currentImageNo + '</span> van <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">volgende</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;
}