/*
Script: 	
	JVPhotos - The JV Photos Module allows to display the images with effects.

License:
	Proprietary - JoomlaVi Club members only

Copyright:
	Copyright (C) JoomlaVi. All rights reserved.
*/



var JVPhotos = new Class({
	Implements: [Options, Events],
	options:{
		imagePath: '',
		width: false,
		height: false,
		display: 0,
		itemsShow: 4,
		autoRun: 1,
		delay: 5000,
		duration: 1500,
		arrowOpacity: 0.3,
		transition: Fx.Transitions.Sine.easeInOut,
		fx: 'fade'		
	},
	
	initialize: function(selector, options){
		this.setOptions(options);
		this.selector = $(selector);
		if(!this.selector) return;		
		this.setup();
	},	
	
	setup: function(data){		
		var that = this;
		this.btnPrev = this.selector.getElement('.prev');
		this.btnNext = this.selector.getElement('.next');
		var wrapper = this.selector.getElement('.jv-photos-wrapper');
		var container = wrapper.getElement('ul');
		var loading = this.selector.getElement('.loading');

		if(!this.btnPrev || !this.btnNext || !wrapper){
			return;
		}	
		
		var itemsSize = this.selector.getSize();
		this.options.width = this.options.width || itemsSize.x;
		this.options.height = this.options.height || itemsSize.y;
		this.selector.setStyles({
			'width': that.options.width,
			'height': that.options.height
		});

		var thumbItems = container.getElements('li a');
		var originalItems = container.getChildren();

		if(originalItems.length < this.options.itemsShow){
			this.btnPrev.setStyle('opacity', this.options.arrowOpacity);
			this.btnNext.setStyle('opacity', this.options.arrowOpacity);
		}

		var originalLength = originalItems.length;
		if(!originalLength){
			return;
		}		
		
		var itemDuplicated = this.options.itemsShow;
		var currentItem = this.options.itemsShow;
		var oldIndex = this.options.itemsShow;
		var itemWidth = originalItems[0].getSize().x;
		var	scrollWidth = (originalLength + itemDuplicated * 2) * itemWidth;
		var wraperWidth = Math.min(originalLength, this.options.itemsShow) * itemWidth;
		var previewImageArr = [];
		var timerInterval = 0;
		var timerOut = 0;
		
		container.setStyle('width', scrollWidth);
		wrapper.setStyle('width', wraperWidth);		

		thumbItems.each(function(item, idx){
			previewImageArr.push(that.options.imagePath + item.getProperty('rel'));
		});
		for(var i = 0; i < itemDuplicated; i++){
			originalItems[i].clone(true, true).inject(container);
			originalItems[originalLength - i - 1].clone(true, true).inject(container, 'top');
		}
		
		thumbItems = container.getElements('li a');
		var fxComplete = true;
		var trunk = new Fx.Scroll(wrapper, {
			wait: false,
			onStart: function(){
				fxComplete = false;
			},
			onComplete: function(){
				var oldScroll = currentItem;
				if(currentItem <= 1){
					currentItem = originalLength + 1;
					trunk.set([itemWidth * currentItem, 0]);					
				}
				if(currentItem > originalLength + 1){				
					currentItem = 2;	
					trunk.set([itemWidth * currentItem, 0]);					
				}
				if(oldScroll != currentItem){
					oldIndex = currentItem;
					thumbItems[oldScroll].getParent().removeClass('active');
					thumbItems[currentItem].getParent().addClass('active');
				}
				fxComplete = true;
			}
		});
		trunk.set([currentItem * itemWidth, 0]);
		Asset.images(previewImageArr, {
			onComplete: function(){
					
				var bigImages = [];
				previewImageArr.each(function(imgSrc){
					var img = new Element('img', {
						src: imgSrc,
						alt: '',
						styles: {
							opacity: 0
						}
					}).inject(loading, 'after');
					img.fx = new Fx.Tween(img, {
						property: 'opacity', 
						duration: 1000
					});
					bigImages.push(img);
				});
				loading.destroy();				
				var curImg = 0;
				bigImages[0].fx.set(1);
				thumbItems.each(function(thumbItem, idx){
					thumbItem.removeEvents('click').addEvent('click', function(e){
						if(e){
							new Event(e).stop();
							clearInterval(timerInterval);
							clearTimeout(timerOut);
							timerOut = setTimeout(function(){
								if(that.options.autoRun == 1){
									timerInterval = setInterval(slideNext, that.options.delay);
								}
							}, that.options.delay/3);
						}
						var newIdx = idx;
						if(idx >= originalLength + itemDuplicated){
							newIdx = idx - originalLength;
						}
						else if(idx < itemDuplicated){
							newIdx = originalLength + idx - itemDuplicated;
						}
						else if(idx >= itemDuplicated && idx < originalLength + itemDuplicated){
							newIdx = idx - itemDuplicated;
						}
						bigImages[curImg].fx.cancel().start(0);
						bigImages[newIdx].fx.cancel().start(1);
						this.getParent().addClass('active');
						thumbItems[oldIndex].getParent().removeClass('active');
						curImg = newIdx;
						oldIndex = idx;
					});
				});
				thumbItems[currentItem].getParent().addClass('active');
			}
		});
		this.btnPrev.removeEvents('click').addEvent('click', function(e){
			if(e){
				new Event(e).stop();
			}
			clearInterval(timerInterval);
			clearTimeout(timerOut);
			if(!fxComplete){
				return;
			}
			currentItem--;
			trunk.toElement(thumbItems[currentItem]);
			thumbItems[currentItem].fireEvent('click');
			timerOut = setTimeout(function(){
				if(that.options.autoRun == 1){
					timerInterval = setInterval(slideNext, that.options.delay);
				}
			}, that.options.delay/3);
		});
		this.btnNext.removeEvents('click').addEvent('click', function(e){
			if(e){
				new Event(e).stop();
			}
			clearInterval(timerInterval);
			clearTimeout(timerOut);
			if(!fxComplete){
				return;
			}
			currentItem++;
			trunk.toElement(thumbItems[currentItem]);
			thumbItems[currentItem].fireEvent('click');
			timerOut = setTimeout(function(){
				if(that.options.autoRun == 1){
					timerInterval = setInterval(slideNext, that.options.delay);
				}
			}, that.options.delay/3);
		});
		var slideNext = function(){
			if(!fxComplete){
				return;
			}
			currentItem++;
			trunk.toElement(thumbItems[currentItem]);
			thumbItems[currentItem].fireEvent('click');
		};
		if(that.options.autoRun == 1){
			timerInterval = setInterval(slideNext, that.options.delay);
		}
		if(that.options.keyboard == 1){
			this.initKeyboard();
		}
	},
	initKeyboard: function(){
		var that = this;
		var keyupEvt = function(e){
			e = new Event(e);			
			switch(e.key){
				case 'left': 
					that.btnPrev.fireEvent('click');
					break;
				case 'right': 
					that.btnNext.fireEvent('click');
					break;				
			}
		}.bind(this);		
		document.addEvent('keyup', keyupEvt);				
	}
});