// init vars
var imageTotal;
var imageNo;
var aniRunning = false;

var imageDir = "http://www.grahamatkinshughes.com/images/grahamatkinshughes/";

var imageArray = new Array();
var thumbArray = new Array();

var slideInterval;

$(document).ready(function() {
	

	if(imageGallery){
		$("#maintext").css("display", "none" );
		$("html").css("overflow", "hidden" );
	} else {
		$("#fullImage").css("display", "none" );
		$("#thumbNails").css("display", "none" );
		$("#maintext").css("display", "block" );
	}
	
	// move last list item before the first item
	$('#carousel_ul li:first').before($('#carousel_ul li:last'));
	
	if(imageGallery != "introduction"){
		getTotal();
	}
	
	// image resize
	$(window).bind("resize", resizeWindow);
	function resizeWindow( e ) {
		imageResize();
		
		
	}
});


// FUNCTIONS BELOW
// get image total
function getTotal(){
	$.get(imageDir + imageGallery + "/thumbs/files.php", function(data){
		
		imageArray = data.split("|");
		imageArray.pop();
		imageTotal = imageArray.length;
		imageNo = 1;
		loadImage();
		if(imageGallery != "introduction"){
			loadThumbs();
		}
	});
}

function fadeOutImage(){
	// fadeout previous image
	$('#fullImage').fadeOut('medium', function() {
		$('#fullImage').css('visibility','hidden').show();
		$("#fullImage img").remove();
		loadImage();
	});
}

// load image
function loadImage(){
	$("#fullImage img").remove();
	imagePath = '<img src="' + imageDir + imageGallery + '/full/' + imageNo + '.jpg" id="image" alt="Graham Atkins-Hughes - London based Advertising, Fashion, Interiors and Lifestyle Photography." />';
	
	$('#fullImage').prepend(imagePath);
	$("#fullImage img").load(function(){
		imageResize();
		// fade in div
		fadeInImage();
	});
	
}

function fadeInImage(){
	$('#fullImage').css('visibility','visible').hide().fadeIn('medium', function() {
		// Animation complete
		aniRunning = false;
		
		if(imageGallery == "introduction"){
			// slideshow
			slideInterval = setInterval("slideShow()", 5000);
		}
	});
}

// load thumbs
function loadThumbs(){
	if(imageTotal <= 7){
		$("#left_scroll").css("display", "none" );
		$("#right_scroll").css("display", "none" );
		var thumbsWidth = (62 * imageTotal) - 2;
		var thumbsMargin = 20 + (432 - thumbsWidth)/2;
		//$("#thumbNails").css("width", thumbsWidth );
		$("#carousel_inner").css("margin-left", thumbsMargin );
	}
	
	
	for(i = imageTotal - 2; i <= imageTotal; i++){
		liItem = "<li><a href='#'><img src='"+ imageDir + imageGallery + "/thumbs/" + i +".jpg' alt='Graham Atkins-Hughes - London based Advertising, Fashion, Interiors and Lifestyle Photography.' id='photo" + i + "' /></a></li>";
		$('#carousel_ul').append(liItem);
	}
	for(i = 1; i <= imageTotal-3; i++){
		liItem = "<li><a href='#'><img src='"+ imageDir + imageGallery + "/thumbs/" + i +".jpg' alt='Graham Atkins-Hughes - London based Advertising, Fashion, Interiors and Lifestyle Photography.' id='photo" + i + "' /></a></li>";
		$('#carousel_ul').append(liItem);
	}
	buttons();
	// fade in div
	$('#thumbNails').fadeIn('slow', function() {
		// Animation complete
	});
}

