$(document).ready(function(){

// ---IMAGE CAPTION---
	//Show image caption on mouse over
   $(".itemContainer").mouseover(function () {
      $(this).children(".itemInfoBox").show();
    });
	//Hide image caption on mouse out
   $(".itemContainer").mouseout(function () {
      $(this).children(".itemInfoBox").hide();
    });

//***
// ---MORE INFO BUTTON---
	//Show more info on mouse click
//   $(".moreInfo").click(function () {
      $(this).parent().parent().parent().children(".moreInfoContainer").show();
//    });
	//Hide more info on mouse out
//   $(".moreInfo").mouseout(function () {
//      $(".moreInfoContainer").hide();
//    });
//***

// ---MORE INFO BUTTON---
	//Show more info on mouse click
   $(".moreInfo").click(function () {
	// Check to see if more info is already displayed
if (!$(this).parent().parent().parent().children(".moreInfoContainer").hasClass('showingMoreInfo')){
 	// if not already displayed then, show and add class...
	 	$(".moreInfoContainer").removeClass("showingMoreInfo");
		$(".moreInfoContainer").hide();
		$(this).parent().parent().parent().children(".moreInfoContainer").show();
	 	$(".moreInfoContainer").removeClass("showingMoreInfo");
	 	$(this).parent().parent().parent().children(".moreInfoContainer").addClass("showingMoreInfo");
		
   } else {

	//Hide more info on click
 		$(".moreInfoContainer").hide();
	 	$(".moreInfoContainer").removeClass("showingMoreInfo");
   }
   });

// ---TOGGLE EXPAND & COLLAPSE (+/-) BUTTONS---
	//toggle expand & collapse on mouse click
//	$(".PlusMinus").click(function(){
//		  	$(this).children(".togglePlusMinus").toggle();
//	});
	
// ---MAKE CLICKED PLUS/MINUS EXPAND TO FULL WIDTH ---
	//On click of expand/collapse button
	$(".PlusMinus").click(function(){
	//check class to see if already expanded
	if (!$(this).parent().parent().parent(".itemContainer").hasClass('changeWidth')){
		//if not expanded already add class and change width to 1050px, animate and bring forward
//close all

		//close more info box
		$(".moreInfoContainer").removeClass("showingMoreInfo");
		$(".moreInfoContainer").hide();
		//
		$(".row").css({'height' : '350px'});
		$(".itemContainer").removeClass("changeWidth").css({'z-index' : '0', 'width' : '350px', 'height' : '350px', 'background-position' : '0 0'});
		$(".itemContainer").parent().css({'left' : ''}); //reset div to default position
		$(".itemInfoBox").css({'width' : '350px', 'top' : '300px'}); //reset to thumb width
		$(".ghostClick").css({'width' : '350px', 'height' : '300px'}); //reset to thumb width
		$(".moreInfo").css({'left' : ''});
		$(".expand").show().css({'left' : ''});
		$(".collapse").hide().css({'left' : ''});
//end close all

//toggle expand & collapse on mouse click 
		$(this).children(".collapse").show();
		$(this).children(".expand").hide();
		
		$(this).parent().parent().parent().parent().parent().css({'height' : '350px'});
		$(this).parent().parent().parent().addClass("changeWidth").css({'z-index' : '1', 'width' : '1050px', 'height' : '350px', 'background-position' : '0 0'});
		//move expanded div to full left
		$(this).parent().parent().parent().parent().css({'left' : '0px'});
		//enlarge caption box to match expanded image size
		$(this).parent().parent().css({'width' : '1050px', 'top' : '300px'}); 
		//enlarge ghostClick box to match expanded image size
		$(this).parent().parent().parent().children(".ghostClick").css({'width' : '1050px', 'height' : '300px'}); 
		//move more info button to fit new width
		$(this).parent().children(".moreInfo").css({'left' : '1000px'});
		//move collapse button to fit new width
		$(this).children(".collapse").css({'left' : '1025px'});
		$(this).children(".expand").css({'left' : '1025px'});

} else {

		//toggle expand & collapse on mouse click 
		$(this).children(".expand").show();
		$(this).children(".collapse").hide();
		//if already expanded remove class & change width to 350px, animate and send backward
		$(this).parent().parent().parent().parent().parent().css({'height' : '350px'});
		$(this).parent().parent().parent().removeClass("changeWidth").css({'z-index' : '0', 'width' : '350px', 'height' : '350px', 'background-position' : '0 0'});
		//reset div to default position
		$(this).parent().parent().parent().parent().css({'left' : ''}); 
		//reset caption box to thumb width
		$(this).parent().parent().css({'width' : '350px', 'top' : '300px'}); 
		//enlarge ghostClick box to match expanded image size
		$(this).parent().parent().parent().children(".ghostClick").css({'width' : '350px', 'height' : '300px'}); 
		//reset more info buttons position
		$(this).parent().children(".moreInfo").css({'left' : ''});
		$(this).children(".collapse").css({'left' : ''});
		$(this).children(".expand").css({'left' : ''});
	}
	});


// ---MAKE CLICKED IMAGES EXPAND TO FULL WIDTH ---
	//On click of ghostClick cell
	$(".ghostClick").click(function(){
	//check class to see if already expanded
	if (!$(this).parent(".itemContainer").hasClass('changeWidth')){
		//if not expanded already add class and change width to 1050px, animate and bring forward
//close all

		//close more info box
		$(".moreInfoContainer").removeClass("showingMoreInfo");
		$(".moreInfoContainer").hide();
		//
		$(".row").css({'height' : '350px'});
		$(".itemContainer").removeClass("changeWidth").css({'z-index' : '0', 'width' : '350px', 'height' : '350px', 'background-position' : '0 0'});
		$(".itemContainer").parent().css({'left' : ''}); //reset div to default position
		$(".itemInfoBox").css({'width' : '350px', 'top' : '300px'}); //reset to thumb width
		$(".ghostClick").css({'width' : '350px', 'height' : '300px'}); //reset to thumb width
		$(".moreInfo").css({'left' : ''});
		$(".expand").show().css({'left' : ''});
		$(".collapse").hide().css({'left' : ''});
//end close all

//toggle expand & collapse on mouse click 
		$(this).parent().find(".collapse").show();
		$(this).parent().find(".expand").hide();
		
		$(this).parent().parent().parent().css({'height' : '350px'});
		$(this).parent().addClass("changeWidth").css({'z-index' : '1', 'width' : '1050px', 'height' : '350px', 'background-position' : '0 0'});
		//move expanded div to full left
		$(this).parent().parent().css({'left' : '0px'});
		//enlarge caption box to match expanded image size
		$(this).parent().find(".itemInfoBox").css({'width' : '1050px', 'top' : '300px'}); 
		//enlarge ghostClick box to match expanded image size
		$(this).css({'z-index' : '2', 'width' : '1050px', 'height' : '300px'}); 
		//move more info button to fit new width
		$(this).parent().find(".moreInfo").css({'left' : '1000px'});
		//move collapse button to fit new width
		$(this).parent().find(".collapse").css({'left' : '1025px'});
		$(this).parent().find(".expand").css({'left' : '1025px'});

} else {

		//toggle expand & collapse on mouse click 
		$(this).parent().find(".expand").show();
		$(this).parent().find(".collapse").hide();
		//if already expanded remove class & change width to 350px, animate and send backward
		$(this).parent().parent().parent().css({'height' : '350px'});
		$(this).parent().removeClass("changeWidth").css({'z-index' : '0', 'width' : '350px', 'height' : '350px', 'background-position' : '0 0'});
		//reset div to default position
		$(this).parent().parent().css({'left' : ''}); 
		//reset caption box to thumb width
		$(this).parent().find(".itemInfoBox").css({'width' : '350px', 'top' : '300px'}); 
		//enlarge ghostClick box to match expanded image size
		$(this).css({'width' : '350px', 'height' : '300px'}); 
		//reset more info buttons position
		$(this).parent().find(".moreInfo").css({'left' : ''});
		$(this).parent().find(".collapse").css({'left' : ''});
		$(this).parent().find(".expand").css({'left' : ''});
	}
	});

 });