/**
*
* Create new tabbar, options on initalizes:
*
* {activeTabClass, inactiveTabClass,loadingTab: 'tabLoadingID' }
*/


var Bitrockers_tab = new Class({

	initialize:			function(outerTabID, outerContainerID, options)	{
		this.outerTabID = outerTabID;
		this.outerContainerID = outerContainerID;
		this.tabs = [];
		this.tabContainer = {};
		this.activeTab = null;
		this.ajaxTabs = {};
		this.ajaxLoading = false;

		// create default options and extend parameter options
		this.options = { loadingTab: 'tabLoading' };
		this.options = Object.extend(this.options, options);

		window.onDomReady(this.onReady.bind(this));
	},

	addTab:				function(tabName, tabContainerName)	{
		var tab = {tabName: tabName, tabContainerName: tabContainerName};
		this.tabContainer[tabName] = tabContainerName;
		this.tabs.push(tab);

	},

	addAjaxTab:			function(tabName, tabContainerName, ajaxUrl)	{
		// prepare ajax tab
		var tab = {tabName: tabName, tabContainerName: tabContainerName};
		this.tabContainer[tabName] = tabContainerName;
		this.tabs.push(tab);

		this.ajaxTabs[tabName] = {url: ajaxUrl, loaded: false};

	},

	onReady:			function()	{
		// add click handler for each added tab
		for(var i=0; i < this.tabs.length; i++)	{
			var tabName = this.tabs[i].tabName;
			var tabContainer = this.tabContainer[tabName];

			// $(tabName).onclick = this.tabClick.pass(tabName, this);
			$(tabName).addEvent('click',this.tabClick.bindAsEventListener(this, tabName));
			if ($(tabName).hasClass('active'))	{
				this.activeTab = tabName;
			} else {
				// change tab opacity on init on inactive tabs
				//this.changeTabOpacity(tabName, 0.6);
			}
		}


		// set fixed height to outerTabContainer for smoother scrolling later
		//var offsetHeight = $(this.outerContainerID).getStyle('height');
		// $(this.outerContainerID).setStyle('height', offsetHeight);
		$(this.outerContainerID).setStyle('overflow', 'hidden');
	},

	tabClick:			function(event, tabName)	{
		new Event(event).stop;

		// is tab already active?
		if (this.activeTab == tabName || this.ajaxLoading)	return false;

		// hide active container
		var activeTabContainer = this.tabContainer[this.activeTab];
		$(this.outerContainerID).effect('height', {duration: 200, onComplete: this.tabCloseCompleted.pass(tabName,this)}).custom($(activeTabContainer).offsetHeight, 0);
		return false;
	},

	tabCloseCompleted:	function(tabName)	{
		// resize outer tabContainer
		var activeTabContainer = this.tabContainer[this.activeTab];
		this.hideNavTab(this.activeTab);
		$(activeTabContainer).setStyle('display','none');

		// ajax url and ajax content not loaded?
		if (this.ajaxTabs[tabName] && !this.ajaxTabs[tabName].loaded)	{
			// show loading tab, do ajax
			$(this.tabContainer[tabName]).innerHTML = $(this.options.loadingTab).innerHTML;
			// load by ajax
			var url = this.ajaxTabs[tabName].url;
			new Ajax(url, {method: 'get', onComplete: this.ajaxComplete.bind(this)}).request();
			this.ajaxLoading = true;
		}
		this.setActiveTab(tabName);

	},

	hideNavTab:			function(tabName)	{
		$(tabName).removeClass('active');
		this.changeTabOpacity(tabName, 0.6);
	},

	showNavTab:			function(tabName)	{
		$(tabName).addClass('active');
		this.changeTabOpacity(tabName, 1);
	},

	changeTabOpacity:	function(tabName, value)	{
		return;		// deactivated
		// change tab opacity only on brands 5 and 10
		if (cobrandID == 10 || cobrandID == 5)	{
			$(tabName).setStyle('opacity', value);
		}
	},

	setOuterContainerAutoHeight:	function() {
		$(this.outerContainerID).setStyle('height','auto');
	},

	setActiveTab:		function(tabName)	{
		// show active tab
		this.activeTab = tabName;
		activeTabContainer = this.tabContainer[tabName];
		$(activeTabContainer).setStyle('display','block');
		var offsetHeight = $(this.outerContainerID).offsetHeight ;
		var scrollHeight = $(activeTabContainer).scrollHeight ;
		this.showNavTab(tabName);
		$(this.outerContainerID).effect('height', {duration: 100, onComplete: this.setOuterContainerAutoHeight.bind(this)}).custom(offsetHeight, scrollHeight);
		//$(this.outerContainerID).setStyle('height', 'auto');
	},

	ajaxComplete:		function(request)	{
		if(request.substr(0,4) != "JSON")	{
			var response = {html: request};
		} else {
			// parse json
			var parseCode = request.substr(4);
			var response =  eval('(' + parseCode + ')');
		};
		this.ajaxTabs[this.activeTab]['loaded'] = true;
		$(this.tabContainer[this.activeTab]).innerHTML = response.html;
		this.setActiveTab(this.activeTab);
		this.ajaxLoading = false;

		// any actions?
		if (response.actions)	{
			for (var i=0; i < response.actions.length; i++)	{
				try{
					var actionToCall = eval(response.actions[i]);
					actionToCall(response.data);
				} catch (err)	{

				}
			}
		}



	}


});