// JavaScript Document

var ImageSwitcher = Class.create({
	// these class properties are stored here so that all methods of the class can use them below.  because our rotation
	// has to be both automatic but interruptable by someone clicking on the individual breadcrumb links, we need the rotation
	// function separated out of the setInterval call in initialize below.  
	
	interval: 10000,					// length of the rotation interval in miliseconds
	intervalID: null,				// the ID of our interval so that it can be stopped and restarted
	breadcrumbs: null,				// the rotation_breadcrumbs element from the DOM
	containers: null,				// a list of all image containers in the DOM
	container: null,				// the currently shown image container for easy reference
	
	initialize: function() {
		this.containers = $("rotation").select("div.container");
		this.breadcrumbs = $("rotation_breadcrumbs").removeClassName("hidden");
		
		// now that we have a list of our containers, we want to remove the "hidden" class name that all but the first
		// currently have.  this ensures that the CSS isn't going to override our JS code below.  then we set those which
		// we hidden transparent so that we don't ever see more than one image layered on top of one another.  finally,
		// the hidden contaniers have to be at z-index 5 since we put the visible one at 10 (below).  this allows the 
		// links to work that are contained with in them.
		
		this.containers.each(function(el) {
			if(el.hasClassName("hidden")) el.removeClassName("hidden").setOpacity(0).setStyle("z-index: 5");
		});
		
		this.container = this.containers.first().setStyle("z-index: 10");
		this.intervalID = window.setInterval(function() { this.switcher(); }.bind(this), this.interval);
		this.breadcrumbs.observe("click", this.onBreadcrumbClick.bind(this)).setStyle("z-index: 15");		
	},
	
	switcher: function(show_me_id) {
		var hide_me = this.container;							// we want to hide the current container
		
		var show_me = null;
		if(show_me_id) 	show_me = $(show_me_id);
		else {
			show_me = hide_me.next("div.container");			// and show the one after it which is next in the DOM
			if(!show_me) show_me = this.containers.first();		// if there isn't a next one, then we go back to the first one
		}
	
		// now we'll use the Scriptaculous Effect.Opacity object to manipulate the visibility of the elements in question.
		// the hide_me element is transitioned from opaque to transparent while the show_me element is shown over the
		// same duration (in seconds).
	
		new Effect.Opacity(hide_me.setStyle("z-index:  5"), { from: 1, to: 0, duration: 0.5 });
		new Effect.Opacity(show_me.setStyle("z-index: 10"), { from: 0, to: 1, duration: 0.5 });
		
		// finally, we need to set the container variable (used via closure) to the show_me element so that
		// when this function is executed on the next interval, we will be hiding it.  then, using it's ID 
		// we can identify the breadcrumb to mark as on as well.
		
		this.container = show_me;
		var id = this.container.readAttribute("id");
		this.breadcrumbs.down("li."+id).addClassName("on").siblings().invoke("removeClassName", "on");
	},
	
	onBreadcrumbClick: function(event) {
		// if the breadcrumb that's currently "on" is clicked, we do nothing and return from this function
		
		var breadcrumb = $(event.target);
		if(breadcrumb.hasClassName("on")) return;
		
		// if we didn't return, then we need to stop the interval or we might switch soon after a person clicks.
		// then we can pass the image we want to show -- in the class name of the breadcrumb -- to the switcher
		// function which will handle the showing and hiding.  
		
		window.clearInterval(this.intervalID);
		var show_me = breadcrumb.readAttribute("class");
		this.switcher(show_me);
		
		// finally, we restart our interval.  if, in the future, we don't want the interval restarted after a 
		// person clicks, then comment out the following line.
		
		this.intervalID = window.setInterval(function() { this.switcher(); }.bind(this), this.interval);
	}
});

document.observe("dom:loaded", function() { ImageSwitcher = new ImageSwitcher(); });