var slideshowTimer;

$(function() {
  $.ajax( {
    type: "GET",
    url: "windellGalleries.xml",
    dataType: "xml",
    success: loadSite
  });
});

function loadSite( xml ) {
    var thumbSuffix = $(xml).find("galleries").attr("thumbSuffix");
    var thumbDir = $(xml).find("galleries").attr("thumbDir");
    
    setupGalleryNav(xml, thumbDir, thumbSuffix);

   	showImage(getRandomImage(xml), 100);    
    startSlideshow(xml);
}

function setupGalleryNav(xml, thumbDir, thumbSuffix) {
   // add menu items for each gallery
   // hide the galleries unordered list
   $("#galleries").css("left", "-1000px");
   $(xml).find("gallery").each(function() {
     var widthAccum = 0;
     var galleryIdDir = $(this).attr("idDir");
     var galleryTitle = $(this).attr("title");
     var galleryListHtml = '<li class="' + galleryIdDir + '">' + galleryTitle + '</li>';
     $("#galleries").append(galleryListHtml);
     var galleryListItem = $("#galleries li." + galleryIdDir);
     
     // begin click handler for individual gallery items
     $(galleryListItem).click(function() {
      // show image content div if not visible
      revealImageFrame();
      // hide other gallery scrollbars and show this one
     	$('div#scrollbarFrame div').each(function () {
     		if ($(this).attr("class") != galleryIdDir ) {
     		  $(this).hide();
     		} else {
     		  $(this).show();
     		}
     	});
     	
      setupThumbnailStrip(galleryListItem);
      
      
      $("#scrollbarFrame").data("currGallery", galleryIdDir);
      if ($("#scrollbarFrame div." + galleryIdDir).data("offset") != null) {
        $("#scrollbarFrame div." + galleryIdDir).data("offset", 0);
        $("#scrollbarFrame div." + galleryIdDir).css("left", 0);
      }
      $("#scrollArrowLt").hide();
      if ($("#scrollbarFrame div." + galleryIdDir).width() > $("#scrollbarFrame").width() ) {
        $("#scrollArrowRt").show();
      } else {
        $("#scrollArrowRt").hide();
      }
     });
     // end click handler for individual gallery items
     
     var galleryScrollerItem = '<div class="' + galleryIdDir + '"></div>\n';
     $("div#scrollbarFrame").append(galleryScrollerItem);
     var scrollbarDiv = 'div#scrollbarFrame div.' + galleryIdDir;
     //$(scrollbarDiv).css("left", "-5000px");
     
     // append this gallery's thumbnail images to it's scrollbarDiv
       $(this).find("image").each(function () {
         var imageName = $(this).text();
         var imageBaseName = imageName.split('.')[0];
         var imageThumbURL = "images/" + galleryIdDir + "/" + thumbDir + "/" + imageBaseName + thumbSuffix + ".jpg";
          var img = new Image();
          img.onload = function() {
            $(scrollbarDiv).append(this);
            $(this).click( function ( ) {
              var fullPath = $(this).attr("src");
              fullPath = fullPath.replace(thumbSuffix, "");
              fullPath = fullPath.replace(thumbDir + "/", "");
              stopSlideshow();
            	showImage(fullPath, 0);
            });
          }
        $(img).attr('src', imageThumbURL);
       });
       //$(scrollbarDiv).css("left", "50px");
       $(scrollbarDiv).attr("class", galleryIdDir);
       //setupThumbnailStrip(this, scrollbarDiv);
      });
   $("#galleries").css("left", "150px").hide();
   $("li#gallery").hover(
    function(){$("#galleries").show()},
    function(){$("#galleries").hide()});
    
    // begin right arrow navigation
   $("#scrollArrowRt").click(function() {
    var currGallery = $("#scrollbarFrame").data("currGallery");
    var currImages = $("#scrollbarFrame div." + currGallery + " img");
   	$(currImages).each(function() {
   	  var thisPos = $(this).data("pos");
   	  var currOffset = $(this).parent().data("offset");
   	  var currLeftImage = $(currImages).eq(currOffset);
   	  var currPos = $(currLeftImage).data("pos");
   	  var frameWidth = $("#scrollbarFrame").width();
   		if ( ($(this).parent().width() - thisPos < frameWidth - 10) || (thisPos - currPos >= frameWidth) ) {
   		  var index = $(currImages).index(this);
   		  $(this).parent().data("offset", index);
   		  var newPos = $(currImages).eq(index).data("pos");
   		  $(this).parent().animate({left: -newPos}, "fast");
   		  if( $(this).parent().width() - newPos < frameWidth - 10) {
   		    $("#scrollArrowRt").hide();
   		  }
   		  $("#scrollArrowLt").show();
   		  return false;  
  		 }
   	});
   });
   // end right arrow navigation
   
   //begin left arrow navigation
   $("#scrollArrowLt").click(function() {
    var currGallery = $("#scrollbarFrame").data("currGallery");
    var currImages = $("#scrollbarFrame div." + currGallery + " img");
   	$(currImages).each(function() {
   	  var thisPos = $(this).data("pos");
   	  var currOffset = $(this).parent().data("offset");
   	  var currLeftImage = $(currImages).eq(currOffset);
   	  var currPos = $(currLeftImage).data("pos");
   	  var frameWidth = $("#scrollbarFrame").width();
   		if ((thisPos < frameWidth - 10) || (thisPos - currPos <= frameWidth - 10) ) {
   		  var index = $(currImages).index(this);
   		  $(this).parent().data("offset", index);
   		  var newPos = $(currImages).eq(index).data("pos");
   		  $(this).parent().animate({left: newPos}, "fast");
   		  if( newPos < (frameWidth - 10) ) {
   		    $("#scrollArrowLt").hide();
   		  }
   		  $("#scrollArrowRt").show();
   		  return false;  
  		 }
   	});
   });
   //end left arrow navigation
   
   // begin menu navigation
   // bind a click function to home nave item
   $("li#home").click(function () {
    $('div#scrollbarFrame div:visible').hide();
    $("#scrollArrowRt").hide();
    $("#scrollArrowLt").hide();
   	revealImageFrame();
   	showImage(getRandomImage(xml), 250);
   	startSlideshow(xml);
   });
   
  // bind a click function to contact nav item
  $("li#contact").click(function() {
    if ($("#imageFrame div:visible").attr("id") !== "textContent") {
      stopSlideshow();
      $("#imageFrame div:visible").hide();
      $("#contactContent").show();
      $('div#scrollbarFrame div:visible').hide();
      $("#scrollArrowRt").hide();
      $("#scrollArrowLt").hide();
    }
  });

  // bind a click function to about nav item
  $("li#about").click(function() {
    if ($("#imageFrame div:visible").attr("id") !== "textContent") {
      stopSlideshow();
      $("#imageFrame div:visible").hide();
      $("#aboutContent").show();
      $('div#scrollbarFrame div:visible').hide();
      $("#scrollArrowRt").hide();
      $("#scrollArrowLt").hide();
    }
  });

   // end menu navigation
}

