Showcase = Class.create(Abstract, {
	initialize: function (iddiv,sections, controls, options) {
		
		this.allSections 	= this.sections = sections;
		this.controls 		= controls;	
		this.div			= $(iddiv);
		this.divside		='next';
		this.timer			=null;
		this.isstoped		=false;
		
		this.options = Object.extend({
			ratio: 					0.5,
			initialDelay: 			1,
			duration: 				0.5,			
			size:					5      //this.sections.size()
			}, options || {});
			
		this.running 		= false;
		this.queue			= new Array;
		
		
		this.computeMetrics();	
		this.sections = this.allSections.slice(this.currentIndex - this.half, this.currentIndex + this.half + 1);
		this.allSections.each((function (section, index) {
			section.setStyle({position: 'absolute', zIndex: Math.abs(index - this.sections.size()), left: '50%', top: '50%', marginLeft: -Math.round(section.getWidth() / 2) + 'px', marginTop: -Math.round(section.getHeight() / 2) + 'px'}).initialIndex = index;			
			
			
			section.observe('mouseover', this.jump.bind(this)).observe('mouseover', function (event) {   
				section.setOpacity(1);
				}).observe('mouseout', function () {
					section.setOpacity(section.opacity);
					}).opacity = 1;
					
			if (!this.sections.member(section)) {
				this.queue.push(section.hide());
				}
			}).bind(this));
		
		for (i = 0; i <= this.half; i++) {
			this.sections.push(this.sections.shift());
			}
			
			
		this.controls.invoke('observe', 'click', this.click.bind(this));			
		(this.animate.bind(this)).delay(this.options.initialDelay);
		
		//this.div.observe( 'mouseout',  this.forcestop.bind(this));			
		//this.div.observe( 'mouseover', this.forcestart.bind(this));			
		//this.div.observe( 'mousemove', this.point_it.bind(this));			
		
	},
	/*point_it:function (event){
		pos_x = event.offsetX?(event.offsetX):event.pageX-this.div.offsetLeft;
		pos_y = event.offsetY?(event.offsetY):event.pageY-this.div.offsetTop;
		if(this.div.id.toLowerCase()=='horizontal'){
			if(pos_x>this.div.getWidth()/2)this.divside='right';
			else this.divside='left';
		}
		else if(this.div.id.toLowerCase()=='vertical'){
			if(pos_y>this.div.getHeight()/2)this.divside='down';
			else this.divside='up';
		}
		else if(this.div.id.toLowerCase()=='diagonal'){
			if(pos_y>this.div.getHeight()/2)this.divside='down';
			else this.divside='up';
		}

	},
	forcestop: function (event) {
		if(this.timer!=null){
			this.timer.stop();
			this.timer=null;
		}
	},
	forcestart: function (event) {
		if(this.isstoped==false)this.timer=new PeriodicalExecuter(function(pe) {this.forcejump();}.bind(this), 0.7);	
	},*/

	computeMetrics: function () {
		this.half 			= this.currentIndex = (this.options.size - 1) / 2;		
		this.ratioStep 		= Math.round(((1 - this.options.ratio) / this.currentIndex) * 100) / 100;
		this.positionStep 	= Math.round(50 / this.half * 100) / 100;		
		this.maxDimensions 	= this.sections.first().getDimensions();
		},
				
	click: function (event) {
		event.stop();
		var element = event.findElement('a');
		if (!this.running) {eval("this." + element.rel + "()");}		
		this.animate(element.rel);
	},
		
	previous: function () {
		if (this.options.size < this.allSections.size()) {
			var sectionIn 	= this.queue.shift();
			var sectionOut 	= this.sections.pop();		
		
			this.sections.unshift(sectionIn);
			this.queue.push(sectionOut.fade({duration: this.options.duration}));
			} else {
				this.sections.unshift(this.sections.pop());
				}
		},
	
	next: function () {		
		if (this.options.size < this.allSections.size()) {			
			var sectionIn 	= this.queue.shift();
			var sectionOut 	= this.sections.shift();
		
			this.sections.push(sectionIn);
			this.queue.push(sectionOut.fade({duration: this.options.duration}));
			} else {
				this.sections.push(this.sections.shift());
				}
	},
	forcejump: function () {
		if (!this.running) {
			
			var indexsec=null;
			if(this.div.id.toLowerCase()=='horizontal'){
				if(this.divside=='right')indexsec=parseInt(parseInt(this.half)-1);
				else indexsec=parseInt(parseInt(this.half)+1);
			}
			else if(this.div.id.toLowerCase()=='vertical'){
				if(this.divside=='up')indexsec=parseInt(parseInt(this.half)+1);
				else indexsec=parseInt(parseInt(this.half)-1);
			}
			else if(this.div.id.toLowerCase()=='diagonal'){
				if(this.divside=='up')indexsec=parseInt(parseInt(this.half)+1);
				else indexsec=parseInt(parseInt(this.half)-1);
			}						
			var section=this.sections[indexsec];
			
			var direction = '';
			if (section.index < this.half) {(this.half - section.index).times((function () {this.previous();}).bind(this));direction = 'previous';} 
			else if (section.index == this.half) {} 
			else {(section.index - this.half).times((function () {this.next();}).bind(this));direction = 'next';}
		}
		this.animate(direction);
	},
	jump: function (event) {
		event.stop();
		if (!this.running) {
			
			var section =this.sections[this.sections.indexOf(event.findElement('li'))];
			var direction = '';
			if (section.index < this.half) {
				(this.half - section.index).times((function () {				
					this.previous();
					}).bind(this));
				direction = 'previous';
				} else if (section.index == this.half) {
					} else {
						(section.index - this.half).times((function () {
							this.next();
							}).bind(this));
						direction = 'next';
						}
			}
		
		this.animate(direction);
	},
	
	runEffects: function () {
		
		this.stackSections.bind(this).delay(this.options.duration / 2);
	
		this.running = new Effect.Parallel(
			this.effects.map(function (effect) {
				return new Effect.Parallel([
					new Effect.Morph(effect.section, {
						style: effect.style,
						sync: true,
						delay: 1,
						transition: Effect.Transitions.linear
						}),
					new Effect.Appear(effect.section, {
						to: Math.min(effect.section.ratio, 1),
						sync: true
						})
					], {
						sync: true,
						beforeStart: function () {							
							}
						});
				}), {
					duration: this.options.duration,
					afterFinish: (function () {
						this.running = false;					
						}).bind(this)
					});
		},
		
	stackSections: function () {
		this.sections.each(function (section) {
			section.setStyle({zIndex: section.stackIndex});
			});
		},
		
	indexSections: function () {	
		this.sections.each((function (section, index) {
			section.index 			= index;
			section.modifier 		= Math.abs(Math.abs((section.index - (this.sections.size() - 1) / 2)) - this.half);
			
			section.ratio 			= Math.round(((section.modifier * this.ratioStep) + this.options.ratio) * 100) / 100;			
						
			section.width 			= Math.min(Math.round(this.maxDimensions.width * section.ratio), this.maxDimensions.width);
			section.height 			= Math.min(Math.round(this.maxDimensions.height * section.ratio), this.maxDimensions.height);		
			
			section.positionIndex 	= (section.index - (this.sections.size() - 1) / 2);
			section.stackIndex 		= Math.abs(Math.abs((section.index - (this.sections.size() - 1) / 2)) - this.half) + 1;					
			
			section.left 			= section.top = Math.round((this.half + section.positionIndex) * this.positionStep);
			section.opacity			= Math.min(section.ratio, 1);			
			}).bind(this));
		}	
});
	
