// JavaScript Document

$(document).ready(function(){
    
  var currentPosition = 0;
  var slideWidth = 380; 
 									   
  
  var slides1 = $('.slide1');
  var slides2 = $('.slide2');
  var slides3 = $('.slide3');
  var slides4 = $('.slide4');
  var slides5 = $('.slide5');
  var slides6 = $('.slide6');
  var slides7 = $('.slide7');
  var slides8 = $('.slide8');
  var slides9 = $('.slide9');
  var slides10 = $('.slide10');
  var slides11 = $('.slide11');
  
  var numberOfSlides1 = slides1.length;
  var numberOfSlides2 = slides2.length;
  var numberOfSlides3 = slides3.length;
  var numberOfSlides4 = slides4.length;
  var numberOfSlides5 = slides5.length;
  var numberOfSlides6 = slides6.length;
  var numberOfSlides7 = slides7.length;
  var numberOfSlides8 = slides8.length;
  var numberOfSlides9 = slides9.length;
  var numberOfSlides10 = slides10.length;
  var numberOfSlides11 = slides11.length;

	
  function hide() {
  	$('#f1thg,#s2thg,#t3thg,#f4thg').hide();
  }
  
  //hide everything
  hide();
 
  //show appropriate gallery when one is clicked
  
  
  // Remove scrollbar in JS
  $('#f1thg,#s2thg,#t3thg,#f4thg').css('overflow', 'hidden');

  // Wrap all .slides with #slideInner div
  slides1
  .wrapAll('<div id="slideInner1"></div>')
  // Float left to display horizontally, readjust .slides width
  .css({
    'float' : 'left',
    'width' : slideWidth
  });
  
  // Set #slideInner width equal to total width of all slides
  $('#slideInner1').css('width', slideWidth * numberOfSlides1);
  
   // Wrap all .slides with #slideInner div
  slides2
  .wrapAll('<div id="slideInner2"></div>')
  // Float left to display horizontally, readjust .slides width
  .css({
    'float' : 'left',
    'width' : slideWidth
  });
  
  // Set #slideInner width equal to total width of all slides
  $('#slideInner2').css('width', slideWidth * numberOfSlides2);
 
 
  // Wrap all .slides with #slideInner div
  slides3
  .wrapAll('<div id="slideInner3"></div>')
  // Float left to display horizontally, readjust .slides width
  .css({
    'float' : 'left',
    'width' : slideWidth
  });
  
  // Set #slideInner width equal to total width of all slides
  $('#slideInner3').css('width', slideWidth * numberOfSlides3);
 
 
  // Wrap all .slides with #slideInner div
  slides4
  .wrapAll('<div id="slideInner4"></div>')
  // Float left to display horizontally, readjust .slides width
  .css({
    'float' : 'left',
    'width' : slideWidth
  });
  
  // Set #slideInner width equal to total width of all slides
  $('#slideInner4').css('width', slideWidth * numberOfSlides4);
  
  /*
  // Wrap all .slides with #slideInner div
  slides5
  .wrapAll('<div id="slideInner5"></div>')
  // Float left to display horizontally, readjust .slides width
  .css({
    'float' : 'left',
    'width' : slideWidth
  });
  
  // Set #slideInner width equal to total width of all slides
  $('#slideInner5').css('width', slideWidth * numberOfSlides5);
  
  // Wrap all .slides with #slideInner div
  slides6
  .wrapAll('<div id="slideInner6"></div>')
  // Float left to display horizontally, readjust .slides width
  .css({
    'float' : 'left',
    'width' : slideWidth
  });
  
  // Set #slideInner width equal to total width of all slides
  $('#slideInner6').css('width', slideWidth * numberOfSlides6);
  
  
  // Wrap all .slides with #slideInner div
  slides7
  .wrapAll('<div id="slideInner7"></div>')
  // Float left to display horizontally, readjust .slides width
  .css({
    'float' : 'left',
    'width' : slideWidth
  });
  
  // Set #slideInner width equal to total width of all slides
  $('#slideInner7').css('width', slideWidth * numberOfSlides7);
  // Wrap all .slides with #slideInner div
  
  slides8
  .wrapAll('<div id="slideInner8"></div>')
  // Float left to display horizontally, readjust .slides width
  .css({
    'float' : 'left',
    'width' : slideWidth
  });
  
  // Set #slideInner width equal to total width of all slides
  $('#slideInner8').css('width', slideWidth * numberOfSlides8);
  
  // Wrap all .slides with #slideInner div
  slides9
  .wrapAll('<div id="slideInner9"></div>')
  // Float left to display horizontally, readjust .slides width
  .css({
    'float' : 'left',
    'width' : slideWidth
  });
  
  // Set #slideInner width equal to total width of all slides
  $('#slideInner9').css('width', slideWidth * numberOfSlides9);
  
  // Wrap all .slides with #slideInner div
  slides10
  .wrapAll('<div id="slideInner10"></div>')
  // Float left to display horizontally, readjust .slides width
  .css({
    'float' : 'left',
    'width' : slideWidth
  });
  
  // Set #slideInner width equal to total width of all slides
  $('#slideInner10').css('width', slideWidth * numberOfSlides10);
  
  
   // Wrap all .slides with #slideInner div
  slides11
  .wrapAll('<div id="slideInner11"></div>')
  // Float left to display horizontally, readjust .slides width
  .css({
    'float' : 'left',
    'width' : slideWidth
  });
  
  // Set #slideInner width equal to total width of all slides
  $('#slideInner11').css('width', slideWidth * numberOfSlides11);
  
  */
  
  // Hide left arrow control on first load
  manageControls(currentPosition);
  
  //show appropriate gallery and bring it to the first slide
  var id;var slideCount; var numSlides;
  $('div#dates span').click(function() {
	id = $(this).attr('id');
	n = $(this).attr('id').substr(1).replace('th','');
	slideCount = $('.slide'+n);
	numSlides = slideCount.length;
	
	currentPosition = 0;
	$('#slideInner' + n).animate({
        'marginLeft' : 380 *(-currentPosition)
    });
	manageControls(currentPosition);
	hide();
	$('#main_image').hide();
	$('div#' + id +'g').show();
  });
  
  // Create event listeners for .controls clicks
  $('.control')
    .bind('click', function(){
    // Determine new position
      currentPosition = ($(this).attr('id')=='foggs_right_arrow')
    ? currentPosition+1 : currentPosition-1;
      
      // Hide / show controls
      manageControls(currentPosition);
      // Move slideInner using margin-left
	  $('#slideInner' + n).animate({
        'marginLeft' : 380 *(-currentPosition)
      });
	  
    });
	
	
  // manageControls: Hides and shows controls depending on currentPosition
  function manageControls(position){
	  
    // Hide left arrow if position is first slide
    if(position==0){ $('#foggs_left_arrow').hide() }
    else{ $('#foggs_left_arrow').show() }
    // Hide right arrow if position is last slide
    if(position==numSlides-1){ $('#foggs_right_arrow').hide() }
    else{ $('#foggs_right_arrow').show() }
    }

  });