/* Animate Panels | by Mark Shorter | 4/4/2011 */
/* Requires jQuery Easing Plugin (version 1.3) http://gsgd.co.uk/sandbox/jquery/easing/ */
$(document).ready(function(){
	$(reorder);
	var $effect = 'easeOutBounce';	// global effect for the panel animations
	var $config = {    		// added hoverIntent functionality
		 over: openPanel,	// function = onMouseOver callback (REQUIRED)  
		 out: closePanel,	// function = onMouseOut callback (REQUIRED)    
		 timeout: 100,		// number = milliseconds delay before onMouseOut  
		 interval:50		// number = milliseconds hoverIntent waits between reading/comparing mouse coordinates // default is 100
	};
	
	function reorder() {	// randomizing function that gathers all of the child elements 
	        var grp1 = $('#panel-group-one').children();
                $('#panel-group-one').append($(grp1)).css('opacity', '0').fadeTo(1500,1);
		$('div#panel-group-one').find('div.panel-one:nth-child(0)');
	        
	        
	        var grp = $('#panel-group').children();
                /*Remove Randomizing for this Project */
		/*var cnt = grp.length;
		var temp,x;
		for (var i = 0; i < cnt; i++) {
			temp = grp[i];
			x = Math.floor(Math.random() * cnt);
			grp[i] = grp[x];
			grp[x] = temp;
		}
		$(grp).remove();*/
		$('#panel-group').append($(grp)).css('opacity', '0').fadeTo(1500,1);
		$('div#panel-group').find('div.panel:nth-child(5)').css('clear','both');
	}
	
	$('.panel').hoverIntent($config);

	function openPanel() {
		$(this).find('.hub-img').animate({top: '-220px'},{duration:1000, easing:$effect});
		$(this).find('.hub-copy').addClass('inner').stop().css('opacity', '0').fadeTo(750,1).animate({top: '0'},{duration:1000, easing:$effect});
		$(this).find('.hub-copy-one').addClass('inner').stop().css('opacity', '0').fadeTo(750,1).animate({top: '0'},{duration:1000, easing:$effect});
		$(this).find('.hub-sub-title').addClass('inner').animate({top: '0'},{duration:'fast', easing:$effect})
	}
	
	function closePanel() {
		$(this).find('.hub-img').animate({top: '0px'},{duration:1000, easing:$effect});
		$(this).find('.hub-copy').removeClass('inner').stop().css('opacity', '0').fadeTo(300,1).animate({top: '0'},{duration:300, easing:$effect});
		$(this).find('.hub-copy-inner').removeClass('inner').stop().css('opacity', '0').fadeTo(300,1).animate({top: '0'},{duration:300, easing:$effect});
		$(this).find('.hub-sub-title').removeClass('inner').animate({top: '0'},{duration:'fast', easing:$effect})
	}
	
	$('.panel-one').hoverIntent($config);

	function openPanel() {
		$(this).find('.hub-img').animate({top: '-220px'},{duration:1000, easing:$effect});
		$(this).find('.hub-copy').addClass('inner').stop().css('opacity', '0').fadeTo(750,1).animate({top: '0'},{duration:1000, easing:$effect});
		$(this).find('.hub-copy-one').addClass('inner').stop().css('opacity', '0').fadeTo(750,1).animate({top: '0'},{duration:1000, easing:$effect});
		$(this).find('.hub-sub-title').addClass('inner').animate({top: '0'},{duration:'fast', easing:$effect})
	}
	
	function closePanel() {
		$(this).find('.hub-img').animate({top: '0px'},{duration:1000, easing:$effect});
		$(this).find('.hub-copy').removeClass('inner').stop().css('opacity', '0').fadeTo(300,1).animate({top: '0'},{duration:300, easing:$effect});
		$(this).find('.hub-copy-one').removeClass('inner').stop().css('opacity', '0').fadeTo(300,1).animate({top: '0'},{duration:300, easing:$effect});
		$(this).find('.hub-sub-title').removeClass('inner').animate({top: '0'},{duration:'fast', easing:$effect})
	}

});