var panelPager = (function () {
    var _panels = {}; // Private variable to store our panels
    var _panelWidth = 226; // Private variable to store the width of our panels
    var _visiblePanels = 4;

    return {
        init: function () {
        var _featurePager = function () { return $('ul#feature-carousel') } (); // Parent element allowing one hit to the DOM

        _panels = _featurePager.children('li:gt(1)'); // Store our panels gt(1) misses out actions

        if (_panels.length > _visiblePanels) {
            _featurePager.removeClass("no-pager");
            _panels.css('position', 'absolute');
            _panelWidth = _panels[0].clientWidth; // Set our panel width to be the first panel (assumption all panels are the same width)

            var _leftPosition = 37; // Set the initial position

            // Iterate our panels and set the left value, would've shortend this ('left','+=') but I didn't want to increment on the first itme
            _panels.each(function (i) {
                $(this).css('left', _leftPosition);
                _leftPosition = _leftPosition + _panelWidth;
            });

            // Setup pager actions

            _featurePager.find('a#pager-prev').bind('click', function (e) { panelPager.moveRight(); e.preventDefault(); }).parent().css('display', 'block');
            _featurePager.find('a#pager-next').bind('click', function (e) { panelPager.moveLeft(); e.preventDefault(); }).parent().css('display', 'block');
        }
        else {
            _featurePager.find('a#pager-prev').parent().remove();
            _featurePager.find('a#pager-next').parent().remove();
        }

    },
        currentStartIndex: 0,
        currentEndIndex: 3,
        moving: false,
        display: function (displayType) {
            var display = displayType || "absolute";

            _panels.css({ "position": display });
        },
        moveLeft: function () {
            if (!this.moving) {
                this.moving = true;
                if (this.currentEndIndex !== (_panels.length - 1)) {
                    this.currentStartIndex = this.currentStartIndex + 1;
                    this.currentEndIndex = this.currentEndIndex + 1;

                    _panels.animate({ 'left': '-=' + _panelWidth }, function () { panelPager.moving = false; });
                }
                else {
                    _panels.animate({ 'left': '-=30' }, 100, function () { $(this).animate({ 'left': '+=30' }); panelPager.moving = false; });
                }
            }
        },
        moveRight: function () {
            if (!this.moving) {
                this.moving = true;
                if (this.currentStartIndex !== 0) {
                    this.currentStartIndex = this.currentStartIndex - 1;
                    this.currentEndIndex = this.currentEndIndex - 1;

                    _panels.animate({ 'left': '+=' + _panelWidth }, function () { panelPager.moving = false; });
                }
                else {
                    _panels.animate({ 'left': '+=30' }, 100, function () { $(this).animate({ 'left': '-=30' }); panelPager.moving = false; });
                }
            }
        }

    }

}());

$(document).ready(function () { panelPager.init(); });