Showcase = Class.create(Abstract, {
	initialize: function (sections, controls, options) {
	
		this.allSections 	= this.sections = sections;
		this.controls 		= controls;	
		
		this.options = Object.extend({
			ratio: 		    0.5,
			initialDelay: 	1,
			duration: 		0.5,			
            captionClassName: 'caption',
			size:			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: '0', marginLeft: -Math.round(section.getWidth() / 2) + 'px'/*, marginTop: -Math.round(section.getHeight() / 2) + 'px'*/}).initialIndex = index;			
	
			section.observe('click', this.jump.bind(this, section)).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);
	},

	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());
		}
	},
	
	jump: function (section, event) {

        if (this.sections.indexOf(section) == this.half) {
            return;
        }        
		event.stop();
		
		if (!this.running) {		
			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);
	
        if (this.visibleCaption) {
            this.visibleCaption.slideUp({duration: 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.visibleCaption = this.sections[this.half].down('.' + this.options.captionClassName);
                    if (this.visibleCaption) {
                        if (!this.visibleCaption.down("." + this.options.captionClassName + '-old')) {
                            this.visibleCaption = this.visibleCaption.show().wrap('div').hide().addClassName(this.options.captionClassName); 
                            this.visibleCaption.down().removeClassName(this.options.captionClassName).addClassName(this.options.captionClassName + '-old');
                        }
                        new Effect.SlideDown(this.visibleCaption, {
                            duration: this.options.duration / 2,
                            afterFinish: (function () {
            					this.running = false;
                            }).bind(this)
                        });
                    } else {
    					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();
	}
});