$(document).ready(function(){
var dist2D = 20;
var a = 200;
var x, y, z, w, h;
var t = 0;
var d = 0;
var images = $('.item');


/* 
var images = new Array();

for(var it=0 ; it<img.length ; it++){
	images[it] = $('#item:
}
 */
var angle = 0;

var largeur = 0, hauteur = 0;


w = document.body.clientWidth;
hhh = window.innerHeight || self.innerHeight || document.body.clientHeight;

var i = -1 , j = 0; //coord matrice
var mat = new Array();
mat[0] = new Array();
mat[1] = new Array();
mat[2] = new Array();
mat[3] = new Array();

var hImg = $(images.eq(0)).height();
var wImg = $(images.eq(0)).width();

for(var n=0 ; n<images.length ; n++){
	j = n%3;
	if(0 == j) i++;
	mat[i][j] = n;
}

var Ox = $('#bankImages').offset().left;
var Oy = $('#bankImages').offset().top;

if($.browser.webkit){
	w = w - 130;
}else if($.browser.opera){
	w = w*2 - 130;
}
	images.eq(1).css({
		left: (((w-wImg)/2)-Ox),
		top: 60
	});
	images.eq(4).css({
		left: ((w-wImg)/2)-Ox,
		top: 180
	});
	images.eq(7).css({
		left: ((w-wImg)/2)-Ox,
		top: 300
	});
		
	images.eq(0).css({
		left: ((w-wImg)/2-140)-Ox,
		top: 60
	});
	images.eq(3).css({
		left: ((w-wImg)/2-140)-Ox,
		top: 180
	});
	images.eq(6).css({
		left: ((w-wImg)/2-140)-Ox,
		top: 300
	});
	
	images.eq(2).css({
		left: ((w-wImg)/2+140)-Ox,
		top: 60
	});
	images.eq(5).css({
		left: ((w-wImg)/2+140)-Ox,
		top: 180
	});
	images.eq(8).css({
		left: ((w-wImg)/2+140)-Ox,
		top: 300
	});
	images.eq(9).css({
		left: ((w-wImg)/2)-Ox,
		top: 420
	});
var ratio = hImg/wImg;
var h = (((w-wImg)/2)-Ox);
var k = 60;
var h11 = ((w-wImg)/2)-Ox;
var	k11 = 180;
var	h1 = ((w-wImg)/2)-Ox;
var	k1 = 300;
var t1 = 0, d1 = 0;
var z = 0, z1 = 0;

var mouseX, mouseY;

document.onmousemove = function(e) {
	if (window.event) e = window.event;
	mouseX = (e.x || e.clientX);
	mouseY = (e.y || e.clientY);
	
	largeur = window.innerWidth || self.innerWidth || document.body.clientWidth;
	hauteur = window.innerHeight || self.innerHeight || document.body.clientHeight;
}

function transformer(){

//premiere ligne
	t = t+Math.PI/180;
	if(Math.abs(t%(2*Math.PI))<Math.PI) z = 10;
	else z = 0;
	x00 = h + Math.round(a*Math.cos(t+Math.PI));
	y00 = k + Math.round(a/4*Math.sin(t+Math.PI));
	$(images.eq(mat[0][0])).css({
		top: (y00.toString()+"px"),
		left: (x00.toString()+"px"),
//		width: (wImg*((Math.sin(t)+2.5)/2.5)),
//		height: (wImg*((Math.sin(t)+2.5)/2.5)*ratio),
		zIndex: (z)
	});
	
	if(Math.abs((t+Math.PI)%(2*Math.PI))<Math.PI) z1 = 10;
	else z1 = 0;
	x02 = h + Math.round(a*Math.cos(t));
	y02 = k + Math.round(a/4*Math.sin(t));
	$(images.eq(mat[0][2])).css({
		top: (y02.toString()+"px"),
		left: (x02.toString()+"px"),
//		width: (wImg*((Math.sin(t+Math.PI)+2.5)/2.5)),
//		height: (wImg*((Math.sin(t+Math.PI)+2.5)/2.5)*ratio),
		zIndex: (z1)			
	});
	
//deuxieme ligne	
	x10 = h11 + Math.round(a*Math.cos(t+Math.PI));
	y10 = k11 + Math.round(a/5*Math.sin(t+Math.PI));
	$(images.eq(mat[1][0])).css({
		top: (y10.toString()+"px"),
		left: (x10.toString()+"px"),
//		width: (wImg*((Math.sin(t)+2.5)/2.5)),
//		height: (wImg*((Math.sin(t)+2.5)/2.5)*ratio),
		zIndex: (z)
	}); 

	x12 = h11 + Math.round(a*Math.cos(t));
	y12 = k11 + Math.round(a/5*Math.sin(t));
	$(images.eq(mat[1][2])).css({
		top: (y12.toString()+"px"),
		left: (x12.toString()+"px"),
//		width: (wImg*((Math.sin(t+Math.PI)+2.5)/2.5)),
//		height: (wImg*((Math.sin(t+Math.PI)+2.5)/2.5)*ratio),
		zIndex: (z1)
	});  

//3ieme ligne
	
	t1 = t1-Math.PI/180;
	d1 = d1-Math.PI/180; 
	x20 = h1 + Math.round(a*Math.cos(t1+Math.PI));
	y20 = k1 + Math.round(a/5*Math.sin(t1+Math.PI));
	$(images.eq(mat[2][0])).css({
		top: (y20.toString()+"px"),
		left: (x20.toString()+"px"), 
//		width: (wImg*((Math.sin(t)+2.5)/2.5)),
//		height: (wImg*((Math.sin(t)+2.5)/2.5)*ratio),
		zIndex: (z)
	});
	x22 = h1 + Math.round(a*Math.cos(t1));
	y22 = k1 + Math.round(a/5*Math.sin(t1));
	$(images.eq(mat[2][2])).css({
		top: (y22.toString()+"px"),
		left: (x22.toString()+"px"),
//		width: (wImg*((Math.sin(t+Math.PI)+2.5)/2.5)),
//		height: (wImg*((Math.sin(t+Math.PI)+2.5)/2.5)*ratio),
		zIndex: (z1)
	});
	
	$(images.eq(mat[0][1])).css({
		zIndex: '5'
	});
	$(images.eq(mat[1][1])).css({
		zIndex: '5'
	});
	$(images.eq(mat[2][1])).css({
		zIndex: '5'
	});
}
	u = setInterval(transformer, 32);
	
	/* $('.item').mouseover(
		function() {
			clearInterval(u);
		}
	);
	
	$('.item').mouseout(
		function(){
			u = setInterval(transformer, 32);
		}
	);
	
	 */
 	$('.item').click(function(e) {
		//Cancel the link behavior
		e.preventDefault();
		
		//Get the A tag
		var id = $(this).attr('href');
	
		//Get the screen height and width
		var maskHeight = $(document).height();
		var maskWidth = $(window).width();
	
		//Set heigth and width to mask to fill up the whole screen
		$('#mask').css({'width':maskWidth,'height':maskHeight});
		
		//transition effect		
		$('#mask').fadeIn(100);	
		$('#mask').fadeTo("slow",0.8);	
	
		//Get the window height and width
		var winH = $(document).height();
		var winW = $(document).width();
		
		$('.window').css('top', (winH-$('.window').height())/2);
		$('.window').css('left', (winW-$('.window').width())/2);
              
		//Set the popup window to center
		$(id).css('top',  winH/2-$(id).height()/2);
		$(id).css('left', winW/2-$(id).width()/2);
	
		//transition effect
		$(id).fadeIn(100); 
	
	});
	
	//if close button is clicked
	$('.window .close').click(function (e) {
		//Cancel the link behavior
		e.preventDefault();
		
		$('#mask').hide();
		$('.window').hide();
	});	

	$('.window1 .close').click(function (e) {
		//Cancel the link behavior
		e.preventDefault();
		
		$('#mask').hide();
		$('.window1').hide();
	});
	
	//if mask is clicked
	$('#mask').click(function () {
		$(this).hide();
		$('.window').hide();
		$('.window1').hide();
	});
});