var Nav = {
	init : function() {
		navItems = $$('#nav ul li');
		//Event.observe(navItems[0], 'mouseover', function() {this.className = 'navEpisodesOver'});
		//Event.observe(navItems[0], 'mouseout', function() {this.className = 'navEpisodes'});
		//Event.observe(navItems[0], 'mouseup', function() {location.href = this.firstChild.href});
		Event.observe(navItems[0], 'mouseover', function() {this.className = 'navVideosOver'});
		Event.observe(navItems[0], 'mouseout', function() {this.className = 'navVideos'});
		Event.observe(navItems[0], 'mouseup', function() {location.href = this.firstChild.href});
		Event.observe(navItems[1], 'mouseover', function() {this.className = 'navClipsOver'});
		Event.observe(navItems[1], 'mouseout', function() {this.className = 'navClips'});
		Event.observe(navItems[1], 'mouseup', function() {location.href = this.firstChild.href});
		Event.observe(navItems[2], 'mouseover', function() {this.className = 'navLineupOver'});
		Event.observe(navItems[2], 'mouseout', function() {this.className = 'navLineup'});
		Event.observe(navItems[2], 'mouseup', function() {location.href = this.firstChild.href});
		
	}
}

var Homepage = {
	init : function() {
		Event.observe($('watchVideos'), 'mouseover', function() {$$('.playButton')[0].className = 'playButtonOver'});
		Event.observe($('watchVideos'), 'mouseout', function() {$$('.playButtonOver')[0].className = 'playButton'});
		b = new Banner('banner', {dataSrc: 'js/bannerData.js'});
		schedLinks = $$('#broadcastSchedule a');
		for(i=0;i<schedLinks.length;i++) {
			Event.observe(schedLinks[i],'mouseover',function() {				
				row = this.up(1);
				row.down().down().className = 'schedLinkOver';
				row.down().next().down().className = 'schedLinkOver';
				row.down().next(1).down().className = 'schedLinkOver';
			});
			
			Event.observe(schedLinks[i],'mouseout',function() {				
				row = this.up(1);
				row.down().down().className = 'schedLink';
				row.down().next().down().className = 'schedLink';
				row.down().next(1).down().className = 'schedLink';
			});
		}
	}
}

var Banner = Class.create({
	initialize : function(obj, options) {
		this.options = {
			dataSrc: 'data.js'
		};
		
		this.slides = [];
		this.currentSlide = "";
		this.obj = Element.extend(document.getElementById(obj));
		
		Object.extend(this.options, options || {});
		this.loadData();
	},
	
	loadData : function() {
		scope = this;
		new Ajax.Request(this.options.dataSrc+'?'+(Math.round(Math.random()*100000)), {
			method: 'get',
			onSuccess: function(request) {
				scope.d = eval('('+request.responseText+')');
				scope.write();
			}
		});
	},
	
	buildBanner : function() {
		scope = this;
		if(this.d) {
			for(i=0; i<this.d.slides.length; i++) {
				this.slides[i] = this.buildSlide(this.d.slides[i]);
			}
		}
		else {setTimeout("scope.buildBanner();", 100);}
	},
	
	buildSlide : function(slideData) {
		if(slideData.clipId != "") {
			return Builder.node('a', {href: 'videos.html#clipId='+slideData.clipId},[
						Builder.node('div', {className: 'slide', style: 'background: transparent url(images/'+slideData.image+') 0 0 no-repeat;'}, [
																																					
							Builder.node('div', {className: 'slideText'},[
								Builder.node('h3', {className: 'slideTitle'}, slideData.title),
								Builder.node('h4', {className: 'slideSubtitle'}, slideData.subtitle)
							]),
							Builder.node('div', {className: 'slideTextBG'})
						])
					]);
		}
		else {
			return Builder.node('div',[
						Builder.node('div', {className: 'slide', style: 'background: transparent url(images/'+slideData.image+') 0 0 no-repeat;'}, [
							Builder.node('div', {className: 'slideText'},[
								Builder.node('h3', {className: 'slideTitle'}, slideData.title),
								Builder.node('h4', {className: 'slideSubtitle'}, slideData.subtitle)
							]),
							Builder.node('div', {className: 'slideTextBG'})
						])
					]);
		}
	},
	
	write : function() {
		this.buildBanner();
		this.currentSlide = 0;
		$(this.obj).appendChild(scope.slides[this.currentSlide]);
		$(this.obj).appendChild(scope.slides[this.currentSlide+1]);
		if(scope.slides.length > 1) {new PeriodicalExecuter(this.next.bind(this), 15);}
	},
	
	next : function() {
		scope = this;
		new Effect.Parallel([
					new Effect.Move($$('.slide')[0].up().setStyle({top:0}), {sync: true, x:0, y:-$(this.obj).getHeight(), mode:'relative'}),
					new Effect.Move($$('.slide')[1].up().setStyle({top:0}), {sync: true, x:0, y:-$(this.obj).getHeight(), mode:'relative'})
				], {duration:1, 
				afterFinish: function() {
					(scope.currentSlide < scope.slides.length-1) ? ++scope.currentSlide : scope.currentSlide=0;
					$$('.slide')[0].up().remove();
					(scope.currentSlide < scope.slides.length-1) ? $(scope.obj).appendChild(scope.slides[scope.currentSlide+1]) : $(scope.obj).appendChild(scope.slides[0]);
					$$('.slide')[0].up().setStyle({top:0});
					$$('.slide')[1].up().setStyle({top:0});
				}});
	}
});

