new DottedText('.category-description p', {
	rows   : 2,
	showMoreText: 'Mehr anzeigen',
	showLessText: 'Show Less'
});

var DottedText = function(selector, options) {
	this.$element = $(selector);
	this.options  = options;
	this.text     = this.$element.text();

	this.initialize();
}

DottedText.prototype.initialize = function() {
	this.assingDynamicVars();
	this.assignEvents();

	if (this.shouldLimit) {
		this.limitRows(0);
	}
}

DottedText.prototype.assingDynamicVars = function() {
	this.elementLineHeight = parseInt(this.$element.css('line-height'));
	this.shouldLimit       = this.$element.outerHeight() / this.elementLineHeight > this.options.rows;
}

DottedText.prototype.limitRows = function(i) {
	this.updateHTML(i);

	if (this.$element.outerHeight() / this.elementLineHeight > this.options.rows) {
		this.updateHTML(--i);

		return;
	}

	return this.limitRows(++i);
}

DottedText.prototype.updateHTML = function(i) {
	this
		.$element
			.html(this.text.slice(0, i) + '... ' + '<span class="expand">' + this.options.showMoreText + '</span>');
}

DottedText.prototype.assignEvents = function() {
	var _this = this;

	$(window).on('resize', function() {
		_this
			.$element
				.html(_this.text);

		_this.assingDynamicVars();

		if (_this.shouldLimit) {
			_this.limitRows(0);
		}
	});

	_this
		.$element
			.on('click', '.expand', function() {
				_this
					.$element
						.html(_this.text + (_this.options.showLessText ? ' <span class="collapse">' + _this.options.showLessText + '</span>' : ''));
			})
			.on('click', '.collapse', function() {
				_this.limitRows(0);
			});
}