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

		cycleInterval : null,
		hoverTimeout : null,

		categoryCache : {},
		categoryUnitCache : {},


		init : function() {
			this.startCycle();
			this.initEvents();
			this.setContentWith(this.domRoot.find(".TopTen li").not(".Title").eq(0));
			this.initSubUnit(BLIP.Unit.ChannelList);
		},

		initEvents : function() {
			var thisContext = this;

			this.domRoot.find(".TopTen li").not(".Title")
				.each(this.delegate(this.bindItemHover));

			this.domRoot.find(".ChannelSelection .ShowCategories").click(
				this.delegate(this.showCategoryList)
			);

			this.domRoot.find(".ChannelSelection .HideCategories").click(
				this.delegate(this.hideCategoryList)
			);
		},

		startCycle : function() {
			var thisContext = this;

			clearInterval(this.cycleInterval);

			this.domRoot.find(".Callout").hover(function() {
					clearInterval(thisContext.cycleInterval);
				},
				this.delegate(this.setCycleInterval)
			);

			this.setCycleInterval();
		},

		bindItemHover : function(n, el) {
			var thisContext = this;

			$(el).hover(
				function itemHoverIn() {
					$('.Focused').removeClass('Focused');
					$(el).addClass('Focused');
					clearInterval(thisContext.cycleInterval);
					thisContext.hoverTimeout = setTimeout(
						function() {
							thisContext.setContentWith(el);
						}, 750
					);
				},
				function itemHoverOut() {
					thisContext.setCycleInterval();
					clearTimeout(thisContext.hoverTimeout);
				}
			);
		},

		setCycleInterval : function() {
			var i = 0,
					max = this.domRoot.find(").TopTen li").not(".Title").length,
					thisContext = this;

			this.cycleInterval = setInterval(function() {
				var el;

				i = i < max-1 ? i+1 : 0;
				el = thisContext.domRoot.find(".TopTen li ").not(".Title").eq(i);

				$('.Focused').removeClass('Focused');
				el.addClass('Focused');
				thisContext.setContentWith(el);
			}, 15000);
		},

		setContentWith : function(el) {
			var detailsCopy = $($(el).find(".Details").html()),
					thisContext = this;

			thisContext.truncateDescription(detailsCopy.find("p"));
			thisContext.truncateTitle(detailsCopy.find("h3 a"));
			thisContext.truncateShow(detailsCopy.find("h2 a"));

			detailsCopy.find("p").append(detailsCopy.find(".WatchNow"));


			this.domRoot.find(".Callout").html(detailsCopy).show();
			this.beginDropOut($(el).attr("data-channel-id"), function() {
				thisContext.setCategory($(el).attr("data-channel-id"));
			});
			try {
				this.domRoot.find(".ChannelSelection .ChannelLink")
					.html($(el).attr("data-channel-name"))
					.attr("href", "/" + $(el).attr("data-channel-token"));
			} catch (x) {

			}
		},

		truncateEl : function(el, size) {
			if (el.length) {
				el.find("br").remove();
				if (el.html().length > size) {
					el.attr("title", el.html());
					el.html(BLIP.Utils.truncate(el.html(), size));
				}

				el.append(" ");
				return el[0];
			}
			else {
				return document.createTextNode('');
			}
		},

		truncateDescription : function(p) {
			return this.truncateEl(p, 120);
		},

		truncateTitle : function(title) {
			return this.truncateEl(title, 90);
		},

		truncateShow : function(show) {
			return this.truncateEl(show, 34);
		},

		setCategory : function(id) {
			var thisContext = this,
					channelShowList,
					cachedChannelCards,
					sourceUri,
					url;

			if(this.categoryCache[id]) {
				cachedChannelCards = this.categoryCache[id];
					// We only display 6, so only give us 6.

				thisContext.domRoot.find(".ChannelSelection .ChannelLink")
					.html(cachedChannelCards.attr('data-channel-name'));

				this.beginFlipIn(id);
			}
			else {
				//TODO check if ID is 0 or empty and do something else..
				sourceUri = this.domRoot.find('.ChannelShowList').attr('data-source-uri');
				url = new BLIP.Utils.UrlBuilder(sourceUri);
				url.addParam('channels_id', id);


				this.loadingCategoryXHR = $.get(url.getFullUrl(),
					function(content) {
						thisContext.loadingCategoryXHR = null;
						content = $(content);
						thisContext.categoryUnitCache[id] = [];
						content.find('.MiniShowFlipcard').each(function(n) {
							if(n < 6) {
								thisContext.categoryUnitCache[id].push(
									new BLIP.Unit.ShowFlipcard.MiniShowFlipcard({
										domRoot : $(this)
									})
								);
							}
						});
						thisContext.categoryCache[id] = content;
						thisContext.domRoot.find('.ChannelShowList').append(
							$('<div class="Cards" data-category="'+id+'">').append(content.find('.MiniShowFlipcard').slice(0,6))
						);


						thisContext.setCategory(id);
					}
				);
			}
		},

		beginFlipIn : function(id) {
			var interval, n = 0, thisContext = this,
				channelShowList = this.domRoot.find(".ChannelShowList");



			if(!thisContext.categoryUnitCache[id]) {
				return;
			}

			channelShowList.find('.Cards').hide();
			channelShowList.find('.Cards[data-category="'+id+'"]').fadeIn();
		},

		beginDropOut : function(id, callback) {
			var cards = this.domRoot.find('.Cards:visible');

			if(cards.length) {
				cards.fadeOut(function() {
					callback();
				});
			}
			else {
				callback();
			}
		},


		showCategoryList : function() {
			this.domRoot.find(".ShowCategories, .ChannelShowList").hide();
			this.domRoot.find(".ChannelList, .HideCategories").show();
		},

		hideCategoryList : function() {
			this.domRoot.find(".ChannelList, .HideCategories").hide();
			this.domRoot.find(".ShowCategories, .ChannelShowList").show();
		}
	}
);