tabControl = Class.create();
tabControl.prototype = {
	
	initialize: function($tabControlDiv)
	{
		
		this.tabControlDiv = $($tabControlDiv);

		// 1. Stocam toate fieldset-urile intr-un array;
		this.fieldsets = $(document.getElementsByClassName("tab", this.tabControlDiv));
		
		// 2. Cream o lista cu denumirile tab-urilor;
		ul = document.createElement("ul");
		this.fieldsets.each(
			function (fieldset) {
				
				li = document.createElement("li");
				myLabel = document.createElement("label");
				myLabel.appendChild(document.createTextNode(this.getTabName(fieldset)));
				li.appendChild(myLabel);
				
				// Cand se da click pe un element al listei: 
				li.onclick = this.liClick.bind(this, fieldset);
				li.bindFieldset = fieldset;
				fieldset.bindLi = li;
				
				ul.appendChild(li);
				
			}.bind(this)
		);
		this.hideRadioCircles();		
		this.tabControlDiv.insertBefore(ul, this.fieldsets[0]);
		this.hideAllFieldSets();
		if (this.fieldsets[0])
			this.liClick(this.fieldsets[0]);
	},
	getTabName: function(fieldset) {
		return fieldset.title;
	}, 
	liClick: function(fieldset) {
		this.hideAllFieldSets();
		Element.addClassName(fieldset.bindLi, "selected");
		fieldset.style.display = "block";

		if (this.getRadioInput(fieldset))
			this.getRadioInput(fieldset).checked = true;
	},
	hideAllFieldSets: function() {
		this.fieldsets.each(
			function(fieldset) {
				fieldset.style.display = "none";
				Element.removeClassName(fieldset.bindLi, "selected");
			}.bind(this)
		);
	},
	getRadioInput: function(fieldset) {
			return document.getElementsByClassName("hiddenRadio", fieldset)[0];
	}, 
	hideRadioCircles: function() {
		$radios = document.getElementsByClassName("hiddenRadio", this.tabControlDiv);
		$radios.each(
			function(radio) {
				radio.style.display = "none";
			}
		)
		
	}
	
}