// Masonry corner stamp modifications
$.Mason.prototype.resize = function() {
	this._getColumns('masonry');
	this._reLayout();
};

$.Mason.prototype._reLayout = function( callback ) {
	var freeCols = this.cols;
	if ( this.options.cornerStampSelector ) {
		var $cornerStamp = this.element.find( this.options.cornerStampSelector ),
		cornerStampX = $cornerStamp.offset().left - 
		( this.element.offset().left + this.offset.x + parseInt($cornerStamp.css('marginLeft')) );
		freeCols = Math.floor( cornerStampX / this.columnWidth );
	}
	// reset columns
	var i = this.cols;
	this.colYs = [];
	while (i--) {
		this.colYs.push( this.offset.y );
	}

	for ( i = freeCols; i < this.cols; i++ ) {
		this.colYs[i] = this.offset.y + $cornerStamp.outerHeight(true);
	}

	// apply layout logic to all bricks
	this.layout( this.$bricks, callback );
};


$(function(){
	$('ul.box-3d').prepend('<li id="ulBox3dDummy">dummy box</li>');
	$('ul.box-3d').masonry({
		itemSelector: 'ul.box-3d > li',
		isAnimated: true,
		animationOptions: {
			duration: 660,
			//easing: 'linear',
			easing: 'swing',
			queue: false,
			},
		//isFitWidth: true;
		//gutterWidth: 10,
		columnWidth: 230,
		//cornerStampSelector: '.corner-stamp'
	});
	$('ul.box-3d li#ulBox3dDummy').remove();
	$('ul.box-3d').masonry('reload');

	//var bgcolor = $('ul.box-3d > li div.box').css("background-color");

	setTimeout(function(){
		$('ul.box-3d > li div.box').animate({opacity: 0.8}, 300);
		$('ul.box-3d > li div.box').mouseover(function() {
			//$(this).stop().animate({backgroundColor: '#FFF2BF'}, 800);
			$(this).stop().animate({opacity: 1}, 400);
		});
		$('ul.box-3d > li div.box').mouseout(function() {
			$(this).stop().animate({opacity: 0.8,}, 800);
			//$(this).stop().animate({opacity: 0.8, backgroundColor: bgcolor}, 800);
		});
		$('ul.box-3d > li div.box').click(function() {
			$(this).stop().animate({opacity: 0.2}, 6000);
			//$(this).css({'background-color':'#fff'})
		});
	}, 660);


	/* ul.howto-3d */

	$('ul.howto-3d').prepend('<li>dummy box</li>');
	$('ul.howto-3d').masonry({
		itemSelector: 'ul.howto-3d > li',
		isAnimated: true,
		animationOptions: {
			duration: 660,
			//easing: 'linear',
			easing: 'swing',
			queue: false,
			},
		//isFitWidth: true;
		//gutterWidth: 10,
		columnWidth: 225,
		//cornerStampSelector: '.corner-stamp'
	});

	$('ul.howto-3d li:first-child').remove();
	$('ul.howto-3d').masonry('reload');

	setTimeout(function(){
		$('ul.howto-3d > li').mouseover(function() {
			$(this).stop().animate({borderColor: '#FFF2BF'}, 800);
			$(this).find('p.content').stop().animate({color: '#FFF2BF'}, 800);
		});
		$('ul.howto-3d > li').mouseout(function() {
			$(this).stop().animate({borderColor: '#FFF'}, 800);
			$(this).find('p.content').stop().animate({color: '#FFF'}, 800);
		});
		$('ul.howto-3d > li').click(function() {
			$(this).stop().animate({borderColor: '#E6211A'}, 1200);
		});
	}, 660);
});