﻿function updateSliderValue(currentLi, advanceUl) {
    var parentUl = currentLi.parent();
    var slidingThumbs = currentLi.parents('div.slidingThumbs');
    var slider = slidingThumbs.children('.slider');
    var leftPos = currentLi.position().left;
    var sliderMax = parentUl.innerWidth() - slidingThumbs.outerWidth();
    var sliderAdj = currentLi.innerWidth() * leftPos / parentUl.innerWidth();
    var sliderValue = leftPos * sliderMax / parentUl.innerWidth() + sliderAdj;

    if (parentUl.innerWidth() < slidingThumbs.outerWidth()) {
        return;
    }
    
    if (sliderValue > sliderMax) {
        sliderValue = sliderMax;
    }

    slider.slider('value', sliderValue);

    if (advanceUl) {
        parentUl.animate({ 'left': '-' + sliderValue + 'px' }, 200, 'swing');
    }
}

$(window).load(function() {
    $('div.slidingThumbs').each(function() {
        var ul = $('ul', this);
        var productWidth = ul.innerWidth() - $(this).outerWidth();

        if (ul.innerWidth() > $(this).outerWidth()) {
            var slider = $('.slider', this).slider({
                min: 0,
                max: productWidth,
                animate: true,
                slide: function(ev, ui) {
                    ul.css('left', '-' + ui.value + 'px');
                },
                stop: function(ev, ui) {
                    ul.animate({ 'left': '-' + ui.value + 'px' }, 500, 'linear');
                }
            });
        }
    });

    $('div.slidingThumbs ul li a').click(function() {
        var fullImage = $(this).parents('div.slidingPhotoGallery').children('div.fullImage');
        var slidingBottom = $(this).parents('div.slidingPhotoGallery').children('div.slidingBottom').children('ul');

        if ($(this).parent().hasClass('selected')) {
            $(this).parent().removeClass('selected');
            fullImage.slideUp('fast');
            slidingBottom.hide();
        } else {
            $('img', fullImage).attr('src', $(this).attr('href'));
            fullImage.slideDown('fast', function() { $.scrollTo($(this).parent(), 500); });
            slidingBottom.show();
            $('li.selected', $(this).parent().parent()).removeClass('selected');
            $(this).parent().addClass('selected');
        }

        var imageCaption = $('li.imageCaption', slidingBottom).text($('img', this).attr('alt'));
        if (imageCaption.text().length == 0) {
            imageCaption.html('&nbsp;');
        }

        updateSliderValue($(this).parent(), true);
        return false;
    });

    $("div.slidingPhotoGallery div.fullImage a[href='#close']").click(function() {
        $(this).parent().slideToggle('fast');
        $('.slidingBottom ul', $(this).parent().parent()).hide();
        $('li.selected', $(this).parent().parent()).removeClass('selected');
        return false;
    });

    $("div.slidingPhotoGallery div.slidingBottom a.fullImageNav").click(function() {
        var fullImage = $('a img', $(this).parents('div.slidingBottom').parents('div.slidingPhotoGallery').children('div.fullImage'));
        var anchor = $("a[href='" + fullImage.attr('src') + "']");
        var parentLi = anchor.parents('li:first');
        var parentUl = parentLi.parent();

        var nextLi = null;

        if ($(this).attr('href') == '#prev') {
            nextLi = parentLi.prev();

            if (nextLi.length == 0) {
                nextLi = parentLi.parent().children('li:last');
            }

            nextLi.children('a').click();
        } else {
            nextLi = parentLi.next();

            if (nextLi.length == 0) {
                nextLi = parentLi.parent().children('li:first');
            }

            nextLi.children('a').click();
        }

        var caption = $('img', nextLi).attr('alt');
        var imageCaption = $('li.imageCaption', $(this).parents('div.fullImage')).text(caption);

        if (imageCaption.text().length == 0) {
            imageCaption.html('&nbsp;');
        }

        updateSliderValue(nextLi, true);
        return false;
    });
});


