/*

	Project: "Sny i Sekrety"
	Type: JavaScript document
	For: Shift background of .fake-background layers
		to match main body background - for visual effect of "transparency".
		Only horizontal realization by now
	Coder: mr-woodman.antivitla.com
	
*/

$(document).ready( function () {	
	// fake transparency
	fakeTransparency();
	// also re-fake it on resize
	$(window).bind("resize", function(e) { fakeTransparency(); });
	
});

function fakeTransparency()
{
	$(".fake-transparent").each( function(i) {
		// Assuming we have same tiles!
		
		// heigth and thus vertical shift is no problem, 
		// just shift it on its vertical offset from top
		
		// but with width need some calculations. width of our tile: 36px
		// it is centered horizontally at body, and at the same time, 
		// faked-layer background is aligned to left, so
		// if fake-transparent layer shift is 36/2 = 18px to the left no shift needed. 
		// We remenber that. Now, we see how much times 36px we are from center,
		// then take remaining part of it (fromCenterOffset / 36) and shift our background on (18 - remain)
		
		var fakeShift = new Object();
		fakeShift.left = fakeShift.top =  0;
		// get offset from center (floor to lower value)
		fakeShift.left = ($("body").width() / 2) - ($(this).offset()).left;
		// get ramain part and 
		var remain = fakeShift.left - (Math.floor(fakeShift.left / 36) * 36);
		remain = -1 * (18 - remain);
		// no convert needed for vertical shift
		fakeShift.top = -1 * ($(this).offset()).top;
		// magik: set background shift!
		$(this).css("background-position", remain + "px " + fakeShift.top + "px");
	});	
}