var LiteShow = new Class( {
	
	  initialize: function( id ) {
		this.slides = new CycleIterator( );
		this.node = new Element( 'div', { id: id, 'class': 'liteSlideShow' } );
	  }
	
	, slides: null
	, container: null
	, node: null
	
	, addSlide: function ( slide ) {
		var isFirst = !this.slides.count( );
		
		slide.getNode( ).fade( ( isFirst ? 'show' : 'hide' ) );
		slide.getNode( ).setStyle( 'z-index', ( isFirst ? 1 : 0 ) );
		this.slides.add( slide );
	  }
	
	, prev: function( ) {
		var current = this.slides.current( );
		var prev = this.slides.peek( -1 );
		
/*		if( !current.getNode( ).getPrevious( ) ) {
			current.getNode( ).setStyle( 'left', -current.x( ) );
			var prevNode = prev.getNode( ).dispose( );
			prevNode.setStyle( 'left', -current.x( ) );
			this.node.grab( prevNode, 'top' );
		}*/
		
		this.jump( prev );
	  }
	
	, next: function( ) {
		var current = this.slides.current( );
		var next = this.slides.peek( 1 );
		
/*		if( !current.getNode( ).getNext( ) ) {
			current.getNode( ).setStyle( 'left', 0 );
			var nextNode = next.getNode( ).dispose( );
			nextNode.setStyle( 'left', 0 );
			this.node.grab( nextNode );
		}*/
		
		this.jump( next );
	  }
	
	, jump: function( to ) {
		var current = this.slides.current( );
		this.slides.set( to );
		
		current.getNode( ).fade( 'out' );
		current.getNode( ).setStyle( 'z-index', 0 );
		
		to.getNode( ).fade( 'in' );
		to.getNode( ).setStyle( 'z-index', 1 );
		
//		var dir = ( current.getNode( ).getNext( ) == to.getNode( ) ) ? -1 : 0;		
//		this.node.getChildren( ).tween( 'left', dir * current.x( ) );
	  }
	
	, render: function( container ) {
		this.container = container;
		
		this.slides.each( function( slide, i ) {
			var node = slide.getNode( );
			
			node.set( 'id', this.node.get( 'id' )+i );
			node.set( 'tween', { duration: 'short' } );
//			node.setStyle( 'left', 0 );
			
			this.node.grab( slide.getNode( ) );
		}, this );
		
		if( this.slides.count( ) > 1 ) {
			var nav = new Element( 'div', { 'class': 'liteSlideShowNav' } );
			var ext = isIE6( ) ? 'gif' : 'png';
			
			nav.grab( new Asset.image(
				  auri( 'resource/image/litebox/prev.'+ext )
				, { alt: 'Prev', 'class': 'prev uvHoverable' }
			).addEvent( 'click', this.prev.bind( this ) ) );
			
			nav.grab( new Asset.image(
				  auri( 'resource/image/litebox/next.'+ext )
				, { alt: 'Next', 'class': 'next uvHoverable' }
			).addEvent( 'click', this.next.bind( this ) ) );
			
			this.container.grab( nav );
			
			uvhoverable_attach( nav.getElements( 'img.uvHoverable' ) );
		}
		
		this.container.grab( this.node );
	  }
	
} );

// FIXME: auto-swap slides on timer
var LiteAutoShow = new Class( {
	
	  Extends: LiteShow
	
} );

var LiteSlide = new Class( {
	
	  initialize: function( ) {
		this.slide = new Element( 'div' , { 'class': 'slide' } );
	  }
	
	, slide: null
	
	, getNode: function( ) {
		return this.slide;
	  }
	
	, setNode: function( dom ) {
		// mootools dom function can't manipulate DocumentFragment objects.
		this.getNode( ).appendChild( dom );
		return this;
	  }
	
	, setContent: function( html ) {
		this.getNode( ).set( 'html', html );
		return this;
	  }
	
	, x: function( ) {
		return this.getNode( ).getSize( ).x;
	  }
	
	, y: function( ) {
		return this.getNode( ).getSize( ).y;
	  }
	
} );

var LiteImageSlide = new Class( {
	
	  Extends: LiteSlide
	
	, image: null
	, status: 'empty'
	
	, initialize: function( uri ) {
		this.image = new Asset.image(
			  uri
			, { 'class': 'slide', onload: this.onLoad.bind( this ), onerror: this.onError.bind( this ), onabort: this.onAbort.bind( this ) }
		);
	  }
	
	, onLoad:  function( ) { this.status = 'loaded'; }
	, onError: function( ) { this.status = 'error'; }
	, onAbort: function( ) { this.status = 'cancelled'; }
	
	, getNode: function( ) {
		return this.image;
	  }
	
	, setTarget: function( target ) {
		this.image.addEvent( 'click', target );
		this.image.addClass( 'hoverable' );
		this.image.set( 'title', 'Open in Litebox' );
		return this;
	  }
	
} );