var photoAlbum = $('#albumPhotos');
var total = 0;
var showPopup = false;
var currentSlide = 0;
var currentAlbumId = '';
var pageSize = 6;

var pgNum = 1;

var isLoaded = false;
var auto = false;
var autoDelay = 4000;

var isWaterWheel = true;

var descHeight = 100;

var play = "";
function Start() {
    if (play == "") {
        play = window.setInterval("doAuto()", autoDelay);
    } else {
        Stop();
    }
}
function Stop() {
    if (play != "") {
        window.clearInterval(play);
        play = "";
    }
}
function Restart() {
    Stop();
    Start();
}

function doAuto() {
    if (auto && isLoaded) {
        var current = $('#albumPhotos .bxphoto').length;
        if (currentSlide + 1 < pageSize && currentSlide + 1 < total) {
            currentSlide = currentSlide + 1;
            photoAlbum.goToSlide(currentSlide); //photoAlbum.goToNextSlide();  //photoAlbum.goToSlide(currentSlide);
            var me = $('#albumPhotos .bxphoto').eq(currentSlide).find('img')[0];
            goToSlide($(me).attr('data-id'), $(me).attr('alt'));
            $('.pika-counter').html((currentSlide + 1) + '/' + total); doActiveSlide(currentSlide);
        } else {
            if (currentSlide + 1 < total) {
                var fetch = false;
                var pgFactor = 1;
                if (pgNum > 1) pgFactor = pgNum;
                if (currentSlide + 1 == pgFactor * 6) {
                    fetch = true;
                }
                if (fetch && (currentSlide + 1 % pageSize == 0 || currentSlide + 1 % pageSize == pageSize * pgNum || currentSlide + 1 % pageSize == pageSize && current < total)) {
                    pgNum++; //Math.ceil(total / current                    
                    LoadPhotoAlbumSlider(currentAlbumId, pgNum);
                } else {
                    currentSlide = currentSlide + 1;
                    photoAlbum.goToSlide(currentSlide); //photoAlbum.goToNextSlide();  //photoAlbum.goToSlide(currentSlide, 'next');
                    var me = $('#albumPhotos .bxphoto').eq(currentSlide).find('img')[0];
                    goToSlide($(me).attr('data-id'), $(me).attr('alt'));
                    $('.pika-counter').html((currentSlide + 1) + '/' + total); doActiveSlide(currentSlide);
                }
            } else {
                if (currentSlide + 1 == total) {
                    //currentSlide = currentSlide + 1;
                    //photoAlbum.goToNextSlide();  //photoAlbum.goToSlide(currentSlide, 'next');
                    //var me = $('#albumPhotos .bxphoto').eq(currentSlide).find('img')[0];
                    //goToSlide($(me).attr('data-id'), $(me).attr('alt'));
                }
            }
        }

        photoAlbum.setCurrentSlideIndex(currentSlide);
    }
}
function doSliderPrev() {
    var current = $('#albumPhotos .bxphoto').length;
    //photoAlbum.goToPrevSlide();
    currentSlide = currentSlide - 1;
    photoAlbum.goToSlide(currentSlide); // photoAlbum.goToPrevSlide();  //photoAlbum.goToSlide(currentSlide);
    var me = $('#albumPhotos .bxphoto').eq(currentSlide).find('img')[0];
    goToSlide($(me).attr('data-id'), $(me).attr('alt'));
    $('.pika-counter').html((currentSlide + 1) + '/' + total); doActiveSlide(currentSlide);

    photoAlbum.setCurrentSlideIndex(currentSlide);
}
function doSliderNext() {
    var current = $('#albumPhotos .bxphoto').length;
    if (currentSlide + 1 < pageSize && currentSlide + 1 < total) {
        currentSlide = currentSlide + 1;
        photoAlbum.goToSlide(currentSlide); //photoAlbum.goToNextSlide();  //photoAlbum.goToSlide(currentSlide);
        var me = $('#albumPhotos .bxphoto').eq(currentSlide).find('img')[0];
        goToSlide($(me).attr('data-id'), $(me).attr('alt'));
        $('.pika-counter').html((currentSlide + 1) + '/' + total); doActiveSlide(currentSlide);
    } else {
        if (currentSlide + 1 < total) {
            var fetch = false;
            var pgFactor = 1;
            if (pgNum > 1) pgFactor = pgNum;
            if (currentSlide + 1 == pgFactor * 6) {
                fetch = true;
            }
            if (fetch && (currentSlide + 1 % pageSize == 0 || currentSlide + 1 % pageSize == pageSize * pgNum || currentSlide + 1 % pageSize == pageSize && current < total)) {
                pgNum++; //Math.ceil(total / current                    
                LoadPhotoAlbumSlider(currentAlbumId, pgNum);
            } else {
                currentSlide = currentSlide + 1;
                photoAlbum.goToSlide(currentSlide); //photoAlbum.goToNextSlide();  //photoAlbum.goToSlide(currentSlide, 'next');
                var me = $('#albumPhotos .bxphoto').eq(currentSlide).find('img')[0];
                goToSlide($(me).attr('data-id'), $(me).attr('alt'));
                $('.pika-counter').html((currentSlide + 1) + '/' + total); doActiveSlide(currentSlide);
            }
        } else {
            if (currentSlide + 1 == total) {
                //currentSlide = currentSlide + 1;
                //photoAlbum.goToNextSlide();  //photoAlbum.goToSlide(currentSlide, 'next');
                //var me = $('#albumPhotos .bxphoto').eq(currentSlide).find('img')[0];
                //goToSlide($(me).attr('data-id'), $(me).attr('alt'));
            }
        }
    }

    photoAlbum.setCurrentSlideIndex(currentSlide);
}
$(document).ready(function () {
    var descheight = $('#photoDesc').height();
    $('#album-arrow').css('bottom', descheight+1);
    currentAlbumId = $('#hdID').val();
    LoadPhotoAlbumSlider(currentAlbumId, 1);
    photoAlbum = $('#albumPhotos').bxSlider({
        category: "photoAlbum",
        pager: false,
        auto: false,
        minSlides: Math.floor(pageSize / 2),
        slideWidth: 126,
        slideMargin: 0,
        moveSlides: 1,
        infiniteLoop: false,
        //autoDirection: 'back',
        controls: false,
        maxSlides: pageSize,
        onSlideBefore: function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) {

        },
        onSliderLoad: function () {
            if (showPopup) {
                isLoaded = true;
                $("#albumPhotos").show();
                doActiveSlide(0);
            }
            //$("#spinner").hide();
        }
    });

    $('.pika-imgnav .previous').click(function (e) {
        e.preventDefault();
        if (currentSlide > 0) {
            var current = $('#albumPhotos .bxphoto').length;
            //photoAlbum.goToPrevSlide();
            currentSlide = currentSlide - 1;
            photoAlbum.goToSlide(currentSlide);
            var me = $('#albumPhotos .bxphoto').eq(currentSlide).find('img')[0];
            goToSlide($(me).attr('data-id'), $(me).attr('alt'));
            $('.pika-counter').html((currentSlide + 1) + '/' + total); doActiveSlide(currentSlide);

            photoAlbum.setCurrentSlideIndex(currentSlide);
        }
    });
    $('.next_thumb').click(function (e) {
        e.preventDefault();
        var current = $('#albumPhotos .bxphoto').length;
        if (current < total) {
            pgNum++; //Math.ceil(total / current              
            currentSlide = ((pgNum - 1) * pageSize);
            LoadPhotoAlbumSlider(currentAlbumId, pgNum, true);

        } else {
            doSliderNext();
        }
    });

    $('.previous_thumb').click(function (e) {
        e.preventDefault();
        if (pgNum == 1) {
            if (currentSlide > 0) doSliderPrev();
        } else {
            currentSlide = (pgNum - 2) * pageSize;
            pgNum--;
            photoAlbum.goToSlide(currentSlide); // photoAlbum.goToPrevSlide();  //photoAlbum.goToSlide(currentSlide);
            var me = $('#albumPhotos .bxphoto').eq(currentSlide).find('img')[0];
            goToSlide($(me).attr('data-id'), $(me).attr('alt'));
            $('.pika-counter').html((currentSlide + 1) + '/' + total); doActiveSlide(currentSlide);

            photoAlbum.setCurrentSlideIndex(currentSlide);
        }
    });
    $('.pika-imgnav .next').click(function (e) {
        e.preventDefault();
        doSliderNext();
    });

    $('#closePopup').click(function () {
        $(".web_dialog_overlay").hide();
        Stop();
    });

    $('.btnAutoPlay').click(function () {
        auto = !auto;
        $(this).toggleClass('onpause');
        Start();
    });
    if (isWaterWheel) {
        doImageSlider();
    }


    $('#photoDesc .pslider-down').click(function () {
        var pslides = $('#photoDesc .pslider-down');
        $(pslides).toggleClass('pslider-up');
       
        if ($(pslides).hasClass('pslider-up')) {
            
            var descheight = $('#photoDesc').height();
            $('.photoDescWord').animate({ bottom: '-' + descheight + 'px' }, 800);
            $('#album-arrow').animate({ bottom: '0px' }, 800);
        } else {
            
            //$('#photoDesc').animate({ bottom: descHeight + 'px' }, 1500);
            $('.photoDescWord').animate({ bottom: '0px' }, 800);
            var descheight = $('#photoDesc').height();
            $('#album-arrow').animate({ bottom: descheight + 'px' }, 800);
        }
    });

    BindCharactersSliderEvent(9);
});

