var CFG = { URL : '/ajax/ajax.php' }

window.dhtmlHistory.create({
    toJSON: function(o) {
        return JSON.stringify(o); 
    } , fromJSON: function(s) {
        return JSON.parse(s); 
    } 
}); 

var yourListener = function(newLocation, historyData) {
	iniciar();
}

window.onload = function() {
	dhtmlHistory.initialize();
	dhtmlHistory.addListener(yourListener);
	iniciar();
}




function iniciar()
{
	var h = window.location.hash;
	
	if( h != '' )
	{
		var long = h.length;
		var hh = h.substr( 1, long)
		canviar_imatge(hh);
	}
}
function canviar_imatge( id_imatge, inici )
{
 	if( id_imatge != '' )
	{
		$("#imatge_ampliada").removeClass("ocult");
		$("#imatge_ampliada").html( '<img src="/img/icones/loader.gif" alt="loader" style="margin: 100px 0px 100px 0px" />' );
		$.getJSON( AJAX, { id_imatge: id_imatge, accio: 'canviar_imatge' },
		function( resposta )
		{
			if( !inici )
			{
				window.location.hash = resposta.id_galeria_imatge;
				window.location = "#"+ resposta.id_galeria_imatge;	
			}
			
			$("#imatge_ampliada").html( '<a href="'+ resposta.fitxer +'"><img src="/img/330/330/'+ resposta.id_imatge +'" alt="" /></a>' );
 			$("#imatge_descripcio").html( resposta.html );
			$("#named").html( '<a name="' + resposta.id_galeria_imatge +'"></a>' );

			if( $("#pagina").val() != 'totes' && $("#pagina").val() != resposta.pagina )
				canviar_fotos( resposta.pagina, resposta.id_galeria );
				
			var tmp = $("#imatge_anterior").val();
			$("#img_mini_"+tmp).removeClass("actiu");
			
			$("#imatge_anterior").val( resposta.id_galeria_imatge );
			$("#img_mini_"+resposta.id_galeria_imatge).addClass("actiu");
		});
	}
}


function canviar_fotos( pagina, id_galeria )
{
	$('#pagina').val( pagina );

 	if( id_galeria != '' )
	{
		$.post( AJAX, { pagina: pagina, id_galeria: id_galeria, accio: 'canviar_fotos' },
		function( resposta )
		{
			$('#imatges').html( resposta );
		});
	}
}
function veure_totes( id_galeria )
{
 	$('#pagina').val( 'totes' );
 	
 	if( id_galeria != '' )
	{
		$.post( AJAX, { id_galeria: id_galeria, totes: 'true', accio: 'canviar_fotos' },
		function( resposta )
		{
			$('#imatges').html( resposta );
		});
		
		$("#veure_totes").hide();
	}
}



