(function () {
  var config = {
    'step': 100,
    'time': 500
  },
      _bagWidth = $('.bag:first').width(),
      _list = $('#products div.inline-block:first'),
      _listWidth = _list.width(),
      _viewportWidth = $('#products').width(),
      _base = $('#products').offset();

  function click_handler(e)
  {
    var clicked = $(e.target).parent();

    if (!clicked.hasClass('bag')) {
      return;
    }

    var dir = clicked.hasClass('left') ? -1 : 1,
        margin = parseInt(_list.css('marginLeft'), 10),
        pos = _list.offset().left - _base.left,
        test = (dir == 1) ? pos : _viewportWidth - pos - _listWidth;

    if (test >= _bagWidth) {
      return;
    }

    _list.animate({'marginLeft': margin + config.step * dir + 'px'}, config.time);
    return;
  }

  _list.css('width', _listWidth + 'px');
  $('#products').click(click_handler);
})();