var pTab = new Class({
	initialize: function(wrapper) {
		//the element wich is parent for special product view
		this.wrapper = wrapper;
		//create the special product view
		this.create();
	},
	create: function() {
		//set tab function on each wrap element
		this.setTabWrap('div.prod-spec');
		this.setTabWrap('div.prod-multi');
	},
	setTabWrap: function(tabcontainer) {
		//get all product specification wrap elements
		var wrapsTabs = this.wrapper.getElements(tabcontainer);
		//if any exist
		if($defined(wrapsTabs)) {
			//run for each
			//console.log(wrapsTabs.length);
			wrapsTabs.each(function(wrapTabs) {
				//create tab navigation
				//console.log(wrapTabs);
				//var heads = wrapTabs.getChildren('h1');
				var heads = wrapTabs.getChildren('div').getChildren('h1');
				//console.log(heads.length);
				//if heading children exist
				if($defined(heads)) {
					//create new navigation as ul element, set style IMPORTANT!!!
					var navigation = new Element('ul', {
						'class': 'product-nav',
						'styles': {
									'list-style': 'none',
									'width': '100%',
									'padding': '0px',
									'margin': '0px',
									'float': 'left',
									'overflow': 'hidden'
								}
					});
					//inject it in the tab wrap element as first
					navigation.inject(wrapTabs, 'top');
					//size of navigation points / 100, for width percent
					var headW = 100 / heads.length;
					headW = headW.toInt();
					//create menu points(li's) from found headings
					heads.each(function(head, nr) {
						//create new menu element
						if (nr == 0) {
							var li = new Element('li', {
							//get the text from the header
							'html': '<span><span><span>'+head.get('html')+'</span></span></span>',
							//style for right view
							'styles': {
										'display': 'block',
										'float': 'left'
							},
							'class': 'active'
							});
						} else {
							var li = new Element('li', {
								//get the text from the header
								'html': '<span><span><span>'+head.get('html')+'</span></span></span>',
								//style for right view
								'styles': {
											'display': 'block',
											'float': 'left'
								}
							});
						}
						//on clicking at menu
						li.addEvent('click', function() {
							//hide tabs and view the current
							this.hideTabs(wrapTabs, nr);
							//get all menu elements
							var lis = navigation.getElements('li');
							//remove all active class
							lis.each(function(sli) {
								sli.removeClass('active');
							});
							//add active class to current
							li.addClass('active');
						}.bind(this));
						//set hover class on mouse over
						li.addEvent('mouseover', function() {
							li.addClass('hover');
						});
						//remove hover class on mouse out
						li.addEvent('mouseout', function() {
							li.removeClass('hover');
						});
						//at intialize/first run do not hide first tab
						if(nr != 0) {
							head.getNext('div.tab').setStyle('display', 'none');
						}
						//inject them after each other
						li.inject(navigation);
						//remove heading from dom
						head.dispose();
					}.bind(this));
					//set sub menu in tabs
					//console.log(wrapTabs.length);
					this.setMenu(wrapTabs);
				}
			}.bind(this));
		}
	},
	//show tabs
	hideTabs: function(wrap, nr) {
		//get all tabs
		var tabs = wrap.getChildren('div').getChildren('div.tab');
		//var tabs = wrap.getChildren('div.tab');
		//console.log(tabs.length);
		//console.log(wrap);
		//check each tab
		tabs.each(function(tab, no) {
			//if current not the clicked(menu) one, otherwise show
			if(no != nr) {
				tab.setStyle('display', 'none');
			} else {
				tab.setStyle('display', 'block');
			}
		});
	},
	//creates the menu in tabs
	setMenu: function(wrap) {
		//get all tabs
		//var tabs = wrap.getChildren('div.tab');
		var tabs = wrap.getElements('div.tab');
		//console.log(tabs.length);
		//var tabs = wrap.getChildren('div').getChildren('div.tab');
		//run each tab
		tabs.each(function(tab) {
			//get all menu content elements
			var ces = tab.getElements('div.menu-content');
			//if any contents with class "menu-content" exist
			if(ces.length <= 1) {
				ces.addClass('ohne_menu');
			}
			if($defined(ces) && ces.length > 1) {
				//create ul for menu
				var menu = new Element('ul', {
					'class': 'product-left'
				});
				//inject it at top of tab
				menu.inject(tab,'top');
				//run each ce
				ces.each(function(ce,nr) {
					//set the first visible
					if(nr != 0) {
						ce.setStyle('display', 'none');
					}
					//get current header
					var head = ce.getElement('h1');
					//if current header exist
					if($defined(head)) {
						if(nr == 0) {
							//create new point in menu from header
							var li = new Element('li', {
								//the span's are for rounded corners ;) >> CSS
								'html': '<span><span><span>'+head.get('html')+'</span></span></span>',
								'class': 'active'
							});
						}
						else {
							//create new point in menu from header
							var li = new Element('li', {
								//the span's are for rounded corners ;) >> CSS
								'html': '<span><span><span>'+head.get('html')+'</span></span></span>'
							});
						}
						//inject new point
						li.inject(menu);
						//add the click event
						li.addEvent('click', function() {
							//get all elements in this menu
							var lis = menu.getElements('li');
							//check each
							lis.each(function(sli) {
								//remove all active class
								sli.removeClass('active');
							});
							//add the current class active
							li.addClass('active');
							//check wich content should be visible
							this.hideMenus(tab, nr);
						}.bind(this));
						//add events for hover class
						li.addEvent('mouseover', function() {
							li.addClass('hover');
						});
						//remove after leaving the element
						li.addEvent('mouseout', function() {
							li.removeClass('hover');
						});
					}
				}.bind(this));
			}
		}.bind(this));
	},
	//show content
	hideMenus: function(wrap, nr) {
		//get all contents
		var tabs = wrap.getChildren('div.menu-content');
		//var tabs = wrap.getChildren('div').getChildren('div.menu-content');
		//check each
		tabs.each(function(tab, no) {
			//if current clicked one else hide
			if(no != nr) {
				tab.setStyle('display', 'none');
			} else {
				tab.setStyle('display', 'block');
			}
		});
	}
});

//if all site elements loaded (the dom is ready ;)
window.addEvent('domready', function() {
	//get special product wrap element
	var wrappers = $$('div.product-info');
	//check if it exists
	if($defined(wrappers)) {
		//if there more than one
		wrappers.each(function(wrap) {
			//create new instance of pTab(special product viewer)
			var app = new pTab(wrap);
		});
	}
});