window.addEvent( 'domready', function( e ) {
	
	// Add email link to header
	var liame = $$( 'span.liame' );
	liame.push( $( 'siteHeaderContact' ) ); 
	liame.clean().each( function( li ) {
		var start = "barbaraamos";
		var separator = "@";
		var host = "shaw.ca"
		new Element( 'a', {
			'href': 'mailto:' + start + separator + host,
			'html': start + separator + host
		}).inject( li, 'top' );
	});

	// Add notice to footer of galleries
	if( $( 'noticeBox' ) ) {
		$( 'noticeBox' ).set( 'text', 'These paintings are examples of a larger body of work. Please email me if you wish to see more or have any questions.' ).addClass( 'notice' );
	}
});


var GalleryImage = new Class({

	dom: {
		div: null,
		thumb: null,
		name: null,
		description: null
	},
	
	gallery: null,

	image: null,

	info: {
		description: null,
		name: null,
		thumbUrl: null,
		largeUrl: null
	},

	loading: false,

	loaded: false,

	showDelay: null,

	size: {
		x: null,
		y: null
	},

	initialize: function( div, gallery ) {
		this.dom.div = div;
		this.gallery = gallery;

		this.dom.thumb = div.getElement( 'img' );
		this.dom.name = div.getElement( 'div.name' );
		this.dom.description = div.getElement( 'div.description' );
		
		// Get image name
		if( this.dom.name.getElement( 'a' ) )
			this.info.name = this.dom.name.getElement( 'a' ).get( 'html' );
		else
			this.info.name = this.dom.name.get( 'html' );
		
		// Set thumbnail alt
		this.dom.thumb.set( 'alt', this.info.name );

		// Get image description
		if( this.dom.description )
			this.info.description = this.dom.description.get( 'html' );

		// Get image URLs
		this.info.thumbUrl = this.dom.thumb.get( 'src' );
		this.info.largeUrl = this.info.thumbUrl.replace( 'Thumbnails', 'FullSize' );

		this.initializeEvents();
	},

	initializeEvents: function() {
		this.dom.div.addEvent( 'click', this.show.bind( this ) );
		this.dom.div.setStyle( 'cursor', 'pointer' );
	},

	hide: function( e ) {
		$clear( this.showDelay );
		this.showDelay = false;
	},

	preload: function( f ) {
		if( this.image || this.loaded || this.loading )
			return;

		this.loading = true;
		this.image = new Asset.image( this.info.largeUrl, {
			'onload': function( ref ) {
				this.loaded = true;
				this.loading = false;
				this.size.x = ref.get( 'width' );
				this.size.y = ref.get( 'height' );
				if( $type( f ) == 'function' )
					f( this );
			}.bind( this )
		});
	},

	show: function( e ) {
		if( this.loaded ) {
			// Display the image now if it is ready
			$clear( this.showDelay );
			this.showDelay = false;
			this.gallery.zoomImage( this );

		} else if( $type( this.showDelay ) != 'number' ) {
			// Periodically poll to see if it is ready
			this.preload();

			this.showDelay = this.show.periodical( 1000, this );
			this.gallery.zoomImage( this );
		}
	}

});