function doImageSlider() {
    if ($("#homeImageGallery").length == 0) return;

    var carousel = $("#homeImageGallery").waterwheelCarousel({
        flankingItems: 1,
        separation: 62,
        movingToCenter: function ($item) {

        },
        movedToCenter: function ($item) {
            $('#showTitle').html($item.attr('alt'));
        },
        clickedCenter: function ($item) {            
            location.href = '/photoalbums/' + $item.attr('id');
            return;

            showPopup = false;
            auto = false; //turn off autoplay each time!
            if (auto) {
                $('.btnAutoPlay').addClass('onpause');
                Start();
            } else {
                $('.btnAutoPlay').removeClass('onpause');
            }
            currentSlide = 0;
            currentAlbumId = $item.attr('id');
            pgNum = 1;
            LoadPhotoAlbumSlider($item.attr('id'), pgNum);
        }
    });

    $('#homeImageGallery a').click(function (e) {
        e.preventDefault();
        return false;
    });

    $('#goToPrevAlbum').bind('click', function () {
        carousel.prev();
        return false;
    });

    $('#goToNextAlbum').bind('click', function () {
        carousel.next();
        return false;
    });

    //$('#reload').bind('click', function () {
    //    newOptions = eval("(" + $('#newoptions').val() + ")");
    //    carousel.reload(newOptions);
    //    return false;
    //});

}
function isNullOrEmpty(value) {
    return (!value || value == undefined || value == "" || value.length == 0);
}
function LoadPhotoAlbumSlider(albumId, pageNumber, isBottomRowAction) {
    if (albumId == null || albumId == '') { return; }

    isLoaded = false;
    currentAlbumId = albumId;
    if (pageNumber == 1) $('#albumPhotos').empty();
    ///////////////////$("#overlays").show();
    $("#spinner").show();
    var URL = "/Content/GetAlbumPhotos?pageNumber=" + pageNumber + "&count=" + pageSize + "&albumId=" + albumId;
    if (pageNumber == 1) {
        currentSlide = 0;
        //$('.next, .previous').hide();
        //$('.next_thumb, .previous_thumb').hide();
        //$('.autoPlay, .autoplayText').hide();
    }
    //var isMobile = false;
    //if ($(window).width() <= 767) {
    //    isMobile = true;
    //}
    $('.next, .previous').show();
    $('.next_thumb, .previous_thumb').show();
    $('.autoPlay, .autoplayText').show();

    $.ajax({
        type: "GET",
        url: URL,
        dataType: "json",
        cache: false,
        success: function (response) {
            if (response) {
                if (response.Photos.length > 0) {
                    total = response.Total;
                    var itemsCount = $('#albumPhotos .bxphoto').length
                    var photos = '';
                    var q = "'";
                    for (var i = 0; i < response.Photos.length; i++) {
                        photos += '<div class="bxphoto"><div>';
                        photos += '<img onclick="goToSlide(' + q + response.Photos[i].MainImage + q + ',' + q + response.Photos[i].Summary + q + '); configureCurrentItem(this)" data-id="' + response.Photos[i].MainImage + '" src="/file/getimagecustom/' + response.Photos[i].MainImage + '/130/73" data-index="' + (itemsCount + i) + '" alt="' + response.Photos[i].Summary + '">';
                        photos += '</div></div>';
                    }
                    $('#albumPhotos').append(photos);
                    //if (total > pageSize || (isMobile && total >= 2)) {
                    //    $('.next, .previous').show();
                    //    $('.next_thumb, .previous_thumb').show();
                    //    $('.autoPlay, .autoplayText').show();
                    //} 
                    if (pageNumber == 1) {
                        $('#lgPhoto').html('<img src="/file/getimagecustom/' + response.Photos[0].MainImage + '" alt="' + response.Photos[0].Summary + '">');
                        if (!isNullOrEmpty(response.Photos[0].Summary)) {
                            $('#photoDesc .photoDescWord').html(response.Photos[0].Summary);
                            $('#photoDesc .pslider-down').removeClass('pslider-up');
                            $('#photoDesc').slideDown();
                        } else {
                            $('#photoDesc').hide();
                        }
                        descHeight = getDescHeight();
                    }

                    if (pageNumber >= 2) {
                        photoAlbum.reloadSlider();
                    } else {
                        photoAlbum.reloadSlider();
                    }
                    if (pageNumber > 1) {
                        if (typeof isBottomRowAction == 'undefined') currentSlide = currentSlide + 1;
                        if (typeof isBottomRowAction == 'undefined') {
                            photoAlbum.goToNextSlide();  //photoAlbum.goToSlide(currentSlide, 'next');
                        } else {
                            photoAlbum.goToPrevSlide();
                        }
                        var me = $('#albumPhotos .bxphoto').eq(currentSlide).find('img')[0];
                        goToSlide($(me).attr('data-id'), $(me).attr('alt'));
                        doActiveSlide(currentSlide);
                    }
                    //if (typeof isBottomRowAction != 'undefined') {
                    photoAlbum.setCurrentSlideIndex(currentSlide);
                    //}
                    $('.pika-counter').html((currentSlide + 1) + '/' + total); doActiveSlide(currentSlide);
                    showPopup = true;
                    isLoaded = true;
                    ////walaa
                    if (pageNumber == 1 && total < pageSize) {
                        var Length = total * 126;
                        $('#albumPhotos').parent().css('width', Length + 40);
                    }
                }
                $("#spinner").hide();
            }
        },
        error: function () {
        }
    });
}

