/**
 * Simple x-browser event binder
 */
function __addEventListener( El, name, Callback ){
	if( El.addEventListener != null ){
		// DOM
		El.addEventListener( name, Callback, false );
	}
	else if( El.attachEvent != null ){
		// Win IE
		El.attachEvent( 'on'+name, Callback );
	}
	else {
		El['on'+name] = Callback;
	}
}

// Array of HeadlinePanel objects
RotatingHeadlines.prototype.panels = [ ];

// Delay between slides, in milliseconds.
// Note: this includes animation time
RotatingHeadlines.prototype.delay = 5000;

// Timer id for use with setInterval/clearInterval
RotatingHeadlines.prototype.timerId = null;

// Currently active panel index
RotatingHeadlines.prototype.currentIdx;


/**
 * Rotating headlines constructor
 */
function RotatingHeadlines( Id, defaultIdx){
	try {
		this.init( Id, defaultIdx );
	}
	catch ( ignore ){
		var Me = this;
		var initClosure = function(){ Me.init( Id, defaultIdx ) }
		__addEventListener( window, 'load', initClosure );
	}
}




/**
 * initializer, invoked on window load
 */
RotatingHeadlines.prototype.init = function( Id, defaultIdx ){
	var elDiv = document.getElementById( Id );
	if( elDiv == null ){
		throw 'no element '+Id;
	}
	// grab all panels, sub-divs with class starting "panel"
	var divs = elDiv.getElementsByTagName('DIV');
	for( var i = 0; i < divs.length; i++ ){
		var elPanel = divs[i];
		if( elPanel.className.indexOf('panel') === 0 ){
			var Panel = new HeadlinePanel(elPanel);
			if( this.panels.length !== defaultIdx ){
				Panel.showPrepare();
			}
			this.panels.push( Panel );
		}
	}
	// start off automatic rotation of panels.
	this.currentIdx = defaultIdx;
	this.showNav( defaultIdx );
	this.startTimer();
}

/**
 * Start timer
 */
RotatingHeadlines.prototype.startTimer = function(){
	this.stopTimer();
	var Me = this; 
	var intervalClosure = function(){ Me.onInterval(); }
	this.timerId = setInterval( intervalClosure, this.delay );
}

/**
 * Stop timer
 */
RotatingHeadlines.prototype.stopTimer = function(){
	if( this.timerId != null ){
		clearInterval( this.timerId );
		this.timerId = null;
	}
}

/**
 * Interval callback
 */
RotatingHeadlines.prototype.onInterval = function(){
	//this.stopTimer();
	this.nextPanel();
	//this.startTimer();
}

/**
 * Show next panel
 */
RotatingHeadlines.prototype.nextPanel = function(){
	if( this.currentIdx == null ){
		var nextIdx = 0;
	}
	else {
		var nextIdx = this.currentIdx + 1;
		// wrap if past final panel
		if( nextIdx === this.panels.length ){
			nextIdx = 0;
		}
		// existing panel may animate out
		var currentPanel = this.panels[ this.currentIdx ];
		currentPanel.hide();
		this.hideNav(this.currentIdx);
	}
	var Panel = this.panels[ nextIdx ];
	Panel.show();
	this.showNav( nextIdx );
	this.currentIdx = nextIdx;
}

/**
 * Click initiated panel show.
 * This deactivates automatic slideshow as user has interacted.
 */
RotatingHeadlines.prototype.goPanel = function( index ){
	if ( this.currentIdx === index ) {
		return false;
	}
	this.stopTimer();
	var currentPanel = this.panels[ this.currentIdx ];
	currentPanel.hide();
	this.hideNav(this.currentIdx);
	var Panel = this.panels[ index ];
	Panel.show();
	this.currentIdx = index;
	this.showNav(index);
	return true;
}


RotatingHeadlines.prototype.showNav = function(index){
	var title = document.getElementById( 'high'+index );
	var links = document.getElementById( 'sub'+index );
	title.style.display = 'none';
	links.style.display = 'block';
}

RotatingHeadlines.prototype.hideNav = function(index){
	var title = document.getElementById( 'high'+index );
	var links = document.getElementById( 'sub'+index );
	title.style.display = 'block';
	links.style.display = 'none';
}

/**
 * Headline panel wrapper
 */
function HeadlinePanel( elDiv ){
	this.id = elDiv.id;
	this.elDiv = elDiv;
}


/**
 * Animate this panel in
 */
HeadlinePanel.prototype.show = function (){
	this.showPrepare();
	// Slide across into view
	new Effect.Move( this.elDiv, { 
		x: 0,
		y: 0, 
		mode: 'absolute' 
	} );
}


/**
 * Animate this panel to hidden state
 */
HeadlinePanel.prototype.hide = function (){
	// swap to lower depth
	this.setDepth( 0 );
	// fade out
	new Effect.Opacity( this.elDiv, { 	
	  duration: 1.0,
	  transition: Effect.Transitions.linear,
	  from: 1, 
	  to: 0
	} );
}


/**
 * Move panel into pre-show state
 */
HeadlinePanel.prototype.showPrepare = function (){
	// snap to start of animation
	this.elDiv.style.left = '625px';
	// make opaque
	new Effect.Opacity( this.elDiv, { 
	  duration: 0,
	  from: 1, 
	  to: 1
	} );	
	// swap to higher depth
	this.setDepth(1);
}


/**
 * 
 */
HeadlinePanel.prototype.setDepth = function ( z ){
	this.elDiv.style.zIndex = z;
}