var PrimaryContentRotator = Class.create({
	initialize: function(){
		//static var - number of seconds in between teaser rotations
		this.TIMER_INTERVAL = 5;
		
		this.timer = null;
		//start at beginning of teaser list
		this.currentTeaser = null;
		//flash video writing object (swfobject.js)
		this.so = null;
		//image placeholder for videos
		this.videoImage = null;
		
		//find total number of teasers - if no teasers alert developer
		try{
			this.totalTeasers = $$('div.primaryContentTeaser').length;
			if (this.totalTeasers == 0){
				throw 'noTeaser';
			}
		}
		catch (e){
			if (e == 'noTeaser'){
				alert('Please add a teaser');
			}
		}
		
		//create the numbered nav on top of the teasers using this.totalTeasers
		this.populateNav();
		
		//show first teaser and start timer to loop items
		this.showTeaser(1);
		this.startTimer();
		
		$$('div.teaserContent a.video').invoke('observe', 'click', function(e){
			e.stop();
			var element = e.element();
			this.showVideo(e);
		}.bind(this));
		
		//hide all teasers except the first
		$$('div.primaryContentTeaser').invoke('hide');
		$$('div.primaryContentTeaser')[0].setStyle({display: 'block'});
		
		
		
		$('teaserNavPauseLink').observe('click', function(e){
			this.pauseTimer(e);
			e.stop();
		}.bind(this));
		
		$('primaryContentTeaserArea').setStyle({visibility: 'visible'});
		
	},
	
	//create a nav number for each teaser
	populateNav: function(){
		//previous arrow
		if (navigator.userAgent.match("rv:1\.9")){ //if FF3
			$$('div#teaserNav ul')[0].innerHTML += '<li class="ff3"><a href="#" id="teaserNavPrevLink">Previous Article</a></li>';
		}
		else{
			$$('div#teaserNav ul')[0].innerHTML += '<li><a href="#" id="teaserNavPrevLink">Previous Article</a></li>';
		}
		for (var i=1; i<=this.totalTeasers; i++){
			//FF didn't like Prototype insert method here, using innerHTML for now ...
			if (navigator.userAgent.match("rv:1\.9")){ //if FF3
				$$('div#teaserNav ul')[0].innerHTML += '<li class="ff3"><a href="#" rel="' + i + '" class="link">' + i + '</a></li>';
			}
			else{
				$$('div#teaserNav ul')[0].innerHTML += '<li><a href="#" rel="' + i + '" class="link">' + i + '</a></li>';
			}
		}
		//next arrow
		if (navigator.userAgent.match("rv:1\.9")){ //if FF3
			$$('div#teaserNav ul')[0].innerHTML += '<li class="ff3"><a href="#" id="teaserNavNextLink">Next Article</a></li>';
		}
		else{
			$$('div#teaserNav ul')[0].innerHTML += '<li><a href="#" id="teaserNavNextLink">Next Article</a></li>';
		}
		
		//arrow handlers
		$('teaserNavPrevLink').observe('click', function(e){
			this.showPreviousTeaser(true);
			e.stop();
		}.bind(this));
		
		$('teaserNavNextLink').observe('click', function(e){
			this.showNextTeaser(true);
			e.stop();
		}.bind(this));
		
		$$('div#teaserNav ul a.link').invoke('observe', 'click', function(e){
			e.stop();
			var element = e.element();
			//show teaser that corresponds to rel value of nav item
			this.showTeaser(element.readAttribute('rel'));
			
			//remove selected class from all nav items and then add to the clicked item
			$$('div#teaserNav ul a').invoke('removeClassName', 'selected');
			element.addClassName('selected');
			
			//stop timer when a teaser is manually arrived at by user
			this.stopTimer();
			$('teaserNavPauseLink').addClassName('resume');
		}.bind(this));
	},
	
	startTimer: function(){
		this.timer = new PeriodicalExecuter(function(){this.showNextTeaser();}.bind(this), this.TIMER_INTERVAL);
	},
	
	stopTimer: function(){
		if (this.timer != null){
			this.timer.stop();
			this.timer = null;
		}
	},
	
	pauseTimer: function(e){
		if (this.timer == null){
			this.startTimer();
			$(e.element()).removeClassName('resume');
		}
		else{
			this.stopTimer();
			$(e.element()).addClassName('resume');
		}
	},
	
	showTeaser: function(teaserId){
		if (this.so != null){
			if (this.currentTeaser != null){
				this.hideVideo(this.currentTeaser);
			}
			else{
				this.hideVideo(1);
			}
		}
		if (teaserId == this.currentTeaser){
			return false;
		}
		if (this.currentTeaser != null){
			new Effect.Parallel(
				[new Effect.Fade('primaryContentTeaser' + this.currentTeaser, {sync: true}),
				 new Effect.Appear('primaryContentTeaser' + teaserId, {sync: true})],
				{duration: .5}
			);
		}
		
		$$('div#teaserNav ul a').invoke('removeClassName', 'selected');
		$$('div#teaserNav ul a[rel="' + parseInt(teaserId) + '"]')[0].addClassName('selected');
		
		this.currentTeaser = parseInt(teaserId);
	},
	
	showPreviousTeaser: function(userInitiated){
		//stop timer if user clicks on prev button
		if (userInitiated && this.timer != null){
			this.stopTimer();
			$('teaserNavPauseLink').addClassName('resume');
		}
		
		if (this.currentTeaser == 1){
			this.showTeaser(this.totalTeasers);
		}
		else{
			this.showTeaser(this.currentTeaser-1);
		}
	},
	
	showNextTeaser: function(userInitiated){
		//stop timer if user clicks on next button
		if (userInitiated && this.timer != null){
			this.stopTimer();
			$('teaserNavPauseLink').addClassName('resume');
		}
		
		if (this.currentTeaser == this.totalTeasers){
			this.showTeaser(1);
		}
		else{
			this.showTeaser(this.currentTeaser+1);
		}
	},
	
	showVideo: function(e){
		this.stopTimer();
		$('teaserNavPauseLink').addClassName('resume');
		
		var element = e.element();
		this.videoImage = element.up('a');
		//element.setStyle({display: 'none'});
		
		var movieURL = element.up('a').readAttribute('rel');
		var parentId = element.up('div').readAttribute('id');
		
		this.so = new SWFObject(movieURL + '&amp;autoplay=1', "hbsp", "391", "396", "8", "#000");
		this.so.addParam("wmode", "transparent");
		this.so.write(parentId);
	},
	
	hideVideo: function(currentTeaser){
		$('teaserContent' + currentTeaser).firstDescendant().remove();
		this.so = null;
		
		$('teaserContent' + currentTeaser).insert(this.videoImage).observe('click', function(e){
			var element = e.element();
			this.showVideo(e);
		}.bind(this));
	}
});