/**
 * @author roman
 */
iConcerts.UI.TabbedArea = Class.create();
iConcerts.UI.TabbedArea.prototype = {
	initialize: function(element, options){
		this.options = Object.extend({
			titleTag: 'h2',
			showTab: 0,
			showIndex: 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');
		if (this.element.select('.navItem')) {
			this.element.select('.navItem').each(function(elem){
				if(elem.up() == this.element){
//					elem.remove();
//					this.nav.insertBefore(elem.cloneNode(true), this.nav.firstChild);
					this.nav.insertBefore(elem, 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);
				var nid = elem.id.substr(2);
				if (nid == this.options.showIndex) {
					this.options.showTab = index;
				}
			}
//			item.setAttribute('title', player.title);
			item.onclick = function(event){
				this.showTab(index);
				return false;
			}.bind(this);
			
			this.nav.appendChild(item);
			
			item.className = elem.className;
			ICaddClassName(item,'list_playlist');
//			item.className = 'list_playlist';
			this.tabItems.push(new iConcerts.UI.Tab(tabs[index], item, elem.readAttribute('title'), {addScroll: this.options.addScroll}));
/*			if(index == this.options.showTab){ 
				tabs[index].show();
//				item.className = 'list_playlist active';
				ICaddClassName(item,'active');
			} else {
				tabs[index].hide();
			}*/
			
		}.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));
		}
		if ($('uplaylist_new')) {
			this.scrolltab = new iConcerts.UI.ScrollButton(this.nav, 0, {leftId: 'up_left', rightId: 'up_right', titleTag: '.list_playlist', maxWidth: 408});
			iConcerts.UI.scrolltab = this.scrolltab;
			$$('.upWrapper').each(function(elem, index) {
				iConcerts.UI.droppable[index] = new iConcerts.UI.UserPlaylist(elem.id);
			}.bind(this));
			if ($('EditoToggle')) {
				$('EditoToggle').onclick = function(event){
					this.ToggleEditoUserPlaylist(0);
					return false;
				}.bind(this);
			}
			if ($('UserPlaylistToggle')) {
				$('UserPlaylistToggle').onclick = function(event){
					this.ToggleEditoUserPlaylist(1);
					return false;
				}.bind(this);
			}
		}
		else {
			this.scrolltab = new iConcerts.UI.ScrollButton(this.nav, 0, {leftId: 'up_left', rightId: 'up_right', titleTag: '.list_playlist', maxWidth: 568});
			iConcerts.UI.scrolltab = this.scrolltab;
		}
//		this.recalcTabs();
		tmpShowTab = this.options.showTab;
		if (this.tabItems[this.options.showTab].navitem.hasClassName('TabEditoPlaylist')) {
			this.ToggleEditoUserPlaylist(1);
		}
		else {
			this.ToggleEditoUserPlaylist(0);
		}
		this.showTab(tmpShowTab);
	},
	
	showTab: function(index){
//		alert('showTab : ' + index);
		var len = this.tabItems.length;
		this.options.showTab = index;
		if (this.tabItems[index].navitem.visible()) {
			for(var i=0; i<len; i++){
				if(i == index){
					this.tabItems[i].enable();
				} else {
					this.tabItems[i].disable();
				}
			}
		}
		else {
			for(var i=0; i<len; i++){
				this.tabItems[i].disable();
			}
			for(var i=0; i<len; i++){
				if(this.tabItems[i].navitem.visible()){
					this.tabItems[i].enable();
					this.options.showTab = i;
					break;
				}
			}
		}
		this.recalcTabs();
		iConcerts.UI.scrolltab.showActive();
		//iConcerts.UI.updateScrollBars();
	},
	
	recalcTabs: function(){
		this.tabItems.each(function(item){
			item.recalcInner();
		}.bind(this));
		iConcerts.UI.updateScrollBars();
	},
	
	ToggleEditoUserPlaylist: function(Edito) {
		if (!$('EditoToggle')) {
			return;
		}
		if (Edito == 1) {
			$('EditoToggle').show();
			$('UserPlaylistToggle').hide();
			$$('.TabEditoPlaylist').each(function(elem) {
				elem.show();
			});
			$$('.TabUserPlaylist').each(function(elem) {
				elem.hide();
			});
		}
		else {
			$('EditoToggle').hide();
			$('UserPlaylistToggle').show();
			$$('.TabEditoPlaylist').each(function(elem) {
				elem.hide();
			});
			$$('.TabUserPlaylist').each(function(elem) {
				elem.show();
			});
		}
		this.showTab(0);
		iConcerts.UI.scrolltab.curPos = 0;
		iConcerts.UI.scrolltab.update();
	}
}

iConcerts.UI.Tab = Class.create();
iConcerts.UI.Tab.prototype = {
	initialize: function(element, navelem, sUrl, options){
		this.element = $(element);
		this.navitem = $(navelem);
		this.url = sUrl;
		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}));
				this.scrollers.push(elem.addScrollBar({direction:'horizontal', width:this.element.getWidth()}));
			}.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';
		ICaddClassName(this.navitem,'active');
	},
	
	disable: function(){
		this.element.hide();
//		this.navitem.className = '';
		if (this.navitem.hasClassName('active')) {
			this.navitem.removeClassName('active');
		}
	}
}

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();
	}
}