//safely 'hide' element with a temporary style
document.write('<style id="GE_FactoidImgListStyleEl" type="text/css">.factoid_img_list{position:absolute;top:0;left:-10000px;}</style>');

//factoid img list
var GE_FactoidImgList = Class.create( {

selectedIndex:-1,
liEls:null,
autoplayInterval:6000,
playiid:null,
idleiid:null,
lastTouched:null,
	
initialize:function(el) {
	var ulEl = $(el);
	Element.cleanWhitespace( ulEl );
	this.liEls = ulEl.immediateDescendants();

	ulEl.setStyle({height:"248px",width:"600px",position:"relative",zIndex:"1"});
	for (var i=0; i<this.liEls.length; i++) {
		var liEl = $(this.liEls[i]);
		var aEl = liEl.down('a');
		var imgEl = aEl.down('span');
		liEl.setStyle({background:"transparent "+imgEl.getStyle('background-image')+" no-repeat 0 0",display:"none",height:'248px',position:"absolute",width:'600px'});
		//aEl.setStyle({left:'0',height:'229px',overflow:'hidden',position:'absolute',textIndent:'-9999px',top:'0',width:'199px'}).update( imgEl.readAttribute('alt') );
	}

	var prevEl = new Element('a',{href:'#'});
	prevEl
		.setStyle({left:'0',height:'19px',overflow:'hidden',position:'absolute',textIndent:'-9999px',top:'229px',width:'26px',zIndex:'2'})
		.insert('Previous Story')
		.observe( "mouseover", function(e) { this.touch(); Event.stop(e); }.bindAsEventListener(this) )
		.observe( "mouseout", function(e) { Event.stop(e); }.bindAsEventListener(this) )
		.observe( "click", function(e) { this.touch(); this.select( ((this.selectedIndex-1)<0) ? this.liEls.length-1 : (this.selectedIndex-1) % this.liEls.length ); Event.stop(e); }.bindAsEventListener(this) );

	var nextEl = new Element('a',{href:'#'});
	nextEl
		.setStyle({left:'173px',height:'19px',overflow:'hidden',position:'absolute',textIndent:'-9999px',top:'229px',width:'26px',zIndex:'2'})
		.insert('Next Story')
		.observe( "mouseover", function(e) { this.touch(); Event.stop(e); }.bindAsEventListener(this) )
		.observe( "mouseout", function(e) { Event.stop(e); }.bindAsEventListener(this) )
		.observe( "click", function(e) { this.touch(); this.select( (this.selectedIndex+1) % this.liEls.length ); Event.stop(e); }.bindAsEventListener(this) );

	ulEl.insert({after:nextEl}).insert({after:prevEl});
	
	//add class to h2
	var spEl = $$('.splash_content')[0];
	if (spEl) spEl.addClassName('with_tab_factoid').removeClassName('with_factoid');

	//time to unhide content
	$("GE_FactoidImgListStyleEl").remove();
	this.autoplay();
},
autoplay:function() {
	this.cancelAutoplay();
	this.cancelCheckIdle();
	this.autoplayIvl();
	this.playiid = setInterval( this.autoplayIvl.bind(this), this.autoplayInterval);
},
autoplayIvl:function() {
	this.select( (this.selectedIndex+1) % this.liEls.length );
},
cancelAutoplay:function() {
	clearInterval(this.playiid);
	this.playiid = null;
},
touch:function() {
	this.cancelAutoplay();
	this.checkIdle();
},
checkIdle:function() {
	this.cancelCheckIdle();
	this.lastTouched = new Date().getTime();
	this.checkIdleIvl();
	this.idleiid = setInterval( this.checkIdleIvl.bind(this), 1000);
},
checkIdleIvl:function() {
	var t = new Date().getTime();
	var touchGap = t - this.lastTouched;

	if (touchGap>5000) {
		this.autoplay();
	}
},
cancelCheckIdle:function() {
	clearInterval(this.idleiid);
	this.idleiid = null;
},
deselect:function( idx ) {
	var sidx = this.selectedIndex;
	if (sidx != idx) return;

	this.selectedIndex = -1;

	var liEl = $(this.liEls[sidx]);
	var afterFinishFn = function(){
		this.setStyle({zIndex:"1"});
	}.bind(liEl);
	liEl.setStyle({zIndex:"2"});
	new Effect.Fade(liEl, { duration: 0.2, afterFinish:afterFinishFn });

},
select:function( idx ) {
	var sidx = this.selectedIndex;
	if (sidx == idx) return;

	if (sidx > -1) {
		this.deselect(sidx);
	}
	this.liEls[idx].setStyle({display:"block", zIndex:"1"});

	this.selectedIndex = idx;
}
});

GE_Main.mapCSSToFn('factoid_img_list', GE_FactoidImgList);