var Tabs = new Class({

	options: {
        selectedClass: 'selected',
        columnCount: 1,
        columnItemCount: 3
    },

    initialize: function(container, options){
        this.setOptions(options);

        this.container = $(container);

        // Fetch subtitles that will be used as tabs titles
        var subtitles = this.container.getElements('h3.subtitle');

        // Build tab-menu
        var tabMenu = new Element('ul', {
			'class': 'tab-menu'
		});

		// Build tab-wrapper
		var tabWrapper = new Element('div', {
			'class': 'tab-wrapper'
		});

		subtitles.each(function(el, idx) {
			// Populate tabWrapper items
			var tabContainer = new Element('div', {
				'class': 'tab-container'
			});

			var wrapperParent = el.getParent();
			var nextWrapper = wrapperParent.getNext();
			while(nextWrapper != null && !nextWrapper.hasClass('internal-link') && nextWrapper.className.length > 0) {
				var textContentList = new Element('ul');

				var textContentLinks = nextWrapper.getElements('.page-link');
				if (textContentLinks.length == 0) {
					textContentLinks = nextWrapper.getElements('.thumb-image');
				}
				textContentLinks.each(function(link, count) {
					if (this.options.columnCount > 1 && count == this.options.columnItemCount) { // TODO
						textContentList.injectInside(tabContainer);
						textContentList = new Element('ul');
					}

					var textContentItem = new Element('li');
					link.injectInside(textContentItem);
					textContentItem.injectInside(textContentList);
				}, this);

				textContentList.injectInside(tabContainer);
				nextWrapper.remove();
				
				nextWrapper = wrapperParent.getNext();
			}

// Add internal-link at the bottom if any
			if (nextWrapper != null && nextWrapper.hasClass('internal-link')) {
				nextWrapper.injectInside(tabContainer);
			}

			// Add clearer
			new Element('hr', {
				'class': 'clear'
			}).injectInside(tabContainer);

			tabContainer.injectInside(tabWrapper);

			// Populate tabMenu items
			var tabMenuItem = new Element('li');
			var tabMenuItemLink = new Element('a', {
				'href': '#',
				'events': {
					'click': function(evt) {
						new Event(evt).stop();

						// Hide and deselect all first
						tabMenu.getChildren().removeClass(this.options.selectedClass);
						tabWrapper.getChildren().each(function(wrapper) {
							wrapper.setStyles({
								'opacity': 0,
								'display': 'none'
							});
						});

						// Select and show
						tabMenuItem.addClass(this.options.selectedClass);
						tabMenuItemLink.$fx.start(1);
					}.bind(this)
				}

			});

			// Prepare hide/show target fx
			tabMenuItemLink.$fx = new Fx.Style(tabContainer, 'opacity', { onStart: function() { tabContainer.setStyle('display', ''); } });
			if (idx == 0) {
				tabMenuItem.addClass(this.options.selectedClass);
			} else {
				tabContainer.setStyles({
					'opacity': 0,
					'display': 'none'
				});
			}

			tabMenuItemLink.setText(el.getText());
			tabMenuItemLink.injectInside(tabMenuItem);

			tabMenuItem.injectInside(tabMenu);

			el.getParent().remove();

		}.bind(this));

        tabMenu.injectInside(this.container);
        tabWrapper.injectInside(this.container);
    }
});

Tabs.implement(new Options());