﻿//Slider jQuery plugin. Written in-house. This version does not assign setSize to window.resize so
//is not suitable for use on fluid layouts


jQuery.fn.slider = function() {
    return this.each(function() {

        //add left/right buttons
        $(this).prepend('<div class="button-area-left"><a href="#" alt="Back">&nbsp;</a></div>');
        $(this).append('<div class="button-area-right"><a href="#" alt="Next">&nbsp;</a></div>');

        var productSlider = $(this).children('.slider-window');

        //adjust inner container margins for buttons
        var leftMargin = leftButtonMarginSize(this)
        var rightMargin = rightButtonMarginSize(this)
        $(productSlider).css('margin-left', leftMargin + 'px');
        $(productSlider).css('margin-right', rightMargin + 'px');

        //reset scroll area as it gets remembered by some browsers
        $(productSlider).scrollLeft(0);
        $(productSlider).attr('currentindex', 0);

        //hook up event handlers for left/right buttons
        $(this).find('.button-area-right a').click(function() {
            return sliderScroll(this, 'right');
        });

        $(this).find('.button-area-left a').click(function() {
            return sliderScroll(this, 'left');
        });

        setSize(this);

    });
};


function sliderScroll(buttonElement, direction) {

    if ($(buttonElement).hasClass('inactive')) {
        return false;
    }

    var scrollerArea = $(buttonElement).parent().siblings('.slider-window');

    var curIndex = parseInt($(scrollerArea).attr('currentindex'));

    if (direction == 'left') {
        curIndex -= 1
    } else {
        curIndex += 1
    }

    if (curIndex < 0) {
        curIndex = 0;
    }

    var maxIndex = $(scrollerArea).find('ul.item-collection > li').length - $(scrollerArea).attr('visibleitems');

    if (curIndex > maxIndex) {
        curIndex = maxIndex;
    }

    if (jQuery.browser.msie == true && jQuery.browser.version == '8.0') {
        //horrendous hack for IE8 where checking jQuery width() property causes scrollLeft value to change
        var fixScrollLeft = $(scrollerArea).attr('scrollLeft');
    }

    var scrollAmount = 0;
    var scrollerElement = $(scrollerArea).find('ul.item-collection li:first');
    if (scrollerElement) {
        scrollAmount = $(scrollerElement).width();
    }

    if (jQuery.browser.msie == true && jQuery.browser.version == '8.0') {
        //fix value of scroll left after checking with of element
        $(scrollerArea).attr('scrollLeft', fixScrollLeft);
    }

    $(scrollerArea).animate({ 'scrollLeft': (scrollAmount * curIndex) + 'px' }, 300, '', function() { refreshSliderButtons(scrollerArea) });
    $(scrollerArea).attr('currentindex', curIndex)

    return false;

}


function refreshSliderButtons(scrollerArea) {

    var leftButton = $(scrollerArea).siblings('div.button-area-left').children('a');
    var rightButton = $(scrollerArea).siblings('div.button-area-right').children('a');

    if ($(scrollerArea).attr('currentindex') == 0) {
        $(leftButton).addClass('inactive');
    } else {
        $(leftButton).removeClass('inactive');
    }

    var itemCount = $(scrollerArea).find('ul.item-collection > li').length;
    var visibleItems = parseInt($(scrollerArea).attr('visibleitems'))

    if (parseInt($(scrollerArea).attr('currentindex')) >= itemCount - visibleItems) {
        $(rightButton).addClass('inactive');
    } else {
        $(rightButton).removeClass('inactive');
    }

    if (itemCount <= visibleItems) {
        $(scrollerArea).scrollLeft(0);
        $(scrollerArea).attr('currentindex', 0);
        $(leftButton).hide();
        $(rightButton).hide();
    } else {
        $(leftButton).show();
        $(rightButton).show();
    }

}


function setSize(sliderContainer) {

    //set container width so we don't display parts of inner elements
    var elementWidth = $(sliderContainer).find('.slider-window ul.item-collection > li:first').width();
    var containerWidth = $(sliderContainer).parent().width();

    var leftButtonMargin = leftButtonMarginSize(sliderContainer);
    var rightButtonMargin = rightButtonMarginSize(sliderContainer);

    //how many elements do we have space for?
    var innerSpace = containerWidth - leftButtonMargin - rightButtonMargin
    var visibleElements = parseInt(innerSpace / elementWidth)
    var newWidth = (visibleElements * elementWidth) + leftButtonMargin + rightButtonMargin

    $(sliderContainer).width(newWidth + 'px');
    $(sliderContainer).children('div.slider-window').attr('visibleitems', visibleElements);

    $(sliderContainer).find('.slider-window ul.item-collection li:hidden').css('display', 'inline');

    //ensure changes are reflected in buttons
    refreshSliderButtons($(sliderContainer).children('.slider-window'));

}

function leftButtonMarginSize(sliderContainer) {
    return $(sliderContainer).children('.button-area-left').width();
}

function rightButtonMarginSize(sliderContainer) {
    return $(sliderContainer).children('.button-area-right').width();
}
