(function($){  
        $.fn.acidTabs = function(options) { 	
		var settings = {
      			'style' : 'one'
   	         };     
		options = $.extend( settings, options );
		return this.each (function () {		
			var o = options;
			container = this;
			container.setAttribute("class",o.style);
			var navitem = container.querySelector("li");
			//store which tab we are on
			var ident = navitem.id.split("_")[1];
			navitem.parentNode.setAttribute("data-current",ident);
			//set current tab with class of activetabheader
			navitem.setAttribute("class","tabActiveHeader");
				
			//hide two tab contents we don't need
			var pages = container.querySelectorAll(".tabpage");
			for (var i = 1; i < pages.length; i++) {
				pages[i].style.display="none";
			}
				
			//this adds click event to tabs
			var tabs = container.querySelectorAll("li");
			for (var i = 0; i < tabs.length; i++) {
				tabs[i].onclick=displayPage;
			}
		});
					
		// on click of one of tabs
		function displayPage() {
		  var current = this.parentNode.getAttribute("data-current");
		  //remove class of activetabheader and hide old contents
		document.getElementById("tabHeader_" + current).removeAttribute("class");
		document.getElementById("tabpage_" + current).style.display="none";
						
		var ident = this.id.split("_")[1];
		//add class of activetabheader to new active tab and show contents
		this.setAttribute("class","tabActiveHeader");
		document.getElementById("tabpage_" + ident).style.display="block";
		this.parentNode.setAttribute("data-current",ident);
		}
	};
    })(jQuery);