/*  Juice Library slideshow.juice.js, version 0.1.1.20071231
 *  Copyright (c) 2007, 2008 Stephen Whiteley (http://jui.ce.it)
 *
 *  See core.juice.js for full license.
 *
/*--------------------------------------------------------------------------*/

(function() {

	if ( typeof Juice == 'undefined' ) {
		throw new Error( 'slideshow.juice.js requires the core.juice.js component.' );
	}

	Juice.Slideshow = function( node, group, setup ) {

		var thumbnails = [], constructor = this;

		this.setup = function() {

			if ( !setup ) { setup = {}; }

			var nodes	= document.getElementsByTagName( 'A' );
			var x		= new RegExp( 'juiceSlideshow(?:\\[([^\\]]+)\\])?', 'i' );

			for ( var i = 0; i < nodes.length; i++ ) {

				var slide = nodes[i], matches = slide.className.match( x );

				if ( matches ) {

					if ( group && matches[1] != group ) { continue; }

					var thumb = slide.getElementsByTagName( 'IMG' )[0];

					thumbnails.push( {
						ele:		slide,
						small:		thumb,
						medium:		slide.href,
						large:		slide.title || false,
						caption:	thumb.title || thumb.alt || false
					} );

				}

			}

			if ( thumbnails.length > 0 ) {
				constructor.create();
			}

		};

		this.create = function( ) {

			var slideshow, container, menu = {}, preload, slides = [], current, myself = this;

			this.setup = function() {

				slideshow = {
					delay: setup.delay || 4,
					zoom: false
				};

				preload = {
					loaded: 0,
					percent: 0,
					total: thumbnails.length
				};

				container = Juice.Container.create( {
					className: 'juiceSlideshow',
					width: setup.width || 500,
					height: setup.height || 400,
					padding: 10,
					fixed: true
				} );

				container.image					= Juice.Element.create( 'DIV', null, null, 'image' );
				container.image.style.overflow	= 'hidden';
				container.image.style.height	= '100%';

				Juice.Element.append( container.inner, container.image );

				Juice.Container.render( container, Juice.$( node ) );

				myself.loading();

				for ( var i in thumbnails ) {
					if ( thumbnails[i].large ) {
						slideshow.zoom = true; break;
					}
				}

				myself.menu();

				for ( var i in thumbnails ) {
					myself.preload( thumbnails[i] );
				}

			};

			this.menu = function() {

				if ( setup.menu === false || thumbnails.length <= 1 ) { return; }

				container.menu					= Juice.Element.create( 'DIV', null, null, 'menu' );
				container.menu.style.height		= '20px';
				container.menu.style.position	= 'relative';

				if ( setup.menu == 'top' ) {
					container.menu.style.marginBottom = '10px';
				} else {
					container.menu.style.marginTop = '10px';
				}

				menu = {
					rotate:	Juice.Element.create( 'SPAN', null, null, 'rotate', 'javascript:void(0);' ),
					prev:	Juice.Element.create( 'A', 'Prev', null, 'prev', 'javascript:void(0);' ),
					next:	Juice.Element.create( 'A', 'Next', null, 'next', 'javascript:void(0);' ),
					play:	Juice.Element.create( 'A', 'Play', null, 'play', 'javascript:void(0);' ),
					pause:	Juice.Element.create( 'A', 'Pause', null, 'pause', 'javascript:void(0);' ),
					zoom:	Juice.Element.create( 'A', 'Zoom', null, 'zoom disabled', 'javascript:void(0);' )
				};

				Juice.Event.add( menu.play, 'click', myself.play );
				Juice.Event.add( menu.pause, 'click', myself.pause );

				Juice.Event.add( menu.prev, 'click', function() {
					myself.pause();
					myself.prev();
				} );

				Juice.Event.add( menu.next, 'click', function() {
					myself.pause();
					myself.next();
				} );

				menu.pause.style.display = 'none';

				if ( !slideshow.zoom ) {
					menu.zoom.style.display = 'none';
				}

				Juice.Element.append( menu.rotate, [ menu.zoom, menu.prev, menu.next ] );
				Juice.Element.append( container.menu, [ menu.play, menu.pause, menu.rotate ] );

				if ( setup.menu == 'top' ) {
					container.inner.insertBefore( container.menu, container.inner.firstChild );
				} else {
					container.inner.appendChild( container.menu );
				}

				container.image.style.height = Juice.Element.dimensions( container.image ).height - 30 + 'px';

			};

			this.loading = function() {

				container.loading = {
					container:	Juice.Element.create( 'DIV', null, null, 'loading' ),
					inner:		Juice.Element.create( 'DIV', null, null, 'inner' ),
					bar:		Juice.Element.create( 'DIV', null, null, 'bar' )
				};

				container.loading.inner.appendChild( container.loading.bar );
				container.loading.container.appendChild( container.loading.inner );
				container.image.appendChild( container.loading.container );

				var size = {
					image: Juice.Element.dimensions( container.image ),
					bar: Juice.Element.dimensions( container.loading.container )
				};

				container.loading.container.style.left = ( ( size.image.width / 2 ) - ( size.bar.width / 2 ) ) + 'px';
				container.loading.container.style.top = ( ( size.image.height / 2 ) - ( size.bar.height / 2 ) ) + 'px';

			};

			this.preload = function( img ) {

				var image = new Image();

				Juice.Event.add( image, 'load', function() {

					img.loaded	= true;
					img.width	= image.width;
					img.height	= image.height;

					myself.loaded();

				} );

				Juice.Event.add( image, 'error', function() {

					Juice.Event.add( img, 'click', function( e ) {
						Juice.Event.cancel( e );
					} );

					Juice.Element.addClassName( img.ele, 'juiceSlideshowFail' );

					myself.loaded();

				} );

				image.src = img.medium;

			};

			this.loaded = function() {

				preload.loaded++;
				preload.percent = Math.round( ( preload.loaded / preload.total ) * 100 );

				container.loading.bar.style.width = preload.percent + '%';

				if ( preload.loaded == preload.total ) {
					for ( var i in thumbnails ) {

						var thumb = thumbnails[i];

						if ( thumb.loaded == true ) {

							thumb.image						= Juice.Element.create( 'DIV' );
							thumb.image.style.background	= 'url(' + thumb.medium + ') center center no-repeat';
							thumb.image.style.width			= '100%';
							thumb.image.style.height		= '100%';

							slides.push( thumbnails[i] );

						}

					}
					setTimeout( myself.init, 500 );
				}

			};

			this.init = function() {

				container.image.removeChild( container.loading.container );

				for ( var i = 0; i < slides.length; i++ ) {
					myself.thumb( i );
				}

				myself.show( 0 );

				if ( setup.autoPlay !== false ) {
					myself.play();
				}

			};

			this.thumb = function( num ) {

				Juice.Event.add( slides[num].ele, 'click', function( e ) {
					Juice.Event.cancel( e );
					myself.pause();
					myself.show( num );
				} );

			};

			this.show = function( num ) {

				var slide = slides[num];

				if ( current && current.image ) {
					container.image.removeChild( current.image );
				}

				container.image.appendChild( slide.image );

				current = {
					number: num,
					slide: slide,
					image: slide.image
				};

			};

			this.play = function() {

				slideshow.play = setInterval( myself.next, slideshow.delay * 1000 );

				if ( menu ) {
					menu.pause.style.display = 'block';
					menu.play.style.display = 'none';
				}

			};

			this.pause = function() {

				slideshow.play = clearInterval( slideshow.play );

				if ( menu ) {
					menu.pause.style.display = 'none';
					menu.play.style.display = 'block';
				}

			};

			this.next = function() {

				if ( !current ) { return; }

				var next = current.number + 1;

				if ( next >= slides.length ) { next = 0; }

				myself.show( next );

			};

			this.prev = function() {

				if ( !current ) { return; }

				var prev = current.number - 1;

				if ( prev < 0 ) { prev = slides.length - 1; }

				myself.show( prev );

			};

			this.setup();

		};

		this.setup();

	}

})();