var flowChart;

var flowChartObject = Class.create();
flowChartObject.prototype = {
  
  chart: null,
  activeImage: 0,
  images: 0,
  slideShow: null,
  
	initialize: function() {
		this.baseUrl = urlBase;
		this.imagePause = "img/pause.png";
		this.imagePlay = "img/play.png";		
		this.id = 'flowChart';
		this.slideShowActive = 0;
		this.activeImage = 0;
		this.images = 0;
		this.chart = flowChart;
		
		this.setupImages();
		this.buildNav();

		this.startSlideShow();
		
		Element.observe($('close'), "click", function() { flowChart.slideShow.stop(); });
	},
	
	buildNav: function() {
		$('flowChart').wrap({ id: 'flowChartWrapper' });
		$('flowChartWrapper').insert({
			bottom: new Element('div', { id: 'flowChartNav' })
		});
	
		for (var i = 0; i < this.images; ++i) {
			h = i + 1;
			$('flowChartNav').insert({
				bottom: '<a id="flowChartNav_'+i+'" onclick="flowChart.goTo('+i+')">'+h+'</a>'
			});
		}
		$('flowChartNav_0').addClassName('active');
		
		$('flowChartNav').insert({
			bottom: '<a id="flowChartNavControl" onclick="flowChart.toggleSlideShow()"></a>'
			});
	},
	
	startSlideShow: function() {
		if(this.activeImage == (this.images - 1))
			this.goTo(0);
		this.slideShow = new PeriodicalExecuter(this.nextImage, 5);
		this.slideShowActive = 1;
		$('flowChartNavControl').innerHTML = '<img src="' + this.baseUrl + this.imagePause + '" alt="control">';
	},
	
	stopSlideShow: function() {
		this.slideShow.stop();
		$('flowChartNavControl').innerHTML = '<img src="' + this.baseUrl + this.imagePlay + '" alt="control">';		
	},
	
	toggleSlideShow: function() {
		if(this.SlideShowActive == 0) {
			this.startSlideShow();
			this.SlideShowActive = 1;
		} else {
			this.stopSlideShow();
			this.SlideShowActive = 0;
		}
	},
	
	nextImage: function() {
		if(flowChart.activeImage == (flowChart.images-1))
			flowChart.stopSlideShow();
		else
			flowChart.change(flowChart.activeImage+1);
	},
	
	goTo: function(image) {
		this.change(image);
		this.stopSlideShow();
		this.SlideShowActive = 0;
	},
	
	change: function(image) {
		if(image != this.activeImage) {
			new Effect.Parallel([
				new Effect.Appear($('flowChart_' + image), {sync: true} ),
				new Effect.Fade($('flowChart_' + this.activeImage), {sync: true} )],
				{
					duration: 2,
					delay: 0.1
				}
			);
		}
		$('flowChartNav_'+image).addClassName('active');
		$('flowChartNav_'+this.activeImage).removeClassName('active');
		
		this.activeImage = image;
	},
	
	setupImages: function() {	
		listElements = $(this.id).childElements();
		
		for (var i = 0; i < listElements.length; ++i) {
			if( i != 0)
				listElements[i].setStyle ({ display: 'none' });
			listElements[i].writeAttribute('id', 	this.id + '_' + i);
		}
		this.images = i;
	}
	
}