$(document).ready(function(){
	// AJAX to load thumbnail slides for the gallery
	$.ajax({
		type: "GET",
		async: false,
		url: "xml/gallery-thumbnails.xml",
		dataType: "xml",
		success: function(xml) {
			var thumbsPerSlide = 3;
			var numberOfThumbs = $(xml).find('project').length;
			var numberOfSlides = Math.ceil(numberOfThumbs/thumbsPerSlide);
			var slideCount = 1;
			var thumbCount = 1;
			$(xml).find('project').each(function(){
				// generate a new slide if the thumb count has reset
				if (thumbCount == 1) {
					generateSlide();
				}
				// generate the thumb
				var id = $(this).attr('name');
				var thumb = $(this).find('thumbnail').text();
				var caption = $(this).find('caption').text();
				$('#gallerySlide'+slideCount).append('<a href="#containerPortfolio"><div id="'+id+'" class="slideshowThumb"><div class="captionBox"><div class="captionText">'+caption+'</div></div></div></a>');
				$('#'+id).css({'width':'280px','height':'240px','background-image':'url(images/'+thumb+')','background-repeat':'no-repeat','background-position':'0px 0px'});
				// reset thumb counter and add slide count if thumbs per slide is reached
				if (thumbCount<thumbsPerSlide) {
					thumbCount++;
				} else {
					thumbCount=1;
					slideCount++;
				}
				// function to generate new slide if max is not reached
				function generateSlide() {
					if (slideCount<=numberOfSlides) {
						$('#containerThumbs').append('<div id="gallerySlide'+slideCount+'" class="slideGallery"></div>');
					}
				}
			});
		}
	});
	
	// set variables for the slideshow gallery
	var currentPositionGallery = 0;
	var slideWidthGallery = 930;
	var slidesGallery = $('.slideGallery');
	var numberOfSlidesGallery = slidesGallery.length;
	var currentPositionViewer = 0;
	var slideWidthViewer = 900;
	var projectLoad = '';

	// GALLERY - Remove scrollbar for gallery in JS
	$('#containerThumbs').css('overflow', 'hidden');

	// GALLERY - Wrap all slides in the gallery (.slidesGallery) with #slideInnerGallery div
	slidesGallery.wrapAll('<div id="slideInnerGallery"></div>').css({
		'float' : 'left',
		'width' : slideWidthGallery,
		'margin' : '0px auto'
	});
	
	// GALLERY - Set #slideInnerGallery width equal to total width of all slides in the gallery
	$('#slideInnerGallery').css('width', slideWidthGallery * numberOfSlidesGallery);
	
	// GALLERY - Hide left arrow control on first load
	manageControlsGallery(currentPositionGallery);
	
	// GALLERY - create event listeners for .controls clicks in the gallery
	$('.controlGallery').bind('click', function() {
		
		// Determine new position
		currentPositionGallery = ($(this).attr('id')=='rightControlGallery') ? currentPositionGallery+1 : currentPositionGallery-1;
		
		// Set upper and lower limits on the position of the slides
		if (currentPositionGallery<0) {
			currentPositionGallery=0;
		} else if (currentPositionGallery==numberOfSlidesGallery) {
			currentPositionGallery=numberOfSlidesGallery-1;
		}
				
		// Hide / show controls
		manageControlsGallery(currentPositionGallery);
		
		// Move slideInnerGallery using margin-left
		$('#slideInnerGallery').animate({
			'marginLeft' : slideWidthGallery*(-currentPositionGallery)
		}, 500);
		
		// light up correct dot
		manageDotsGallery();
					
	});
	
	
	// GALLERY - manage controls for the gallery: Hides and Shows controls in the gallery depending on currentPosition
	function manageControlsGallery(positionGallery){
		  
		// Hide left arrow in gallery if position is first slide
		if (positionGallery==0) {
				$('#leftControlGallery').removeClass("controlActive").addClass("controlInactive");
			} else {
				$('#leftControlGallery').removeClass("controlInactive").addClass("controlActive");
			}
				
		// Hide right arrow in gallery if position is last slide
		if (positionGallery==numberOfSlidesGallery-1) {
			$('#rightControlGallery').removeClass("controlActive").addClass("controlInactive");
		} else {
			$('#rightControlGallery').removeClass("controlInactive").addClass("controlActive");
		}
				
	}

	// GALLERY - create a new div to hold the dots underneath the slide in the gallery
	$('#containerSlideshow').append('<div id="containerDotsGallery"></div>');
	
	// GALLERY - create a new div to hold the link which opens the Full Gallery
	/*
	$('#containerSlideshow').append('<div id="btnFullGallery" class="tk-calluna-sans">full gallery</div>');
	*/
	
	// GALLERY - loop adding an empty dot for each slide in the gallery
	$('.slideGallery').each(function() {
		$('#containerDotsGallery').append('<span class="dotGallery"><img src="images/blank.gif" width="6" height="6" /></span>');
	});
		
	// GALLERY - light up correct dot in gallery when first loaded
	manageDotsGallery();
	
	// GALLERY - function which lights up correct dot in the gallery according to which slide you are currently on.
	function manageDotsGallery () {
		// turn all gallery dots off
		$('.dotGallery').removeClass("dotOn").addClass("dotOff");
		// turn on gallery dot coinciding with current slide
		$($('.dotGallery')[currentPositionGallery]).removeClass("dotOff").addClass("dotOn");
	}
	
	
	// GALLERY - variable controlling the speed at which the gallery effect take place
	var thumbEffectSpeed = 300;
	
	// GALLERY - fade controls when first loaded
	$('.controlGallery').fadeTo(thumbEffectSpeed, 0.3);
	
	// GALLERY - fade in controls on mouse over, fade out controls on mouse out
	$('#containerSlideshow').hover(function(){$('.controlGallery').fadeTo(thumbEffectSpeed, 1.0)},function(){$('.controlGallery').fadeTo(thumbEffectSpeed, 0.5) && $('.slideshowThumb').fadeTo(thumbEffectSpeed, 1.0)});
	
	// GALLERY - fade all thumbs (except one currently hovering on) out to black and white on hover
	$('.slideshowThumb').hover(function(){$('.slideshowThumb').not(this).fadeTo(thumbEffectSpeed, 0.3) && $(this).fadeTo(thumbEffectSpeed, 1.0) && $(this).find('.captionBox').animate({top:'200px'}, thumbEffectSpeed)}, function(){$(this).fadeTo(thumbEffectSpeed, 0.3) && $(this).find('.captionBox').animate({top:'240px'}, thumbEffectSpeed)});
	
	// GALLERY - fade all thumbs in when on gallery navigation
	$('.controlGallery').mouseover(function(){$('.slideshowThumb').fadeTo(thumbEffectSpeed, 1.0)});
	
	// VIEWER - fade in controls on mouse over, fade out controls on mouse out
	$('#containerViewingArea').hover(function(){$('.controlViewer').fadeTo(thumbEffectSpeed, 1.0) && $('#closeViewer').fadeTo(thumbEffectSpeed, 1.0)},function(){$('.controlViewer').fadeTo(thumbEffectSpeed, 0.3) && $('#closeViewer').fadeTo(thumbEffectSpeed, 0.3)});
	
	// VIEWER - show the viewer once a thumb is clicked on
	$('.slideshowThumb').bind('click', function() {
		
		$('#containerViewingArea').slideDown('500', function() {
			});
		
		// make sure project viewer is empty before loading
		clearViewer ();
		
		// reset the current position of the project viewer
		currentPositionViewer = 0;
		projectLoad = $(this).attr('id');
		
		// load new project
		loadViewer();
				
	});
	
	// VIEWER - close viewer
	$('#closeViewer').click(function() {
		
		$('#containerViewingArea').slideUp('500', function() {
			// remove items from project viewer
			clearViewer ();
		});
		
	});
	
	// VIEWER - create event listeners for .controls clicks
	$('.controlViewer').bind('click', function() {
		
		currentPositionViewer = ($(this).attr('id')=='rightControlViewer') ? currentPositionViewer+1 : currentPositionViewer-1;
		
		// Set upper and lower limits on the position of the slides
		if (currentPositionViewer<0) {
			currentPositionViewer=0;
		} else if (currentPositionViewer==numberOfSlidesViewer) {
			currentPositionViewer=numberOfSlidesViewer-1;
		}
		
		// Hide / show controls
		manageControlsViewer(currentPositionViewer);
		
		// Move slideInnerGallery using margin-left
		$('#slideInnerViewer').animate({
			'marginLeft' : slideWidthViewer*(-currentPositionViewer)
		}, 500);
		
		// light up correct dot
		manageDotsViewer();
					
	});
		
	// VIEWER - manage controls for the viewer: Hides and Shows controls depending on currentPosition
	function manageControlsViewer(positionViewer){
		  
		// Hide left arrow in viewer if position is first slide
		if (positionViewer==0) {
				$('#leftControlViewer').removeClass("controlActive").addClass("controlInactive");
			} else {
				$('#leftControlViewer').removeClass("controlInactive").addClass("controlActive");
			}
				
		// Hide right arrow in viewer if position is last slide
		if (positionViewer==numberOfSlidesViewer-1) {
			$('#rightControlViewer').removeClass("controlActive").addClass("controlInactive");
		} else {
			$('#rightControlViewer').removeClass("controlInactive").addClass("controlActive");
		}
				
	}
	
	// VIEWER - function which lights up correct dot in the viewer according to which slide you are currently on.
	function manageDotsViewer () {
		// turn all viewer dots off
		$('.dotViewer').removeClass("dotOn").addClass("dotOff");
		// turn on viewer dot coinciding with current slide
		$($('.dotViewer')[currentPositionViewer]).removeClass("dotOff").addClass("dotOn");
	}
	
	// VIEWER - function which loads up correct project in the viewer.
	function loadViewer () {
		// AJAX to load viewer slides for the gallery
		$.ajax({
			type: "GET",
			async: false,
			url: "xml/gallery-thumbnails.xml",
			dataType: "xml",
			success: function(xml) {
				$(xml).find('project').each(function(){
					if ($(this).attr('name')==projectLoad) {
						var title = $(this).find('title').text();
						$('.viewerTitle').html(title);
						$(this).find('images').each(function(){
							var count = 1;
							$(this).find('image').each(function(){
								var image = $(this).find('file_name').text();
								$('#containerViewer').append('<div id="slide'+count+'" class="slideViewer"></div>');
								/* $('#slide'+count).append('<img id="loader'+count+'" src="images/ajax-loader.gif" alt="loading" />'); */
								$('#slide'+count).append('<img src="images/'+image+'" width="900" height="500" alt="thumb" class="imageViewer" />');
								count++;
							});
						});
					}
				});
			}
		});
		
		// set variables for the viewer
		slidesViewer = $('.slideViewer');
		numberOfSlidesViewer = slidesViewer.length;
		
		// Remove scrollbar for viewer in JS
		$('#containerViewer').css('overflow', 'hidden');
		
		// Wrap all slides in the viewer (.slidesViewer) with #slideInnerViewer div
		slidesViewer.wrapAll('<div id="slideInnerViewer"></div>').css({
			'float' : 'left',
			'width' : slideWidthViewer
		});
		
		// Set #slideInnerViewer width equal to total width of all slides in the viewer
		$('#slideInnerViewer').css('width', slideWidthViewer * numberOfSlidesViewer);
	
		// create a new div to hold the dots underneath the slide in the viewer
		/*
		$('#containerViewingArea').append('<div id="containerDotsViewer"></div>');
		*/
	
		// loop adding an empty dot for each slide in the viewer
		$('.slideViewer').each(function() {
			$('#containerDotsViewer').append('<span class="dotViewer"><img src="images/blank.gif" width="6" height="6" /></span>');
		});
		
		// set margins for the dots container in the viewer
		/*
		$('#containerDotsViewer').css('margin', '10px auto 40px auto');
		*/
		
		// insert a dotted line to divide the viewer from the gallery
		/*
		$('#containerViewingArea').append('<div class="lineDivider"><img src="images/blank.gif" width="900" height="1" /></div>');
		*/
		
		// light up correct dots
		manageDotsViewer();
				
		// Hide left arrow control on first load
		manageControlsViewer(currentPositionViewer);
				
	}
	
	// function to clear the information which was previously loaded in the project viewer
	function clearViewer () {
		// removes project slides
		$('#slideInnerViewer').remove();
		// removes dots
		$('#containerDotsViewer').empty();
		// removes divider line
		/*
		$('#containerPortfolio .lineDivider').remove();
		*/
		// clear variable so no project loads
		projectLoad = '';
	}
				
});