$(function(){
	$('#thumbsReel img').eq(0).addClass('currImageThumb');
});
// image reel funcionality
var imgNum = 0;
var imageAmt;
function setupImageReel() {
	var imageWidth = $('.isSlideImg').width();
	var imageHeight = $('.isSlideImg').height();
	var imgReel = $('#imgReel');
	var imagesInReel = imgReel.children('img');
	imageAmt = imagesInReel.length;
	imgReel.css({width : (imageWidth * imageAmt)});
	var getImageNumber = imagesInReel.attr('class').split(' ')[1].split('r')[1];
	function sliding() {
		$('.rightSlideBtn').click(function() {
			if (imgNum < imageAmt-1) {
				imgNum++;
				$("#thumbsReel .currImageThumb").removeClass('currImageThumb');
				$('#thumbsReel img:eq(' + imgNum +')').addClass('currImageThumb');
				imgReel.stop().animate({
					left: -(imgNum * imageWidth)
				});
				var thumbIndex = imgNum;
				scrollThumb(imgNum,thumbIndex);
			}
		});
		$('.leftSlideBtn').click(function() {
			if(imgNum != 0) {
				imgNum--;
				$("#thumbsReel .currImageThumb").removeClass('currImageThumb');
				$('#thumbsReel img:eq(' + imgNum +')').addClass('currImageThumb');
				imgReel.stop().animate({
					left: - (imgNum * imageWidth) 
				});
				var thumbIndex = imgNum;
				scrollThumb(imgNum,thumbIndex);
			}
		});
	}	
	sliding();
}
function scrollThumb(scrollBy,thumbIndex) {
	//if(goBack == undefined) backwards = 0;
	//var backwards = goBack;
	var self = $("#thumbsReel");
	var thumbs = self.children('img');
	var thumbWidth = thumbs.outerWidth() + 10;
	var bySix = scrollBy % 6;
	var isBySix = bySix === 0;
	var thumbIndex;
/*
	if (isBySix) {
		self.animate({
			left : - (scrollBy * thumbWidth)
		});
	}
*/
/*
	if (thumbIndex) {
		thumbIndex -= 3;
		
		self.stop().animate({
			left : -(thumbWidth * thumbIndex)
		});
	}
*/
var curThumbPositionLeft = $('#thumbsReel img').eq(thumbIndex).position().left;
var thumbsLeft = -self.position().left;
if(curThumbPositionLeft <= thumbsLeft && thumbIndex != 0) {
	self.stop().animate({
		left : -(thumbsLeft - thumbWidth)
	});
} else if(curThumbPositionLeft >= thumbsLeft + (6 * thumbWidth) && thumbIndex != imageAmt - 1) {
	self.stop().animate({
		left : -(thumbsLeft + thumbWidth)
	});
}


	
}

$('#thumbsReel img').live('click', function(){
	var self = $(this);
	var clickedIndex = self.index();
	self.siblings('.currImageThumb').removeClass('currImageThumb').end().addClass('currImageThumb');
	imgNum = clickedIndex;
	var clickedPlus = clickedIndex;
	var imageWidth = $('.isSlideImg').width();
	$("#imgReel").animate({
		left : -( clickedIndex * imageWidth )
	});
	scrollThumb(imgNum, clickedIndex)
});
function setupThumbs() {
	$('.isSlideImg').each(function(i){
		var self = $(this);
		self.clone().appendTo('#thumbsReel');
		var counter = i;
		counter++;
		self.addClass("imageNumber" + counter);
	});
	$('#thumbsReel img').each(function(){
		$(this).removeClass('isSlideImg');
	});
	var thumbReel = $('#thumbsReel');
	var thumbsChildren =  thumbReel.children('img');
	var amtThumbs = thumbsChildren.length;
	var thumbsWidth = thumbsChildren.width();
	var margins = thumbsChildren.css('marginRight');
	var thumbsWidthWithborders = thumbsWidth + 4;
	thumbReel.css({width: (amtThumbs*thumbsWidthWithborders) + (10 * amtThumbs) });
	//thumbsChildren.is(':first').css('marginleft' , '10px')
}
setupThumbs();
setupImageReel();