var Livre = new Class({
	Implements: [ Options, Chain, Events ],

	defaultOptions: function(){
		return {
			pageWidth: 240,
			pageHeight: 320,
			transition: 500
		};
	},

	initialize: function(el, options){

		this.livre = $(el);
		if ($defined(this.livre))
		{
			this.imageDivs = this.livre.getElementsByTagName('img');
			this.numberOfElements = this.imageDivs.length;
			this.count = this.numberOfElements;
			this.setOptions(this.defaultOptions(), options);
			
			this.setup();
		}
	},
	
	setup: function() {

		this.livre.style.width = (this.options.pageWidth * 2)+"px";
		this.livre.style.height = this.options.pageHeight+"px";

		for(i=0; i < this.numberOfElements; i++){

			var image = this.imageDivs[ i ]; 

			image.id = 'page'+i;
			image.currentId = i;
			image.options = this.options;
			image.numberOfElements = this.numberOfElements;

			image.style.position = "absolute";
			image.style.top = "0px";
			image.style.height = this.options.pageHeight+"px";

			if (i%2)
			{
				image.style.zIndex = i;
				image.style.left = 2*this.options.pageWidth+"px";
				image.style.width = "0px";
				$('page'+i).addEvent('click', function() { previousPage(this); });
			}
			else
			{
				image.style.zIndex = this.numberOfElements-i;
				image.style.left = this.options.pageWidth+"px";
				image.style.width = this.options.pageWidth+"px";

				if (i < this.numberOfElements-1)
					$('page'+i).addEvent('click', function() { nextPage(this); });
			}	
			image.style.visibility = "visible";
		}
	}
});

function previousPage(el) {
	var prevId = el.currentId-1;
	myPage = $('page'+el.currentId);
	myPreviousPage = $('page'+prevId);

	var myEffect1 = new Fx.Morph(myPreviousPage, {duration: el.options.transition, transition: Fx.Transitions.linear});
	var myEffect2 = new Fx.Morph(myPage, {duration: el.options.transition, transition: Fx.Transitions.linear});
	 
	myPreviousPage.style.left = "0px";
	myPreviousPage.style.backgroundPosition = -el.options.pageWidth+"px 0px";
	myPreviousPage.style.width = "0px";
	myPreviousPage.style.zIndex = el.numberOfElements+1;
	
	myEffect1.start({ 'width': el.options.pageWidth+'px', 'left' : el.options.pageWidth+'px', 'background-position':'0px 0px' }).chain(function(){myPreviousPage.style.zIndex = el.numberOfElements-prevId;});
	myEffect2.start({ 'width': '0px', 'left' : el.options.pageWidth+'px' });
};

function nextPage(el) {
	var nextId = el.currentId+1;
	myPage = $('page'+el.currentId);
	myNextPage = $('page'+nextId);

	var myEffect1 = new Fx.Morph(myNextPage, {duration: el.options.transition, transition: Fx.Transitions.linear});
	var myEffect2 = new Fx.Morph(myPage, {duration: el.options.transition, transition: Fx.Transitions.linear});
	
	myNextPage.style.left = 2 * el.options.pageWidth+"px";
	myNextPage.style.width = "0px";
	myNextPage.style.zIndex = el.numberOfElements+1;
	
	myEffect1.start({ 'width': el.options.pageWidth+'px', 'left' : '0px' }).chain(function(){myNextPage.style.zIndex = nextId;});
	myEffect2.start({ 'width': '0px', 'left' : el.options.pageWidth+'px' });
};