/*
---

script: Fx.Scroll.Carousel.js

description: Extends Fx.Scroll to work like a carousel

license: MIT-style license.

authors: Ryan Florence

docs: http://moodocs.net/rpflo/mootools-rpflo/Fx.Scroll.Carousel

requires:
- more/1.2.4.2: [Fx.Scroll]

provides: [Fx.Scroll.Carousel]

...
*/


Fx.Scroll.Carousel = new Class({
	
	Extends: Fx.Scroll,
	
		options: {
			mode: 'horizontal',
			childSelector: false,
			loopOnScrollEnd: false,
			numLoop: 6
		},
	
	initialize: function(element, options){
		this.parent(element, options);
		this.cacheElements();
		this.element.getElements('img').setStyle('opacity', .6);
		
		this.cacheImgs();
		this.prepImg();

		this.currentIndex = 0;
//		alert(this.options.numLoop);
	},
	
	cacheImgs: function() {
		var parentHolder = this.element.getParent().getNext();
		var panelHolder = this.element.getElements('li');

		this.element.getElements('li').each(function(el, i) {

			el.getElement('img').addEvents({
				'click': function(newImg) { 

					var inspector = parentHolder.getElement('.imgHolder');
					var imgHolder = parentHolder.getElement('.fullFocus');
					var imgDesc = parentHolder.getElement('.imgDesc');
					var imgbef = parentHolder.getElement('.imgBefore');
					var imgAft = parentHolder.getElement('.imgAfter');
					var imgSrc = this.get('src');
					var imgDescSpan = this.getNext().get('html');
					
					if ( this.hasClass('showBefAft') ) {
						imgbef.setStyle('display', 'block');
						imgAft.setStyle('display', 'block');
					} else {
						imgbef.setStyle('display', 'none');
						imgAft.setStyle('display', 'none');
					}

//					var fx2 = new Fx.Morph(imgHolder, {duration: 200, transition: Fx.Transitions.Sine.easeOut});
//					fx2.start({ 
//						'opacity' : 0													
//					}).chain(function(){
						inspector.empty();	
						imgDesc.setStyle('opacity', 0);
//						var loadimg = 'images/spinner.gif';
//						var load = new Element('img', { 'src': loadimg, 'class': 'loading' }).inject(inspector); 
//						fx2.start({ 'opacity' : 1 });
						var largeImage = new Element('img', { 'src': imgSrc.substr(imgSrc.indexOf("/")+1, imgSrc.indexOf("&")-(imgSrc.indexOf("/")+1)) });
					
						var fx = new Fx.Morph(imgHolder, {duration: 300, transition: Fx.Transitions.Sine.easeOut});
						var fx2 = new Fx.Morph(imgDesc, {duration: 100, transition: Fx.Transitions.Sine.easeOut});
						
						fx.start({ 
							'opacity' : 0													
						}).chain(function(){
							
							inspector.empty();	           			
							largeImage.inject(inspector); 
							fx.start({'opacity': 1}).chain(function() {	
								if(imgDescSpan) {
									imgDesc.set('html', imgDescSpan);
								}
								fx2.start({ 'opacity' : 1 });
							});
						});
//					});
					
					panelHolder.getElements('img').each(function(sl, i) {
						if ( sl.hasClass('lightUp') ) {
							sl.removeClass('lightUp');
							sl.setStyle('opacity', .6);
						}
					});
					
					this.addClass('lightUp');	
					this.setStyle('opacity', 1);
				},
				'mouseenter': function(newImg) { 
					var fx = new Fx.Morph(this, {duration: 300, transition: Fx.Transitions.Sine.easeOut});
					fx.start({ 
						'opacity' : 1									
					});
				},
				'mouseleave': function(newImg) { 
					if ( !this.hasClass('lightUp') ) {
						var fx = new Fx.Morph(this, {duration: 300, transition: Fx.Transitions.Sine.easeOut});
						fx.start({ 
							'opacity' : .6											
						});
					}
				}	
			});
//			alert(el.get('html'));
		});
	},
	
	prepImg: function(){

		var parentHolder = this.element.getParent().getNext();
		var inspector = parentHolder.getElement('.imgHolder');
		var imgSrc = this.element.getElement('li').getElement('img').get('src');
		var imgDesc = parentHolder.getElement('.imgDesc');
		var imgbef = parentHolder.getElement('.imgBefore');
		var imgAft = parentHolder.getElement('.imgAfter');
		var imgDescSpan = this.element.getElement('li').getElement('span').get('html');
		var largeImage = new Element('img', { 'src': imgSrc.substr(imgSrc.indexOf("/")+1, imgSrc.indexOf("&")-(imgSrc.indexOf("/")+1)) });
		if(imgDescSpan) {
			imgDesc.set('html', imgDescSpan);
		}
		
		if ( this.element.getElement('li').getElement('img').hasClass('showBefAft') ) {
			imgbef.setStyle('display', 'block');
			imgAft.setStyle('display', 'block');
		} else {
			imgbef.setStyle('display', 'none');
			imgAft.setStyle('display', 'none');
		}
				
		largeImage.inject(inspector);
	},
					
	cacheElements: function(){
		var cs = this.options.childSelector;
		if(cs){
			els = this.element.getElements(cs);
		} else if (this.options.mode == 'horizontal'){
			els = this.element.getElements('ul');
		} else {
			els = this.element.getChildren();
		}
		
		this.elements = els;
		return this;
	},
	
	toNext: function(){
		if(this.checkLink()) return this;
		this.currentIndex = this.getNextIndex();
		this.toElement(this.elements[this.currentIndex]);
//		alert(this.elements.length);
		this.fireEvent('next');
		return this;
	},
	
	toPrevious: function(){
		if(this.checkLink()) return this;
		this.currentIndex = this.getPreviousIndex();
		this.toElement(this.elements[this.currentIndex]);
		this.fireEvent('previous');
		return this;
	},
	
	getNextIndex: function(){
		this.currentIndex++;
		if(this.currentIndex == this.elements.length || this.checkScroll()){
			this.fireEvent('loop');
			this.fireEvent('nextLoop');
			return 0;
		} else {
			return this.currentIndex;
		};
	},
	
	getPreviousIndex: function(){
		this.currentIndex--;
		var check = this.checkScroll();
		if(this.currentIndex < 0 || check) {
			this.fireEvent('loop');
			this.fireEvent('previousLoop');
			return (check) ? this.getOffsetIndex() : this.elements.length - 1;
		} else {
			return this.currentIndex;
		}
	},
	
	getOffsetIndex: function(){
		var visible = (this.options.mode == 'horizontal') ? 
			this.element.getStyle('width').toInt() / this.elements[0].getStyle('width').toInt() :
			this.element.getStyle('height').toInt() / this.elements[0].getStyle('height').toInt();
		return this.currentIndex + 1 - visible;
	},
	
	checkLink: function(){
		return (this.timer && this.options.link == 'ignore');
	},
	
	checkScroll: function(){
		if(!this.options.loopOnScrollEnd) return false;
		if(this.options.mode == 'horizontal'){
			var scroll = this.element.getScroll().x;
			var total = this.element.getScrollSize().x - this.element.getSize().x;
		} else {
			var scroll = this.element.getScroll().y;
			var total = this.element.getScrollSize().y - this.element.getSize().y;
		}
		return (scroll == total);
	},
	
	getCurrent: function(){
		return this.elements[this.currentIndex];
	},
	
	getIndex: function(){
		return this.currentIndex;
	}
	
});