var divOffsetX,divOffsetY, divWidth, divHeight, middleX, middleY;

var capas = Array();

var interval;

var virtualmouse = {'x': 0, 'y': 0}

var tipo_fuera = 0;

var current_group = 1;
var top_group = 1;

// guardar la posicion del ratón
function mouseRecord (e) {

	virtualmouse.x = e.pageX + (virtualmouse.x - e.pageX) * 0.9;
	virtualmouse.y = e.pageY + (virtualmouse.y - e.pageY) * 0.9;;
}

function mover () {

	//console.log('mover');
	var valX, valY;

	var mouseValX = virtualmouse.x - divOffsetX - middleX;
	var mouseValY = virtualmouse.y - divOffsetY - middleY;

	$(capas).each(function () {

		if($(this.image).attr('rel') == current_group) {
			if($(this).margenH != 0) {

				valX = mouseValX / middleX * this.margenH + this.margenH;
				$(this.image).css('left',valX);
			}

			if($(this).margenV != 0) {

				valY = mouseValY / middleY * this.margenV + this.margenV;
				$(this.image).css('top',valY);
			}
		}
	});

}

function init () {

	top_group = $('#parallax img:eq(0)').attr('rel');

	var all_imgs_loaded = true;
	$('#parallax img').each(function () {

		if(this.complete == false) all_imgs_loaded = false;
	});

	if(all_imgs_loaded == false) {

		//console.log('launch delay');
		setTimeout("init()",500);
		return;
	}
	
	/*** calcular las variables generales ***/

    divOffsetX = $('#parallax').offset().left;
    divOffsetY = $('#parallax').offset().top;

	divWidth = $('#parallax').width();
	divHeight = $('#parallax').height();

	virtualmouse.x = middleX = divOffsetX + divWidth / 2;
	virtualmouse.y = middleY = divOffsetY + divHeight / 2;

	$('div#parallax img').each(function () {

		var imgWidth = $(this).width();
		var imgHeight = $(this).height();

		if($(this).attr('rel') == 1) {

			/*$(this).css('left', parseInt((divWidth - imgWidth) / 2));
			$(this).css('top', parseInt((divHeight - imgHeight) /2 ));*/
			
			/*$(this).css('left', 0);
			$(this).css('top', 0);*/
			$(this).animate({'left': parseInt((divWidth - imgWidth) / 2),'top': parseInt((divHeight - imgHeight) /2 ) },'200');

		} else {

			$(this).css('left', parseInt((divWidth - imgWidth) / 2));
			$(this).css('top', parseInt((divHeight - imgHeight) /2 ));
		}

		capas.push({
			'image'	:		this,
			'margenH'	:	parseInt((divWidth - imgWidth) / 2),
			'margenV'	:	parseInt((divHeight - imgHeight) /2 ),
		});
	});

		/*** iniciar eventos ***/

		$('#parallax').unbind('mouseover').unbind('mouseout');
		$('#parallax').hover(function () {

			//guardar la posicion del cursor
			$('#parallax').bind('mousemove', mouseRecord);
			interval = setInterval('mover()', 25);
		},
		function () {

			$('#parallax').unbind('mousemove', mouseRecord);
			clearInterval(interval);
		});

	setTimeout('fuera()',4500);
	

	
	
}


function fuera () {

	$('#parallax img[rel='+ (current_group + 1) +']').show();
	$(capas).each(function () {

		if($(this.image).attr('rel') == current_group)
			if(tipo_fuera == 0) {

				tipo_fuera = 1;
				$(this.image).animate({'left' : $(this.image).width() * -1}, 1500, function () { $(this).hide(); });
				

			} else {

				tipo_fuera = 0;
				$(this.image).animate({'left': $(this.image).width()}, 1500, function () { $(this).hide(); });
			}
	});

	if(current_group != (top_group-1)) {

		current_group++;
		setTimeout('fuera()',6000);

	} else {

		current_group++;
	}
}

$(document).ready(function () {

	init();
});