function goToSlide(dataId, alt) {
    //by Musa Alshikh
    $('#lgPhoto').hide();
    $('#lgPhoto').html('<img src="/file/getimagecustom/' + dataId + '" alt="' + alt + '">');
    $('#lgPhoto').show();
    if (!isNullOrEmpty(alt)) {
        $('#photoDesc .photoDescWord').html(alt);
        $('#photoDesc .pslider-down').removeClass('pslider-up');
        $('#album-arrow').css('bottom', "50px");
        $('.photoDescWord').css('bottom', "0px");
        $('.photoDesc').slideUp().slideDown();

    } else {
        $('#photoDesc').hide();
    }
    descHeight = getDescHeight();
}

function getDescHeight() {
    //var h = $('#photoDesc .photoDescWord').css('height');
    //h = h.replace('px', '');
    //return parseInt(h) + 18;
    if (typeof h == 'undefined') {
        return 0;
    } else {
        h = h.replace('px', '');
        return parseInt(h) + 18;
    }
}

function configureCurrentItem(me) {
    if (me != undefined) {
        currentSlide = parseInt($(me).attr('data-index'));
        $('.pika-counter').html((currentSlide + 1) + '/' + total); doActiveSlide(currentSlide);
        Restart();
    }
}

function doActiveSlide(cslide) {
    $('#albumPhotos .active-album').removeClass('active-album');
    $('#albumPhotos .bxphoto').eq(cslide).addClass('active-album');

    photoAlbum.setCurrentSlideIndex(cslide);
    photoAlbum.setWorking(false);
}

