var SlidingThumbnails = {
	
	baseUrl: '/',
	thumbnailsUrl: '/thumbnails-data.php',
	emptyThumbnailUrl: '/images/thumbnail.png',
	
	nextButtonUrl: '/images/buttons/right-arrow.png',
	nextButtonDisabledUrl: '/images/buttons/right-arrow-disabled.png',
	previousButtonUrl: '/images/buttons/left-arrow.png',
	previousButtonDisabledUrl: '/images/buttons/left-arrow-disabled.png',
	
	productId: null,
	
	
	containerStatus: null,
	
	//main image object retrieved by getElement function
	mainImage: null,
	mainImageSelector: 'div#productPreview img.main',
		
	slideContainer: null,
	mainImageHeight: 480,
	mainImageWidth: 480,
	
	//images loaded by AJAX
	newImageData: null,
	newImageObjects: null,
	
	//timeout for action after clicking "next" or "previous" button
	startTimeout: 0,
	currentPage: 0,
	
	thumbnailContainers: null,
	
	loadImages: function(quantity,offset) {
		
		var url = SlidingThumbnails.thumbnailsUrl;
		var id = SlidingThumbnails.productId;
		
		var jsonRequest = new Request.JSON({
		
			url: url,
			onComplete: function(response) {
				
				//console.log(response);
				
				
				var urlArray = new Array() ;
				response.each(function(element, index){
					//console.log(element);
					urlArray[index] = element.url ; 
				});
				 
				//console.log(urlArray);
				
				
								
				SlidingThumbnails.newImageObjects = new Asset.images(
					urlArray,
					{
						onComplete: function(){
							SlidingThumbnails.newImageObjects.each(function(element){
					
								element.set('class', 'active');
					
							});
						}
					}
				);
				
				
			}
		
		}).get({productid: id});
		
	}, 
	
	init: function () {
		SlidingThumbnails.productId = $('productId').get('name') ;
		
		SlidingThumbnails.loadImages();
		
		SlidingThumbnails.thumbnailContainers = $$('div#imagePreviews div.thumbnails ul li');
		
		//console.log(SlidingThumbnails.productId);
		SlidingThumbnails.slideContainer = document.getElement('div#imagePreviews');
		SlidingThumbnails.slideContainer.setStyles({
		    bottom: '-81px'
		});
		SlidingThumbnails.containerStatus = 'hidden';
		
		SlidingThumbnails.mainImage = document.getElement(SlidingThumbnails.mainImageSelector);
		
		//thumbnail events setup
		SlidingThumbnails.setThumbnailEvents();
		
		
		
		// click next - event
		document.getElement('div#imagePreviews div.head li.next a').addEvent('click', function(event) {
			
			SlidingThumbnails.slide('next');
			
			event.preventDefault();
		});
		
		//click previous - event
		document.getElement('div#imagePreviews div.head li.previous a').addEvent('click', function(event) {
			
			SlidingThumbnails.slide('previous');
			
			event.preventDefault();
		});
		
		document.getElement('div#imagePreviews li.viewImages a').addEvent('click', function(event) {
			
			if(SlidingThumbnails.containerStatus == 'hidden') {
				SlidingThumbnails.showContainer();
				SlidingThumbnails.containerStatus = 'visible';
				
			} else {
				SlidingThumbnails.hideContainer();
				SlidingThumbnails.containerStatus = 'hidden';
			}
			event.preventDefault();
		});
		
	},
	
	slide: function(direction) {

		switch(direction) {
			case 'next':
				var currentPage = SlidingThumbnails.currentPage;
				var replaceImageStartIndex = (currentPage + 1) * 4;	
				//var buttonCheckIndex = 	(currentPage + 2) * 4;	
				SlidingThumbnails.currentPage = SlidingThumbnails.currentPage + 1;
				//console.log(buttonCheckIndex);
				break;
			case 'previous':
				var currentPage = SlidingThumbnails.currentPage;
				
				var replaceImageStartIndex = (currentPage - 1) * 4;
				//var buttonCheckIndex = 	(currentPage - 2) * 4;
				//console.log(buttonCheckIndex);
				SlidingThumbnails.currentPage = SlidingThumbnails.currentPage - 1;
				 
				
				break;
			default: 
				
		}
		
		
		var duration = 200;
		var delay = 100;
		var startTimeout = SlidingThumbnails.startTimeout;
		var mainStepDelay = 0;
		
		if( SlidingThumbnails.newImageObjects[replaceImageStartIndex + 4]) {
			document.getElement('div#imagePreviews div.head li.next a img').set('src', SlidingThumbnails.nextButtonUrl);
		} else {
			document.getElement('div#imagePreviews div.head li.next a img').set('src', SlidingThumbnails.nextButtonDisabledUrl);
		}
		
		if( SlidingThumbnails.newImageObjects[replaceImageStartIndex - 4] ) {
			document.getElement('div#imagePreviews div.head li.previous a img').set('src', SlidingThumbnails.previousButtonUrl);
		} else {
			document.getElement('div#imagePreviews div.head li.previous a img').set('src', SlidingThumbnails.previousButtonDisabledUrl);
		}
		
		if(SlidingThumbnails.newImageObjects[replaceImageStartIndex]) {
				
			SlidingThumbnails.thumbnailContainers.each( function(item, key){
				
				//current thumbnail
				SlidingThumbnails.thumbnailContainers[key].set('tween',{property: 'margin-top', transition: 'linear', duration: duration });
				
				//1 step - slide
				var slideUpTimeout = startTimeout ;
				var slideUp = function(){ 
					//SlidingThumbnails.thumbnailContainers[key].get('tween').start(-81); //up
					
					SlidingThumbnails.thumbnailContainers[key].get('tween').start(90); //down
				};
				slideUp.delay(slideUpTimeout);
				//slideUp();
				
				//replace images
				//console.log(key);
				var replaceTimeout = slideUpTimeout + duration;
				//console.log(replaceTimeout);
				var replaceImage = function() {
					//alert('replacing');
					
					if(SlidingThumbnails.newImageObjects[replaceImageStartIndex + key] ) {
						SlidingThumbnails.newImageObjects[replaceImageStartIndex + key].replaces(SlidingThumbnails.thumbnailContainers[key].getElement('img'));
					} else {
						//console.log(SlidingThumbnails.emptyThumbnailUrl);
						new Element('img',{
						
							'src': SlidingThumbnails.emptyThumbnailUrl,
							'class': 'empty'
						
						}).replaces(SlidingThumbnails.thumbnailContainers[key].getElement('img'));
						
					}
					
					SlidingThumbnails.setThumbnailEvents();
				};
				replaceImage.delay(replaceTimeout);
				//replaceImage();
				
				//2 step - slide
				//var slideDownTimeout = slideUpTimeout + duration ;
				var slideDownTimeout = slideUpTimeout + 3 * delay + mainStepDelay + duration ;
				
				var slideDown = function(){
					SlidingThumbnails.thumbnailContainers[key].get('tween').start(0);
				};
				slideDown.delay(slideDownTimeout);
				//slideDown();
				
				startTimeout = startTimeout + delay;
				
				
				
			});
		} else {
						
			SlidingThumbnails.currentPage = currentPage;
			
		}
		
		
	},
	
	setThumbnailEvents: function(){
		//click image - event
		$$('div#imagePreviews div.thumbnails ul li img.active').addEvent('click', function(event) {
			
			var imageSrcOld = this.get('src');
			var imageSrc = imageSrcOld.replace(/\d+x\d+/i, SlidingThumbnails.mainImageWidth + "x" + SlidingThumbnails.mainImageHeight);
			var altText = this.get('alt');
			
			SlidingThumbnails.mainImage.get('tween',{property: 'opacity', transition: 'cubic:out', onComplete: function(){
							
				var newImage = new Asset.image(imageSrc, {'class': 'main', 'alt': altText, 'onload': function(){
					this.setStyle('opacity', 0);
					newImage.replaces(SlidingThumbnails.mainImage).get('tween',{
						property: 'opacity',
						transition: 'cubic:in'
					}).start(1);	
					SlidingThumbnails.mainImage = document.getElement(SlidingThumbnails.mainImageSelector);
				}});
			}}).start(0);
			
		});
	},
	
	hideThumbnail: function(key) {
		SlidingThumbnails.thumbnailContainers[key].set('tween',{property: 'opacity'});
	},
	
	showThumbnail: function(key) {
		SlidingThumbnails.thumbnailContainers[key].set('tween',{property: 'opacity'});
	},
	
	hideContainer: function() {
		var myFx = new Fx.Tween( SlidingThumbnails.slideContainer, {transition: 'bounce:out' });
		myFx.start('bottom', -81 );
		
	},
	
	showContainer: function() {
		
		var myFx = new Fx.Tween( SlidingThumbnails.slideContainer, {transition: 'bounce:out' });
		myFx.start('bottom', 8 );
	}
};

window.addEvent('domready', SlidingThumbnails.init);