Wd = {};

if (!Wd.Elements)
{
	Wd.Elements = {};
}

Wd.Elements.BookChapter = new Class
({
	initialize: function(el)
	{
		this.element = el;
		this.images = [];
		
		$(el).getChildren().each
		(
			function(el)
			{
				switch (el.tagName)
				{
					case 'H2':
					{
						this.title = el.innerHTML;
					}
					break;
					
					case 'UL':
					{
						el.getChildren().each
						(
							function(el)
							{
//								this.images.push(el.getFirst().src);
								this.images.push(el.getFirst());
							},
							
							this
						);
						
//						el.remove();
					}
					break;
				}
			},
			
			this
		);
	}
});

Wd.Elements.Book = new Class
({
	options:
	{
		wrapper_width: 760
	},
 
 	initialize: function(el, chapters)
	{
		this.element = $(el);
		
		this.element.addEvent('mouseenter', this.mouseEnter.bind(this));
		this.element.addEvent('mouseleave', this.mouseLeave.bind(this));
		
		this.black = new Element
		(
			'div',
			{
				'id': 'black',
				'styles':
				{
					position: 'absolute',
					left: 0,
					top: 0
				}
			}
		);
		
		this.element.getChildren().each
		(
			function(el)
			{
				if (el.tagName == 'SPAN')
				{
					if (el.hasClass('prev'))
					{
						el.onclick = function() { this.setChapter('prev') }.bind(this);
					}
					else if (el.hasClass('next'))
					{
						el.onclick = function() { this.setChapter('next') }.bind(this);
					}
				}
			},
			
			this
		);

		this.black_fx = new Fx.Style
		(
		 	this.black, 'opacity',
			{
				wait: false,
				duration: 250,
				
				onStart: function()
				{
					if (!this.black.parentNode)
					{
						document.body.appendChild(this.black);
					}
					
				}.bind(this),
				
				onComplete: function()
				{
					var opacity = this.black.getStyle('opacity');
					
					if (opacity == 0)
					{
						this.black.remove();
					}
				}.bind(this)
			}
		);
		
		this.black_fx.set(0);
				
		this.chapters = [];
		
		var offset = 0;
		
		$(chapters).getChildren().each
		(
		 	function(el)
			{
				var chapter = new Wd.Elements.BookChapter(el);

//				console.info('chapter: %a, offset: %d', chapter, offset);

				chapter.offset = offset;

				this.chapters.push(chapter);
				
				el.onclick = this.setChapter.bind(this, this.chapters.length - 1);
				
				//
				// compute left offset of the next chapter
				//
				
				offset += chapter.images.length * this.options.wrapper_width;				
			},
			
			this
		);
		
		this.chapter_max = this.chapters.length - 1;

		//
		// wrapper
		//
		
		this.wrapper = new Element('div', { 'class': 'wrapper' });
		
		this.wrapper.injectTop(this.element);
		
		this.view = new Element('div', { 'class': 'wrapper-view' });
		this.wrapper.appendChild(this.view);
		
		this.view_fx = new Fx.Style
		(
		 	this.view, 'left',
			{
				wait: false,
//				duration: 250,
				transition: Fx.Transitions.Quint.easeOut
			}
		);
		
		var n = 0;
		
		this.chapters.each
		(
			function(chap)
			{
				chap.images.each
				(
					function(image)
					{
						this.view.appendChild(image); n++;
					},
					
					this
				);
			},
			
			this
		);
		
		this.view.setStyle('width', n * this.options.wrapper_width);

		this.setChapter(0);
	},
	
	mouseEnter: function()
	{
		this.black.setStyle('width', window.getScrollWidth());
		this.black.setStyle('height', window.getScrollHeight());

		this.dim_timer = (function() { this.black_fx.start(0.8) }.bind(this)).delay(500);
	},
	
	mouseLeave: function()
	{
		$clear(this.dim_timer);
		
		this.black_fx.start(0);
	},
	
	setChapter: function($which)
	{
		switch ($which)
		{
			case 'next':
			{
				if (this.page + 1 > this.page_max)
				{
					if (this.chapter < this.chapter_max)
					{
						this.chapter += 1;
						this.page = 0;
					}
				}
				else
				{
					this.page += 1;
				}
			}
			break;
			
			case 'prev':
			{
				if (this.page == 0)
				{
					if (this.chapter > 0)
					{
						this.chapter -= 1;
						this.page = this.chapters[this.chapter].images.length - 1;
					}
				}
				else
				{
					this.page -= 1;
				}
			}
			break;
			
			default:
			{
				this.chapter = $which;
				this.page = 0;
			}
			break;
		}

		this.page_max = this.chapters[this.chapter].images.length - 1;

		this.update();
	},
	
	update: function()
	{
		var chapter = this.chapters[this.chapter];

//		console.info('update # chapter: %d, page: %d, offset: %d', this.chapter, this.page);

//		alert('update - start');

		var val = -chapter.offset - this.page * this.options.wrapper_width;

		if (window.ie)
		{
			this.view_fx.set(val);
		}
		else
		{
			this.view_fx.start(val);
		}
		
		//
		// remove 'selected' class from other classes
		//
		
		var chapter = this.chapters[this.chapter];

		this.chapters.each
		(
			function(obj)
			{
				if (obj == chapter)
				{
					obj.element.addClass('selected');
				}
				else
				{
					obj.element.removeClass('selected');
				}
			}
		);
		
//		alert('update - end');
	}
});

window.addEvent
(
	'domready', function()
	{
		new Wd.Elements.Book('book', 'book-chapters');
	}
);