//Set your delay for the animation!  It's in milliseconds and applies to each fadein / fadeout effect.  Therefore, hover over will take x*2 milliseconds to complete because it has to fade in and then fade out.

x = 250;
y = 800;

$(document).ready(function(){

$('#tilesGallery').ImageOverlay({
  image_height: '220px',
  image_width: '220px',
  overlay_speed: y
});
$('#booksGallery').ImageOverlay({
  image_height: '220px',
  image_width: '220px',
  overlay_speed: y
});
$('#treasurehuntGallery').ImageOverlay({
  image_height: '220px',
  image_width: '220px',
  overlay_speed: y
});

$.fn.pause = function(milli,type) {
	milli = milli || 1000;
	type = type || "fx";
	return this.queue(type,function(){
		var self = this;
		setTimeout(function(){
			$.dequeue(self);
		},milli);
	});
};

$.fn.clearQueue = $.fn.unpause = function(type) {
	return this.each(function(){
		type = type || "fx";
		if(this.queue && this.queue[type]) {
			this.queue[type].length = 0;
		}
	});
};

// *============= 1st Column First Image

$("#booksGallery > li:first").hoverIntent(function(){
//Read comment below first.  These stops aren't necessary with respect to making hoverin and out behave, but to remove queued fade in and outs if the user hovers in and out repeatedly.
$("#col3b").stop(true,true);
$("#col2b").stop(true,true);
$("#col1c").stop(false,true);
$("#col3b").fadeOut(x);
$("#col2b").fadeOut(x);
$("#col1c").pause(x).fadeIn(x);
//Fading the text in other columns
$("#col2a").stop(true,true);
$("#col3a").stop(true,true);
$("#col2a").fadeTo(x*2,0.3);
$("#col3a").fadeTo(x*2,0.3);
},function(){
//On hover out, we need everthing to be in the state that it should be.  I.e. col3b and col2b completely faded out and col1c either stopped or faded in.  The boolean parameters for stop clear the animation queue and force the animation to end respectively.  So in the case of col1c, if the user manages to hover in and out within 250ms, then the fadein effect is cancelled.  If the user does it between 251 and 500ms, then fadein is completed instantly.  The other animations are also forced to finish because we don't want any invisible divs knocking about the place.
$("#col3b").stop(false,true);
$("#col2b").stop(false,true);
$("#col1c").stop(true,true);
//However, if the callback is already running, then it will stop midtrack with a semi-transparant div.  Get rid of it straightaway!
$("#col1c").fadeOut(x);
$("#col2b").pause(x).fadeIn(x);
$("#col3b").pause(x).fadeIn(x);
//Restoring the text in other columns
$("#col2a").stop(true,true);
$("#col3a").stop(true,true);
$("#col2a").fadeTo(x*2,1);
$("#col3a").fadeTo(x*2,1);
}
);

// *============= 1st Column Second Image  (Only thing that changes is the column that fades in on rollover.  I.e. col1c above becomes col1d

$("#booksGallery > li:last").hoverIntent(function(){
$("#col3b").stop(true,true);
$("#col2b").stop(true,true);
$("#col1d").stop(false,true);
$("#col3b").fadeOut(x);
$("#col2b").fadeOut(x);
$("#col1d").pause(x).fadeIn(x);
//Fading the text in other columns
$("#col2a").stop(true,true);
$("#col3a").stop(true,true);
$("#col2a").fadeTo(x*2,0.3);
$("#col3a").fadeTo(x*2,0.3);
},function(){
$("#col3b").stop(false,true);
$("#col2b").stop(false,true);
$("#col1d").stop(true,true);
$("#col1d").fadeOut(x);
$("#col2b").pause(x).fadeIn(x);
$("#col3b").pause(x).fadeIn(x);
//Restoring the text in other columns
$("#col2a").stop(true,true);
$("#col3a").stop(true,true);
$("#col2a").fadeTo(x*2,1);
$("#col3a").fadeTo(x*2,1);
}
);

// *============= 3rd Column First Image

$("#treasurehuntGallery > li:first").hoverIntent(function(){
$("#col2b").stop(true,true);
$("#col1b").stop(true,true);
$("#col3c").stop(false,true);
$("#col2b").fadeOut(x);
$("#col1b").fadeOut(x);
$("#col3c").pause(x).fadeIn(x);
//Fading the text in other columns
$("#col1a").stop(true,true);
$("#col2a").stop(true,true);
$("#col1a").fadeTo(x*2,0.3);
$("#col2a").fadeTo(x*2,0.3);
},function(){
$("#col2b").stop(false,true);
$("#col1b").stop(false,true);
$("#col3c").stop(true,true);
$("#col3c").fadeOut(x);
$("#col1b").pause(x).fadeIn(x);
$("#col2b").pause(x).fadeIn(x);
//Restoring the text in other columns
$("#col1a").stop(true,true);
$("#col2a").stop(true,true);
$("#col1a").fadeTo(x*2,1);
$("#col2a").fadeTo(x*2,1);
}
);

// *============= 3rd Column Second Image  (Only thing that changes is the column that fades in on rollover.  I.e. col3c above becomes col3d

$("#treasurehuntGallery > li:last").hoverIntent(function(){
$("#col1b").stop(true,true);
$("#col2b").stop(true,true);
$("#col3d").stop(false,true);
$("#col1b").fadeOut(x);
$("#col2b").fadeOut(x);
$("#col3d").pause(x).fadeIn(x);
//Fading the text in other columns
$("#col1a").stop(true,true);
$("#col2a").stop(true,true);
$("#col1a").fadeTo(x*2,0.3);
$("#col2a").fadeTo(x*2,0.3);
},function(){
$("#col1b").stop(false,true);
$("#col2b").stop(false,true);
$("#col3d").stop(true,true);
$("#col3d").fadeOut(x);
$("#col2b").pause(x).fadeIn(x);
$("#col1b").pause(x).fadeIn(x);
//Restoring the text in other columns
$("#col1a").stop(true,true);
$("#col2a").stop(true,true);
$("#col1a").fadeTo(x*2,1);
$("#col2a").fadeTo(x*2,1);
}
);

// *============= 2nd Column

$("#tilesGallery > li").hoverIntent(function(){
//The fade outs to stop
$("#col1b").stop(true,true);
$("#col3b").stop(true,true);
//The fade ins to stop
$("#col2c").stop(false,true);
$("#col2d").stop(false,true);
//Fade out the relevant columns
$("#col1b").fadeOut(x);
$("#col3b").fadeOut(x);
//Fade in the relevant columns
$("#col2c").pause(x).fadeIn(x);
$("#col2d").pause(x).fadeIn(x);
//Fading the text in other columns
$("#col1a").stop(true,true);
$("#col3a").stop(true,true);
$("#col1a").fadeTo(x*2,0.3);
$("#col3a").fadeTo(x*2,0.3);
},function(){
//Stop the fade ins
$("#col1b").stop(false,true);
$("#col3b").stop(false,true);
//Stop the fade outs
$("#col2c").stop(true,true);
$("#col2d").stop(true,true);
//Fade out relevant columns
$("#col2c").fadeOut(x);
$("#col2d").fadeOut(x);
$("#col1b").pause(x).fadeIn(x);
$("#col3b").pause(x).fadeIn(x);
//Restoring the text in other columns
$("#col1a").stop(true,true);
$("#col3a").stop(true,true);
$("#col1a").fadeTo(x*2,1);
$("#col3a").fadeTo(x*2,1);
}
);

});

/*PAUSE PLUGIN (first two functions) by...
 * Jonathan Howard
 *
 * jQuery Pause
 * version 0.2
 *
 * Requires: jQuery 1.0 (tested with svn as of 7/20/2006)
 *
 * Feel free to do whatever you'd like with this, just please give credit where
 * credit is do.
 *
 *
 *
 * pause() will hold everything in the queue for a given number of milliseconds,
 * or 1000 milliseconds if none is given.
 *
 *
 *
 * unpause() will clear the queue of everything of a given type, or 'fx' if no
 * type is given.
 */