/* Javascript Document */

$(function() {
	// Set the slider height, width, then remove the initial page load.
		$('#slider').wrapInner('<div class="remove"></div>').hide();
		$('.remove').remove();
		
	// Insert a loading dialog into the markup
		$('#content').append('<div id="loading-dialog"></div>');
		$('#loading-dialog').css('margin-top', 100).html('<img src="/img/loader.gif" width="66px" height="66px">');
	
	// Get the home page mark up from the url /info/get, append the markup. 	
		$.get('/info/get', 'page=home', function(data){
			$('#slider').append("<div id='home' class='slide'></div>");
			$('#home').html(data);
					
			// Get and inject the markup for the menu page
				$.get('/info/get', 'page=menu', function(data){
					$('#slider').append("<div id='menu' class='slide'></div>");
					$('#menu').html(data);
					
					/**** HOME & MENU PAGE SLIDE SHOW ****/								
						// total number of images, start and stop point and next image
							$('.slide_show_wrap').each(function(i){
								$(this).children(':not(:first)').addClass('hidden');
								
								var count = $(this).children('img').length;
								
								startShow(count, 0, 1, $(this));
							});
						
						// Change the image every 5 seconds
							function startShow(count, current, next, id) {
								setInterval( function () {
									
									// call the fade image function
										fadeImg(current, next, id);
									
									// Looop the current and next counts to not go over the total
										if ( current++ == count-1 ) {
											current = 0;
										}
										
										if ( next++ == count-1 ) {
											next = 0;
										}				
									}, 
									3500
								);
							}
							
							function fadeImg(current, next, id) {
								// fadeout the currnet image then fade in the next image
									$(id).children('img:eq('+current+')').fadeOut(750, function() { 
										$(id).children('img:eq('+next+')').fadeIn(750);									
									});
							}
					
					// Get and inject the markup for the goods page
						$.get('/info/get', 'page=goods', function(data){
							$('#slider').append("<div id='goods' class='slide'></div>");
							$('#goods').html(data);
							
							// Get and inject the markup for the location page
								$.get('/info/get', 'page=location', function(data){
									$('#slider').append("<div id='location' class='slide'></div>");
									$('#location').html(data);
									
									// Set up the click behavior
										$('a').click(function(e) {
											var loc = $(this).text();
											
											if ( loc == 'home' || loc == 'menu' || loc == 'goods' || loc == 'location' ) {
												// turn off these links	
													e.preventDefault();	
												
													if (loc == 'home') {
														document.title = 'Great Plains Burger Co. > Ann Arbor, MI > All Natural Burgers';	
													}
													
													if (loc == 'menu') {
														document.title = 'Great Plains Burger Co. > All Natural Burgers > Ann Arbor, MI > Menu';
													}
													
													if (loc == 'goods') {
														document.title = 'Great Plains Burger Co. > All Natural Burgers > Ann Arbor, MI > Fresh Ingredients';
													}
													
													if (loc == 'location') {
														document.title = 'Great Plains Burger Co. > All Natural Burgers > Ann Arbor, MI > Contact Us';
													}
												
												// add the current class so the correct nav is high lighted.
													$('.nav').removeClass().addClass('nav current-'+loc);
												
												// scroll to the selected location
													$('#slider').children('div').each(function(i){
														if ( loc == $(this).attr('id')) {
															// Determine the amount to slide
																slide_amount = (-i*1000);
															
															// Alter the left margin such that the body moves back n foreth
																$('#slider').animate({
																	'marginLeft' : slide_amount
																});
														}
													});
											}
										});
									
									// Determine width of the slider area
										$('#slider').width(1000*$('#slider > div').length);
									
									// Close the loading dialog and bring in the slider / footer allow 1 second for the map to finish loading.
										setTimeout(function(){
												$('#loading-dialog').fadeOut(250, function() {
													$('#slider').append('<div class="clear"></div>').fadeIn(500);
													$('#loading-dialog').remove();
												});
											},
												1000
										);
								});
						});
				});
		});
});