// JavaScript Document

/* plays the image-slide-down-fade-out animation in order to display hidden links */
function openBoxContent(boxContent) {
	/*we get the boxContent's height to slide the image to the bottom */
	var distance = $(boxContent).outerHeight();

    /*... and change the position of the image to that width with an animation effect... */
	$(boxContent).find('.box-image').stop(true, false).fadeTo(400, 0.1);
	$(boxContent).find('.content-block').stop(true, false).fadeTo(400, 1);
	
    /*queue:false means that if hovered again it won't wait for the previous animation to finish
    duration:1000 means that the animation effect will take one second to finish '*/
	
}

/* restores the box content in its initial state */
function closeBoxContent(boxContent, forced) {
	if ( forced ) {
	    $(boxContent).find('.box-image').stop(true, false).fadeTo(450, 1);
	    $(boxContent).find('.content-block').stop(true, false).fadeTo(400, 0);
    } else {
        $(boxContent).find('.box-image').stop(true, false).fadeTo(450, 1);
        $(boxContent).find('.content-block').stop(true, false).fadeTo(400, 0);
    }
}

/* currently selected box content */
var currentBoxContent = null;
var nextBoxContent = null;

$(window).load(function(){
    /*when the user hovers over the DIV that contains the image and the text... */
    $('.box-content')
		.bind('mouseenter', function(e){
			var self = this;
			nextBoxContent = self;
			
			setTimeout(function() {
				if ( currentBoxContent != null ) {
					closeBoxContent(currentBoxContent, true);
					currentBoxContent = null;
				}
				
				if ( nextBoxContent == self ) {
					openBoxContent(nextBoxContent);
					currentBoxContent = nextBoxContent;						
					nextBoxContent = null;
				}
			}, 1);
		})
		.bind('mouseleave', function(e){
			if ( nextBoxContent == this ) {
				closeBoxContent(nextBoxContent, false);
				nextBoxContent = null;
			}
			
			if ( currentBoxContent == this ) {
				closeBoxContent(currentBoxContent, false);
				currentBoxContent = null;
			}
		});
    
    
    $("img.box-image").each(function() {
      //  $(this).parent().height($(this).height());
      //  $(this).next().height($(this).height());
    });        
     
    $("img.empty-box-image").each(function() {
      // $(this).parent().height($(this).height());
       //$(this).next().height($(this).height());
    });    
});