/* 
*  slideshow javascript
*  Date: 27-03-2007
*  v.1.0 */

var slideArray = [];
var currSlide = 0;
var run = '';
var slideshow = {
	
	init: function() {
		slideArray = $$('.slide');
		it = 0;
		
		var nn = new Fx.Style('slide', 'opacity').custom(1);
		
		ctrl = new Element('div').setProperty('id', 'slideshow-control').addClass('cf');
		ctrl.injectInside('slide-nav');
		dl = new Element('dl').injectInside(ctrl);
		
		slideArray.each(function(s) {
			doThis = 'slideshow.slide('+ it +');slideshow.clearRun()';
			dd = new Element('dd').injectInside(dl).setHTML('<a title="View image '+ (it+1) +'" onclick="'+doThis+'" onkeypress="'+doThis+'"></a>');
			it += 1;	
		});	
	
		doThis = 'slideshow.clearRun()';
		dd = new Element('dd').setProperty('id', 'stop').injectInside(dl).setHTML('<a class="slide-pause" title="Pause slideshow" onclick="'+doThis+'" onkeypress="'+doThis+'"><img src="/system/modules/com.candg.mortgages.toolsuite/resources/images/buttons/slideshow_pause.gif" width="33" height="27" /></a>');
		
		this.slide(0);	
	},
	
	slide: function(n) {
		if (currSlide != n) {
			
			if(window.ie6) {
				if($E('a','slide') != null) $E('a','slide').setStyle('display','none');
				$('slide').effect('opacity',{onComplete: function(){
						$('slide').replaceWith(new Element('div').setProperty('id', 'slide').setStyle('opacity', '0'));
						slideArray[n].injectInside('slide');
						if($E('a','slide') != null) $E('a','slide').setStyle('display','none')
						$('slide').effect('opacity',{onComplete: function() {
							if($E('a','slide') != null) $E('a','slide').setOpacity(0).setStyle('display','block').effect('opacity').start(1);
						}}).start(1);

				}}).start(0);
			} else {
				var fdO = new Fx.Style('slide', 'opacity', {duration:500,transition: Fx.Transitions.sineInOut, 
					onComplete: function(){
						$('slide').replaceWith(new Element('div').setProperty('id', 'slide').setStyle('opacity', '0'));
						slideArray[n].injectInside('slide');
						var fdI = new Fx.Style('slide', 'opacity', {duration:500,transition: Fx.Transitions.sineInOut});
						fdI.custom(0,1);
				}});
				fdO.custom(1,0);
			}
			
			
			$$('#slideshow-control dd')[currSlide].toggleClass('on');
			$$('#slideshow-control dd')[n].toggleClass('on');
			currSlide = n;
		} else if (!$$('#slideshow-control dd')[currSlide].hasClass('on')) $$('#slideshow-control dd')[currSlide].toggleClass('on');
	},
	
	step: function(dir) {
		v = currSlide + dir;
		if ((v < slideArray.length) && (v != -1) && (dir != 0)) {
			this.slide(currSlide + dir);
		} else if (v = slideArray.length) {
			this.clearRun();
			this.slide(0);	
		}
	},
	
	runthrough: function(s) {
		run = (function(){slideshow.step(s)}).periodical(5000); 
	},
	
	restart: function(s) {
		this.toggle();
		run = (function(){slideshow.step(s)}).periodical(5000); 
	},
	
	
	clearRun: function() {
		this.toggle(0);
		$clear(run);	
	},
	
	toggle: function(c) {
		if (($('stop').getFirst().innerHTML == 'pause') || (c == 0)) {
			$('stop').setHTML('<a class="slide-pause" title="Restart slideshow" onclick="slideshow.restart(1)" onkeypress="slideshow.restart(1)"><img src="/system/modules/com.candg.mortgages.toolsuite/resources/images/buttons/slideshow_play.gif" width="33" height="27" alt="Play" /></a>');
		} else $('stop').setHTML('<a title="Pause slideshow" onclick="slideshow.clearRun()" onkeypress="slideshow.clearRun()"><img src="/system/modules/com.candg.mortgages.toolsuite/resources/images/buttons/slideshow_pause.gif" width="33" height="27" alt="Pause" /></a>');
	}

}

var WhizzyTransitioningBackgroundChanger = new Class({
	initialize: function(elm) {
		this.elm = $(elm);
		this.stack = elm.getChildren();
		var ctrl = new Element('dl').setProperty('id', 'control').addClass('cf').injectAfter(elm);
		var changer = this;
		this.stack.each(function(child, i) {
			dd = new Element('dd').injectInside(ctrl);
			a = new Element('a').setProperty('title','View image '+ (i+1)).setHTML(i+1).inject(dd);
			a.addEvent('click', function() {
				$clear(runner);
				changer.single(child.getProperty('id'));
				changer.to.bind(child.getProperty('id'), changer)
			});
		});
		ctrl.adopt(new Element('dd').adopt(new Element('a',{
			'id':'pause',
			'events':{'click':changer.pause.bind(changer)},
			'title':'Pause'
		}).setHTML("Pause")));
		this.stack.each(function(child,i) {
			if (elm.getFirst() == child) {
				$$('dd','control')[i].addClass('on');
				return;
			}
			child.setStyle('opacity', 0);
		});
		this.position = this.stack.length - 1;
		this.run();
	},
	_transition: function(from, to) {
		new Fx.Style(this.stack[from], 'opacity').start(0);
		new Fx.Style(this.stack[to], 'opacity').start(1);
	},
	next: function() {
		var next = this.position + 1 > this.stack.length - 1 ? 0 : this.position + 1;
		this._transition(this.position, this.position = next);
	},
	back: function() {
		var back = this.position - 1 < 0 ? this.stack.length - 1 : this.position - 1;
		this._transition(this.position, this.position = back);
	},
	to: function(id) {
		console.log("to: position: "+this.position)
		this._transition(this.position, this.position = this.stack.indexOf(this.elm.getElement('#'+id)));
	},
	single: function(id) {
		var back = this.position - 1 < 0 ? this.stack.length - 1 : this.position - 1;
		$$('dd','control').removeClass('on');
		$$('dd','control')[this.stack.indexOf(this.elm.getElement('#'+id))].addClass('on');
	},
	pause: function() {
		$clear(runner);
	},
	toggle: function() {
		var next = this.position + 1 > this.stack.length - 1 ? 0 : this.position + 1;
		this._transition(this.position, this.position = next);
		var back = this.position - 1 < 0 ? this.stack.length - 1 : this.position - 1;
		$$('dd','control')[back].removeClass('on');
		$$('dd','control')[this.position].addClass('on');
	},
	run: function() {
		runner = this.toggle.bind(this).periodical(4000);
	}
});


window.addEvent('load', function() {
	slideshow.init();
	slideshow.runthrough(1);
	//var changer = new WhizzyTransitioningBackgroundChanger($('imageslide'));
});