var Episodes = Class.create({
	initialize : function(options) {
		this.options = {
			dataSrc: 'data.js'
		};
		
		this.episodes = [];
		
		Object.extend(this.options, options || {});
		this.loadData();
	},
	
	loadData : function() {
		scope = this;
		new Ajax.Request(this.options.dataSrc+'?'+(Math.round(Math.random()*100000)), {
			method: 'get',
			onSuccess: function(request) {
				scope.d = eval('('+request.responseText+')');
				scope.buildEpisodes();
				if(window.location.hash!="") {window.location.hash=window.location.hash;}
			}
		});
	},
	
	buildEpisodes : function() {
		scope = this;
		if(this.d) {
			e = this.d.episodes;
			for(i=0; i<e.length; i++) {$('episodes').insert(this.buildEpisode(e[i],0));}
		}
		else {setTimeout("scope.buildEpisodes();", 100);}
	},
	
	buildEpisode : function(e,n) {
		if(e.slides[n].clipId != "") {
			ep = Builder.node('a', {name: e.name, style:'float: left'}, [
				Builder.node('div', {className: 'episode'}, [
					Builder.node('div', {className: 'episodeComedians'}, [
						Builder.node('div', {className: 'slideNav'}, [
							Builder.node('div', {className: 'slideNavPrev'}),
							Builder.node('div', {className: 'slideNavNext'})
						]),
						Builder.node('a', {href: 'videos.html#clipId='+e.slides[n].clipId, style:'position:absolute'},[
							Builder.node('div', {className: 'slide', style: 'background: transparent url(images/'+e.slides[n].image+') 0 0 no-repeat;'}, [
								Builder.node('div', {className: 'slideText'},[
									Builder.node('h3', {className: 'slideTitle'}, e.slides[n].title),
									Builder.node('h4', {className: 'slideSubtitle'}, e.slides[n].subtitle)
								]),
								Builder.node('div', {className: 'slideTextBG'})
							])
						])
					]),
					Builder.node('div', {className: 'episodeDesc'}, [
						Builder.node('div', {className: 'episodeDescInner'}, [
							Builder.node('h2', {className: 'episodeShowName'}, e.episode),
							Builder.node('h3', {className: 'episodeDate'}, e.date),
							Builder.node('p', {className: 'epDescText'}, '')
						])
					])
				])
			])
		}
		else {
			ep = Builder.node('a', {name: e.name, style:'float: left'}, [
				Builder.node('div', {className: 'episode'}, [
					Builder.node('div', {className: 'episodeComedians'}, [
						Builder.node('div', {className: 'slideNav'}, [
							Builder.node('div', {className: 'slideNavPrev'}),
							Builder.node('div', {className: 'slideNavNext'})
						]),
						
						Builder.node('div', {style:'position:absolute'},[
							Builder.node('div', {className: 'slide', style: 'background: transparent url(images/'+e.slides[n].image+') 0 0 no-repeat; position:absolute;'}, [
								Builder.node('div', {className: 'slideText'},[
									Builder.node('h3', {className: 'slideTitle'}, e.slides[n].title),
									Builder.node('h4', {className: 'slideSubtitle'}, e.slides[n].subtitle)
								]),
								Builder.node('div', {className: 'slideTextBG'})
							])
						])
						
					]),
					Builder.node('div', {className: 'episodeDesc'}, [
						Builder.node('div', {className: 'episodeDescInner'}, [
							Builder.node('h2', {className: 'episodeShowName'}, e.episode),
							Builder.node('h3', {className: 'episodeDate'}, e.date),
							Builder.node('p', {className: 'epDescText'}, '')
						])
					])
				])
			]);
		}
		epDescText = $(ep).getElementsByClassName('epDescText')[0];
		epDescText.innerHTML = e.desc;
		
		ep.data = e;
		ep.current = n;
		ep.parentObj = this;
		if(e.slides.length > 1) {
			prev = $(ep).getElementsByClassName('slideNavPrev')[0];
			next = $(ep).getElementsByClassName('slideNavNext')[0];

			Event.observe(prev,'mouseover',(function(ep) {return function() {ep.getElementsByClassName('slideNavPrev')[0].className='slideNavPrevOver';};})(ep));
			Event.observe(prev,'mouseout',(function(ep) {return function() {ep.getElementsByClassName('slideNavPrevOver')[0].className='slideNavPrev';};})(ep));
			Event.observe(prev,'mouseup',this.previous.bind(ep));
			
			Event.observe(next,'mouseover',(function(ep) {return function() {ep.getElementsByClassName('slideNavNext')[0].className='slideNavNextOver';};})(ep));
			Event.observe(next,'mouseout',(function(ep) {return function() {ep.getElementsByClassName('slideNavNextOver')[0].className='slideNavNext';};})(ep));
			Event.observe(next,'mouseup',this.next.bind(ep));
			
		} else {
			$(ep).getElementsByClassName('slideNav')[0].setStyle('display: none');
		}
		
		return ep;
	},
	
	next : function() {
		scope = this.parentObj;
		(this.current+1 == this.data.slides.length) ? n=0 : n=this.current+1;
		newSlide = scope.buildEpisode(this.data,n);
		this.parentNode.replaceChild(newSlide,this);
	},
	
	previous : function() {
		scope = this.parentObj;
		(this.current-1 == -1) ? n=this.data.slides.length-1 : n=this.current-1;
		newSlide = scope.buildEpisode(this.data,n);
		this.parentNode.replaceChild(newSlide,this);
	}
});

Event.observe(window,'load', Nav.init);