////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//Preload Images
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
if(document.images){
  var image_array = new Array();
  var path = 'img/';
  image_array[0] = path + "preloader.gif";
  image_array[1] = path + "topo_over2.png";
  image_array[2] = path + "topo_over3.png";
  image_array[3] = path + "topo_over4.png";
  image_array[4] = path + "topo_over5.png";
  image_array[5] = path + "topo_over6.png";
  image_array[6] = path + "topo_over7.png";
  image_array[7] = path + "topo_over8.png";
  image_array[8] = path + "topo_over9.png";
  image_array[9] = path + "topo_over10.png";
  image_array[10] = path + "topo_over0.png";
  image_array[11] = path + "topo_over1.png";
  var preload_image = new Array ();
  for(var i=0; i<image_array.length; i++){
	preload_image[i]= new Image();
	preload_image[i].src = image_array[i];
  }
}
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//Init vars
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
var posX = new Array();
var posY = new Array();
var itemWidth;
var separacioMax = 80;
//amplada dels items
var itemwidth;
//quantitat total d'items al ppi
var totalItems;
//amplada dels items
var itemheight;
//Altura mínima dels quadrats
var yInicial;
//Arrays de posició inicial y final
var posInicialX = new Array();
var posInicialY = new Array();
//separació entre línies
var lineH;
var separacio;
var leftOffset;
var numLiniesTotal;
var section;
var selectorName;
var selectorValue;
var totalImages;
var imageCount;
var loaderOrder;
var fotoAspectRatio;
var divAspectRatio;
var selected_project;
var map_initialized = false;;
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//Items position Array
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
function positions(group){
	var p = $("#menuBox");
	var position = p.offset();
	leftOffset = position.left;
	var selectorValue;
	if(group == "selected"){
		selectorName = "select"
		selectorValue = "select"
	}else{
		selectorName = "tipus"
		selectorValue = group
	}
	if(group!="all")
		totalItems = $(".item["+selectorName+"='"+selectorValue+"']").length;
	else
		totalItems = $(".item").length;
		
	var linia1 = Math.floor(($("#menuBox").width()+separacioMax) / (separacioMax+itemwidth));
	var linia2 = linia1 - 1;
	var grupsSencers = Math.floor(totalItems / (linia1+linia2));
	var restoSencers = totalItems - grupsSencers*(linia1+linia2)
	var liniesAfegides;
	if(restoSencers>linia1){
		liniesAfegides = 2;
	}else{
		liniesAfegides = 1;
	}
	if(restoSencers==0){
		liniesAfegides = 0;
	}
	numLiniesTotal = grupsSencers*2 + liniesAfegides;
	var separacio = ($("#menuBox").width() - (linia1*itemwidth)) / (linia1-1)
	$("#info").text($("#menuBox").width())
	var liniaLlarga = true;
	count = 0;
	for(i=0; i<numLiniesTotal; i++){
		if(liniaLlarga){
			for(j=0; j<linia1; j++){
				posX[count] = j*(itemwidth+separacio)+leftOffset
				posY[count] = yInicial+i*lineH
				count++
			}
		}else{
			for(j=0; j<linia2; j++){
				posX[count] = j*(itemwidth+separacio)+leftOffset+(itemwidth+separacio/2)-itemwidth/2
				posY[count] = yInicial+i*lineH
				count++
			}
		}
		liniaLlarga = !liniaLlarga
	}
}
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//Start topos
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
function initAll(){
	$("#perc").hide();
	section = ""
	$("#topoPreloader").css({ 'top': ($(window).height()-$("#topoPreloader").height())/2, 'left':  ($(window).width()-$("#topoPreloader").width())/2 });
	toposPosition(section, false);
	$("#menuContainer").animate({ 'top': "0" } , 500);
	$("#footerContainer").show();
	$("#footerContainer").animate({ 'top' : $(window).height() - $("#footerContainer").height() - 25 }, 500, function() {
		fotoHome();
		$("#fotoHome").fadeIn();
		$(window).bind('resize',fotoHome);
	});
	$("#fotoHome").fadeIn();
	$(window).unbind('resize');
	$(window).bind('resize', function(event) {
  		toposPosition(section, true);
		$("#topoPreloader").css({ 'top': ($(window).height()-$("#topoPreloader").height())/2, 'left':  ($(window).width()-$("#topoPreloader").width())/2 });
		$("#fotoHome").css({ 'top': 210, 'left': leftOffset, 'width': $("#menuBox").width(), 'height': $(window).height() -200 -25 - $("#footerContainer").height()-20 });
	});
	$(window).bind('resize',footerPosition);
}
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//Foto Home
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
function fotoHome(){
	$(window).unbind('resize',footerPosition);
	$("#fotoHome").css({ 'top': 210, 'left': leftOffset, 'width': $("#menuBox").width(), 'height': $(window).height() -200 -25 - $("#footerContainer").height()-20 });
	fotoAspectRatio = $("#fotoHome #cont img").height()/$("#fotoHome #cont img").width();
	divAspectRatio = $("#fotoHome").height()/$("#fotoHome").width();
	if(fotoAspectRatio > divAspectRatio){
		$("#fotoHome #cont img").width($("#fotoHome").width());
		$("#fotoHome #cont img").height($("#fotoHome").width()*fotoAspectRatio);
		$("#fotoHome #cont").css({ 'top': 0-($("#fotoHome #cont img").height() - $("#fotoHome").height())/2 });
	}else{
		$("#fotoHome #cont img").width($("#fotoHome").height()/fotoAspectRatio);
		$("#fotoHome #cont img").height($("#fotoHome").height());
		$("#fotoHome #cont").css({ 'left': 0-($("#fotoHome #cont img").width()-$("#fotoHome").width())/2 });
	}
	$("#footerContainer").css({ top: $(window).height() -25-$("#footerContainer").height() })
}
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//Topos Position
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
function toposPosition(active, resizing){
	positions(active);
	section = active
	var toposH = numLiniesTotal * lineH + $("#footerContainer").height() + 75;
	//supercontainer Height & footer position
	if(toposH < $(window).height()-200-75){
		$("#superContainer").height($(window).height()-200);
	}else{
		$("#superContainer").height(toposH);
	}
	//footerPosition();
	//topos
	if(active ==""){
		if(!resizing){
			$(".item").each(function(index) {				 
				var initCase =Math.floor(Math.random()*3);
				if(initCase == 0){ $(this).animate({ top: Math.random()*$(window).height()+100, left:  $(window).width()+100 , queue: false }, 1000); }
				if(initCase == 1){ $(this).animate({ top: $("#superContainer").height()+100, left:  Math.random()*$(window).width()+100 , queue: false }, 1000); }
				if(initCase == 2){ $(this).animate({ top: Math.random()*$(window).height()+100, left: -itemwidth-100, queue: false }, 1000); }
			});
		}else{
			$(".item").each(function(index) {				 
				var initCase =Math.floor(Math.random()*3);
				if(initCase == 0){ $(this).css({ top: Math.random()*$(window).height()+100, left:  $(window).width()+100  }); }
				if(initCase == 1){ $(this).css({ top: $("#superContainer").height()+100, left:  Math.random()*$(window).width()+100 }); }
				if(initCase == 2){ $(this).css({ top: Math.random()*$(window).height()+100, left: -itemwidth-100 }); }
			});
		}
	}else{
		footerPosition();
		if(active == "selected"){
			selectorName = "select"
			selectorValue = "select"
		}else{
			selectorName = "tipus"
			selectorValue = active
		}
		
		if(active != "all"){
			$(".item["+selectorName+"='"+selectorValue+"']").each(function(index) {
				$(this).stop()					 
				$(this).animate({ top: posY[index], left: posX[index], queue: false }, { duration: 1000, easing: "easeOutCirc"} );
			});
			if(!resizing){
				$(".item["+selectorName+"!='"+selectorValue+"']").each(function(index) {				 
					var initCase =Math.floor(Math.random()*3);
					if(initCase == 0){ $(this).animate({ top: Math.random()*$(window).height()+100, left:  $(window).width()+100 , queue: false }, 1000); }
					if(initCase == 1){ $(this).animate({ top: $("#superContainer").height()+100, left:  Math.random()*$(window).width()+100 , queue: false }, 1000); }
					if(initCase == 2){ $(this).animate({ top: Math.random()*$(window).height()+100, left: -itemwidth-100, queue: false }, 1000);}
				});
			}else{
				$(".item["+selectorName+"!='"+selectorValue+"']").each(function(index) {				 
					var initCase =Math.floor(Math.random()*3);
					if(initCase == 0){ $(this).css({ top: Math.random()*$(window).height()+100, left:  $(window).width()+100 });}
					if(initCase == 1){ $(this).css({ top: $("#superContainer").height()+100, left:  Math.random()*$(window).width()+100 });}
					if(initCase == 2){ $(this).css({ top: Math.random()*$(window).height()+100, left: -itemwidth-100}); }
				});
			}
		}else{
			$(".item").each(function(index) {
				$(this).stop()					 
				$(this).animate({ top: posY[index], left: posX[index], queue: false }, { duration: 1000, easing: "easeOutCirc"} );
			});
		}
	}
}
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//Footer Position
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
function footerPosition(){
	var containerH = $("#superContainer").height() - $("#footerContainer").height() + 225;
	if( containerH > $(window).height()){
		$("#footerContainer").stop();
		$("#footerContainer").animate({ top: containerH },600);
	}else{
		$("#footerContainer").stop();
		$("#footerContainer").animate({ 'top' : $(window).height() - $("#footerContainer").height() - 25 },600);
	}
}
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//About actions
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
function aboutSection(){
	$(".col").width(($("#about").width()-60)/3);
	for(i=0; i<3; i++){
		$(".col:eq("+i+")").css({ 'left' :  ($(".col").width() + 30)*i });
	}
	colheight = 0;
	for(i=0; i<3; i++){
		if($(".col:eq("+i+")").height() > colheight){
			colheight = $(".col:eq("+i+")").height();
		}
	}
	$("#footerContainer").stop();
	$("#footerContainer").animate({ 'top' : 280 + $("#footerContainer").height() + colheight + 100  },200);
}
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//Project Text Section
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
function project_text_section(){
	if($(window).width()<=1600)
		$("#texter").width($(window).width()-80);
	else
		$("#texter").width(1600-80);
	
	$("#texter").css({"min-width":$("#title_project h1 a").width()+'px'});
	$(".col_project").width(($("#texter").width()-60)/3);
	$(".col_project:eq(1)").css({ 'left' :  '30px' });
	$(".col_project:eq(2)").css({'width': ($("#texter").width()-60)/3-15, 'left' : '60px','padding-right' :  '15px' });
}
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//Rotate home images
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
function rotate_home_images(){
	//$("#fotoHome").fadeOut();
	
	if($('#fotoHome').css('display')!='none'){
		var index=$('.selected_home_image').val();
		var size=$('.home_image').size();
		
		if(Math.round(index)+1<=size-1)
			index=Math.round(index)+1;
		else
			index=0;
		
		$('.selected_home_image').val(index);
		$('<img />')
			.attr('src', 'img/info/'+$(".home_image:eq("+index+")").val())
			.load(function(){
				$("#fotoHome #cont").html($(this));
				//fotoHome();
				//$("#fotoHome").fadeIn();
				$("#fotoHome").css({ 'top': 210, 'left': leftOffset, 'width': $("#menuBox").width(), 'height': $(window).height() -200 -25 - $("#footerContainer").height()-20 });
				fotoAspectRatio = $("#fotoHome #cont img").height()/$("#fotoHome #cont img").width();
				divAspectRatio = $("#fotoHome").height()/$("#fotoHome").width();
				if(fotoAspectRatio > divAspectRatio){
					$("#fotoHome #cont img").width($("#fotoHome").width());
					$("#fotoHome #cont img").height($("#fotoHome").width()*fotoAspectRatio);
					$("#fotoHome #cont").css({ 'top': 0-($("#fotoHome #cont img").height() - $("#fotoHome").height())/2 });
				}else{
					$("#fotoHome #cont img").width($("#fotoHome").height()/fotoAspectRatio);
					$("#fotoHome #cont img").height($("#fotoHome").height());
					$("#fotoHome #cont").css({ 'left': 0-($("#fotoHome #cont img").width()-$("#fotoHome").width())/2 });
				}
			});
			
	}
}
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//Menu Actions
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
function menuOut(){
	$("#menuContainer").stop();
	$("#menuContainer").animate({ top: -200 }, 1000);
}
function menuIn(){
	$("#menuContainer").stop();
	$("#menuContainer").animate({ top: 0 }, 1000);
}
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//Explain actions
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
function explainUnfold(){
	$("#explain").stop();
	$("#explainClose").stop();
	
	project_text_section();	
	$("#explainClose").animate({ 'top' : $(window).height() },600 );
	$("#explain").animate({ 'top' : -40 },1000, function() {  
		$("#explainClose").show(); 
		$("#texter").show();
			$("#texter").css({'height' : $(window).height()-120,'max-height' : $(window).height()-120  } );
		
		$('#scroll_project').jScrollPane({showArrows:false});
	});
	$("#explainContainer").css({ 'height' : $(window).height() + 30 });
	
}
function explainFold(){
	$("#explain").stop();
	$("#explain").animate({ 'top' : $(window).height()-40 },600, function() {  
		$("#explainContainer").css({ 'height' : 30 });
	});
}
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//Project Navi
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
function positionNavi(){
	$("#naviProjects").stop();
	$("#naviProjects").animate( {'top': ($(window).height()/2 - $("#naviProjects").height()/2) } , 600);	
}
function updateArrows(){
	if(totalImages <= 1){
		$("#nextbut").animate({ right: -100}, { queue:false, duration:600 });
		$("#prevbut").animate({ left:  -100}, { queue:false, duration:600 });
	}else{
		if(imageCount <= 1){
			$("#nextbut").animate({ right: 20}, { queue:false, duration:600 });
			$("#prevbut").animate({ left:  -100}, { queue:false, duration:600 });
		}
		if(imageCount > 1 && imageCount < totalImages){
			$("#nextbut").animate({ right: 20}, { queue:false, duration:600 });
			$("#prevbut").animate({ left:  20}, { queue:false, duration:600 });
		}
		if(imageCount >= totalImages){
			$("#nextbut").animate({ right: -100}, { queue:false, duration:600 });
			$("#prevbut").animate({ left:  20}, { queue:false, duration:600 });
		}
	}
}
function loadProject(projectNo){
	$("#supersize").fadeOut();
	$("#topoPreloader").show();
	//$("#supersize").html("");
	$("#preLoader").html('<img src="img/projects/'+selected_project+'/'+$(".project_image:eq("+(projectNo-1)+")","#"+selected_project).val()+'" />');
	$('#preLoader img').load(function() {
		$("#topoPreloader").hide();
		$("#supersize").html('<img src="img/projects/'+selected_project+'/'+$(".project_image:eq("+(projectNo-1)+")","#"+selected_project).val()+'" />');
		$("#supersize").supersized();
		$("#supersize").fadeIn();
		//Start loading images
		for(i=1;i<totalImages;i++){
			$('<img />').attr('src', 'img/projects/'+selected_project+'/'+$(".project_image:eq("+(i)+")","#"+selected_project).val()).load();
		}
	})
}

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//Google MAPS
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
function initialize_map() {
  geocoder = new google.maps.Geocoder();
  var latlng = new google.maps.LatLng(41.38278592826508,2.1752125024795532);
  var myOptions = {
	zoom: 16,
	center: latlng,
	mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  var marker = new google.maps.Marker({
		position: latlng, 
		map: map, 
		title:"Cero-Design Studio, Barcelona"
	});
}

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//On Document Ready
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
$(function(){
	$.fn.supersized.options = {  
		startwidth: 800,  
		startheight: 450,
		vertical_center: 1,
		slideshow: 0,
		navigation: 0,
		transition: 1, //0-None, 1-Fade, 2-slide top, 3-slide right, 4-slide bottom, 5-slide left
		pause_hover: 0,
		slide_counter: 0,
		slide_captions: 0,
		slide_interval: 3000  
	};
		   
	//timer = setInterval("rotate_home_images()", 3000);
	////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
	//Estat inicial
	////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
	function initialState(){
		positions("selected");
		//posicio footer
		$("#footerContainer").css({ 'top' : $(window).height() + $("#footerContainer").height() });
		//posiciona els topos fora la pantalla
		$("#superContainer").css({ 'height' : $(window).height()-200});
		$(".item").each(function(index) {				 
			var initCase =Math.floor(Math.random()*3);
			if(initCase == 0){ $(this).css({ top: Math.random()*$(window).height()+100, left:  $(window).width()+100 });}
			if(initCase == 1){ $(this).css({ top: $("#superContainer").height()+100, left:  Math.random()*$(window).width()+100 });}
			if(initCase == 2){ $(this).css({ top: Math.random()*$(window).height()+100, left: -itemwidth-100}); }
		});
	}
	
	$("#topoPreloader").css({ 'top': ($(window).height()-$("#topoPreloader").height())/2, 'left':  ($(window).width()-$("#topoPreloader").width())/2 });
	$("#toporetorn").html('<img src="img/topos_png/'+ Math.floor( Math.random() * 152 ) +'.png"  />');
	$("#topoCorp1").html('<img src="img/topo.png"  />');
	$("#topoCorp2").html('<img src="img/topos_png/'+ Math.floor( Math.random() * 152 ) +'.png" width="80" />');
	$("#topoCorp2").css({ top: 20 + Math.floor(Math.random()*40), left: 40 + Math.floor(Math.random()*400) });
	$(".separador").append("---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------");
	//amplada dels items
	itemwidth = $(".item:eq(0)").width();
	//quantitat total d'items al ppi
	totalItems = $(".item").length;
	//amplada dels items
	itemheight = $(".item:eq(0)").height();
	//Altura mínima dels quadrats
	yInicial = 0;
	//separació entre línies
	lineH = 170;
	//fes topos draggables
	$(".item").draggable({ containment: "#superContainer", scroll: false, stack: ".item" });
	//amaga tot
	$(".item").hide();
	//fes topo del header draggable
	$(".topocorp").draggable();
	QueryLoader.init();
	$(window).bind('resize', initialState);
	
	var rand_image = Math.floor( Math.random() * $(".home_image").size() );
	$("#fotoHome #cont").html('<img src="img/info/'+$(".home_image:eq("+rand_image+")").val()+'"  />');
	$('#fotoHome #cont img').load(function() {
		$("#topoPreloader").hide();
		//fotoHome();
		//initAll();
	})
	initialState();
	//mantain project navigator
	positionNavi();
	////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
	//Menu Hovers
	////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
	$(".menuitem").hover(function () {
			if($(this).attr("attr")!='all'){
				if($(this).attr("attr")=='selected'){
					$(".item[select!='select'] .imatge").hide();
					$(".item[select!='select'] .imatgeover").show();
				}else{
					$(".item[tipus!='"+$(this).attr("attr")+"'] .imatge").hide();
					$(".item[tipus!='"+$(this).attr("attr")+"'] .imatgeover").show();
				}
				$(".menuitem[attr!='"+$(this).attr("attr")+"']").css({ color: 'red' });
			}
		}, 
		function () {
			$(".item[tipus!='"+$(this).attr("attr")+"'] .imatge").show();
			$(".item[tipus!='"+$(this).attr("attr")+"'] .imatgeover").hide();
	});
	$(".menuitem").hover(function () {
			$(".menuitem[attr!='"+$(this).attr("attr")+"']").css({ color: 'gray' });
		}, 
		function () {
			$(".menuitem").css({ color: 'black' });
	});
	$(".imatge").hover(function () {
			$("img:eq(0)",$(this)).hide();
			$("img:eq(1)",$(this)).show();
		}, 
		function () {
			$("img:eq(0)",$(this)).show();
			$("img:eq(1)",$(this)).hide();
	});
	////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
	//Menu Clicks
	////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
	$(".menuitem").click(function () {
								   
		$("#toporetorn").show();
		$(window).unbind('resize',fotoHome);
		$("#fotoHome").fadeOut();
		$(".item").show();
		$("#footerContainer").show();
		$("#naviProjects").hide();
		$("#menuContainer").unbind('mouseleave');
		if($(this).attr("attr") == ""){
			$(window).bind('resize', aboutSection);
			$(window).unbind('resize', footerPosition);
			$("#about").show();
			aboutSection();
			$("body").animate({ backgroundColor: "black"}, 1000);
			$("#butonera").animate({ 'color': "white" }, 1000);
			$("#address").animate({ 'color': "white" }, 1000);
			$("#footer").animate({ 'color': "white" }, 1000);
			$("#menuContainer").animate({ backgroundColor: "black"}, 1000);
			$(".footerItem").animate({ 'color': 'white' }, 1000);
			$(".menuitem").hover(function () {
				$(".menuitem[attr!='"+$(this).attr("attr")+"']").css({ color: 'gray' });
			}, 
			function () {
					$(".menuitem").css({ color: 'white' });
			});
			$(".footerItem").hover(function () {
					$(".footerItem[attr!='"+$(this).attr("attr")+"']").css({ color: 'gray' });
			}, 
			function () {
					$(".footerItem").css({ color: 'white' });
			});
			$(this).css({ color: 'white' });
		}else{
			$(window).unbind('resize', aboutSection);
			$(window).bind('resize', footerPosition);
			$("#about").fadeOut();
			$("body").animate({ backgroundColor: "white"}, 1000);
			$("#butonera").animate({ 'color': "black" }, 1000);
			$("#address").animate({ 'color': "black" }, 1000);
			$("#footer").animate({ 'color': "black" }, 1000);
			$(".footerItem").animate({ 'color': 'black' }, 1000);
			$("#menuContainer").animate({ backgroundColor: "white"}, 1000);
			$(".menuitem").hover(function () {
				$(".menuitem[attr!='"+$(this).attr("attr")+"']").css({ color: 'gray' });
			}, 
			function () {
					$(".menuitem").css({ color: 'black' });
			});
			$(".footerItem").hover(function () {
					$(".footerItem[attr!='"+$(this).attr("attr")+"']").css({ color: 'gray' });
			}, 
			function () {
					$(".footerItem").css({ color: 'black' });
			});
			$(this).css({ color: 'black' });
		}
		$("#supersize").fadeOut(function() {  
			$(this).hide();
			$("body").css({ 'overflow' : 'auto' });
		});
		$("#explain").animate({ 'top' : $(window).height() },600, function() {  $(this).hide() });
		toposPosition($(this).attr("attr"));
	});
	
	$("#toporetorn").click(function () {
		menuIn();	
	});
	////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
	//Topo Clicks
	////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
	$(".item").click(function () {
		$("#retorn").bind('mouseenter', menuIn);
		$("#menuContainer").bind('mouseleave', menuOut);
		toposPosition("", false);
		$("body").css({ 'overflow' : 'hidden' });
		totalImages = $(".total_images",this).val();
		selected_project=$(this).attr("id");
		$("#selected_project_title").html($(".project_title",this).val());
		$("#title_project","#texter").html("<h1><a style='color:inherit;'>"+$(".project_title",this).val()+"</a></h1>");
		$(".col_project:eq(0)","#texter").html($(".text_eng",this).html());
		$(".col_project:eq(1)","#texter").html($(".text_esp",this).html());
		$(".col_project:eq(2)","#texter").html($(".text_cat",this).html());
		
		imageCount = 1;
		$(window).unbind('resize', footerPosition);
		$("#footerContainer").animate({ 'top' : $(window).height() },200, function() {  $(this).hide() });
		$("#explain").css({ 'top' : $(window).height()  });
		$("#explain").show();
		explainFold();
		$(window).bind('resize', explainFold);
		//ensenya navegador
		$("#naviProjects").show();
		$(window).bind('resize', positionNavi);
		//fica arrows
		var butType = Math.floor(Math.random()*7)+1;
		$("#nextbut").html('<img src="img/next'+butType+'.png"  />');
		$("#prevbut").html('<img src="img/prev'+butType+'.png"  />');
		updateArrows();
		menuOut();
		loaderOrder = false;
		loadProject(imageCount);
		

	})
	$("#infoExplicacio").click(function () {
		$("#retorn").hide();
		explainUnfold();
		$(window).unbind('resize', explainFold);
		$(window).bind('resize', explainUnfold);
	});
	$("#explainClose").click(function () {
		$("#menuContainer").bind('mouseenter', menuIn);
		explainFold();
		$("#explainClose").hide();
		$(window).bind('resize', explainFold);
		$(window).unbind('resize', explainUnfold);
		$("#texter").hide();
		$("#retorn").show();
	});
	$("#nextbut").click(function () {
		if(imageCount < totalImages){
			imageCount++;
			updateArrows();
			loadProject(imageCount);
		}
	});
	$("#prevbut").click(function () {
		if(imageCount > 1 ){
			imageCount--;
			updateArrows();
			loadProject(imageCount);
		}
	});
	////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
	//Torna a la home
	////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
	$("#topoCorp1").click(function(){
			$("#footerContainer").animate({ 'top' : $(window).height() },200);
			$("#fotoHome").fadeIn(function(){
				$("#about").hide();
				$("#footerContainer").show();
				$("#footerContainer").animate({ 'top' : $(window).height() - $("#footerContainer").height() - 25 },600);
			});
			$(window).bind('resize',fotoHome);
			toposPosition("");
			$("body").animate({ backgroundColor: "white"}, 1000);
			$("#butonera").animate({ 'color': "black" }, 1000);
			$("#address").animate({ 'color': "black" }, 1000);
			$("#footer").animate({ 'color': "black" }, 1000);
			$(".menuitem").animate({ 'color': "black" }, 1000);
			$(".footerItem").animate({ 'color': 'black' });
			$("#menuContainer").animate({ backgroundColor: "white"}, 1000);
			$(window).unbind('resize', aboutSection);
			$(window).bind('resize', footerPosition);
			$("#supersize").fadeOut(function() {  
				$(this).hide();
				$("body").css({ 'overflow' : 'auto' });
			});
			$("#explain").animate({ 'top' : $(window).height() },600, function() {  $(this).hide() });
			$(".item").show();
			$("#naviProjects").hide();
			$("#menuContainer").unbind('mouseleave');
			$(".menuitem").hover(function () {
				$(".menuitem[attr!='"+$(this).attr("attr")+"']").css({ color: 'gray' });
			}, 
			function () {
					$(".menuitem").css({ color: 'black' });
			});
			$(".footerItem").hover(function () {
					$(".footerItem[attr!='"+$(this).attr("attr")+"']").css({ color: 'gray' });
			}, 
			function () {
					$(".footerItem").css({ color: 'black' });
			});
	})
	$("#topoCorp2").click(function(){
		var jokePosX = new Array();
		var jokePosY = new Array();
		if(section ==""){
		}else{
			if(section == "selected"){
				selectorName = "select"
				selectorValue = "select"
			}else{
				selectorName = "tipus"
				selectorValue = section
			}
			$(".item["+selectorName+"='"+selectorValue+"']").each(function(index) {				 
				$(this).animate({ top: Math.random()*$(window).height() , left: Math.random()*$(window).width() },  1000 , function() {
				  $(this).animate({ top: posY[index], left: posX[index] }, { duration: 1000, easing: "easeOutCirc"} );
				});
			});
		}
	});
	////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
	//Footer action
	////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
	$(".footerItem").click(function () {
			$(".textAux").remove();					 
			$("#auxiliars").prepend('<div class="textAux"></div>');
			var index_aux = $(this).index();
			$(".textAux").html($(".hidden_text:eq("+index_aux+")").html());
			if(index_aux==2){
				if(map_initialized==false){
					initialize_map();
					map_initialized=true;
				}
				$("#map_canvas").show();
				$(".textAux").height(120);
			}
			else{
				$("#map_canvas").hide();
				$(".textAux").height($(window).height()-80);
			}
				
			$("#auxiliars").fadeIn();
			$(".textAux").jScrollPane({showArrows:false});
			$("body").css({ 'overflow' : 'hidden' });
	});
	$("#cerrar_aux").click(function () {
			$("#auxiliars").fadeOut();
			$("body").css({ 'overflow' : 'auto' });
	});
	////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
	//Footer action
	////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
	$("#suscribe").click(function () {
			$(this).hide();
			$("#suscription_form").fadeIn();
	});
	$("#sendmail").click(function () {
		$.ajax({
			type: "POST",
			url: "http://www.cero-design.com/mailingsuscription.php",
			data: "email="+$("#mailaddress").val(),
			success: function(msg){
				$("#suscribe").fadeIn();
				$("#suscription_form").hide();
			}
		});
		$("#mailaddress").val("Thank You!!")
	});
});