
/**
 * @author Ryan Johnson <http://saucytiger.com/>
 * @copyright 2008 PersonalGrid Corporation <http://personalgrid.com/>
 * @package LivePipe UI
 * @license MIT
 * @url http://livepipe.net/control/tabs
 * @require prototype.js, livepipe.js
 */



if(typeof(Prototype) == "undefined")
	throw "Control.Tabs requires Prototype to be loaded.";
if(typeof(Object.Event) == "undefined")
	throw "Control.Tabs requires Object.Event to be loaded.";

Control.Tabs = Class.create({
	initialize: function(tab_list_container,options){
		if(!$(tab_list_container))
			throw "Control.Tabs could not find the element: " + tab_list_container;
		this.activeContainer = false;
		this.activeLink = false;
		this.containers = $H({});
	
		this.links = [];
		this.tabs=[];
		Control.Tabs.instances.push(this);
		this.options = {
			beforeChange: Prototype.emptyFunction,
			afterChange: Prototype.emptyFunction,
			hover: false,
			linkSelector: 'li span a',
			setClassOnContainer: true,
			activeClassName: 'active',
			defaultClassName: 'tab',
			defaultTab: 'first',
			autoLinkExternal: true,
			targetRegExp: /#(.+)$/,
			showFunction: Element.show,
			hideFunction: Element.hide
			
		};
		Object.extend(this.options,options || {});
		(typeof(this.options.linkSelector == 'string')
			? $(tab_list_container).select(this.options.linkSelector)
			: this.options.linkSelector($(tab_list_container))
		).findAll(function(link){
			return (/^#/).exec(link.href.replace(window.location.href.split('#')[0],''));
		}).each(function(link){
			this.addTab(link);
		}.bind(this));
		this.containers.values().each(Element.hide);
		if(this.options.defaultTab == 'first')
			this.setActiveTab(this.links.first());
		else if(this.options.defaultTab == 'last')
			this.setActiveTab(this.links.last());
		else
			this.setActiveTab(this.options.defaultTab);
	    	
			
	    // Observe Tab hover effect  
	    tabs =$(tab_list_container).select('li');
		tabs.each(function(tab){
		 	Event.observe(tab,'mouseover',this.hoverTab.bindAsEventListener(this)); 
		}.bind(this));
		
		tabs.each(function(tab){
		 	Event.observe(tab,'mouseout',this.unHoverTab.bindAsEventListener(this)); 
		}.bind(this));

	    tabs.each(function(tab){
		 	Event.observe(tab,'click',this.clickFullTab.bindAsEventListener(this)); 
		}.bind(this));
	

		
		var targets = this.options.targetRegExp.exec(window.location);
		if(targets && targets[0]){
			targets[0].split(',').each(function(target){
				this.setActiveTab(this.links.find(function(link){
					return link.key == target;
				}));
			}.bind(this));
		}
		if(this.options.autoLinkExternal){
			$A(document.getElementsByTagName('a')).each(function(a){
				if(!this.links.include(a)){
					var clean_href = a.href.replace(window.location.href.split('#')[0],'');
					if(clean_href.substring(0,1) == '#'){
						if(this.containers.keys().include(clean_href.substring(1))){
							$(a).observe('click',function(event,clean_href){
								this.setActiveTab(clean_href.substring(1));
							}.bindAsEventListener(this,clean_href));
						}
					}
				}
			}.bind(this));
		}		
	},
	
	//Mouseover Tab
	 hoverTab: function(event){
		var elm=Event.element(event);
		 Element.extend(elm); 	
		if (elm.match('li')){
			elm.addClassName("over");//IE6
		}else{
		 	elm.up('li').addClassName("over");//other
		};						
     },
   
   	//Mouseout Tab
   	 unHoverTab: function(event){
	 	var elm=Event.element(event);

		if (elm.match('li')){
			elm.removeClassName("over");//IE6
		}else{
		 elm.up('li').removeClassName("over");//other
		};	 			
   },
   
    //Click Tab
   	 clickFullTab: function(event){
		 var elm=Event.element(event);
		 
		 if (elm.match('span')){
 			this.setActiveTab(elm.parentNode.down('a'));
		 } else{
	 		this.setActiveTab(elm);			
		 };
   },
  
	addTab: function(link){
		this.links.push(link);
		link.key = link.getAttribute('href').replace(window.location.href.split('#')[0],'').split('/').last().replace(/#/,'');
		var container = $(link.key);
		if(!container)
			throw "Control.Tabs: #" + link.key + " was not found on the page."
		this.containers.set(link.key,container);
		link[this.options.hover ? 'onmouseover' : 'onclick'] = function(link){
			if(window.event)
				Event.stop(window.event);
			this.setActiveTab(link);
			return false;
		}.bind(this,link);
	},

	setActiveTab: function(link){
		if(!link && typeof(link) == 'undefined')
			return;
		if(typeof(link) == 'string'){
			this.setActiveTab(this.links.find(function(_link){
				return _link.key == link;
			}));
		}else if(typeof(link) == 'number'){
			this.setActiveTab(this.links[link]);
		}else{
			if(this.notify('beforeChange',this.activeContainer,this.containers.get(link.key)) === false)
				return;
			if(this.activeContainer)
				this.options.hideFunction(this.activeContainer);
			this.links.each(function(item){
				(this.options.setClassOnContainer ? $(item.parentNode.parentNode) : item).removeClassName(this.options.activeClassName);
			}.bind(this));
			(this.options.setClassOnContainer ? $(link.parentNode.parentNode) : link).addClassName(this.options.activeClassName);
			this.activeContainer = this.containers.get(link.key);
			this.activeLink = link;
			this.options.showFunction(this.containers.get(link.key));
			this.notify('afterChange',this.containers.get(link.key));
		}
	},

	next: function(){
		this.links.each(function(link,i){
			if(this.activeLink == link && this.links[i + 1]){
				this.setActiveTab(this.links[i + 1]);
				throw $break;
			}
		}.bind(this));
	},
	previous: function(){
		this.links.each(function(link,i){
			if(this.activeLink == link && this.links[i - 1]){
				this.setActiveTab(this.links[i - 1]);
				throw $break;
			}
		}.bind(this));
	},
	first: function(){
		this.setActiveTab(this.links.first());
	},
	last: function(){
		this.setActiveTab(this.links.last());
	}
});

Object.extend(Control.Tabs,{
	instances: [],
	findByTabId: function(id){
		return Control.Tabs.instances.find(function(tab){
			return tab.links.find(function(link){
				return link.key == id;
			});
		});
	}
});
Object.Event.extend(Control.Tabs);