﻿/*
 * Hulbee.Shopping Top Products Slider
 */
(function($) {
    var defaults = {
        btnLeft: '#top-products-slide-left',
        btnRight: '#top-products-slide-right',
        btnCircles: '#top-products-slide-circles',
        container: null,
		itemsCount: null, 
        itemWidth: null,
        visibleItemsCount: 5
    };

    $.fn.topProductsSlider = function(options) {
        options = $.extend(defaults, options || {});

        var container = options.container || this;
        var items = $(container).children();
        var itemsCount = options.itemsCount || items.length;
        var itemWidth = options.itemWidth || items.eq(0).outerWidth() + (parseInt(items.eq(0).css('margin-left')) || 0) + (parseInt(items.eq(0).css('margin-right')) || 0);
        var currentItem = 0;

        $(options.btnLeft).click(function() {
            currentItem = (currentItem > 0) ? currentItem - 1 : itemsCount - options.visibleItemsCount;

            $(container).animate({ left: '-=10' }, 200, function() {
                $(this).animate({
                    left: -currentItem * itemWidth
                }, 500, function() {
                    $(container).trigger('slide', [currentItem]);
                });
            });
        });

        $(options.btnRight).click(function() {
            currentItem = (currentItem + options.visibleItemsCount < itemsCount) ? currentItem + 1 : 0;

            $(container).animate({ left: '+=10' }, 200, function() {
                $(this).animate({
                    left: -currentItem * itemWidth
                }, 500, function() {
                    $(container).trigger('slide', [currentItem]);
                });
            });
        });
        
        $(options.btnCircles).click(function(e) {
            var offset = $("#top-products-slide-circles").offset();
            var x = e.pageX - offset.left - 342;
            currentItem = Math.floor(x / 12);
            $(container).animate({ left: '+=10' }, 200, function() {
                $(this).animate({
                    left: -currentItem * itemWidth
                }, 500, function() {
                    $(container).trigger('slide', [currentItem]);
                });
            });
        });

    };
})(jQuery);