// JavaScript Document

$(function() {

	// Initialize variables
	var i = 1;
	var MINIMUMI = 1;
	var images = $('#content img');
	var menus = $('.menu li');
	var CURRENTI = 1;
	var MAXIMUMI = 62;
	var startTime = 1000;
	var fadeTime = 2000;
	var holdTime = 6000;
	var swapTime = 2000;
	var holdID = null;
	var swapID = null;
	var SECTIONBREAK = new Array();
	SECTIONBREAK[0] = 1;
	SECTIONBREAK[1] = 16;
	SECTIONBREAK[2] = 25;
	SECTIONBREAK[3] = 35;
	SECTIONBREAK[4] = 45;
	SECTIONBREAK[5] = 55;
	var caption = new Array();
	caption[0] = "<p>First Floor Plan</p>";
	caption[1] = "<p>Auditorium Middle &amp; Lower Floor Plans</p>";
	caption[2] = "<p>Auditorium Longitudinal Section</p>";
	caption[3] = "<p>Auditorium Cross Section</p>";
	caption[4] = "<p>Auditorium Cross Section</p>";
	caption[5] = "<p>Office Section</p>";
	caption[6] = "<p>Studio Section</p>";
	caption[7] = "<p>Model</p>";
	caption[8] = "<p>Office</p>";
	caption[9] = "<p>Lobby Looking Towards Office</p>";
	caption[10] = "<p>Auditorium Overlook</p>";
	caption[11] = "<p>Bar</p>";
	caption[12] = "<p>Studio</p>";
	caption[13] = "<p>Hall Looking Towards Studio</p>";
	caption[14] = "<p>Studio</p>";
	caption[15] = "<p>Mapping of Artificial Canals</p>";
	caption[16] = "<p>Site Plan</p>";
	caption[17] = "<p>Main Gallery Floor Plan</p>";
	caption[18] = "<p>Main Gallery Longitudinal Section</p>";
	caption[19] = "<p>Gallery Floor Plan</p>";
	caption[20] = "<p>Gallery Floor Plan</p>";
	caption[21] = "<p>Caf&eacute; Floor Plan</p>";
	caption[22] = "<p>Caf&eacute; Veranda</p>";
	caption[23] = "<p>Exterior Of Main Gallery</p>";
	caption[24] = "<p>Site Mapping</p>";
	caption[25] = "<p>Site Plan</p>";
	caption[26] = "<p>Top Floor Plan</p>";
	caption[27] = "<p>Middle Floor Plan</p>";
	caption[28] = "<p>Lower Floor Plan</p>";
	caption[29] = "<p>Cross Section</p>";
	caption[30] = "<p>Cross Section</p>";
	caption[31] = "<p>Model from Southwest</p>";
	caption[32] = "<p>Model from Northeast</p>";
	caption[33] = "<p>Barrel and Tasting Room</p>";
	caption[34] = "<p>Site Plan</p>";
	caption[35] = "<p>Diagram</p>";
	caption[36] = "<p>First &amp; Second Floor Plans</p>";
	caption[37] = "<p>Third Through Fifth Floor Plans</p>";
	caption[38] = "<p>Cross Section Through Light Well</p>";
	caption[39] = "<p>Cross Section Through Lounge</p>";
	caption[40] = "<p>Exterior Day View</p>";
	caption[41] = "<p>Exterior Night view</p>";
	caption[42] = "<p>Exterior Model</p>";
	caption[43] = "<p>Interior Model</p>";
	caption[44] = "<p>Diagram of Initial Paper Studies</p>";
	caption[45] = "<p>Initial Paper Study</p>";
	caption[46] = "<p>Second Paper Study</p>";
	caption[47] = "<p>Third Paper Study</p>";
	caption[48] = "<p>Third Study Woven with Second Wall</p>";
	caption[49] = "<p>First Through Fourth Floor Plans</p>";
	caption[50] = "<p>Section</p>";
	caption[51] = "<p>Model</p>";
	caption[52] = "<p>Model</p>";
	caption[53] = "<p>Model</p>";
	caption[54] = "<p>Site Mapping of Curvature</p>";
	caption[55] = "<p>Curvature Description</p>";
	caption[56] = "<p>Floor Plan</p>";
	caption[57] = "<p>Section Through Social Areas</p>";
	caption[58] = "<p>Perspective Section Through Pods</p>";
	caption[59] = "<p>Social Areas</p>";
	caption[60] = "<p>Treatment Areas</p>";
	caption[61] = "<p>Sleeping Pods</p>";
	
	// Run animation
		var fadeOutSlide = function() {
		clearTimeout(holdID);
		$('#content img').fadeOut(fadeTime);
		swapID = setTimeout(nextSlide,swapTime);
		//console.log('swapID = '+swapID);
	}
	
		var nextSlide = function() {
		clearTimeout(swapID);
		if (i >= MAXIMUMI) {
			i = MINIMUMI;
		} else {
			i++;
		}
		$('#content img').remove();
		$('#content').append('<img src="img/slide-'+i+'.jpg" />');
		$('#content img').hide();
		setText(i);
		setMenu(i);
		fadeInSlide();
	}
	
	var fadeInSlide = function() {
		$('#content img').fadeIn(fadeTime);
		holdID = setTimeout(fadeOutSlide,holdTime);
		//console.log('holdID = '+holdID);
	}
	
	// Set state functions
	var setState = function(slideNumber) {
		setImage(i);
		setText(i);
		setMenu(i);
	}
	
	var setImage = function(slideNumber) {
		$('#content img').remove();
		$('#content').append('<img src="img/slide-'+slideNumber+'.jpg" />');
		//$('#content img').hide();
		//$('#content img:eq('+(slideNumber-1)+')').show();
		
	}
	
	var setText = function(slideNumber) {
		$('#caption_bl p').remove();
		$('#caption_bl').append(caption[slideNumber-1]);
		//$('#caption_bl p').hide();
		//$('#caption_bl p:eq('+(slideNumber-1)+')').show();
	}
	
	var setMenu = function(slideNumber) {
		var currentSection = setSection(slideNumber);
		$('.menu li').removeClass('tint_333');
		$('.menu li:eq('+currentSection+')').addClass('tint_333');
	}
	
	var validateCount = function(slideNumber) {
		if (slideNumber > MAXIMUMI) {
			i = MINIMUMI;
			CURRENTI = i;
		} else if (slideNumber < MINIMUMI) {
			i = MAXIMUMI;
			CURRENTI = i;
		} else {
			CURRENTI = i;
		}
		setState(i);
	}
	
	var setSection = function(slideNumber) {
		var section;
		switch (true) {
	case (slideNumber >= SECTIONBREAK[0] && slideNumber<SECTIONBREAK[1]) :
		section = 0;
		break;
	case (slideNumber>=SECTIONBREAK[1] && slideNumber<SECTIONBREAK[2]) :
		section = 1;
		break;
	case (slideNumber>=SECTIONBREAK[2] && slideNumber<SECTIONBREAK[3]) :
		section = 2;
		break;
	case (slideNumber>=SECTIONBREAK[3] && slideNumber<SECTIONBREAK[4]) :
		section = 3;
		break;
	case (slideNumber>=SECTIONBREAK[4] && slideNumber<SECTIONBREAK[5]) :
		section = 4;
		break;
	case (slideNumber>=SECTIONBREAK[5]) :
		section = 5;
		break;
	}
	return section;
	}
	
	// Navigation functions
		// - menu
	$('.menu li').click(function() {
		var id = $(this).attr('id');
		var section = id.replace(/^li(\d+)$/,'$1');
		i = SECTIONBREAK[section];
		setState(i);
	});
		// - next
	$('#next').click(function() {
		i++;
		validateCount(i);
	});
		// - pause
	$('#pause').click(function() {
		//console.log("pause id clicked");
		clearTimeout(holdID);
		clearTimeout(swapID);
		setState(i);
		$('#play').show();
		$(this).hide();
	});
		// - play
	$('#play').click(function() {
		//console.log("play id clicked");
		holdID = setTimeout(fadeOutSlide,startTime);
		$('#pause').show();
		$(this).hide();
	});
		// - back
	$('#back').click(function() {
		i--;
		validateCount(i);
	});
	
	// Preload images
	var image = new Array();
	
	image[MINIMUMI] = new Image();
	
	$(image[MINIMUMI])
		.load(function () {
			$(this).hide();
			
			$('#content').removeClass('loading').append(this);
			
			// Initialize state
			setState(i);
			$('#play').hide();
			holdID = setTimeout(fadeOutSlide,startTime);
			})
		.error(function () {
			// notify the user that the image could not be loaded
		})
		
		.attr('src', 'img/slide-'+MINIMUMI+'.jpg');


	for(j=MINIMUMI+1; j<=MAXIMUMI; j++){
	
		image[j] = new Image();
  
  	// wrap our new image in jQuery, then:
  	$(image[j])
    	// once the image has loaded, execute this code
    	.load(function () {
      	// set the image hidden by default    
      	$(this).hide();
    
      }).attr('src', 'img/slide-'+j+'.jpg');
	}

 });