jQuery.extend(jQuery.fn, {
    cutinpieces: function(o) {
		var rows = o.rows ? o.rows : 10;
		var cols = o.cols ? o.cols : 10;
		
		var content = o.content ? true : false;
		
		var color = o.color ? o.color : '#000000';
		
		var center = o.center ? o.center : true;
		var el = jQuery(this);
		var img = el.css('background-image');
		
		el.css('background',0);

		var imageWidth = o.imageWidth ? o.imageWidth : 0;
		var imageHeight = o.imageHeight ? o.imageHeight : 0;
		
		var totalWidth = jQuery('body').width();
		var totalHeight = jQuery('body').height();
		
		var tag = o.tag ? o.tag : 'div';
		
		var singleWidth = Math.floor(totalWidth / cols); // Shard width
		var singleHeight = Math.floor(totalHeight / rows); // Shard height
		
		var lastSingleWidth = singleWidth + (totalWidth - singleWidth * cols); // Shard width
		var lastSingleHeight = singleHeight + (totalHeight - singleHeight * rows); // Shard height
		//alert(lastSingleWidth + " " +singleWidth);
		
		var cssPrefix = false;
		
		if(jQuery.browser.webkit) {
		cssPrefix = "webkit";
		}
		else if(jQuery.browser.mozilla) {
		cssPrefix = "moz";
		}
		
		var backgroundPositionX = 0;
		var backgroundPositionY = 0;
		var piece;
		var container;
		for(x = 0; x < rows; x++) {
		  //For every desired column
		  for(y = 0; y < cols; y++) {
			if(center) {
				backgroundPositionX = -(imageWidth/2 - totalWidth/2 + singleWidth * y);
				backgroundPositionY = -(imageHeight/2 - totalHeight/2 + singleHeight * x);
			}
			else {
				backgroundPositionX = singleWidth * y;
				backgroundPositionY = singleHeight * x;
			}
			
			piece = jQuery("<"+ tag + " />");
			$('#container article').remove();
			if(content) {
				piece.css({
					position: 'absolute',
					visibility: 'visible',
					left: y*singleWidth,
					top: x*singleHeight,
					overflow: 'hidden',
				});
				if(y == cols - 1)
					piece.css('width', lastSingleWidth + 'px');
				else
					piece.css('width', singleWidth + 'px');
				if(x == rows - 1)
					piece.css('height', lastSingleHeight + 'px');
				else
					piece.css('height', singleHeight + 'px');
					
				container = jQuery('<div></div>');
				
				container.css({
					position: 'absolute',
					left: -y*singleWidth,
					top: -x*singleHeight,
					width: el.css('width'),
					height: el.css('height'),
				}).addClass('piece-content');
				container.html(el.html());
			}
			else {
				piece.css({
					left: y*singleWidth,
					top: x*singleHeight,
				});
				if(y == cols - 1)
					piece.css('width', lastSingleWidth + 'px');
				else
					piece.css('width', singleWidth + 'px');
				if(x == rows - 1)
					piece.css('height', lastSingleHeight + 'px');
				else
					piece.css('height', singleHeight + 'px');
			}
		
			//piece = jQuery("<"+ tag + " />").attr("style","display: inline-block; width:" + (singleWidth) + "px;height:" + (singleHeight) + "px; background-image: " + img + "; background-position:-" + backgroundPositionX + "px -" + backgroundPositionY + "px; ");

			piece.css('display', 'block');

			piece.css('position', 'absolute');
			piece.css('background-image', img);
			piece.css('background-position', backgroundPositionX + 'px ' + backgroundPositionY + 'px');
			piece.css('background-repeat', 'no-repeat');
			piece.css('background-color', color);
			
			piece.addClass('piece');
			
			if(content) {
				piece.append(container);
				$('#container').append(piece);
			}
			else
				$('#container').append(piece);
		  }
		}		
    }
});