var myCarousel;
var currentItem = 0;
var dragTrue = 0;
var currentPage;
var scrollerState = 0;
var scrollerWidth;
var imageSize;
var timeOut = null;

function closeGallery(){
	$('.viewGallery').slideUp('slow');
	$('#galleryCont').fadeOut('1000', function(){
		myCarousel.scrollToPage(0, 0);
		myCarousel.destroy();
		myCarousel = null;
		currentPage = null;
		timeOut = null;
		scrollerState = 1;		
	});	
	currentItem = 0;
}


function itemLoaded(){
	var state = 0;
	/*Variables to handle the AutoGallery*/
	$('.viewGallery').slideDown(1000);
	$('#galleryCont').fadeIn(1250);
	/*Initialize Carousel*/
	myCarousel = new iScroll('myCarousel', {hScrollbar: false, snap: true, momentum: false,
	onScrollEnd: function () {
		document.querySelector('.indicator > li.activeThumb').className = '';
		document.querySelector('.indicator > li:nth-child(' + (this.currPageX+1) + ')').className = 'activeThumb';},
	onScrollStart: function(){
		/*Detects any drag on the gallery*/
		dragTrue = 1;	
		}	
	});
	/*Click function for the Detail Button*/
	$(".plusWork").click(function(){
		if(state === 0){
			$('.workDesc').slideToggle("slow" );			
			$(this).fadeIn().css('background' ,'url(images/minusWork.png)');
		state = 1;
		}
		else{
			$('.workDesc').slideToggle("slow");
			$(this).fadeIn().css('background' ,'url(images/plusWork.png)');
			state = 0;
		}
	});
	/*Hover for the navigation buttons*/
	$('.navBtnPrev, .navBtnNext').hover(function(){
		$( this).stop().animate({
			"opacity": "0.4"
		}, "normal");
	}, function() {
		$(this).stop().animate({
			"opacity": "0.1"
		}, "slow");
	});
	if(scrollerState === 0){
		/*Simulate Click for AutoAdvance*/
		$('.next').click(function(e, simulated){
			if(!simulated){clearTimeout(timeOut);}		
		});
		/*AutoExecutable Function*/
		(function autoAdvance(){
			if(dragTrue === 1){
				clearTimeout(timeOut);
			}
			else if(dragTrue === 0){
			$('.next').trigger('click', [true]);
			timeOut = setTimeout(autoAdvance, 4000);
			/*the x position of the carrousel is negative.  We need to make the total width negative*/
			scrollerWidth = - myCarousel.scrollerW;
			/*Save Current x position of the Carrousel*/ 
			currentPage = myCarousel.x;
			imageSize = $('.imgScrollContent').css('width');
			imageSize = parseFloat(imageSize);
			var totalScrollSize = scrollerWidth + imageSize + 100;/*Add the 50px of the padding at each side*/
			/*Conditional for when it reaches the las Image Returns to the first*/
			if(currentPage === totalScrollSize){myCarousel.scrollToPage(0, 0);}
			}
		})();	
		scrollerState = 1;
	}
	$('.next').click(function(){
		clearTimeout(timeOut);
		myCarousel.scrollToPage('next', 0);
		return false;
	});
	$('.prev').click(function(){
		clearTimeout(timeOut);
		myCarousel.scrollToPage('prev', 0);
		return false;
	});
	/*Click to close the gallery*/
	$('#closeWork').click(function(){
		closeGallery();
		scrollerState = 0;
		clearTimeout(timeOut);
	});
}

/*Ajax dynamic Loading of gallery*/

function loadGalleryItem(projectId){
	$('#mainGallery').html('<p id="loader"><img src="images/25.gif" width="30" height="30" /></p>');//loader added, test to see if it works
	$('#mainGallery').load('works.php?project=' + projectId, itemLoaded);
	currentItem = projectId;
}
/*--------------------------------------------------------------------------*/
$(document).ready(function(){
	
	$('.galleryWork').each(function(index){
		$(this).click(function(ev){      
			ev.preventDefault();
			if(currentItem == $(this).attr('id')){		
				closeGallery();
				scrollerState = 1;
				clearTimeout(timeOut);
			}
			else{
				/*local scroll to top page*/
				$('html').animate({scrollTop:0}, 'slow');//IE, FF
				$('body').animate({scrollTop:0}, 'slow');//chrome
				/*Load Gallery*/
				loadGalleryItem($(this).attr('id'));
				dragTrue = 0;
				scrollerState = 0;
				clearTimeout(timeOut);
			}
		});
	});		
});