Showcase.Horizontal = Class.create(Showcase, {
	
	animate: function (direction) {
		
		this.indexSections();
		this.effects = new Array();		
		this.sections.each((function (section) {
			var style = {
				left: 		section.left + '%', 
				top:		'50%',
				marginTop:	-Math.abs(section.height / 2) + 'px',
				width: 		section.width + 'px', 
				height: 	section.height + 'px'
				};
			
			if (section.left == 0) {
				style.marginLeft = '0px';
				} else if (section.left == 50) {
					style.marginLeft 		= -Math.round(section.width / 2) + 'px';					
					} else if (section.left == 100) {
						style.marginLeft 	= -section.width + 'px';
						} else {
							style.marginLeft = -Math.round(section.width / 2) + 'px';
							}
			
			this.effects.push({section: section, style: style});		
			}).bind(this));

		this.currentIndex = this.sections[this.half].initialIndex;			
		this.runEffects();
		
		
		}
	
	});
	
Showcase.Vertical = Class.create(Showcase, {
	
	animate: function (direction) {
		this.indexSections();
		
		this.effects = new Array();		
		this.sections.each((function (section) {
			var style = {
				top: 				section.top + '%', 
				left:				'50%',
				marginLeft:			-Math.abs(section.width / 2) + 'px',				
				width: 				section.width + 'px', 
				height: 			section.height + 'px'				
				};
			
			if (section.top == 0) {
				style.marginTop = '0px';
				} else if (section.top == 50) {
					style.marginTop = -Math.round(section.height / 2) + 'px';					
					} else if (section.top 	== 100) {
						style.marginTop = -section.height + 'px';
						} else {
							style.marginTop = -Math.round(section.height / 2) + 'px';
							}
			
			this.effects.push({section: section, style: style});
			}).bind(this));

		this.currentIndex = this.sections[this.half].initialIndex;			
		
		this.runEffects();
		}
	});
	
Showcase.Diagonal = Class.create(Showcase, {
	
	animate: function (direction) {
		this.indexSections();
		
		this.effects = new Array();		
		this.sections.each((function (section) {
			var style = {
				left: 		section.left + '%', 
				top: 		-section.top + '%',				
				width: 		section.width + 'px', 
				height: 	section.height + 'px'
				};
			
			if (section.left == 0) {
				style.marginLeft = '0px';
				} else if (section.left == 50) {
					style.marginLeft 		= -Math.round(section.width / 2) + 'px';					
					} else if (section.left == 100) {
						style.marginLeft 	= -section.width + 'px';
						} else {
							style.marginLeft = -Math.round(section.width / 2) + 'px';
							}
							
			if (section.top == 0) {
				style.marginTop = '0px';
				} else if (section.top == 50) {
					style.marginTop = -Math.round(section.height / 2) + 'px';					
					} else if (section.top 	== 100) {
						style.marginTop = -section.height + 'px';
						} else {
							style.marginTop = -Math.round(section.height / 2) + 'px';
							}							
			
			this.effects.push({section: section, style: style});		
			}).bind(this));

		this.currentIndex = this.sections[this.half].initialIndex;			
		
		this.runEffects();
		}
	
	});