function buttons(){
	// left click
	$('#left_scroll').click(function() {
		if(aniRunning == false){
			aniRunning = true;
			if(imageNo > 1){
				imageNo--;
			} else {
				imageNo = imageTotal;
			}	
			fadeOutImage();
			slide('left');
		}
	});
	
	// right click
	$('#right_scroll').click(function() {
		if(aniRunning == false){
			aniRunning = true;
			if(imageNo < imageTotal){
				imageNo++;
			} else {
				imageNo = 1;
			}
			fadeOutImage();
			slide('right');
		}
	});
		
	// thumb click
	$('#carousel_ul li img').click(function() {
		if(aniRunning == false){
			aniRunning = true;
			imageNo = $(this).attr('id');
			imageNo = imageNo.split("photo").join("");
			
			var index = $('#carousel_ul li img').index(this);
			if(index > 3){
				amount = index - 3;
				slide('right', amount, 1);
				
			}
			if(index < 3){
				amount = 3 - index;
				slide('left', amount, 1);
				
			}
			
			fadeOutImage();
		}
	});
	
	$('#left').click(function() {
		if(aniRunning == false){
			aniRunning = true;
			if(imageNo > 1){
				imageNo--;
			} else {
				imageNo = imageTotal;
			}	
			fadeOutImage();
			slide('left');
		}
	});
	
	// right click
	$('#right').click(function() {
		if(aniRunning == false){
			aniRunning = true;
			if(imageNo < imageTotal){
				imageNo++;
			} else {
				imageNo = 1;
			}
			fadeOutImage();
			slide('right');
		}
	});
}


// slideshow
function slideShow(){
	clearInterval(slideInterval);
	if(aniRunning == false){
		aniRunning = true;
		if(imageNo < imageTotal){
			imageNo++;
			fadeOutImage();
			slide('right');
		} else {
			$('#fullImage').fadeOut('slow', function() {
				window.location.href = "?page_id=2"; 
			});
			$('#carousel_container').fadeOut('slow', function() {});
		}
		
	}
}



// slide function
function slide(where, amount, amountNo){
	if(imageTotal >= 7){
				
			
		// get item width
		var item_width = $('#carousel_ul li').outerWidth();
		
		// check if left or right
		if(where == 'left'){
			// calculate new left indent for ul for left sliding
			var left_indent = parseInt($('#carousel_ul').css('left')) + item_width;
		} else {
			// calculate new left indent for ul for right sliding
			var left_indent = parseInt($('#carousel_ul').css('left')) - item_width;
		}
		
		// make the sliding effect using jQuery's animate function
		$('#carousel_ul').animate({'left' : left_indent}, 500, function(){
		
			// when animation finishes use if statement again to make illusion of infinity by changing place of first or last item
			if(where == 'left'){
				// place last item before first item
				$('#carousel_ul li:first').before($('#carousel_ul li:last'));
			} else {
				// place first item after last item
				$('#carousel_ul li:last').after($('#carousel_ul li:first'));
			}
			
			// then get back to default indent
			$('#carousel_ul').css({'left' : '0px'});
			
			if(amountNo < amount){
				amountNo++;
				slide(where, amount, amountNo);
				
			}
		});
	}
}

// resize image
function imageResize(){
	var imageWidth = $("#fullImage img").width();
	var imageHeight = $("#fullImage img").height();
	var imageRatio = imageWidth/imageHeight;
	
	//alert(imageWidth);
	
	var maxWidth = $(window).width() - 360;
	var maxHeight = $(window).height() - 120;
	
	var newImageWidth = maxWidth;
	var newImageHeight = newImageWidth / imageRatio;
	
	if(newImageHeight > maxHeight){
		newImageHeight = maxHeight;
		newImageWidth = newImageHeight * imageRatio;
	}
	
	
	
	if(newImageWidth > maxWidth){
		newImageWidth = maxWidth;
		newImageHeight = newImageWidth / imageRatio;
	}
	
	$("#fullImage img").css("width", newImageWidth );
	$("#fullImage img").css("height", newImageHeight );
	
	var leftPos = maxWidth/2 - newImageWidth/2;
	if(leftPos < 0){
		leftPos = 0;
	}
	var rightPos = leftPos + (newImageWidth/2);
	
	$("#fullImage img").css("margin-left", leftPos );
	
	$("#left").css("margin-left", leftPos );
	$("#left").css("margin-top", -8 );
	$("#left img").css("height", newImageHeight );
	$("#left img").css("width", newImageWidth/2 );
	$("#right").css("margin-left", rightPos );
	$("#right").css("margin-top", -8 );
	
	$("#right img").css("height", newImageHeight );
	$("#right img").css("width", newImageWidth/2 );
}