// JavaScript Document

function createImages() {
	jQuery.each(images, function(index, obj) {
		jQuery('#slider-images').append( jQuery(
							'<div id="' + ids[index] + '" class="block" style="left: ' + incrementFirstX + 'px">'+
								'<img src="' + obj + '" />'+
								'<div class="image-desc" style="background-color: ' + colors[index] + '">' + texts[index] +
									'<div class="image-link"><a href="' + links[index] + '" target="_self">Approfondisci</a></div>'+
								'</div>'+
							'</div>'
							) );
		
		incrementFirstX += imgWidth;
    });
	
	lastImgX = (incrementFirstX-imgWidth);
	
	jQuery('#slider-images .block').eq(imageActive-1).attr('class', 'block active');
	jQuery('#slider-images .block').eq(imageActive-1).children(':first-child').animate({'opacity': '1'}, 400);
	jQuery('#slider-images .block').eq(imageActive-1).children(':last-child').animate({'opacity': '1'}, 400);
	jQuery('#slider-images').animate({'opacity': '1'}, 400);
	
	jQuery('.controls-container').width(numImages*38);
	
}

function moveImage(_btn, _itemIndex) {
	
	if (_btn == 'next') {
		lastImgX = lastImgX+imgWidth;
		firstImg = jQuery('#slider-images .block:first');
		firstImg.attr('style', 'left: ' + lastImgX + 'px');
		jQuery('#slider-images').append( firstImg );
		firstImgX = jQuery('#slider-images .block:first').position();
		firstImgX = firstImgX.left;
	} else if (_btn == 'prev') {
		firstImgX = firstImgX-imgWidth;
		lastImg = jQuery('#slider-images .block:last');
		lastImg.attr('style', 'left: ' + firstImgX + 'px');
		jQuery('#slider-images').prepend( lastImg );
		lastImgX = jQuery('#slider-images .block:last').position();
		lastImgX = lastImgX.left;
	}
	
	jQuery('#slider-images .block').eq(imageActive-2).children(':first-child').animate({'opacity': '0.4'}, 200);
	jQuery('#slider-images .block').eq(imageActive-2).children(':last-child').animate({'opacity': '0.4'}, 200);
	jQuery('#slider-images .block').eq(imageActive-2).attr('class', 'block');
	jQuery('#slider-images .block').eq(imageActive-1).children(':first-child').animate({'opacity': '1'}, 200);
	jQuery('#slider-images .block').eq(imageActive-1).children(':last-child').animate({'opacity': '1'}, 200);
	jQuery('#slider-images .block').eq(imageActive-1).attr('class', 'block active');
	jQuery('#slider-images .block').eq(imageActive).children(':first-child').animate({'opacity': '0.4'}, 200);
	jQuery('#slider-images .block').eq(imageActive).children(':last-child').animate({'opacity': '0.4'}, 200);
	jQuery('#slider-images .block').eq(imageActive).attr('class', 'block');
	
	jQuery('.slider-buttons').animate({'opacity': '1'}, 200);
}

function moveArrow(_btn) {
	
	arrowX = jQuery('#black-arrow').position();
	arrowX = arrowX.left;
	
	nowActive = jQuery('.slider-btn.active').attr('id');
	jQuery('.slider-btn.active').attr('class', 'slider-btn');
	
	if (_btn == 'next') {
		if (arrowX == ((numImages-1) * 38) + 14 ) jQuery('#black-arrow').animate({'left': 14}, 300);
		else if (arrowX >= 14) jQuery('#black-arrow').animate({'left': '+=' + 38 + 'px'}, 300);
		
		if (jQuery('#' + nowActive).next().attr('class') != 'hidden-btn') jQuery('#' + nowActive).next().attr('class', 'slider-btn active');
		else jQuery('#square-1').attr('class', 'slider-btn active');
		
	} else if (_btn == 'prev') {
		
		if (arrowX == 14) jQuery('#black-arrow').animate({'left': ((numImages-1) * 38) + 14 }, 300);
		else if (arrowX <= ((numImages-1) * 38) + 14 ) jQuery('#black-arrow').animate({'left': '-=' + 38 + 'px'}, 300);
		
		if (jQuery('#' + nowActive).prev().attr('id') != 'black-arrow') jQuery('#' + nowActive).prev().attr('class', 'slider-btn active');
		else jQuery('#square-' + numImages).attr('class', 'slider-btn active');
		
	} else {
		
		newPos = jQuery('#square-' + _btn).position();
		newPos = newPos.left+14;
		jQuery('#black-arrow').animate({'left': newPos}, 300);
		
		jQuery('#square-' + _btn).attr('class', 'slider-btn active');
	}
}

function moveSlider(_btn) {
	
	jQuery('.slider-buttons').animate({'opacity': '0'}, 0);
	
	if (_btn == 'next') {
		jQuery('#slider-images').animate({'left': '-=' + imgWidth + 'px'}, 400);
		setTimeout(function() {
			moveImage(_btn);
		}, 200);
	} else if (_btn == 'prev') {
		jQuery('#slider-images').animate({'left': '+=' + imgWidth + 'px'}, 400);
		setTimeout(function() {
			moveImage(_btn);
		}, 200);
	} else {
		
		listItem = document.getElementById(_btn);
		itemIndex = jQuery('#slider-images .block').index(listItem)+1;
		
		moveArrow(_btn, itemIndex);

		if (itemIndex > imageActive) {
			v = itemIndex-imageActive;
			jQuery('#slider-images').animate({'left': '-=' + (imgWidth * v) + 'px'}, 400);
			for (i=0; i<v; i++) {
				setTimeout(function() {
					moveImage('next');
				}, 200);
			}
		} else if (itemIndex < imageActive) {
			v = imageActive-itemIndex;
			jQuery('#slider-images').animate({'left': '+=' + (imgWidth * v) + 'px'}, 400);
			for (i=0; i<v; i++) {
				setTimeout(function() {
					moveImage('prev');
				}, 200);
			}
		}
	}
	
}

jQuery(document).ready(function() {	
								
	createImages();
	
	jQuery('#slider-prev').click(function() {
		moveSlider('prev');
		moveArrow('prev');
		btnCounter++;
	});
	jQuery('#slider-next').click(function() {
		moveSlider('next');
		moveArrow('next');
		btnCounter++;
	});
	
});