var Loreal = {};
Loreal.Tabs = new Class({ 
	collection: new Object(),
	tabHeadings: new Array(),
	tabContent: new Array(),
	openItem: 0,
	initialize: function(params) {		
		if(params) {
			// container element with class name "tab-collection"
			this.collection 	= 	params.tc;
			// Get references to the necessary dom elements
			this.tabHeadings 	= 	$ES(".tabs li", this.collection);
			var filteredHeadings = [];
			this.tabHeadings.each(function(item, index) {
				var a = item.getElementsByTagName("a")[0];
				if(!a.className.contains("ignore")) {
					filteredHeadings.push(item);	
				}
			});
			this.tabHeadings = filteredHeadings;
			
			this.tabContent = $ES(".tab-content", this.collection);
			
			if(this.tabHeadings.length == this.tabContent.length) {			
				this.openItem = params.dt || 0;
			
				// highlight default tab
				this.tabHeadings[this.openItem].className = "on";

				// hide all the content except for the initial item
				for(var i=0; i<this.tabContent.length; i++) {
					
					/*this.tabContent[i].style.position = "relative";
					this.tabContent[i].style.width = "370px";
					this.tabContent[i].style.float = "left";
					if(!window.ie) { this.tabContent[i].style.top = "28px"; } */
					
					if(i != this.openItem) {
						//this.tabContent[i].style.left = -999 + "em";
						this.tabContent[i].style.display = "none";
					}
				}
				
				// set up event listeners
				for(var i=0; i<this.tabHeadings.length; i++) {
					var obj = {};
					obj.clicked = i;
					this.tabHeadings[i].addEvent('click', this.switchTabs.bindWithEvent(this, obj));
				}

			} else {throw new Error("The number of headings, and content must be equal");}
		} else {throw new Error("You must pass a container element");}
	},
	switchTabs: function(e, params) {
		if(e != null) { e = new Event(e).stop(); }
		if(params.clicked >= this.tabHeadings.length) { 
			params.clicked = 0;
		} else if(params.clicked < 0) {
			params.clicked = this.tabHeadings.length -1;
		}
		if(this.openItem != params.clicked) {			
			this.tabHeadings[this.openItem].className = "";
			this.tabHeadings[params.clicked].className = "on";
			//this.tabContent[this.openItem].style.left = -999 + "em";
			this.tabContent[this.openItem].style.display = "none";
			//this.tabContent[params.clicked].style.left = "";
			this.tabContent[params.clicked].style.display = "block";
			this.openItem = params.clicked;		
		}
	}
});
Loreal.Tabs.Group = new Class({
	initialize: function() {
		document.addEvent('domready', this.gather.bind(this));
	},
	gather: function() {
		$$(".tab-collection").each(function(tabGroup){
			if(!tabGroup.hasClass("ignore")) {
				new Loreal.Tabs({"tc":tabGroup});			
			}
		});
	}
});
new Loreal.Tabs.Group();