var Gallery = new Class({

	Binds: ['keyPressed'],

	controls: {
		count: null,
		next: null,
		prev: null,
		thumb: null
	},

	currentImage: null,

	dom: {
		controlBox: null,
		imageBox: null,
		instructionBox: null,
		largeImage: null,
		thumbnailBox: null
	},

	info: {
		description: null,
		name: null
	},

	images: [],

	preloadDelay: null,

	preloadLastIndex: 0,

	zoomView: false,

	initialize: function() {
		this.dom.controlBox = $( 'galleryControls' );
		if( !this.dom.controlBox )
			return;

		this.initializeControls();

		this.dom.imageBox = $( 'imageBox' );
		this.info.description = this.dom.imageBox.getElement( 'div.description' );
		this.dom.largeImageBox = this.dom.imageBox.getElement( 'div.image' );
		this.dom.largeImage = this.dom.largeImageBox.getElement( 'img' );
		this.info.name = this.dom.imageBox.getElement( 'div.name' );

		this.dom.instructionBox = $( 'zoomInstructions' );
		this.dom.instructionBox.set( 'text', 'Click on the thumbnail for details.' );

		this.dom.thumbnailBox = $( 'thumbnailBox' );
	
		$$( 'div.thumbnailBox' ).each( function( thumb ) {
			this.images.push( new GalleryImage( thumb, this ) );
		}, this );

		this.initializeEvents();
	},

	initializeControls: function() {
		this.controls.count = this.dom.controlBox.getElement( 'div.count' );
		this.controls.next = this.dom.controlBox.getElement( 'div.next' );
		this.controls.prev = this.dom.controlBox.getElement( 'div.prev' );
		this.controls.thumb = this.dom.controlBox.getElement( 'div.thumb' );

		this.controls.next.set( 'title', 'Next image [right arrow]' );
		this.controls.prev.set( 'title', 'Previous image [left arrow]' );
		this.controls.thumb.set( 'title', 'Back to thumbnails [up arrow]' );
	},

	initializeEvents: function() {
		this.controls.next.addEvent( 'click', this.nextImage.bind( this ) );
		this.controls.prev.addEvent( 'click', this.prevImage.bind( this ) );
		this.controls.thumb.addEvent( 'click', this.showThumbnails.bind( this ) );
		this.dom.largeImageBox.addEvent( 'click', this.nextImage.bind( this ) );

		this.controls.next.addEvent( 'mousedown', function( e ) { e.returnValue = false; return false; } );
		this.controls.prev.addEvent( 'mousedown', function( e ) { e.returnValue = false; return false; } );
		this.controls.thumb.addEvent( 'mousedown', function( e ) { e.returnValue = false; return false; } );

		this.dom.largeImage.set( 'tween', { duration: 'short', link: 'cancel' } );

		window.addEvent( 'load', function() { this.preloadDelay = this.preloadImages.periodical( 500, this ) }.bind( this ) );
	},
	
	keyPressed: function( e ) {
		if( e.key == 'left' || e.key == 'p' || e.key == 'b' )
			this.prevImage();
		else if( e.key == 'right' || e.key == 'n' )
			this.nextImage();
		else if( e.key == 'esc' || e.key == 'up' )
			this.showThumbnails();
	},

	nextImage: function( e ) {
		var next = ( this.currentImage + 1 ) % this.images.length;
		this.images[next].show();
	},
	
	preloadImages: function() {
		this.images[this.preloadLastIndex++].preload();

		if( this.preloadLastIndex >= this.images.length ) {
			$clear( this.preloadDelay );
			this.preloadDelay = null;
		}
	},

	prevImage: function() {
		var prev = ( this.currentImage - 1 );
		if( prev < 0 )
			prev = this.images.length - 1;
		this.images[prev].show();
	},

	zoomImage: function( image ) {
		this.currentImage = this.images.indexOf( image );

		this.showZoom( image );

		// Update the image, name and description
		this.info.name.set( 'html', image.info.name );
		this.info.description.set( 'html', image.info.description );
		if( image.loaded ) {
			this.controls.count.set( 'text', ( this.currentImage + 1 ) + ' of ' + this.images.length );

			this.dom.largeImageBox.setStyle( 'backgroundImage', 'url(' + image.info.largeUrl + ')' );
			this.dom.largeImage.set( 'width', image.size.x );
			this.dom.largeImage.tween( 'height', image.size.y );
			this.dom.largeImage.set( 'alt', image.info.name );
		}
	},

	showThumbnails: function() {
		// Remove key listeners
		document.removeEvent( 'keydown', this.keyPressed );

		// Hide and show elements for thumbnail view
		$( 'siteHeaderImage' ).setStyle( 'display', '' );
		this.dom.controlBox.setStyle( 'display', '' );
		this.dom.imageBox.setStyle( 'display', '' );
		this.dom.instructionBox.setStyle( 'display', '' );
		this.dom.thumbnailBox.setStyle( 'display', '' );

		this.zoomView = false;
	},

	showZoom: function( image ) {
		// Hide and show elements for zoomed image view
		if( !this.zoomView ) {
			$( 'siteHeaderImage' ).setStyle( 'display', 'none' );
			this.dom.controlBox.setStyle( 'display', 'block' );
			this.dom.imageBox.setStyle( 'display', 'block' );
			this.dom.instructionBox.setStyle( 'display', 'none' );
			this.dom.thumbnailBox.setStyle( 'display', 'none' );
			window.scrollTo( 0, 0 );

			if( image.loaded )
				this.dom.largeImage.set( 'height', image.size.y );
			else
				this.dom.largeImage.set( 'height', 250 );

			// Remove key listeners
			document.addEvent( 'keydown', this.keyPressed );

			

			this.zoomView = true;
		}
	}

});

window.addEvent( 'domready', function( e ) {
	new Gallery();
});

var ElementFader = new Class({
	
	Implements: Options,

	container: null,

	currentIndex: 0,

	elements: [],

	fadeDelay: null,

	options: {
		delay: 12000,
		duration: 2000,
		random: true
	},
	
	initialize: function( container, options ) {
		this.container = container;
		this.setOptions( options );

		this.elements = container.getChildren();

		// Randomize the order
		if( this.options.random )
			this.elements.shuffle();

		// Put the random first on top
		this.elements[0].inject( this.container );

		this.elements.each( function( elem, index ) {
			// Locate currently visible image
			elem.setStyles({
				'display': 'block',
				'opacity': ( this.currentIndex == index ? 1 : 0 )
			});

			// Set tween options
			elem.set( 'tween', {
				'duration': this.options.duration
			});

			elem.set( 'title', elem.get( 'title' ) + ' [click to advance]' );

		}, this);

		if( this.currentIndex === null )
			this.currentIndex = 0;

		this.fadeDelay = this.fadeNext.periodical( this.options.delay, this );

		this.enableClick();
	},

	disableClick: function() {
		this.container.removeEvents( 'click' );
	},

	enableClick: function() {
		this.container.addEvent( 'click', this.handleClick.bind( this ) );
	},

	fadeNext: function() {
		this.disableClick();

		var next = ( this.currentIndex + 1 ) % this.elements.length;
		this.elements[next].inject( this.container );

		this.elements[next].tween( 'opacity', 1 );
		this.elements[this.currentIndex].setStyle.delay( this.options.duration + 250, this.elements[this.currentIndex], [ 'opacity', 0 ] );
		this.enableClick.delay( this.options.duration - 750, this );
		this.currentIndex = next;
	},

	handleClick: function() {
		$clear( this.fadeDelay );
		this.fadeNext();
		this.fadeDelay = this.fadeNext.periodical( this.options.delay, this );
	}

});

window.addEvent( 'domready', function( e ) {
	$$( 'div.fadeBetweenElements' ).each( function( fade ) {
		new ElementFader( fade );
	});
});