/*

			INTERFÍCIE WEB TXEMA SALVANS 
			lamosca.com

	

	
preload imatges miniatures i botons

el loading no es veu (no se perquè ara no es veu aquell text de loading) <-?

extra: animació tipus linial (seria que els items es desplacin cap a la dreta i si han de baixar una linia doncs que entrin per l'esquerra de tot enlloc de moure's de dreta a esquerra.. (en la "baixada"))


			15.4.09|19:50		explorer no es veu T al primer click (incògnita explorer!)
			15.4.09|19:50		items surten de +
			15.4.09|19:30		Scroll segons historial de visita
			15.4.09|19:30		multiples scroll (si apretes diferents imatges molt seguides, fa tots els scrolls, només hauria de fer-ne 1. caldrà mirar-se el codi d'scrollTo o fer-ho no animat)
			15.4.09|18:40		multiples fade In out (si vas passant per damunt fa N fades IN-OUT, haig de fer-ho amb animate i posant-hi un stop)
			15.4.09|17:00		temps fades massa llargs en alguns casos (si tenim 100 icones, el retard es fa massa llarg)
			15.4.09|17:00		logo fade in out quan es mou
			15.4.09|17:00		Alçada Descripcions
			15.4.09|17:00		tipus easing diferents (potser ens interessa que els items es moguin amb un easeOutBack i obrir els items amb un normal)
			3.4.09|17:30		afegit nom en negre
			3.4.09|17:26		arreglat bug explorer
			3.4.09|16:15		comentaris, optimització, descripció mida variable
			3.4.09|12:30		aleatori inicial
			3.4.09|11:50		tancar T
			3.4.09|11:40		css per T
			2.4.09|22:40		animacio T
			2.4.09|22:40		temps scrollTo i scrollTo al principi quan es tanca
			2.4.09|22:40		Rollover Icones T i +
			1.4.09|7:00			Descripció obre i tanca i mostra text
			1.4.09|6:20			Promsite més avall
			1.4.09|5:42			Solucionats bugs de +
			1.4.09|1:10			Amagar + un cop clicat i icona +
			1.4.09|1:05			Promsite Fade
			1.4.09|12:45		scrollTo quan la imatge canvia de linia
			1.4.09|12:30 		Col·locar PROMSITE (inici i funció recoloca)
			1.4.09|11:15		scrollTo -> offset : 0
			
			
			ESTRUCTURA:
				READY un cop el DOM està carregat per a ser usat
					recol·locar el contenidor d'items segons el tamany del menu
					CLASSE Item
					VAR GLOBALS
						FLAGS i OPCIONS (animacions...)
						ALTRES VARIABLES
						ARRAYS D'ITEMS (es guarden cada item segons la classe Item (id, categoria) en un array bidimensional (categoria/element_i)
							inicialització arrays
							afegir descripcions al seu array
					iteració ITEMS	
						APLICACIÓ DE LES PROPIETATS ALS ÍTEMS - propietats (id..) i events
							selectors de capes i propietats d'items en variables (per fer el codi menys liat)
							switch 
						AFEGIR ITEMS ALS ARRAYS CORRESPONENTS	
						EVENTS
							HOVER - fa un fade en cas de ser una miniatura, segons la funcio fadeMiniatura()
							CLICK - explicat al codi
						FER LA HOME ALEATÒRIA
							amagar el carregador inicial
							iteració per als elements mostrats a la home (items[0])
								col·locar-los
						ACTUALITZAR ARRAYS
						PROMSITE
						BOTONS
							
						
						
						
						
*/
/*				
				FUNCIONS
					fadeMiniatura(selector item,selector miniatura,nextestat,categoriaigual?booleà)
						fades dels items quan aquests són miniatures depenent de la categoria i estat
					actualitzaCat(categoria ID) 
						actualitza el CSS de la categoria per al subratllat, també les variables de categoria
					excepteCat(categoria ID,Array d'items)
						dona un array sense els elements d'una certa categoria a items[0]
					ordenaAleatori(array)
						ordena un array de forma aleatòria i el retorna
					recoloca(mode,numeroitem,ample_offset,alt_offset)
						recoloca els items a l'espai, a més els tanca, canvia CSS etc
						mode 
							"obre" - quan una imatge s'obre
							"tanca" - quan una imatge es tanca
							"canvi" - reorganització per categories
					Animacions
						selecciona_anim(mode, element, posicio x, posicio y, retard segons numero d'item i)
							depèn de la variable "animacio" : rectangular, asac, rectangular2, fade, sense
							si és canvi de categoria, fa una animació, sinó no fa cap animació (per anar més ràpid)
							tipus
								anim_rect 	fa una animació linial primer en x i després en y
								anim_asac	animació linial origen-destinació
								anim_rect2 	depenent de la posició de l'element i la seva destinació primer x i dp y, o al revés
								anim_fade 	fade en alpha
							
*/


