BLIP.Class.create("BLIP.Unit.ChannelDirectory", BLIP.Unit,
	function(config) {
		BLIP.Unit.call(this, config);
	},
	{
		selector : ".ChannelDirectory",

		init : function() {
			this.directoryFilter = this.initSubUnit(BLIP.Unit.DirectorySelector).single();
			this.initDirectoryContent();
			this.directoryItemInDelegate = this.delegate(this.on_directoryItemIn);
			this.directoryItemOutDelegate = this.delegate(this.on_directoryItemOut);
			this.initEvents();
		},

		initEvents : function() {
			this.directoryFilter.onFilterSelected.addListener(this.delegate(this.on_filterSelected));
			this.initContentHover();
		},

		initContentHover : function() {
			this.directoryContent.domRoot.find(".ChannelDirectoryItem")
				.parent('li')
				.unbind()
				.hover(
					this.directoryItemInDelegate,
					this.directoryItemOutDelegate
				);
		},

		initDirectoryContent : function(filter) {
			var textToSet;
			this.directoryContent = this.initSubUnit(BLIP.Unit.ScrollingAjaxList.ChannelDirectoryList).single();

			if(!filter) {
				textToSet = "<img src='/skin/smooth/images/letters/card.all.png'>";
				$(".AlphaTitle h1").addClass("all");
			}
			else {
				switch(filter) {
					case "all" : textToSet = "All";
						$(".AlphaTitle h1").addClass("all");
						break;
					case "num" : textToSet = "#";
						$(".AlphaTitle h1").removeClass("all");
						break;
					default :
						$(".AlphaTitle h1").removeClass("all");
						textToSet = "<img src='/skin/smooth/images/letters/card." + filter.toUpperCase() + ".png'>";
						break;
				}
			}
			this.domRoot.find(".AlphaTitle h1").html(textToSet);
			this.directoryContent.onAdditionalItems.addListener(this.delegate(this.on_additionalContentItems));
			this.initContentHover();
		},

		on_directoryItemIn : function(event) {
			this.directoryContent.domRoot.find(".PosterImage").attr("src",
				$(event.currentTarget).find(".Poster").attr("src")
			);
			this.directoryContent.domRoot.addClass("Poster");

		},

		on_directoryItemOut : function(event) {
			this.directoryContent.domRoot.removeClass("Poster");
		},

		on_filterSelected : function() {
			this.loadDirectory(this.directoryFilter.selectedFilter.toLowerCase());
		},

		on_additionalContentItems : function() {
			this.directoryContent.domRoot.find(".ChannelDirectoryItem").unbind();
			this.initContentHover();
		},

		loadDirectory : function(filter) {
			var url = this.domRoot.attr("data-directory-uri"),
					delim = url.indexOf("?") >= 0 ? "&" : "?",
					thisContext = this;

			$.get(url + delim + "section=" +filter + "&no_wrap=1", // XXX why was this done instead of passing params in as an Object?
				function(content) {
					thisContext.domRoot.find(".FilterContent").html(content);
					thisContext.initDirectoryContent(filter);
				}
			);
		}
	}
);