var tabSwitcher = new Class({
	initialize: function(containerId,defaultPane) {
		this.myPanes = $(containerId).getElements('.pane');
		this.myTabs = $(containerId).getElements('.tabs li a');
		this.myTabs.each(function(tabItem) {
			if (tabItem.hasClass(defaultPane)) {
				tabItem.addClass('on');
			}
			tabItem.addEvent("click", function(event) {
				this.showTab(tabItem);
				return false;	
			}.bind(this));
		}.bind(this));	
		this.myPanes.each(function(paneItem) {
			if (paneItem.hasClass(defaultPane)) {
				paneItem.addClass('on');
			}
		});	
	},
	showTab: function(tabTarget) {
		this.myTabs.each(function(tabItem) {
			tabItem.removeClass('on');
		}.bind(this));
		this.myPanes.each(function(paneItem) {
			if (paneItem.hasClass(tabTarget.className)) {
				paneItem.addClass('on');
			} else {
				paneItem.removeClass('on');	
			}
		}.bind(this));
		tabTarget.addClass('on');
	}
});

var paneFilter = new Class({
	initialize: function(containerId) {
		this.myPanes = $(containerId).getElements('.pane');
		this.myFilters = $(containerId).getElements('.scopeFilter');
		this.myFilters.each(function(filterItem) {
			
			filterItem.addEvent("change", function(event) {
				var filter = filterItem.value.replace(/\s+/g, '');
				this.scope = filterItem.name.split('-')[0]; //extract feed name from select name
				this.topic = filterItem.name.split('-')[1]; //extract feed type from select name
				var temp = new Array();
				this.myPanes.each(function(paneItem) {
					if (paneItem.hasClass(this.scope)) this.activePane = paneItem;
				}.bind(this));
				
				this.feedItems = this.activePane.getElements('.item');
				this.feedItems.each(function(feedItem) {
					if (filter == "all") {
						feedItem.removeClass(this.topic+'Hide');
					} else {
						if (feedItem.className.indexOf(filter) > -1) {
							feedItem.removeClass(this.topic+'Hide');
						} else {
							feedItem.addClass(this.topic+'Hide');
						}	
					}
				}.bind(this));						
			}.bind(this));
		}.bind(this));	
	}
});

var mediaLoader = new Class({
	initialize: function(containerId,mediaItem,itemTree,targetId) {
		this.feedConduit = "mediaDetail.action";
		this.myContainer = $(containerId);
		this.myTarget = $(targetId);
		this.myItems = $(containerId).getElements(mediaItem);
		this.myItems.each(function(item) {
			this.myLinks = item.getElements(itemTree);
			this.myLinks.each(function(link) {
				link.addEvent("click", function(event) {
					var param = link.href.split('?')[1];
					this.loadMedia(param);
					this.showCur(item);
					event = new Event(event).stop();
				}.bind(this));
			}.bind(this));
		}.bind(this));
	},
	loadMedia: function(mediaId) {	
		var myAjax = new Ajax(this.feedConduit+'?'+mediaId, {
			method: 'get',
			evalScripts: true,
			update: this.myTarget,
			onRequest: function(data) {
				this.myTarget.setHTML('<p class="error">Loading...</p>');
			}.bind(this),
			onFailure: function(data) {
				this.myTarget.setHTML('<p class="error">Could not load asset.</p>');
			}.bind(this)
		}).request();
	},
	showCur: function(item) {	
		this.myItems.each(function(item) {
			item.removeClass('cur');
		});
		item.addClass('cur');
	}
});

window.addEvent('domready', function() {
	 var myMediaLoader = new mediaLoader('listBlock','.item','a.link','mediaBlock');
	 var myPaneFilter = new paneFilter('listBlock');
	 var myTooltipEngine = new tooltipEngine('listBlock', '.scope a');
});