function GetPhotoAlbums(count) {
    var isAlphabeticSort = $('#albums_tabs #hdnIsAlphabeticSort').val();
    var alphabeticCharacter = $('#albums_tabs #hdnAlphabeticCharacter').val();
    var pageNumber = parseInt($('#albums_tabs #hdnPageNo').val()) + 1;
    var URL = "/content/getlatestphotoalbums?layout=&pageNumber=" + pageNumber + "&count=" + count + "&isAlphabeticSort=" + isAlphabeticSort + "&alphabeticCharacter=" + alphabeticCharacter;

    $.ajax({
        type: "GET",
        url: "/content/getlatestphotoalbums",
        beforeSend: function () {
            $("#albums_tabs #moreAlbums").append("<div class=\"imagesLoader\"><img src=\"/content/images/Loader48x48.gif\" /></div>");
        },
        dataType: "html",
        data: { pageNumber: pageNumber, count: count, isAlphabeticSort: isAlphabeticSort, alphabeticCharacter: alphabeticCharacter },
        success: function (response) {
            $(".imagesLoader").remove();
            if (response != "") {
                $('#albums_tabs #moreAlbums').append(response);
                $('#albums_tabs #hdnPageNo').val(pageNumber);
                IntializeImageHover("singers_image", "singer_discription");
            }
            HideShowMoreAlbumsButton(count);
        }
    });
}

function RebindPhotoAlbums(count, isAlphabeticSort, alphabeticCharacter) {
    $('#albums_tabs #hdnPageNo').val(0);
    $('#albums_tabs #hdnTotal').val(0);
    $('#albums_tabs #hdnIsAlphabeticSort').val(isAlphabeticSort);
    $('#albums_tabs #hdnAlphabeticCharacter').val(alphabeticCharacter);
    $('#albums_tabs #moreAlbums').html('');
    GetPhotoAlbums(count);
}

function HideShowMoreAlbumsButton(count) {
    var totalRecords = parseInt($('#albums_tabs #hdnTotal').val());
    var pageNumber = parseInt($('#albums_tabs #hdnPageNo').val());
    var currentRecords = pageNumber * count;
    if (totalRecords <= currentRecords) { $('#btnMoreAlbums').hide(); }
    else { $('#btnMoreAlbums').show(); }
}

function BindCharactersSliderEvent(count) {
    if ($('#albums_tabs #charactersSlider').length <= 0) {
        return;
    }

    $('#albums_tabs #charactersSlider > div.bxslide > div.slider-ele').bind("click", function () {
        var alphabeticCharacter = $(this).text();
        RebindPhotoAlbums(count, false, alphabeticCharacter);
    });
}