//capa zoom i capa event
var capaZoom;
var capaPopup;
         
//array imatges js
var fotos_js = new Array();
       
//guardem la foto
function foto(g_nom,g_wid,g_hei){
    this.g_nom = g_nom;
    this.g_wid = g_wid;
    this.g_hei = g_hei;
}
	
//inicialitzem layers necessaris
function init() {
    capaZoom = document.getElementById('zoom');
    capaPopup = document.getElementById('popup');
}
	
//afegim la funció init a la seqüčncia de carrega de la plana
if( navigator.userAgent.indexOf('MSIE')!=-1 ){
    window.attachEvent('onload', init );
}else if ( navigator.userAgent.indexOf('Gecko')!=-1 ){
    window.addEventListener( 'load', init, true );
}
	
// agafem les coordinades del layer relatiu del projecte,
// establim el contingut i el mostrem
function contentOn(idFoto){
    if( !capaZoom ){
        return;
    }
            
    //obtenim l'objecte de la foto actual
    foto = fotos_js[idFoto];
	
	//obtenim la posició on hem de mostrar el zoom
    capa_pos = document.getElementById('imaGal'+idFoto);
    pos_x = getOffsetLeft(capa_pos)-5;
    pos_y = getOffsetTop(capa_pos)-5;
	
	//cream html capa events
	var str_html='';
	str_html+='<div class="cajaZoom" onmouseout="contentOff()">';
    str_html+='		<div style="overflow:hidden;width:147px;height:108px;">';
	str_html+='			<a href="javascript:fotoOn(\''+idFoto+'\')" ><img src="img/elems/sp.gif" width="145" height="106" border="0" /></a>';
	str_html+='		</div>';
	str_html+='</div>';
    
    //seteam la capa de zoom i posició
	capaZoom.innerHTML = str_html;
	capaZoom.style.top = pos_y+'px';
	capaZoom.style.left = pos_x+'px';
	capaZoom.style.display='block';
	capaZoom.style.zIndex = 2;
}
	
//ocultem la capa zoom i la d'events
function contentOff(){
    capaZoom.style.display = 'none';
}
	
function fotoOn(idFoto){
    if( !capaPopup ){
        return;
    }
        
    var etiquetaBoton = textos["cerrar"];    
    
	//ocultem la foto
    fotoOff();

    //obtenim l'objecte de la foto actual
    foto = fotos_js[idFoto];
    
	//obtenim el html de plantilla
	var strHtml = '';
	strHtml+= '<div class="boxPopUp" style="z-index:1;width:'+(foto.g_wid+5)+'px;height:'+(foto.g_hei+5)+'px;position:absolute;background-color:#FFFFFF;border:1px solid #165776;">';
	strHtml+= '		<div class="boxImgPopUp" onclick="javascript:fotoOff();" style="background:url('+foto.g_nom+') 5px 5px no-repeat;z-index:1;width:'+foto.g_wid+'px;height:'+foto.g_hei+'px;position:absolute;cursor:pointer;">';
	strHtml+= '			<div class="botoCancelar" style="top:'+(foto.g_hei-22)+'px;right:-'+(foto.g_wid-80)+'px">';
	strHtml+= '				<div class="imgIzquierda"></div>';
	strHtml+= '				<div class="imgCentro">'+ etiquetaBoton +'</div>';
	strHtml+= '				<div class="imgDerecha"></div></div>';
	strHtml+= '			</div>';
	strHtml+= '		</div>';
	strHtml+= '<div class="boxPopUp sombraPopUp" style="z-index:1;width:'+(foto.g_wid+7)+'px;height:'+(foto.g_hei+7)+'px;position:absolute;background:url(img/elems/sombra_popup.gif);z-index:0;position:relative;top:5px;left:5px;">';
	strHtml+= '</div>';
	
	//seteam contingut
	capaPopup.innerHTML = strHtml;
	capaPopup.style.width = foto.g_wid;
	capaPopup.style.height = foto.g_hei;
	
	var NS = (navigator.appName=="Netscape")?true:false;
	
	var x,y;
	if (NS){ //si usa navegador Netscape
		anc_doc = window.innerWidth;
	    alt_doc = window.innerHeight;
		x = self.pageXOffset;
		y = self.pageYOffset;
	} else { //si usa navegador tipo Internet Explorer
		anc_doc = document.documentElement.offsetWidth;
	    alt_doc = document.documentElement.offsetHeight;
		x = document.documentElement.scrollLeft;
		y = document.documentElement.scrollTop;
	}
	
	v_x=parseInt( (( anc_doc - foto.g_wid) / 2)+ x -10);
    v_y=parseInt( (( alt_doc - foto.g_hei) / 2)+ y -10);
	
	//asegura posicionar almenos a 30 px del margen superior del navegador
    if (v_y<30){
	    v_y = 30;
    }

	capaPopup.style.top = v_y+'px';
	capaPopup.style.left = v_x+'px';

	//mostrem la capa de la foto
	capaPopup.style.zIndex = 3;
	capaPopup.style.display='inline';
}

//ocultem la capa del popup de la foto
function fotoOff(){
    capaPopup.style.display = 'none';
}

//*************************
function getOffsetLeft (el) {
    var ol = el.offsetLeft;
    while ((el = el.offsetParent) != null){
        ol += el.offsetLeft;
    }
	return ol;
}
function getOffsetTop (el) {
    var ot = el.offsetTop;
    while((el = el.offsetParent) != null){
        ot += el.offsetTop;
    }
    return ot;
}