postal = {
	init : function( id_galeria_imatge ){
		postal.buildOverlay( id_galeria_imatge );

		// Display the current position
		$('div.popup span.currentText').html('<span>' + postal.setPosition + '</span>' + '/' + postal.setCount);

		postal.center();

		$('div.popup #fullResContainer').hide();
		$('.loaderIcon').show();
		
		// Need that small delay for the anim to be nice
		setTimeout('postal.show()',500);
		
		
		$('div.popupOverlay').css({
			'height':$(document).height(),
			'width':$(window).width()
		});
		
		$(window).scroll(function(){ postal.center(); });
		$(window).resize(function(){ postal.center(); })
	},
	center : function(){
		//Make sure the gallery is open
		if($('div.popup').size() > 0){
			
			scrollTop = window.pageYOffset || document.documentElement.scrollTop || 0;
			scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || 0;
			
			$('div.popup').css({
				'top': ($(window).height()/2) + scrollTop - ($('div.popup').height()/2),
				'left': ($(window).width()/2) + scrollLeft - ($('div.popup').width()/2)
			});
		};
	},
	show : function(){
		$('.loaderIcon').hide();
		$('div.popup #fullResContainer').fadeIn('fast');
	},
	buildOverlay : function( id_galeria_imatge, lloc ){
		// Build the background overlay div
		backgroundDiv = "<div class='popupOverlay'></div>";
		$('body').append(backgroundDiv);
		$('div.popupOverlay').css('height',$(document).height());
		$('.popupOverlay').bind('click',function(){
			postal.close();
		});
		
		// Basic HTML
		html = '<div class="popup popup_email"><div class="top"><div class="left"></div><div class="middle"></div><div class="right"></div></div><div class="content_email"><div class="loaderIcon"></div><div id="fullResContainer">';
		
		html += '		<h4 class="verd">Enviar article</h4>\n';
		html += '		<input type="hidden" id="id_galeria_imatge" value="'+ id_galeria_imatge +'" />\n';
		html += '		<label for="nom_e">Nom del destinatari</label>\n';
		html += '		<input id="nom_e" type="text" value="" name="nom" />\n';
		html += '		<br class="p" />\n';
		html += '		<label for="email_e">Correu electrònic del destinatari</label>\n';
		html += '		<input id="email_e" type="text" value="" name="email" />\n';
		html += '		<br class="p" />\n';
		html += '		<label for="r_nom">El teu nom</label>\n';
		html += '		<input id="r_nom" type="text" value="" name="r_nom" />\n';
		html += '		<br class="p" />\n';
		html += '		<label for="r_email">El teu correu</label>\n';
		html += '		<input id="r_email" type="text" value="" name="r_email" />\n';
		html += '		<br class="p" />\n';
		html += '		<label for="comentari">Comentari</label>\n';
		html += '		<textarea id="comentari" name="comentari"></textarea><br /><br />\n';
		html += '		<input type="hidden" id="url_enviar" value="'+ lloc  +'" />\n';
		html += '		<div style="float: left;"><input type="image" src="/img/icones/enviar.png" onclick="postal.enviar()" style="border: none; background-color: transparent; width: 62px" /></div>\n';
		html += '<div style="float: right; padding-top: 5px"><a onclick="postal.close()"><img src="/img/icones/btnClose.gif" alt="tancar" /></a></div><br class="p" /></div></div><div class="bottom"><div class="left"></div><div class="middle"></div><div class="right"></div></div></div>';
		
		$('body').append(html);

		// Then fade it in
		$('div.popupOverlay').css('opacity',0);
		$('div.popupOverlay').fadeTo('fast',0.35, function(){
			$('div.popup').fadeTo('fast',1,function(){
				// To fix an IE bug
				$('div.popup').attr('style','left:'+$('div.popup').css('left')+';top:'+$('div.popup').css('top')+';');
			});
		});
	},
	resize : function(width,height){
		// Get the container size, to resize the holder to the right dimensions
		containerHeight = contentHeight + parseFloat($('div.popup .top').height()) + parseFloat($('div.popup .bottom').height());
		containerWidth = parseFloat($('div.popup .content_email').css("padding-left")) + parseFloat($('div.popup .content_email').css("padding-right"));
		
		var newWidth = width;
		var newHeight = height;
		
		if((containerWidth + width) > $(window).width() || (containerHeight + height) > $(window).height()) {
			// Get the original geometry and calculate scales
			var xscale=(width+containerWidth + 100)/$(window).width();
			var yscale=(height+containerHeight + 100)/$(window).height();
		
			// Recalculate new size with default ratio
			if (yscale>xscale){
				newWidth = Math.round(width * (1/yscale));
				newHeight = Math.round(height * (1/yscale));
			} else {
				newWidth = Math.round(width * (1/xscale));
				newHeight = Math.round(height * (1/xscale));
			};
		};

		// Get the container size, to resize the holder to the right dimensions
		containerHeight += newHeight;
		contentHeight += newHeight;
		containerWidth += newWidth;
	
		return {
			width:newWidth,
			height:newHeight
		};
	},
	close : function(){
		$('div.popup').fadeTo('fast',0, function(){
			$('div.popupOverlay').fadeTo('fast',0, function(){
				$('div.popupOverlay').remove();
				$('div.popup').remove();
			});
		});
	},
	enviar : function(){
		var email = $("#email_e").val();
		var nom = $("#nom_e").val();
		var r_email = $("#r_email").val();
		var r_nom = $("#r_nom").val();
		var comentari = $("#comentari").val();
		var id_galeria_imatge = $("#id_galeria_imatge").val();
		var url_enviar = $("#url_enviar").val();
		
		
		if( email != '' )
		{
			html = '<div class="enviarAmic"><div class="top"><div class="left"></div><div class="middle"></div><div class="right"></div></div><div class="content_email"><div class="loaderIcon"></div><div id="fullResContainer">';
			html += '<img src="/img/icones/loader.gif" alt="loader" style="margin: 150px 0px 100px 125px" />';
			html += '<br class="p" /></div></div><div class="bottom"><div class="left"></div><div class="middle"></div><div class="right"></div></div></div>';
			$(".popup").html( html );
			
			$.post( AJAX, { email: email, nom: nom, r_email: r_email, r_nom: r_nom, id_galeria_imatge: id_galeria_imatge, url_enviar: url_enviar, comentari: comentari, accio: 'postal' },
			function( resposta )
			{
				// Basic HTML
				html = '<div class="enviarAmic"><div class="top"><div class="left"></div><div class="middle"></div><div class="right"></div></div><div class="content_email"><div class="loaderIcon"></div><div id="fullResContainer">';
				html += '<h4 class="verd">S\'ha enviat correctament el missatge</h4>\n';
				html += '<br class="p" /></div></div><div class="bottom"><div class="left"></div><div class="middle"></div><div class="right"></div></div></div>';
				
				$('.popup').html(html);
				$('.popup .content_email').css({height: "25px"})
				
				setTimeout('postal.close()',3000)
			});
		}
		else
		{
			alert("Has de posar un correu de destí com a mínim");
		}
	}
}