// JavaScript Document

function FadeSwapList(ulId) {
	this.getList(ulId);
	// we set up some internal parameters, start with the ID of the UL in question
	this.ulid = ulId;
	// set a default, or null for now if not passed
	this.defaulta = arguments[1] || null;
	// set a timer, or 1000 if not passed
	this.timer = arguments[2] || 1000;
	// select our UL element and modify its style a little
	this.uldom = document.getElementById(ulId);
	this.uldom.style.display='block'; // just making sure
	this.uldom.style.position='relative'; // required for the absolute pos of the LIs
	this.uldom.style.margin='0px'; // required for smooth fade, or alter LI top/left to match
	this.uldom.style.padding='0px'; // required for smooth fade, or alter LI top/left to match
	// then we get the children of the UL and mess with them
	this.lis = this.uldom.getElementsByTagName('li');
	for(var i=0;i<this.lis.length;i++) { // do this to all of them
		var li = this.lis[i]; // make a temp var
		// and set a bunch of styles on them
		// force them to abs pos, top left, not shown, and transparent
		li.style.display='block';
		li.style.listStyle='none';
		li.style.position='absolute';
		li.style.display='none';
		li.style.top='0px';
		li.style.left='0px';
		li.style.margin='0px';
		li.style.padding='0px';
		li.style.opacity='0';
		li.style.filter='alpha(opacity=0)';
	}
	// now we set our default LI if it wasn't specified
	if(!this.defaulta) this.defaulta = this.lis[0].id;
	// prep to get our available nav links out of the page
	this.linklist = []; // make a containing array
	var alllinks = document.getElementsByTagName('a'); // get EVERY link on the page
	
	var t = this; // this is to create a 'closure' - ask if you don't understand
	for(var i=0;i<alllinks.length;i++) { // look at all the links
		
		var lnk = alllinks[i];// create a temp var for clearer syntax & speed
		// we test if the link has the right class - by looking at the 'hash' param
		// if it starts with this UL's ID param, then we assume it's to select a LI
		if(lnk.hash.substr(1,this.ulid.length)==this.ulid) {
			this.linklist.push(lnk); // add the link to the list we started earlier
			
			lnk.onclick = function() { // then change the link click to do what we want
				
				for(var i=0;i<t.linklist.length;i++) { // scan the links for this UL
					// and kill the 'selected' class from them all
					if(t.linklist[i].className==" selected")
						t.linklist[i].className =' unselected';//t.linklist[i].className.replace(/ selected/,' unselected');
				}
				// then add the 'selected' class to this one
				t.count=this.hash.substring(this.hash.length-1);
				this.className += ' selected';
				// then run the 'fadeTo' method of this class (referenced by closure 't')
				t.fadeTo(this.hash.substring(t.ulid.length+2));
				// return false so the link doesn't do anything unexpected
				return false;
			}
		}
		
	}
	
    this.count = 1;
	FadeSwapList.prototype.charge=function(){
		for(var i=1;i<=t.linklist.length;i++){
			if(i==this.count){
				this.fadeTo(t.linklist[i-1].hash.substring(t.ulid.length+2));
				}
		}
	}
	FadeSwapList.prototype.change=function(){
		t.count++
		if(t.count>t.linklist.length){
			t.count = 1;
			}
		t.charge();
	}
	setInterval(this.change,5000);
	
/*	setInterval(function(no){
		for(i=1;i==this.linklist.length;i++){
				if(no==i){
						this.fadeTo(this.linklist[i+1].hash.substring(this.ulid.length+2));
					}
		}
		m++;
	},5000);
	
*/	
	if(this.defaulta) { // now, if we had a default...
		for(var i=0;i<this.linklist.length;i++) { // check our link list
			var lnk = this.linklist[i];
			// and select the corresponding link, if it exists
			if(lnk.hash == '#'+this.ulid+'_'+this.defaulta) lnk.className += ' selected';
		}
		// then fade in the default view
		this.fadeIn(document.getElementById(this.defaulta));
	}
} // that's it for the class!

// now some class functions, added to the prototype:
// fadeTo just clears the old fade and starts a new one so they fade over each other...
FadeSwapList.prototype.fadeTo = function(whoID) {
	// if there's a current one, fade it out...
	if(this.currentli) this.fadeOut(this.currentli);
	// then fade in the new one (passed by whoID)
	this.fadeIn(document.getElementById(whoID));
}
// fadeIn brings an LI into view over time
FadeSwapList.prototype.fadeIn = function(who) {
	// preset to make sure we start on the right foot...
	who.style.opacity = '0';
	who.style.filter = 'alpha(opacity=0)';
	who.opac = 0;
	var w = who; // another self-ref for another closure!
	// create an interval time based on our overal timout
	var intvl = parseInt(this.timer/20,10); 
	// clear the process in case we'd already started...
	if(w.fading) clearInterval(w.fading);
	var t = this; // more closure refs!
	// setting to relative and block forces page reflow immediately
	w.style.position='relative';
	w.style.display = 'block';
	// then we set the interval to actually smoothly change transparency
	w.fading = setInterval(function() {
		w.opac+=5; // increase opacity (0-100) by 5
		if(w.opac>=100) { // if we're done, set all to opaque
			w.style.opacity = '1';
			w.style.filter = 'alpha(opacity=100)';
			clearInterval(w.fading); // and stop the interval
			t.currentli = w; // and tell the main that this one's current now...
		} else { // otherwise...
			w.style.opacity = w.opac/100; // set opacity val for CSS2 browsers
			w.style.filter = 'alpha(opacity='+w.opac+')'; // set same for MSIE :(
		}

	},intvl); // based on the interval we found (timer/20)
}
// and fadeOut does fadeIn but in reverse...
FadeSwapList.prototype.fadeOut = function(who) {
	// set the defaults
	who.style.opacity = '1';
	who.style.filter = 'alpha(opacity=100)';
	who.opac = 100;
	var w = who; // closure ref!
	var intvl = parseInt(this.timer/20,10); // set interval amount
	if(w.fading) clearInterval(w.fading); // clear if started
	// set to absolute so it doesn't compete for space
	// this is what allows both parts to take up same space on page
	w.style.position='absolute'; 
	// and again, do the interval function
	w.fading = setInterval(function() {
		w.opac-=5; // -5 instead of +5
		if(w.opac<=0) { // if we're there, then set it all
			w.style.opacity = '0';
			w.style.filter = 'alpha(opacity=0)';
			// kill it entirely so it doesn't get in the way even
			// when it's transparent
			w.style.display = 'none'; 
			clearInterval(w.fading); // and stop interval
		} else { // otherwise...
			w.style.opacity = w.opac/100; // set opacity val for CSS2 browsers
			w.style.filter = 'alpha(opacity='+w.opac+')'; // set same for MSIE :(
		}

	},intvl); // based on the interval we found (timer/20)
}
FadeSwapList.prototype.getList = function(id){
	this.adet=(document.getElementById("navul")).getElementsByTagName("li").length;
	this.links="";
	for(i=1;i<=this.adet;i++)
		this.links+='<a href="#'+id +'_nav'+i+'">'+i+'</a>';
	document.getElementById("navmenu").innerHTML=this.links;
	}
	
// that's it! now we call it as 
// new FadeSwapList(ulID,liID,timer);
// onload or later!
window. onload = function() {	var navUL = new FadeSwapList('navul');}