$(document).ready(function() {
	// it is assumed to be the onBeforeLoad event listener 
	$("a[rel]").overlay({
    	expose: 'black', 
		effect: 'apple', 
        onBeforeLoad: function() {
            // grab wrapper element inside content 
	        var wrap = this.getContent().find(".contentWrap"); 
  		    // load the page specified in the trigger 
            wrap.load(this.getTrigger().attr("href"));			
   		}
	}); 
			
			// Stack initialize
	var openspeed = 300;
	var closespeed = 300;
	$('.stack>img').toggle(function(){
		var vertical = 0;
		var horizontal = 25;
		var $el=$(this);
		var counter = 1;
		$el.next().children().each(function(){
			$(this).animate({top: vertical + 'px', left: horizontal + 'px'}, openspeed);
			horizontal = horizontal+35/(counter);
			vertical = vertical - 55;
			counter++;
		});
		$el.next().animate({top: '-50px', left: '10px'}, openspeed).addClass('openStack')
		   .find('li a>img').animate({width: '50px', marginLeft: '9px'}, openspeed);
		$el.animate({paddingTop: '0'});
	}, function(){
		//reverse above
		var $el=$(this);
		$el.next().removeClass('openStack').children('li').animate({top: '55px', left: '0px'}, closespeed);
		$el.next().find('li a>img').animate({width: '48px', marginLeft: '0'}, closespeed);
		//$el.animate({paddingTop: '35'});
	});

	// Stacks additional animation
	$('.stack li a').hover(function(){
		$("img",this).animate({width: '56px'}, 100);
		$("span",this).animate({marginLeft: '30px'});
	},function(){
		$("img",this).animate({width: '50px'}, 100);
		$("span",this).animate({marginLeft: '0'});
	});
});