$(this).ready(function() {
					   
	/* 

	Recol·locar capes segons el tamany del menu

	*/
	var contenidor_top_inicial=$('#contenidor').offset().top;
	var menu_min_h=35;//$('#menu').height();
	var margesuperior=20;
	$('#contenidor').css('top',contenidor_top_inicial+$('#menu').height()-menu_min_h+margesuperior+'px');
							   
	/*

	CLASSE ITEM

	*/
	function Item(id,categoria){
		this.i=id;
		this.cat=categoria;
	}


/*

globals

*/	
	
	// FLAGS I OPCIONS
	
	// animacio
	var temps_animacio=1500;				// milisegons
	var temps_animacio_hover_item=200;	// ms, temps fade del les miniatures dels items
	var temps_animacio_scroll=500;
	var temps_animacio_imatge=300;
	var temps_promsite=300;
	
	var animacio_moviment='rectangular'; // rectangular,rectangular2,asac,fade,sense (definicions al resum)
	var animacio_promsite='fade';
	var animacio_resize = "sense";
	
	var easing_resize= "easeOutQuad";
	
	var easing_moviment = "easeOutQuad"; 
	// easeOutQuad, easeInBack, easeInOutElastic, easeOutBounce
		
		
	/*$(window).keydown(function(event){
		
		switch (event.keyCode) {
				case 82:
				animacio_moviment='rectangular';
				break;
				case 81:
				animacio_moviment='rectangular2';
				break;
				case 67:
				animacio_moviment='circular';
				break;
				case 70:
				animacio_moviment='fade';
	
				break;
				case 83:
				animacio_moviment='asac';
			
				break;
				case 78:
				animacio_moviment='sense';

				break;
				case 49:
				easing_moviment = "easeOutQuad"; 

				break;
				case 50:
				easing_moviment = "easeOutBack"; 
	
				break;
				case 51:
				easing_moviment = "easeOutBounce"; 
	
				break;
				case 52:
				easing_moviment = "easeOutElastic"; 
	
				break;
				case 53:
				easing_moviment = "easeInBack"; 

				break;
				case 54:
				easing_moviment = "easeInOutQuad"; 

				break;
				case 55:
				easing_moviment = "easeInOutBack"; 

				break;
				case 56:
				easing_moviment = "easeInOutBounce"; 

				break;
				case 57:
				easing_moviment = "easeInOutElastic"; 

				break;
				default:
				animacio_moviment='rectangular';
				easing_moviment = "easeOutQuad"; 
				break;
		}
	});	
*/
		
		
	//jQuery.easing.def = "linear"; 	// Segons llibreria jQuery.easing
	
	// Usar mides automàtiques de les imatges (per si les imatges tenen unes mesures diferents)
	var mides_auto=true;
	
	var amplada_descripcio=728; 		// pixels, tamany de la caixa de la descripció
	
	// ALTRES VARIABLES
	
	// categories
	var categoria_actual=0,categoria_anterior=0,categoria_extra=0;
	var descripcio_icon_visible=false;
	
	// posicions
	var marge=2;
	var minima_y_mostrada=700; // UP
	var nextx=0;
	var nexty=0;
	var maxh=0;
	var margepromsite=100;
	var margecontacte=5;
	var marge_categories=75; //71+2+2 alt+marges
	
	
	
	// recolocacio
	var abans_clickmes;
	var j=0;
	var carregant_imatge=false;
	
	// ARRAYS ITEMS
	
	// els ítems es guarden en un array bidimensional:
	/*
	
		items=	[	
			   		[ tots els items de la home 0	] 
					[ tots els items de cat 1		]
								...
					[ tots els items de cat N		]
				]
				
		igualment per als arrays extres
		
		les descripcions en un array linial
	
	*/
	var items=new Array();
	items[0]=new Array();
	var items_extra=new Array();
	items_extra[0]=new Array(0);
	var items_nocat=new Array();
	var items_actual=new Array();
	var items_oberts=new Array();
	var descripcions=new Array();
	var descripcio_oberta=0;		// Si l'item de la descripció és obert
	
	// Afegir descripcions de categoria a l'array de descripcions
	$('div.cat_buto').each( function(i) {
		var categoriadeboto=Number($(this).attr("categoria"));
		var descripciocategoria=$(this).children(".descripcio_text").html();
		descripcions[categoriadeboto]=descripciocategoria;
	});
	// copiar la icona (html) de la descripció per quan hi fem clic
	var descripcio_icon=$("#descripcio").html();
	
	
/*

APLICACIÓ DE LES PROPIETATS ALS ÍTEMS

*/	

// Per a cada element DIV de classe item, li assignem la id, i resta de propietats. Així com els events associats a l'ítem
	
	$('div.item').each( function(i) {

	/*

	VARIABLES

	*/

		// Assignació de noms curts
		var tag_img=$(this).children().children("#miniatura");
		var tag_a=$(this).children("#link");
		var capa=$(this);
		
		// afegir classe mini on a la miniatura
		tag_img.toggleClass("mini_on");
		
		

		// afegir tags identificatius al div
		$(this).attr("i",i+1);
		$(this).attr("id","item"+(i+1));
		
		// agafar les propietats de l'element
		var id=					$(this).attr("i");				// ID de l'item (1..N)
		var categoria=			$(this).attr("categoria");		// Categoria (número != 0)
		var actiu=				$(this).attr("actiu");			// Si l'item està actiu (obert) o no (al principi no)
		var foto=				tag_a.attr("href");				// Direcció de la foto gran
		var miniatura=			tag_img.attr("src");			// Direcció de la foto miniatura
		var miniatura_ample=	tag_img.attr("width");			
		var miniatura_alt=		tag_img.attr("height");
		var mostrar=			$(this).attr("mostrar");		// Mostrar al principi o no
		var imatge_ample=		miniatura_ample;				// Inicialització ample i alt de la imatge
		var imatge_alt=			miniatura_alt;
		
		// Si es vol una mida d'imatge fixa (segons FLAG) - (recomano no fer-ho)
		
		if(!mides_auto){
			switch(miniatura_ample){
				case 43:
					imatge_ample=728;
					imatge_alt=494;
				break;
				case 29:
					imatge_ample=332;
					imatge_alt=494;
				break;
				case 71:
					imatge_ample=494;
					imatge_alt=494;
				break;
				case 108:
					imatge_ample=728;
					imatge_alt=494;
				break;
			}
		}
		
		//Amagar imatge miniatura
		tag_img.hide();
		
		var tamany_inicial= {
			'width': miniatura_ample+'px',
			'height': miniatura_alt+'px'
		}
		
		// Aplicació del CSS, amgar i mostrar
		capa.css(tamany_inicial).hide();
		
		
		// AFEGIR ITEMS ALS ARRAYS CORRESPONENTS segons es mostren els items o no
		
		// si no existeix la categoria es crea 
		//(ho poso aquí perquè sinó ens dóna error de undefined en cas que no hi hagi items extra en una categoria)
		if(items_extra[categoria]==undefined){
			items_extra[categoria]=new Array(0);
		}
		if(items[categoria]==undefined){
				items[categoria]=new Array(0);
		}
		if(mostrar==1){
			// afegir l'item a l'array inicial
			items[0].push(new Item(id,categoria));
			//afegir l'item a l'array de la categoria
			items[categoria].push(new Item(id,categoria));
			$(this).attr("numordre",j);		// si es mostra sino no.
			j++;
		}else{
			//afegir l'item a l'array de les categories extres
			items_extra[categoria].push(new Item(id,categoria));
			$(this).attr("numordre",0);
		}

/*

EVENTS

*/
			
		/*
			HOVER
		
			ITEM ACTIU = la imatge gran està oberta = no fa res
			
			ITEM INACTIU = miniatura
			
			event	!= categoria			== categoria
			-----   --------------------	----------------
			over	mostrar la miniatura	canvi opacitat
			out 	amagar la miniatura		canvi opacitat
			
		*/
		
		capa.hover(
			function(){
				fadeMiniatura(capa,tag_img,1,categoria_actual==categoria);
				//console.log("I over")
			},
			function(){
				fadeMiniatura(capa,tag_img,0,categoria_actual==categoria);
				//console.log("I out")
			}
		); 	

		/*

		CLICK

			ITEM ACTIU = la imatge gran està oberta 

				activar l'ítem
				carregar la imatge
				mostrar la imatge
				recol·locació de la resta
				resize de l'element
				scroll de la pàgina

			ITEM INACTIU = la imatge gran està tancada

				amagar la imatge
				resize
				recolocació
				scroll

		*/
		
		capa.click(
			function(){
								
				// Si no hi ha cap animació actualment (per evitar errades de tamanys)
				if($("div:animated").length==0 && !carregant_imatge){
					
					// cas en què l'tem encara és miniatura
					if(capa.attr("actiu")==0){
						
			// ACTIVAR ítem
						capa.attr("actiu",1);
						carregant_imatge=true;	
						// amagar la miniatura
						tag_img.css({opacity:0,display:'none'});
						
						// afegir item a l'array d'items oberts
						items_oberts.push(id);
						capa.attr("ordre_items_oberts",items_oberts.length-1);
						//console.log(items_oberts)
					// CARREGAR LA IMATGE
					
						//Mostrar loader
						capa.append("<div id='loader'></div>").fadeIn();

						var img = new Image();
						$(img).load(function () {
										  
									  
					// AMAGAR la imatge
							$(this).hide();
							
					// REPLACE el loader per la imatge
							capa.children("#loader").fadeOut().replaceWith(this);

							if(mides_auto){
								imatge_ample=$(this).attr("width");
								imatge_alt=$(this).attr("height");
							}
					// MOSTRAR la imatge
							$(this).stop().css({width:miniatura_ample+'px',height:miniatura_alt+'px'}).animate({
									width:imatge_ample+'px',
									height: imatge_alt+'px',
									opacity:1
								}, temps_animacio_imatge, easing_resize );
						
					//REORDENACIO
							recoloca("obre",Number(capa.attr("numordre")),imatge_ample,imatge_alt);
							carregant_imatge=false;	
					// RESIZE de l'item
							capa.stop().animate({ 
									width: imatge_ample+'px',
									height: imatge_alt+'px'
								}, temps_animacio_imatge,function(){
							
					// SCROLL de la pàgina
								$.scrollTo({top:capa.position().top+$('contenidor').offset().top+'px'},temps_animacio_scroll, {offset:0});
									minima_y_mostrada=Math.min(capa.position().top,minima_y_mostrada);
								}
							);
							
							
					// CAS ERROR		
						}).error(function () {
						// en cas d'error de càrrega de la imatge( per exemple la imatge no existeix)
							capa.css("background-color","#F00");
							capa.children("#loader").replaceWith("ERROR");
						}).attr('src', foto).attr('id','foto');
						
					}else{
						
			// DESACTIVAR ítem
						capa.attr("actiu",0);
						// esborrar de l'array d'items oberts
						esborraOberts(capa.attr("ordre_items_oberts"));
		
						
						
					// RESIZE miniatura
						capa.stop().css({ 
							width:  miniatura_ample+'px',
							height: miniatura_alt+'px'
						});
						capa.children('#foto').remove();
						
						//  miniatura
						if(categoria == categoria_actual ){
							tag_img.stop().css({opacity:0,display:'inline'}).animate({opacity:1},temps_animacio_hover_item);						
						}
					
					// RECOLOCAR
						recoloca("tanca",Number(capa.attr("numordre")));
						
					// SCROLL de la pàgina	
						if(items_oberts.length>0){
							scrolla=$('#item'+items_oberts[items_oberts.length-1]);
						}else{
							scrolla={top:"0px"};
						}
						$.scrollTo(scrolla,temps_animacio_scroll, {offset:0});
					}
					// FINAL IF de dins el click		
				}
				// Evitar que el navegador mostri només la imatge en la mateixa pàgina
				return(false);
			}
		); // click	
		
		
		
	}); // each -]

/*

PROCÉS ALEATORI

*/	
	
	

	// ordenar l'array inicial aleatòriament
	ordenaAleatori(items[0]);
	
	// Afegir descripcio
	if(descripcions[0]!=null){
		descripcio_icon_visible=true;
		$("#descripcio").show();
		nextx=$("#descripcio").width()+marge;
		maxh=Math.max(maxh,$("#descripcio").height());
	}
	
	
	for(var k=0;k<items[0].length;k++){
		
		// COL·LOCACIO
		var capa=$("#item"+items[0][k].i);
		var tag_img=capa.children().children("#miniatura");
		
		// numero ordre
		capa.attr("numordre",k);
		
		// col·locar cada item un al costat de l'altre, si es passa d'ample, augmentar la linia segons la màxima alçada
		if( nextx + tag_img.attr("width") > $("#contenidor").width() ){
			nexty+=maxh+marge;
			nextx=0;
		}
		
		// Càlcul de la posició inicial de l'ítem
		var posicio_inicial= {
			'left': nextx +'px',
			'top': nexty+'px'
		}
		
		// Aplicació del CSS, amgar i mostrar
		capa.css(posicio_inicial).show();
		
		// Càlcul dels següents
		nextx+=tag_img.attr("width")+marge;
		maxh=Math.max(maxh,tag_img.attr("height"));
		
	}
	
	
	

/*

ACTUALITZAR ARRAYS	

*/		
	items_actual=items[0].concat([]);
	items_nocat[0]=new Array(0);
	for(var k=1;k<items.length;k++){
		items_nocat[k]=new Array();
		items_nocat[k]=excepteCat(k,items_actual);
	}
	actualitzaCat(0);
	items_actual=items[0].concat(items_nocat[0]);
	
/*

PROMSITE	

*/				
	$('#patrocini').show().css({left: 0 +"px",top: nexty+maxh+marge+margepromsite + "px"});

/*

Contacte	

*/				
	$('#contacte').show().css({left: 0 +"px",top: nexty+maxh+marge+margecontacte + "px"});	
	
/*

BOTONS

*/
	$("#mes_fotos").hover(
		function(){
			$("#mes_fotos .mini_on").hide();
			$("#mes_fotos .mini_off").show();
		},
		function(){
			$("#mes_fotos .mini_off").hide();
			$("#mes_fotos .mini_on").show();
		}
	);
	$("#mes_fotos").click(function(){
		   //if($("div:animated").length==0){
				categoria_extra=2;
				items_actual=items[categoria_actual].concat(items_extra[categoria_actual],items_nocat[categoria_actual]);
				recoloca("canvi");
				$("#mes_fotos").fadeOut(temps_animacio);
		   //}
	});
	
	$("#descripcio").hover(
		function(){
			$("#descripcio .mini_on").hide();
			$("#descripcio .mini_off").show();
		},
		function(){
			$("#descripcio .mini_off").hide();
			$("#descripcio .mini_on").show();
		}
	);
	$("#descripcio").click(function(){
		if(descripcio_oberta==0){
		   //if($("div:animated").length==0){
				// obrir la descripcio
				descripcio_oberta=1;
				// afegir text
				$("#descripcio").html("<div class='descripcio_text_mostrat'>"+descripcions[categoria_actual]+"</div>");
				var th=$('#cat'+categoria_actual+' .descripcio_text').height();
				recoloca("obre","d",amplada_descripcio, th + 60); // 60 pel css dels marges
				
			//}
		}else{
			// tancar la descripcio
			$("#descripcio").html(descripcio_icon);
			recoloca("tanca","d",$("#descripcio img").attr("width"),$("#descripcio img").attr("height"));
			descripcio_oberta=0;
		}
		   
	});
	
	$("div .cat_buto").click(function(){	

		//console.log("CAT_BUTO CLICK");
	
			if($("div:animated").length==0){
				var cat=Number($(this).attr("categoria"));		
				if(categoria_actual!=cat){
					actualitzaCat(cat);
					items_actual=items[cat].concat(items_nocat[cat]);
					recoloca("canvi");
					$("div .cat_buto").css({cursor: "default"});
				}
			}else{
				
			}
	});
	
	$("div .cat_buto").mouseover(function(){
		if($("div:animated").length==0){
			$("div .cat_buto").css({cursor: "pointer"});
		}
	});
	
	
	

/*

FUNCIONS

*/

function cartellet(text){
	$("#menu").append('<span id="cartellet">'+text+'</span>');
	
	$("#cartellet").hide().animate({opacity: 1},500).animate({opacity: 1},1000).animate({opacity: 0},500).remove();
}


// Actualiza l'ordre dels elements

function esborraOberts(ordre){
	
	items_oberts.splice(ordre,1);
	$('#item'+ordre).attr("ordre_items_oberts",0);
	
	for(var k=ordre;k<items_oberts.length;k++){
		$('#item'+items_oberts[k]).attr("ordre_items_oberts",k);
	}
	
}

/*
	\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ F A D E   M I N I A T U R A ////////////////////////////////////
						
			fades dels items quan aquests són miniatures depenent de la categoria i estat
			
			nextestat: hover = 1, out = 0
			categoria: diferent = false, igual = true
	*/
			
	function fadeMiniatura(item,miniatura,nextestat,categoriaigual){

		var disp  = nextestat==1?'inline':'none';
		var estat = nextestat==1?0:1;
		
		if(item.attr("actiu")==0){
			if(!categoriaigual){
				//mostrar o amagar amb FADE la miniatura
				miniatura.css({opacity:estat,display:disp}).stop().animate({opacity:nextestat},temps_animacio_hover_item);
				//console.log("FM: ! categoria")
			}else{
				// 50% opacitat perquè estem a la mateixa categoria
				//console.log("FM: = categoria")
				estat=nextestat==1?0.5:1;
				miniatura.stop().animate({opacity:estat},temps_animacio_hover_item);
			}
		}			
	}

/*
	\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ A C T U A L I T Z A   C A T ////////////////////////////////////
						
			actualitza el CSS de la categoria per al subratllat, també les variables de categoria
	*/

	function actualitzaCat(c){
		
		$('#cat'+categoria_actual).css('text-decoration','none');
		categoria_anterior=categoria_actual;
		categoria_actual=c;
		categoria_extra=3;
		$('#cat'+c).css('text-decoration','underline');
	}

	/*
	\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ E X C E P T E   C A T ////////////////////////////////////
						
			dona un array sense els elements d'una certa categoria a items[0]
	*/
	function excepteCat(c,a){
		var c=c;
		var classificat=new Array();
		classificat = a.sort(function percat(a,b){
			var x = a.cat;
			var y = b.cat;
			return ((x!=c && y==c) ? 1 : ((x==c && y!=c) ? -1 : 0));
		});
		return classificat.slice(items[c].length,classificat.length);
	}
	
	/*
	\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ O R D E N A   A L E A T O R I ////////////////////////////////////
						
			ordena un array de forma aleatòria i el retorna
	*/
	
	function ordenaAleatori(myarray){
		myarray.sort(function() {return 0.5 - Math.random()});
		return myarray;
	}
	
	/*
	\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ R E C O L O C A ////////////////////////////////////
						
			1 - inicialitzar prevw, prevy i calcular maxh
			
			2 - inicialitzar maxh (mirar als items anteriors i mateixa alçada i buscar el màxim height)
			
			3 - iterar per a la resta d'elements
			
			final de linia:
				x' = 0
				y' = maxh+marge
			
			següent:
				x' = prevx + prevw + marge
				y' = prevy
			
			4 - animar cada element
			
			
			de tornada cal calcular les noves posicions dels elements a partir del primer element que es tanca i coneixent maxh
						
			MODES:
			
			"obre" - quan una imatge s'obre
			"tanca" - quan una imatge es tanca
			"canvi" - reorganització per categories
	*/
	
	function recoloca(mode,numeroitem,ample_offset,alt_offset){
		
			var nextx=0,nexty=0;
			var llista=new Array();
			var llista_previa=new Array();
			var final=items_actual.length;
			var contenidorw=$("#contenidor").width();
			var posicio_screen_y=130;
			var numextra=0;
			
			//console.log(categoria_extra);
			
			
			if(mode=="canvi"){
				
				if(categoria_extra!=2){
				
					items_oberts=[];
					
					// [ 0 ] 	Fem petits tots els elements oberts
					
					for(var j=0;j<items_actual.length;j++){
						if($("#item"+items_actual[j].i).attr("actiu")==1){
							// DESACTIVAR ítem
							$("#item"+items_actual[j].i).attr("actiu",0);										

							// RESIZE miniatura
							$("#item"+items_actual[j].i).css({ 
								width:  $("#item"+items_actual[j].i).children().children("#miniatura").attr("width")+'px',
								height: $("#item"+items_actual[j].i).children().children("#miniatura").attr("height")+'px'
							});
							$("#item"+items_actual[j].i).children('#foto').remove();			
						}
					}
					
					// reset de la descripcio
					
						
						$("#descripcio").html(descripcio_icon);
						$("#descripcio").css({
							width:  $("#descripcio img").attr("width"),
							height: $("#descripcio img").attr("height")
						});
						descripcio_oberta=0;
						
					if(descripcions[categoria_actual]!=null){	
						$("#descripcio").show();
						descripcio_icon_visible=true;
					}else{
						$("#descripcio").hide();
						descripcio_icon_visible=false;
					}
				
				}
				// amagar extres si n'hi ha
				
				if(categoria_extra==3){
					
					for(var j=0;j<items_extra[categoria_anterior].length;j++){

						$("#item"+items_extra[categoria_anterior][j].i).hide();
						
						// fer-los petits
						if($("#item"+items_extra[categoria_anterior][j].i).attr("actiu")==1){
							// DESACTIVAR ítem
							$("#item"+items_extra[categoria_anterior][j].i).attr("actiu",0);										

							// RESIZE miniatura
							$("#item"+items_extra[categoria_anterior][j].i).css({ 
								width:  $("#item"+items_extra[categoria_anterior][j].i).children().children("#miniatura").attr("width")+'px',
								height: $("#item"+items_extra[categoria_anterior][j].i).children().children("#miniatura").attr("height")+'px'
							});
							$("#item"+items_extra[categoria_anterior][j].i).children('#foto').remove();			
						}
					
					}

					
					// Reset categoria extra
					categoria_extra=0;
									
				}

				
				// Definir si hi ha o no categoria extra
				if(items_extra[categoria_actual].length>0 && categoria_extra!=2){
					categoria_extra=1;
				}else{
					$("#mes_fotos").hide();
				}
				
				// variables extra				
				numextra = 0;
				numeroitem = 0;
				var prevx = -marge;
				
			}else{
				numextra=1;
				var prevx = 0;
			}
			
			// [ 1 ]	Inicialitzar els prev amb els del primer element, és a dir el clicat
			
			var prevw = 0;
			var prevy = 0;
			var maxh =  0;
			
			if(descripcio_icon_visible){	
				prevx=0;
				prevw=$("#descripcio").width();
				maxh=$("#descripcio").height();
			}

				
				
			if(numeroitem=="d"){
				prevw=ample_offset;
				prevx=0;
				maxh=alt_offset;
				numeroitem=-1;
				$("#descripcio").animate({ 
					width: ample_offset +'px',
					height: alt_offset +'px'
				},temps_animacio);
			}
			
				
			
			// [ 2 ]	Recerca màxim height: Tallem la llista perquè només volem saber els del principi
			
		
			
			llista_previa=items_actual.slice(0,numeroitem+1);
			
			$.each(llista_previa, function(i){
				if($("#item"+this.i).position().top == prevy){
					maxh=Math.max($("#item"+this.i).height(),maxh);
					
				}
			});
			llista_previa=[];


			// [ 3 ]	Iteració amb la nova llista, els elments després del clicat
			
			// 		tallem la llista a partir del clicat, si és canvi de categoria són tots
			
			llista = items_actual;
			
			// Elements anteriors al boto de més fotos
			if(categoria_extra==1 && mode=="canvi"){
				abans_clickmes=items[categoria_actual].length-numeroitem-numextra;
			}
			
			
			i_hide=0;
			
			// 	****	EACH	****
			
			$.each(llista, function(i,n) {


				// 		Canviar el número d'ordre
				if(mode=="canvi"){
					$("#item"+this.i).attr("numordre",i);
					$("#item"+this.i).show();
					animacio_item=animacio_moviment;
					easing_item=easing_moviment;
				}else{
					animacio_item=animacio_resize;
					easing_item=easing_resize;
				}
				numeroitem_anterior=$("#item"+this.i).attr("numordre");

				
				
				// [ x',y' ]	Càlcul de la nova x i y
				nextx=prevx+prevw+marge;
				nexty=prevy;

				
				
				// [ 5 ] ITEMS EXTRA
	
				// Activar / Desactivar
				// col·locar-lo després de l'últim element
				// si hi ha ítems extra
				
				if(categoria_extra==1 && i==abans_clickmes) {
					
					$("#mes_fotos").fadeIn(temps_animacio_hover_item);
					
					selecciona_anim(animacio_item,$("#mes_fotos"),nextx,nexty,i,easing_item);
					prevw=$("#mes_fotos").width();
					prevx=nextx;
				
					// [ x',y' ]	Càlcul de la nova x
					nextx=prevx+prevw+marge;
					
				}
		
				// fi items extra
				
				if(i==numeroitem && mode=="obre"){
					thisw = ample_offset;
					thish = alt_offset;
					
				}else if(i==numeroitem && mode=="tanca"){
					thisw = $("#item"+this.i).children().children("#miniatura").attr("width");
					thish = $("#item"+this.i).children().children("#miniatura").attr("height");		
				}
				else{
					thisw=$("#item"+this.i).width();
					thish=$("#item"+this.i).height();
				}
				
				// 		Final de linia, cal canviar les posicions calculades per les noves
				if(nextx+thisw>contenidorw){
					// FINAL DE LINIA
					nexty+=maxh+marge;
					nextx=0;
					posicio_screen_y=maxh;
					maxh=0;
				}
				
				// 		Imatges que no siguin de la categoria, salt de linia
				if(numeroitem_anterior==items[categoria_actual].length && categoria_extra!=2){
					nextx=0;
					nexty+=maxh+marge_categories;
				}
				
				// 		Recàlcul del max, prevx, prevy i prevw per a després
				maxh=Math.max(maxh,thish);		
				prevx=nextx;
				prevy=nexty;
				prevw=thisw;
				
				// animacio y i després x
				
				// Retard:
				delay=(numeroitem_anterior>items[categoria_actual].length)?items[categoria_actual].length:numeroitem_anterior;
				
				if(i==abans_clickmes-1 && categoria_extra==2 && mode=="canvi"){
					mescentrex=prevx;
					mescentrey=prevy;
				}

				
				
				
				// FER SORTIR ELS ITEMS DEL SIMBOL +
				
				if( i>=abans_clickmes && i<items_extra[categoria_actual].length+abans_clickmes && categoria_extra==2 && mode=="canvi"){
				
						$("#item"+this.i).css(
						{
							left:  mescentrex+"px",
							top: mescentrey+"px"
						}
						);
						
						animacio_item="asac";						
				}
				
				
				if( i>=items_extra[categoria_actual].length+abans_clickmes && categoria_extra==2 && $("#item"+this.i).attr("mostrar")==1){
					//$("#item"+this.i).animate({opacity:1},10*i_hide).animate({opacity:0},temps_animacio,function(){$(this).hide();});
					$("#item"+this.i).hide();
					$("#item"+this.i).attr("mostrar",0);
					i_hide++;
				}else{
					$("#item"+this.i).attr("mostrar",1);
					selecciona_anim(animacio_item,$("#item"+this.i),nextx,nexty,delay*10,easing_item);
				}
				// 		Actualitzar miniatures
				
				if( $("#item"+this.i).attr("actiu")==0 ){
						
					if(categoria_extra==2){
						temps_fadeIn=0;
					}else{
						temps_fadeIn=temps_animacio*1.2;
					}					
					if(this.cat == categoria_actual){					
						// mostrar la miniatura
						$("#item"+this.i).children().children("#miniatura").animate({opacity:1},temps_fadeIn).fadeIn(temps_animacio);
					}else{
						// Amagar la miniatura
						$("#item"+this.i).children().children("#miniatura").animate({opacity:1},delay*5).fadeOut(temps_animacio);
					}
				}
			
			});  // each 
			
			//	Col·locar PROMSITE	
			//tipus_animacio,el,x,y,i,tipus_easing
			if($('#patrocini').offset().top == $('#contenidor').offset().top+nexty+maxh+marge+margepromsite){
				selecciona_anim("sense",$('#patrocini'),0,nexty+maxh+marge+margepromsite,0,"linear",temps_promsite);
			}else{
				selecciona_anim(animacio_promsite,$('#patrocini'),0,nexty+maxh+marge+margepromsite,0,"linear",temps_promsite);
			}
			
			//	Col·locar Contacte	
	
			if($('#contacte').offset().top == $('#contenidor').offset().top+nexty+maxh+marge+margecontacte){
				selecciona_anim("sense",$('#contacte'),0,nexty+maxh+marge+margecontacte,0,"linear",temps_promsite);
			}else{
				selecciona_anim(animacio_promsite,$('#contacte'),0,nexty+maxh+marge+margecontacte,0,"linear",temps_promsite);
			}
		
			
	} // coloca
	
/*
	\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ A N I M A C I O N S ////////////////////////////////////
						
						
						animacio,element,posx,posy,retard [ms],easing
*/
	function selecciona_anim(tipus_animacio,el,x,y,i,tipus_easing,t){
			//console.log("SEL_ANI "+tipus_animacio+" "+el+" "+tipus_easing);
			switch(tipus_animacio){
				case 'rectangular':
					anim_rect(el,x,y,i,tipus_easing);
				break;
				case 'asac':
					anim_asac(el,x,y,i,tipus_easing);
				break;
				case 'rectangular2':
					anim_rect2(el,x,y,i,tipus_easing);
				break;
				case 'fade':					
					anim_fade(el,x,y,i,t);
				break;
				case 'sense':
					el.css({left: x +"px",top: y+"px"});
				break;
				case 'circular':
					anim_circular(el,x,y,i,tipus_easing);
				break;
			}		
	}
	function anim_rect(el,x,y,i,e){
	
		var yactual= el.offset().top  - $('#contenidor').offset().top ;
		var xactual= el.offset().left - $('#contenidor').offset().left ;
		
		if( y != yactual && x != xactual){
		
			//console.log("X!Y! "+el.attr("id"));
		
			el.animate({opacity:1},i).animate({ 
				left: x +"px"
			}, temps_animacio/2,e).animate({ 
				top:  y+"px"
			}, temps_animacio/2,e);
		
		}else if( y== yactual && x == xactual ){
		
			//console.log("X=Y= "+el.attr("id"));
		
		}else{
			if( x == xactual){
				
				//console.log("X=Y! "+el.attr("id"));
				
				el.animate({opacity:1},i).animate({ 
					top:  y+"px"
				}, temps_animacio,e);
			
			}else{
			
				//console.log("X!Y= "+el.attr("id"));
			
				el.animate({opacity:1},i).animate({ 
					left: x +"px"
				}, temps_animacio,e);
			
			}
		}
	
	
		
	}
	function anim_circular(el,x,y,i,e){
		
		var xmax=$('#contenidor').width();
		
		var yactual= el.offset().top  - $('#contenidor').offset().top ;
		var xactual= el.offset().left - $('#contenidor').offset().left ;
		
		if( y != yactual ){
		
			if(y>(el.offset().top-$('#contenidor').offset().top)){
				x1=xmax;
				x2=0;
			}else if( y<(el.offset().top-$('#contenidor').offset().top) ){
				x1=0;
				x2=xmax;
			}
		
			el.animate({opacity:1},i).animate({ 
				left: x1 +"px"
			}, temps_animacio,e).animate({ 
				top: y +"px"
			}, temps_animacio/2,e).animate({ 
				left: x +"px"
			}, temps_animacio/2,e);
			
		}else{
		
			if( x != xactual ){
			
				el.animate({opacity:1},i).animate({ 
					left: x +"px"
				}, temps_animacio,e);
				
			}else{
				// no es mou
			}
		}
	}
	function anim_asac(el,x,y,i,e){
		el.animate({opacity:1},i).animate({ 
			left: x +"px",
			top:  y+"px"
		}, temps_animacio*1.2,e);
	}	
	function anim_rect2(el,x,y,i,e){

		var yactual= el.offset().top  - $('#contenidor').offset().top ;
		var xactual= el.offset().left - $('#contenidor').offset().left ;
		
		if( y != yactual && x != xactual){
		
			//console.log("X!Y! "+el.attr("id"));
		
			if( y > yactual){
				el.animate({opacity:1},i).animate({ 
					top:  y+"px"
				 }, temps_animacio,e).animate({ 
					left: x +"px"
				}, temps_animacio/2,e);
			}else{
				el.animate({opacity:1},i).animate({ 
					left: x +"px"
				 }, temps_animacio,e).animate({ 
					top:  y+"px"
				}, temps_animacio/2,e);
			}
		
		}else if( y== yactual && x == xactual ){
		
			//console.log("X=Y= "+el.attr("id"));
		
		}else{
			if( x == xactual){
				
				//console.log("X=Y! "+el.attr("id"));
				
				el.animate({opacity:1},i).animate({ 
					top:  y+"px"
				}, temps_animacio,e);
			
			}else{
			
				//console.log("X!Y= "+el.attr("id"));
			
				el.animate({opacity:1},i).animate({ 
					left: x +"px"
				}, temps_animacio,e);
			
			}
		}
	
	
		
	}
	function anim_fade(el,x,y,i,t){
		
		if(t==null){
		t=temps_animacio;
		}
		
		var yactual= el.offset().top  - $('#contenidor').offset().top ;
		var xactual= el.offset().left - $('#contenidor').offset().left ;
	
		if( y != yactual && x != xactual){
		
			//console.log("X!Y! "+el.attr("id"));
		
			el.stop().animate({opacity:0},t+i).animate({ 
				top:  y+"px",
				left: x +"px",
				opacity:0
			},0).animate({opacity:1},t,"linear");
			
		}else if( y== yactual && x == xactual ){
		
			//console.log("X=Y= "+el.attr("id"));
		
		}else{
			if( x == xactual){
				
				//console.log("X=Y! "+el.attr("id"));
				
				el.stop().animate({opacity:0},t/2+i).animate({ 
					top:  y+"px",
					opacity:0
				},0).animate({opacity:1},t,"linear");
			
			}else{
			
				//console.log("X!Y= "+el.attr("id"));
			
				el.stop().animate({opacity:0},t+i).animate({ 
					left: x +"px",
					opacity:0
				},0).animate({opacity:1},t,"linear");
			
			}
		}
	
		
	}

	
	// Amagar el carregador
	$('#carregador_tot').fadeOut(temps_animacio);
	$('#menu').fadeIn(temps_animacio);
	
	
}); // document ready
// by Martí Morta Garriga | www.vintiun.net/marti