var Paging = Class.create({
	selector: null,
	groupSize: 1,
	container: null,
	pages: null,
	elementCount: 0,
	currentPage: 0,

	initialize: function(onElement, selector, groupSize) {
		logInfo(onElement.id);
		this.container = onElement;
		this.selector = selector;
		this.groupSize = groupSize;
		this.elementCount = this.container.getElementsBySelector(this.selector).size();
		this.pages = Math.ceil(this.elementCount/this.groupSize);

		this.groupAndAddElements();
		//this.paging();
		this.container.insert({top: this.createPaging()});
		this.showPage(1);
		
		//alert('done :)');
	},

	groupAndAddElements: function() {
		var groupedElements = this.container.getElementsBySelector(this.selector).inGroupsOf(this.groupSize);
		var i = 1;
		var currentContainer;
		groupedElements.each(function(group) {
			//alert('gruppe');
			currentContainer = new Element('div', {
				className: 'page'
			}).setStyle({
				//border: '2px dashed blue',
				//margin: '10px',
				//padding: '10px',
				overflow: 'auto'
			}).store('page', i);
			group.each(function(el) {
				try {
					currentContainer.appendChild(el);
				} catch(e) { }
			});
			//container.appendChild(currentContainer);
			this.container.insert({bottom: currentContainer});
			i++;
		}.bind(this));
	},

	createPaging: function() {
		if(this.pages == 1) return null;
		var pagesDiv = new Element('div', {
			className: 'pages'
		});
		
		pagesDiv.appendChild(new Element('a', {
			href: '#'
		}).update('<img src="img/16/navigate_beginning.png" alt="Erste Seite" title="Erste Seite" />').observe('click', this.showPage.curry('first').bind(this)));
		pagesDiv.appendChild(new Element('a', {
			href: '#'
		}).update('<img src="img/16/navigate_left.png" alt="Zurück" title="Zurück" />').observe('click', this.showPage.curry('prev').bind(this)));
		for(var ii = 1; ii <= this.pages; ii++) {
			//alert(ii);
			pagesDiv.appendChild(new Element('a', {
				href: '#'
			}).update(ii).observe('click', this.showPage.curry(ii).bind(this))).store('page', ii);
		}
		pagesDiv.appendChild(new Element('a', {
			href: '#'
		}).update('<img src="img/16/navigate_right.png" alt="Weiter" title="Weiter" />').observe('click', this.showPage.curry('next').bind(this)));
		pagesDiv.appendChild(new Element('a', {
			href: '#'
		}).update('<img src="img/16/navigate_end.png" alt="Letzte Seite" title="Letzte Seite" />').observe('click', this.showPage.curry('last').bind(this)));

		return pagesDiv;
	},

	showPage: function(page) {
		if((typeof page) != "number") {
			switch(page) {
			case "first":
				page = 1;
				break;
			case "last":
				page = this.pages;
				break;
			case "next":
				page = this.currentPage + 1;
				break;
			case "prev":
				page = this.currentPage - 1;
				break;
			}
		}
		if(page > this.pages) page = this.pages;
		if(page < 1) page = 1;

		if(page == this.currentPage) return null; // muss nix geändert werden

		//this.hideAllPages();

		this.container.getElementsBySelector('div.page').each(function(el) {
			if(el.retrieve('page') == page) {
				//el.show();
				new Effect.Appear(el.identify(), {duration: 0.7});
			} else {
				el.hide();
			}
		});

		this.container.getElementsBySelector('div.pages a').each(function(el) {
			el.removeClassName('current');
			if(el.retrieve('page') == page) {
				el.addClassName('current');
			}
		});

		this.currentPage = page;

		//alert('Seite: '+page);
	}
});