var tabbedPane = Class.create();

tabbedPane.prototype = {
	
	tabContainer: null,
	tabContainerId: null,
	tabs: null,
	tabObjects: new Array(),
	selectedTab: 0,
	content: null,
	browser: null,
	
	initialize: function(tabContainerId, tabs){
		this.tabContainerId = tabContainerId;
		this.tabs = tabs;
		this.browser = {
  			Version: function() {
	       			var version = 999; // we assume a sane browser
        			if (navigator.appVersion.indexOf("MSIE") != -1)
       				// bah, IE again, lets downgrade version number
       				version = parseFloat(navigator.appVersion.split("MSIE")[1]);
                  		return version;
       		             }
                }
		document.observe("dom:loaded", this.createPane.bind(this));
	},
	
	createTabs: function(){
		for(var i = 0;i < this.tabs.length - (this.browser.Version() < 999 ? 0 : 0);i++){
		//this.tabs.each(function(name, i){
		    	if(this.tabs[i]){
			var divLeft = new Element("div", {"class": this.tabs[i].cssclass + "_left"});				
			var divMiddle = new Element("div", {"class": this.tabs[i].cssclass + "_middle"});				
			var divRight = new Element("div", {"class": this.tabs[i].cssclass + "_right"});											
			if(i == this.selectedTab){
				this.tabObjects[i] = new Element("div", {"class": this.tabs[i].cssclass + "_active"});
			}else{
				this.tabObjects[i] = new Element("div", {"class": this.tabs[i].cssclass});				
			}
			var lnk = new Element("a", {}).update(this.tabs[i].name);			
			lnk.onclick = this.tabClick.bind(this, i);			
			divMiddle.update(lnk);
			this.tabObjects[i].insert(divLeft);
			this.tabObjects[i].insert(divMiddle);
			this.tabObjects[i].insert(divRight);
			this.tabContainer.appendChild(this.tabObjects[i]);
			};
		}
	},
	
	showWait: function(){
		this.content.update("<div class=\"loadingContent\"><img src='/images/tabs/waitspin.gif' /><br /></div>");
	},
	
	hideWait: function(){
		this.content.update("");
	},
	
	tabClick: function(tabId){
		this.selectedTab = tabId;
		this.showWait();
		this.changeTabTo();
		this.retrieveContent();
	},
	
	retrieveContent: function(){
		new Ajax.Request(this.tabs[this.selectedTab].url, {
				method: "get",
				onSuccess: this.showSuccess.bind(this),
				onFailure: this.showFailure.bind(this)
			});
	},
	
	showFailure: function(transport){
		this.hideWait();
		switch(transport.status){
			case 404:
				this.content.update("Could not find content...");
				break;
			case 500:
				this.content.update("Internal error...");
				break;				
			default:
				this.content.update("Error loading content...");
				break;								
		}
	},
	
	showSuccess: function(transport){
		this.content.update(transport.responseText);
	},
	
	changeTabTo: function(){
		for(var i =0;i < this.tabObjects.length -  (this.browser.Version() < 999 ? 0 : 0);i++){
			if(this.tabObjects[i]){
			this.tabObjects[i].removeClassName(this.tabs[i].cssclass);			
			this.tabObjects[i].removeClassName(this.tabs[i].cssclass + "_active");			
			if(i == this.selectedTab){
				this.tabObjects[i].addClassName(this.tabs[i].cssclass + "_active");
			}else{				
				this.tabObjects[i].addClassName(this.tabs[i].cssclass);				
			}
			}
		}
	},
	
	createContent: function(){
		this.content = new Element("div", {"class": "content"});
		this.tabContainer.appendChild(this.content);	
		this.showWait();	
		this.retrieveContent();
	},
	
	createPane: function(){		
		this.tabContainer = $(this.tabContainerId);		
		this.createTabs();
		this.createContent();
	}
}