var gallery = function(page) {
	//set some undynamic variables - fix this next
	if (page == 'art_1' || page =='art_2' || page =='art_3' || page =='art_4') {
		urlstart = 'art/' + page + '/';
	} else if (page == 'sanan' || page =='richm' || page =='cville' || page =='harle' ) {
		urlstart = 'studio/' + page + '/';
	} else if (page == 'web_3' || page =='albe' || page =='church' || page == 'fleet' ) {
		urlstart = 'web/' + page + '/';
	}
	var icons = new Array();
	$('#studio_nav li').each(function(index) {
		//find number of thumbnails
		icons += '#icon' + (index+1) + ', ';
	});
	var studioSpace = '#studio_nav, #studio_image';
	var textbox = $('#studio_caption_text').height();
	$(studioSpace).fadeIn(2500);
	$(icons).fadeTo(2800, 1);
	$('#studio_caption_frame').css({'top':-textbox});
	$('#studio_caption').css({'top':textbox}).animate({'top':'0'},2100);
	//$('#icon1').fadeTo(300,1);

	var mainImage = 1;

	$(icons).click( function() {
		mainImage = this.id[4];
		mainImage += this.id[5] || '';
		$('#studio_image').fadeOut(700);
		$('#studio_image').replaceWith(
			"<img src='" + urlstart + mainImage + ".jpg' id='studio_image'/>");
		$('#studio_image').fadeIn(1500);
		$('#currentImage').replaceWith(
			"<span id='currentImage'>" + mainImage + "</span>");
		$(icons).css('opacity','1');
		//$('#icon' + mainImage).css('opacity','1');

		});

	$('#toggle_text, #studio_caption').toggle(
		function() {
			$('#studio_caption').animate({'top':textbox},900);
			},
		function() {
			$('#studio_caption').animate({'top':'0px'},900);
		});

	/*$(icons).hover( 
			function() {
			$(this).css('opacity','1');
			},
			function() {
			if (this.id == 'icon' + mainImage) {
				$(this).css('opacity','1');
			}
			else {
				$(this).css('opacity','0.4');
				}
			});*/

	$('#prev').click( function() {
			if (mainImage == 1) {
				prevImage = 1;
				}
			else {
				prevImage = --mainImage;
				$('#studio_image').fadeOut(700);
				$('#studio_image').replaceWith(
					"<img src='" + urlstart + prevImage + ".jpg' id='studio_image'/>");
				$('#studio_image').fadeIn(1500);
				$('#currentImage').replaceWith(
					"<span id='currentImage'>" + prevImage + "</span>");
				//$(icons).css('opacity','0.4');
				//$('#icon' + prevImage).css('opacity','1');
				mainImage=prevImage;
				};
		});
	$('#next').click( function() {
			if (mainImage == icons.length) {
				nextImage = 3;
				}
			else {
				nextImage = ++mainImage;
				$('#studio_image').fadeOut(700);
				$('#studio_image').replaceWith(
					 "<img src='" + urlstart + nextImage + ".jpg' id='studio_image'/>");
				$('#studio_image').fadeIn(1500);
				$('#currentImage').replaceWith(
					"<span id='currentImage'>" + nextImage + "</span>");
				//$(icons).css('opacity','0.4');
				//$('#icon' + nextImage).css('opacity','1');
				mainImage=nextImage;
				};
		});

};

$(function() {
    
        var studioLinks = '#harle, #cville, #sanan, #richm';
        var webLinks = '#albe, #web_3, #church, #fleet';
        var artLinks = '#art_1, #art_2, #art_3, #art_4';

        var galBorders = '.gallery_border_left, .gallery_border_right';
        var navigation_state = 'all';

        $(studioLinks).click(function() {
			var nextPage = this.id;
            $('#gallery').animate({'width':'880px'}, 1000);
            $('#web_title, #art_title').animate({'left':'880px'}, 1000);
            $(galBorders).show();
            $('#gallery_content').load(nextPage + '.php', function() {
					gallery(nextPage);
				}).appendTo();
            $('#gallery_content').show();
            navigation_state = 'none';
            });

        $(webLinks).click(function() {
			var nextPage = this.id;
            $('#gallery').animate({'width':'880px'}, 1000);
            $('#studio_title, #art_title').animate({'left':'880px'}, 1000);
            $(galBorders).show();
            $('#gallery_content').load(nextPage + '.php', function() {
					gallery(nextPage);
				}).appendTo();
            $('#gallery_content').show();
            navigation_state = 'none';
            });
        
        $(artLinks).click(function() {
			var nextPage = this.id;
            $('#gallery').animate({'width':'880px'}, 1000);
            $('#web_title, #studio_title').animate({'left':'880px'}, 1000);
            $(galBorders).show();
            $('#gallery_content').load(nextPage + '.php', function() {
					gallery(nextPage);
				}).appendTo();
            $('#gallery_content').show();
            navigation_state = 'none';
            });
        
        $('#studio_title').click(function() {
            $(galBorders).hide();
            $('#gallery').animate({'width':'0px'}, 1000);
            $('#gallery_content').hide();
            $('#studio_title, #studio').animate({'left':'0px'}, 1000);
            $('#web_title, #art_title').animate({'left':'880px'}, 1000);
            if (navigation_state == 'none') { 
                $('#web, #art').animate({'left':'880px'}, 0);
            } else {
                $('#web, #art').animate({'left':'880px'}, 1000);
            }
            navigation_state = 'studio';
            });

        $('#web_title').click(function() {
            $(galBorders).hide();
            $('#gallery').animate({'width':'0px'}, 1000);
            $('#gallery_content').hide();
            $('#web_title, #web').animate({'left':'0px'}, 1000);
            $('#studio_title, #art_title').animate({'left':'880px'}, 1000);
            if (navigation_state == 'none') { 
                $('#studio, #art').animate({'left':'880px'}, 0);
            } else {
                $('#studio, #art').animate({'left':'880px'}, 1000);
            }
            navigation_state = 'web';
            });

        $('#art_title').click(function() {
            $(galBorders).hide();
            $('#gallery').animate({'width':'0px'}, 1000);
            $('#gallery_content').hide();
            $('#art_title, #art').animate({'left':'0px'}, 1000);
            $('#web_title, #studio_title').animate({'left':'880px'}, 1000);
            if (navigation_state == 'none') { 
                $('#studio, #web').animate({'left':'880px'}, 0);
            } else {
                $('#studio, #web').animate({'left':'880px'}, 1000);
            }
            navigation_state = 'art';
            });

        $('#contact').toggle(
            function() {
                $('#top').fadeTo(1200,1);
            },
            function() {
                $('#top').fadeTo(1200,0);
            });
            
});