var ws_chk_fields = {};

document.observe('dom:loaded', function(e) {	
	$$('#topcontent .topleft div.slideshow').each(function(elm) {
		new Slideshow(elm);
	});	
	$$('#topcontent .topleft div.whitebox').each(function(elm) {
		new Popup(elm);
	});
	
	if ($('contactForm')) {
		ws_chk_fields['contactForm'] = {
			'forename': true,			
			'email': {
				'test': false,
				'type': WSForm.ValueTypes.Email
			},
			'phone': true
		};
		
		new WSForm($('contactForm'), {}, ws_chk_fields['contactForm']);
	}
})

var Slideshow = Class.create({
	slideshow: null,
	whitebox: null,
	images: null,
	indexDisplay: null,
	index: -1,
	interval: 5000, // milliseconds
	timerId: null,
	
	animating: false, // mutex
	
	initialize: function(slideshow) {
		if (!slideshow) {
			return;
		}
		this.slideshow = slideshow;
		this.images = this.slideshow.select('img');
		this.slideshow.addClassName('js');
		this.hideImage();
		this.createNav();
		this.whitebox = new WSWhiteBox({
			'elements': [
				new Element("a", {
					'href': '#',
					'rel': WSWhiteBox.Actions.hide,
					'class': 'close'
				}).update("Close").insert(
					new Element("span")
				)
			]
		});
		this.showImage();
		this.timerId = setInterval(function() {
			this.toggleImage((this.index + 1) % this.images.length);
		}.bind(this), this.interval)
	},
	
	hideImage: function(index) {
		if (index) {
			this.images[index].hide();
		} else {
			this.images.each(function(elm) {
				elm.hide();
			});
		}
	},
	
	showImage: function(index) {
		index = index ? index : 0;
		this.images[index].show();
		this.updateIndex(index);
	},
	
	createNav: function() {
		var nav = new Element('div', {
			'class': 'nav'
		});
		var back = new Element('a', {
			'href': '#',
			'class': 'back'
		}).insert('back<span></span>');
		var forward = new Element('a', {
			'href': '#',
			'class': 'forward'
		}).insert('forward<span></span>');
		var zoom = new Element('a', {
			'href': '#',
			'class': 'zoom'
		}).insert('zoom<span></span>');
		
		back.observe('click', function(e) {
			e.stop();
			clearInterval(this.timerId);
			this.toggleImage(this.index - 1);
		}.bind(this));
		forward.observe('click', function(e) {
			e.stop();
			clearInterval(this.timerId);
			this.toggleImage(this.index + 1);
		}.bind(this));
		zoom.observe('click', function(e) {
			e.stop();
			clearInterval(this.timerId);
			var href = this.images[this.index].up('a').href;
			this.whitebox.load('image', {
				'uri': href
			});
		}.bind(this));
		
		nav.insert(back);
		nav.insert(forward);
		var index = this.index != -1 ? this.index : 0;
		nav.insert('<p><strong class="index"></strong> of ' + this.images.length + '</p>');
		nav.insert(zoom);
		
		this.slideshow.insert(nav);
		this.indexDisplay = this.slideshow.down('.nav .index');
	},
	
	toggleImage: function(index) {
		if (this.animating || index == this.index || index < 0 || index >= this.images.length) {
			return;
		}
		
		this.animating = true;
		var effects = [
			new Effect.Fade(this.images[this.index], {
				'sync': true
			}),
			new Effect.Appear(this.images[index], {
				'sync': true
			})
		];
		this.updateIndex(index);
		new Effect.Parallel(effects, {
			'duration': 1,
			afterFinish: function() {
				this.animating = false;
			}.bind(this)
		});
	},
	
	updateIndex: function(index) {
		index = index ? index : 0;
		this.index = index;
		this.indexDisplay.update(index + 1);
	}
});

var Popup = Class.create({
	popup: null,
	whitebox: null,
	
	initialize: function(popup) {
		if (!popup) {
			return;
		}
		
		this.popup = popup;
		this.popup.addClassName('js');
		this.createNav();
		this.whitebox = new WSWhiteBox({
			'elements': [
				new Element("a", {
					'href': '#',
					'rel': WSWhiteBox.Actions.hide,
					'class': 'close'
				}).update("Close").insert(
					new Element("span")
				)
			]
		});
	},	
	
	createNav: function() {
		var nav = new Element('div', {
			'class': 'nav'
		});
		var link = this.popup.down('a[rel="whitebox[image]"]');
		var zoom = new Element('a', {
			'href': link ? link.href : '#',
			'class': 'zoom',
			'rel': 'whitebox[image]'
		}).insert('zoom<span></span>');
		
		nav.insert(zoom);		
		this.popup.insert(nav);
	}
});