/*********************************************************
	initiates image cycle funtions VERY IMPORTANT
**********************************************************/
function initiate_cycle() {
	$('#images').cycle({
		fx:		'fade',
		speed:	'slow',
		timeout: 0, 
		next:	'#next',
		prev:	'#prev',
		before: on_before,
		after:	on_after
	});

	function on_before() { 
	    $('.counter').html(this.title); //gets title from img tag
	} 
	function on_after() { 
	    $('.counter').html(this.title); //gets title from img tag
	}
}



function initial_display() {
	$('#loading').hide();
	$('#images').fadeIn('slow');
}



/*********************************************************
	previous and next button animation
*********************************************************/
function next_prev() {
	$('#gallery ul#gallery_images').mouseenter(function() {
		$('#prev,#next').fadeIn('slow');
	});
	$('#gallery ul#gallery_images').mouseleave(function() {
		$('#prev,#next').fadeOut('slow');
	});
	
}



/*********************************************************
	loads default images and navigation
*********************************************************/
function intial_load() {
	$.getJSON("colette.json",function(data){
		$.each(data.set1.images, function(i,images){
			var htmlString = '<img src="' + images.url + '" alt="' + images.counter + '" title="' + images.counter + '"'+'height="404"'+'width="720"'+'/>';
			$(htmlString).appendTo('#images');
		});

		//gets all sets and creates set navigation
		var all_set_title = [];
		var all_set_id = [];
		$.each(data, function(){
			if ($.inArray(this.set_title, all_set_title) === -1) {
				all_set_title = this.set_title;
			}
			if ($.inArray(this.set_id, all_set_id) === -1) {
				all_set_id = this.set_id;
			}
			var htmlString = '<li id="' +all_set_id+ '"><span>'+ all_set_title + '</span></li>';
			$(htmlString).appendTo('.gallery_navigation');
		});

		//highlights the default set title
		$('.gallery_navigation li:first').addClass('on');
	});
}



/*********************************************************
	loads other sets, activiated in navigation
*********************************************************/
function load_set() {
	$('.gallery_navigation li').click(function() {
		//clears the image container before populating the new set
		$('#loading').show();
		$('#images').hide();
		$('#images *').remove();
		$('.gallery_navigation li').removeClass('on');
		$(this).addClass('on');

		if (this.id==='set1') {
			$.getJSON("colette.json",function(data) {
				$.each(data.set1.images, function(i,images){
					var htmlString = '<img src="' + images.url + '" alt="' + images.counter + '" title="' + images.counter + '"'+'height="404"'+'width="720"'+'/>';
					$(htmlString).appendTo('#images');
				});
			});
		}
		if (this.id==='set2') {
			$.getJSON("colette.json",function(data) {
				$.each(data.set2.images, function(i,images){
					var htmlString = '<img src="' + images.url + '" alt="' + images.counter + '" title="' + images.counter + '"'+'height="404"'+'width="720"'+'/>';
					$(htmlString).appendTo('#images');
				});
			});
		}
		if (this.id==='set3') {
			$.getJSON("colette.json",function(data) {
				$.each(data.set3.images, function(i,images){
					var htmlString = '<img src="' + images.url + '" alt="' + images.counter + '" title="' + images.counter + '"'+'height="404"'+'width="720"'+'/>';
					$(htmlString).appendTo('#images');
				});
			});
		}
		if (this.id==='set4') {
			$.getJSON("colette.json",function(data) {
				$.each(data.set4.images, function(i,images){
					var htmlString = '<img src="' + images.url + '" alt="' + images.counter + '" title="' + images.counter + '"'+'height="404"'+'width="720"'+'/>';
					$(htmlString).appendTo('#images');
				});
			});
		}
		if (this.id==='set5') {
			$.getJSON("colette.json",function(data) {
				$.each(data.set5.images, function(i,images){
					var htmlString = '<img src="' + images.url + '" alt="' + images.counter + '" title="' + images.counter + '"'+'height="404"'+'width="720"'+'/>';
					$(htmlString).appendTo('#images');
				});
			});
		}
	});
}



/*********************************************************
	functions loaded when ajax is complete
*********************************************************/
$(document).ajaxStop(function() {
	initial_display();
	initiate_cycle();
	load_set();
	next_prev();
});



/*********************************************************
	functions loaded when page is ready
*********************************************************/
$(document).ready(function(){
	intial_load();
	next_prev();
});