/**
* JQUERY BACKGROUND PARALLAX ANIMATION
*
* This is just a concept script. Not the most effective method to animate,
* but it works fine as a concept page. 
*
* Author	: Kim Sandvold - copyright (c) 2009
* Website	: http://www.kimsandvold.com
*/
jQuery.fn.backgroundAnimation = function(i){

	settings = $.extend({
		elements : [],
		duration : 0.5,
		idprefix : 'img-container',
		verticalAlign : 'center', 
		horizontalAlign : 'center',
		filetype : '.png'
	}, i);
	
	// Alert if you have no images to animate
	if(settings.elements.length == 0){
		alert('You must put some images in the "elements" array!');
	}
	
	// Finding the center of the browser vindow
	centerX = $(window).width() / 2;
	centerY = $(window).height() / 2;
	
	// A mouseover event over the whole browser window
	$(this).mousemove(function(e){
		
		// Setting the zero value to the center of the browser window
		fixedX = ((centerX - e.pageX) > 0) ? (centerX - e.pageX) - ((centerX - e.pageX)* 2): e.pageX - centerX;
		fixedY = ((centerY - e.pageY) > 0) ? (centerY - e.pageY) - ((centerY - e.pageY)* 2): e.pageY - centerY;
		
		p = 0.00;
		for(i = 0; i < settings.elements.length; i++){
		
			// Increments the position for each layer
			p = ((p + 0.03) > 0.09) ? (p + 0.12) : (p + 0.03);
			
			$('#'+settings.idprefix+i).css({
				backgroundImage: "url("+settings.elements[i]+")",
				backgroundRepeat: "",
				backgroundPosition: ''+fixedX * p+'px '+fixedY * p+'px'
			});
			
			// Just for showing the data
			$('#show-data').html(
				'Window size: '+$(window).width()+' x '+$(window).height()+'<br />'+
				'Chord X: '+e.pageX+'<br />'+
				'Chord Y: '+e.pageY+'<br />'+
				'Chord X center '+fixedX+'<br />'+
				'Chord Y center '+fixedY
			);
				
		}
	});
}