$(document).ready(function(){
  var siteWidth = $(window).width() - 20;
  var siteHeight = Math.max( $(window).height() - 30, 285 );

  $( "#header" ).width( siteWidth );

  $( "#container" ).height( siteHeight );
  $( "#container" ).width( siteWidth );

  $( "#slideshow" ).width( siteWidth );
  $( "#slideshow" ).height( siteHeight - 75 );

  $( "#slidesContainer" ).width( siteWidth );
  $( "#slidesContainer" ).height( siteHeight - 75 );

  var slideHeight = siteHeight - 75;
  var slideWidth = Math.round( slideHeight * 1.5 );

  $( ".control" ).css( 'height', slideHeight );

  $( ".slide" ).css( 'width', slideWidth );
  $( ".slide" ).css( 'height', slideHeight );

  var currentPage = '';
  var currentPosition = 0;
  var currentSlide = 1;
  var previousSlide = 0;
  var intervalId;

  $( "#leftControl").css( 'padding-top', $( "#leftControl").height() / 2 - 30 );
  $( "#rightControl").css( 'padding-top', $( "#rightControl").height() / 2 - 30 );

  var slides, numberOfSlides, marginLeft;

  $( ".submenu" ).bind( 'click', function() {
    var newSet = $(this).attr( 'id' );

    while( newSet.indexOf( "_" ) >= 0 ) {
      newSet = newSet.replace( "_" ,"/" );
    }
    if ( currentPage != newSet ) {
      loadImages( newSet );
    }
  });

  $( ".subpage" ).bind( 'click', function() {
    var newPage = $(this).attr( 'id' );
    if ( currentPage != newPage ) {
      loadPage( newPage );
    }
  });

  function fadeInFirst() {

    var image = $('<img />').attr( 'src', mainSlides[ currentPosition ][ 0 ] );
    var width = mainSlides[ currentPosition ][ 1 ];
    var height = mainSlides[ currentPosition ][ 2 ];

    if ( width > slideWidth ) {
      var ratio = slideWidth / width;
      width = slideWidth;
      height = Math.round( height * ratio );
    }

    if ( height > slideHeight ) {
      ratio = slideHeight / height;
      height = slideHeight;
      width = Math.round( width * ratio );
    }

    var topMargin = Math.round( ( slideHeight - height ) / 2 );

    image.load( function() {
      $("#slide").attr( 'src', mainSlides[ currentPosition ][ 0 ] );
      $("#slide").attr( 'width', width );
      $("#slide").attr( 'height', height );
      $("#slide").css( 'margin-top', topMargin );
      $("#slide").fadeIn( 5000 );
    });
  }

  function crossFadeSlide() {

    currentPosition = currentPosition + 1;
    if ( currentPosition > mainSlides.length ) {
      currentPosition = 0;
    }

    var image = $('<img />').attr( 'src', mainSlides[ currentPosition ][ 0 ] );
    var width = mainSlides[ currentPosition ][ 1 ];
    var height = mainSlides[ currentPosition ][ 2 ];

    if ( width > slideWidth ) {
      var ratio = slideWidth / width;
      width = slideWidth;
      height = Math.round( height * ratio );
    }

    if ( height > slideHeight ) {
      ratio = slideHeight / height;
      height = slideHeight;
      width = Math.round( width * ratio );
    }

    var topMargin = Math.round( ( slideHeight - height ) / 2 );

    image.load( function() {
      $("#slide").fadeOut( 2000, function() {
        $("#slide").attr( 'src', mainSlides[ currentPosition ][ 0 ] );
        $("#slide").attr( 'width', width );
        $("#slide").attr( 'height', height );
        $("#slide").css( 'margin-top', topMargin );
        $("#slide").fadeIn( 5000 );
       });
    });

  }

  function loadPage( page ) {

    clearInterval( intervalId );
    currentPage = page;

    $.get( "pages/" + page + ".html", function( content ) {
      $( "#slidesContainer" ).html( content );
   	  $("#leftControl").hide();
   	  $("#rightControl").hide();
   	});
  }

  function loadImages( directory ) {

    clearInterval( intervalId );
    currentPage = directory;

    $.post( "images.html", { "directory" : directory, "height" : slideHeight, "width" : slideWidth }, function( slides ) {

      $( "#slidesContainer" ).html( slides );

      currentPosition = 0;
      currentSlide = 1;
      previousSlide = 0;

      slides = $(".slide");
      numberOfSlides = slides.length;

      // Remove scrollbar in JS
      $("#slidesContainer").css('overflow', 'hidden');
      $("#slidesContainer").css('width', $("#slideshow").width() - 80 );
      marginLeft = ( $("#slidesContainer").width() - slideWidth ) / 2;

      // Wrap all .slides with #slideInner div
      slides.wrapAll('<div id="slideInner"></div>').css({ 'float' : 'left', 'width' : slideWidth });

      // Set #slideInner width equal to total width of all slides
      $("#slideInner").width( slideWidth * ( numberOfSlides + 0.5 ) );
      $("#slideInner").css('marginLeft', marginLeft );

      $( ".slide" ).click( function() {
        $( "#rightControl" ).trigger( 'click' );
      });

      $("#slide"+currentSlide).fadeTo( 'slow', 1.0 );

      if ( numberOfSlides > 1 ) {
        $( "#leftControl" ).show();
        $( "#rightControl" ).show();
      } else {
        $( "#leftControl" ).hide();
        $( "#rightControl" ).hide();
      }

    });
  }

  // Create event listeners for .controls clicks
  $(".control").bind('click', function(){
    // Determine new position

    previousSlide = currentSlide;
	if ( $(this).attr('id') == "rightControl") {

      if ( currentPosition == numberOfSlides-1 ) {
	    currentPosition = 0;
	    currentSlide = 1;
	  } else {
	    currentPosition++;
	    currentSlide++;
	  }

	} else {

      if ( currentPosition == 0 ) {
        currentPosition = numberOfSlides-1;
        currentSlide = numberOfSlides;
      } else {
        currentPosition--;
        currentSlide--;
      }
	}

    // Move slideInner using margin-left
    $("#slideInner").animate( {'marginLeft' : slideWidth*(-currentPosition) + marginLeft }, 'slow' );
    
    $("#slide"+previousSlide).fadeTo( 'slow', 0.10 );
    $("#slide"+currentSlide).fadeTo( 'slow', 1.0 );
    
  });

  $(document).keydown(function(e){
    var keyCode = e.keyCode || e.which, arrow = {left: 37, up: 38, right: 39, down: 40 };
 
    switch (keyCode) {
      case arrow.left:
        $( "#leftControl" ).trigger( 'click' );
      break;
      case arrow.up:
        //..
      break;
      case arrow.right:
        $( "#rightControl" ).trigger( 'click' );
      break;
      case arrow.down:
        //..
      break;
    }
  });

  $( "#leftControl" ).hide();
  $( "#rightControl" ).hide();

  fadeInFirst();
  intervalId = setInterval( function() {
    crossFadeSlide();
  }, 10000 );

});