/**
 * @author roman
 */
iConcerts.UI.TabbedArea = Class.create();
iConcerts.UI.TabbedArea.prototype = {
	initialize: function(element, options){
		this.options = Object.extend({
			titleTag: 'h2',
			showTab: 0,
			addViewOptions: false,
			addScroll: false
		}, options || {});
		
		// remove all title elements and copy them into a navigation area
		this.element = $(element);
		
		if(!this.element)
			return;
		
		this.nav = document.createElement('div');
		this.element.select('.navItem').each(function(elem){
			if(elem.up() == this.element){
				elem.remove();
				this.nav.insertBefore(elem.cloneNode(true), this.nav.firstChild);
			}
		}.bind(this));
		
		this.tabItems = new Array();
		var tabs = this.element.immediateDescendants();
		
		// get navItem element inside and copy it inside the playlist
		/*
		this.element.getElementsByClassName('navItem').each(function(elem){
			if(elem.up().up() == this.element){
				elem.remove();
				this.element.down().insertBefore(elem.cloneNode(true), this.element.down().firstChild);
			}
			
		}.bind(this));
		*/
		
		this.element.select(this.options.titleTag).each(function(elem, index){
			elem.remove();
			var player = this.nav.firstChild;
			var item = document.createElement('a');
//			item.setAttribute('href','#'); // make rollovers work in IE
			item.setAttribute('href',player.href);
			item.innerHTML = elem.innerHTML;
			if(elem.id){
				item.setAttribute('id', elem.id);
			}
			item.setAttribute('title', player.title);
			
/*			item.onclick = function(event){
				this.showTab(index);
				return false;
			}.bind(this);
*/			
			this.nav.appendChild(item);
			
			if(index == this.options.showTab){ 
				tabs[index].show();
				item.className = 'active';
			} else {
				tabs[index].hide();
			}
			this.tabItems.push(new iConcerts.UI.Tab(tabs[index], item, {addScroll: this.options.addScroll}));
			
		}.bind(this));
		this.nav.className = 'tabbedNav';
//		this.element.insertBefore(this.nav, this.element.firstChild);
		var navPos = $('myConcerts');
		if (navPos.firstChild.className == 'tabbedNav') {
			//navPos.firstChild.removeNode();
			navPos.replaceChild(this.nav, navPos.firstChild);
		}
		else {
			navPos.insertBefore(this.nav, navPos.firstChild);
		}
		
		if(this.options.addViewOptions){
//			var dopts = new iConcerts.UI.DisplayOptions(this.nav, this.element , this.recalcTabs.bind(this));
		}
		this.recalcTabs();
	},
	
	showTab: function(index){
		var len = this.tabItems.length;
		for(var i=0; i<len; i++){
			if(i == index){
				this.tabItems[i].enable();
			} else {
				this.tabItems[i].disable();
			}
		}
		this.recalcTabs();
		//iConcerts.UI.updateScrollBars();
	},
	
	recalcTabs: function(){
		this.tabItems.each(function(item){
			item.recalcInner();
		}.bind(this));
		iConcerts.UI.updateScrollBars();
	}
}

iConcerts.UI.Tab = Class.create();
iConcerts.UI.Tab.prototype = {
	initialize: function(element, navelem, options){
		this.element = $(element);
		this.navitem = $(navelem);
		this.options = Object.extend({
			addScroll: false
		}, options || {});
		
		if(this.options.addScroll){
			var itemGroups = this.element.select('.itemGroup');
			this.scrollers = new Array();
			itemGroups.each(function(elem){
				this.scrollers.push(elem.addScrollBar({direction:'horizontal', width:this.element.getWidth(), preserveOuterDimensions:true}));
			}.bind(this));
		}
	},
	
	/** Recalculate inner width */
	recalcInner: function(){
		if(this.scrollers && this.scrollers.length > 0){
			this.scrollers.each(function(scroll){
				var inner = scroll.getInner();
				var thumbs = inner.select('.thumbItem');
				if(thumbs.length > 0){
					var wi = thumbs[0].getWidth();
					inner.setStyle({width: thumbs.length * wi + 'px'});
				} else {
					inner.setStyle({width: '0px'});
				}
				scroll.update(true);
			}.bind(this));
		}
	},
	
	enable: function(){
		this.element.show();
		this.navitem.className = 'active';
	},
	
	disable: function(){
		this.element.hide();
		this.navitem.className = '';
	}
}

iConcerts.UI.DisplayOptions = Class.create();
iConcerts.UI.DisplayOptions.prototype = {
	initialize: function(element, target, callback){
		this.element = $(element);
		this.target = $(target);
		if(!this.element || !this.target){
			//TODO: Error handling
			return;
		}
		
		var node = $('displayOptions').firstDescendant().cloneNode(true);
		this.element.insertBefore(node, this.element.firstChild);
		
		this.options = new Array('textonly', 'displayfull', 'thumbsonly');
		var classes = this.target.classNames();
		
		this.baseClasses = new Array();
		var chosen = 1;
		classes.each(function(elem, index){
			var tmp = this.options.indexOf(elem);
			if(tmp > -1){
				chosen = tmp;
			} else {
				this.baseClasses.push(elem);
			}
		}.bind(this));
		
		this.btnClasses = new Array();
		this.elems = node.select('a');
		this.elems.each(function(item,index){
			item.onclick = function(event){
				this.setMode(index);
				return false;
			}.bind(this);
			
			this.btnClasses.push(item.className);
		}.bind(this));
		
		if(typeof callback == 'function'){
			this.callback = callback;
		}
		this.setMode(chosen);
	},
	
	setMode: function(modeId){
		this.target.className = this.baseClasses.join(' ') + ' ' + this.options[modeId];
		this.elems.each(function(elem,i){
			if(i == modeId){
				elem.className = this.btnClasses[i] + ' active';
			} else {
				elem.className = this.btnClasses[i];
			}
		}.bind(this));
		if(this.callback)
			this.callback();
	}
}