function revealImageFrame() {
  if ($("#imageFrame div:visible").attr("id") != "imageContent") {
  $("#imageFrame div:visible").hide();
  $("#imageContent").show();
  $("#imageMask").show();
  }
}

function setupThumbnailStrip( listItem ) {
	// calculate and store position data for each thumbnail
	var divWidth = 0;
	var listItemClass = $(listItem).attr("class");
	var scrollbarItem = $("#scrollbarFrame div." + listItemClass);
	if( $(scrollbarItem).data("offset") == null ) {
    var divImages = $(scrollbarItem).find("img");
    $(divImages).each(function() {
      $(this).data("pos", divWidth);
      divWidth += ( $(this).width() + 10);
    });
    $(scrollbarItem).width(divWidth);
    $(scrollbarItem).data("offset", 0);
	}
}

function showImage( fullPath, fadeTime ) {
	img = new Image();
	img.src = fullPath;
	img.onload = function (  ) {
	  $("#imageMask").animate({opacity: 1}, fadeTime, function ()  {
	  	$("#imageContent img").remove();
	    var imgTag = $("#imageContent").prepend(img);
	    // center Image
	    var imgWidth = $(imgTag).width();
	    var frameWidth = $(imgTag).parent().width();
  	  $(imgTag).css("left", (frameWidth - imgWidth)/2);
	    $("#imageMask").animate({opacity: 0}, fadeTime);
	  });
	}
}

function startSlideshow (xml) {
  slideshowTimer = setInterval(function () {
    var nextImage = getRandomImage(xml);
    showImage(nextImage, 500);
  } , 5000);
}

function stopSlideshow() {
  clearInterval(slideshowTimer);
}

function getRandomImage(xml) {
  // pick a random image from the xml info
  var numberOfImages = $(xml).find("image").length;
  var randomImageIndex = Math.floor(Math.random() * numberOfImages );
  var randomImage = $(xml).find("image").eq(randomImageIndex);
  // get the gallery directory from the image's parent "gallery" tag
  var randomGalleryDir = $(randomImage).parent().attr("idDir");
  // get the file name of the image
  var randomImageName = $(randomImage).text();
  // build path for URL
  var imageURL = 'images/' + randomGalleryDir + '/' + randomImageName;
  // return the URL
  return imageURL;
}