// JavaScript Document

var opcion;//devuelve el id de la opcion por la que pasamos mouseover hacemos click onclick del menu superior.
var cuadro;//devuelve el id del cuadro por la que pasamos mouseover o hacemos click onclick del menu fotos central.
var selec=0;//le damos valor a selec de la opcion que a sido pulsada onclick para que no se borre con el mouseout
var dir;//Directorio dnd se encuentran las fotos de la pantalla seleccionada.
var pantalla=0; //Pantalla nos indica que menu de fotos hemos elejido 1=casanovia 2=casanovio 3=ceremonia etc
var posicion=-1;//Posicion nos indica en que numero de pagina estamos de cada pantalla. pag 1 de casa novia, pag2 de casa novia etc
var numerodfoto;//Numero de la foto que hemos pinchado para ver en grande.
var fotog=0;//Conmuta indicandonos si estamos o no en foto grande
var fotostotal;//recoje el valor del numero total de fotos de una seccion, casanovia,casanovio,ceremonia, etc
var paginas;//recoje el valor de numero de paginas que contiene cada seccion, casanovia,casanovio,ceremonia, etc
var resta;//calculamos los minirecuadros que se tienen que mostrar en la ultima paguina, para que no halla mas que fotos keden.

$(document).ready(function() {


//--------------------- Funcion onclick menu superior: Sombrea la opcion que clikeamos del menu superior. Da valor a Selec(numera la opcion seleccionada), y quita la sombra al resto de opciones no seleccionadas.

$('#menu a').click(function(){

    fotog=0;//Notificamos que estamos fuera de la vision de la foto grande.
    dir=0;//Reseteamos el valor del directorio.
    fotostotal=0;
    numerodfoto=0;
    posicion=-1;// Reseteamos la posicion del cursor del numero de paguina cuando pulsamos cualkier menu superior
    paginas=0;//Reseteamos el valor de paginas
    resta=0;

    //Reseteamos el contenido del area para que borre las imagenes mostradas seleccionadas
    $("#area").css("background-image", "url(imagenes/vacia.png)");

    // ocultamos todos los minicuadros de los numeros de las paginas
    for(i=0;i<=5;i++)
{
    $("#num"+i).css("display", "none");
}



    opcion=$(this).attr('id');

for(i=0;i<=8;i++)
{
    if(opcion==i){selec=i;}//le damos valor a selec de la opcion que a sido pulsada onclick para que no se borre con el mouseout
    if(opcion==i){pantalla=i}// le damos el valor a la variable pantalla cuando pulsamos sobre cualquier menu superior
    $("#cuadro"+i).css("background-image", "url(imagenes/vacia.png)");//borramos las imagenes de las minifotos.
}
    //mouseover del menu superior
    $("#"+selec).css("color", "#FFF");
    $("#"+selec).css("text-shadow", "#000 3px 3px 3px");

for(i=0;i<=8;i++)
//ocultamos todos los cuadros y textos del menu central
{
    if(i!=selec){$("#"+i).css("color", "#DADADA");$("#"+i).css("text-shadow", "none");}
    $("#cuadro"+i).css("display", "inherit");
}

    minifoto();//mostramos las miniaturas de las fotos

});




//--------------------- Funcion onclick menu central fotos: Da valor a Selec(numera la opcion seleccionada).

$('#area div').click(function(){

    cuadro=$(this).attr('id');

if(fotog==0)
{

for(i=0;i<=8;i++)
{
    if (posicion==-1){if(cuadro=="cuadro"+i){pantalla=i}}//le damos el valor a la variable pantalla SOLO cuando pulsamos sobre el menu de las secciones de fotos, de ahi la condicion if posicion==-1
}



for(i=0;i<=8;i++)
{
    $("#cuadro"+i).css("border", "solid thin #CCC");
    $("#cuadro"+i).css("height", "80px")
    $("#cuadro"+i).css("margin-top", "20px")
    $("#cuadro"+i).css("background-image", "url(imagenes/vacia.png)");
    $("#cuadro"+i+"t").css("display", "none");

}


    if (posicion>=0){foto();}
    if (posicion==-1){minifoto();}

}

//definimos el nuemerodfoto a mostrar cuando se pulsa desde los botones Anterior y Sigiente.
if(fotog==1)
{
if(cuadro=="cuadro5"){if (numerodfoto>1){numerodfoto--}}
if(cuadro=="cuadro8"){if (numerodfoto<fotostotal){numerodfoto++}}
foto();
}

})




//--------------------- Funcion Css mouseover menu central fotos: Aumenta Tamaño (cambiando la imagen) de la fotografia por la que pasamos del menu fotos central. Lo mismo con el titulo de la foto pero con el color de este.

$('#area div').mouseover(function(){
if(pantalla==0)
{
    cuadro=$(this).attr('id');

    $("#"+cuadro).css("background-image", "url(imagenes/menusfotos/"+cuadro+"fm.png)");
    $("#"+cuadro+"t").css("color", "#700");
}
});




//--------------------- Funcion Css mouseout menu central fotos: Restableze al tamaño oroginal (cambiando la imagen) del resto de fotos no seleccionadas. Lo mismo con el titulo de la foto pero con el color de este.

$('#area div').mouseout(function(){
if(pantalla==0)
{

for(i=0;i<=8;i++)
{
    $("#cuadro"+i+"t").css("color", "#000");
    $("#cuadro"+i).css("background-image", "url(imagenes/menusfotos/cuadro"+i+"f.png)");
}
}
});




//--------------------- Funcion Css mouseover menu superiot: Sombrea la opcion por la que pasamos del menu superior.

$('#menu a').mouseover(function(){

    opcion=$(this).attr('id');

    $("#"+opcion).css("color", "#FFF");
    $("#"+opcion).css("text-shadow", "#000 3px 3px 3px");
});




//--------------------- Funcion Css mouseout menu superior: Quita la sombra de las opciones por las que no pasamos del menu superior siempre que no sea la seleccionada por onclick.

$('#menu a').mouseout(function(){

for(i=0;i<=8;i++)
{
    if(i!=selec){$("#"+i).css("color", "#DADADA");$("#"+i).css("text-shadow", "none");}
}

});


//Click sobre los minicuadros de los numeros de las paginas, pasando el valor de poscion segun el mininumero pulsado
$('#posarea div').click(function(){

    for(i=0;i<=8;i++)
    {
    $("#cuadro"+i).css("display", "inherit");
    }
    nume=$(this).attr('id');

    if (nume=="num1")posicion=0;
    if (nume=="num2")posicion=8;
    if (nume=="num3")posicion=16;
    if (nume=="num4")posicion=24;
    if (nume=="num5")posicion=32;

    resta=((posicion+8)-fotostotal);

    minifoto();

});


//Funcion para mostrar las minifotos
function minifoto()
{

if (posicion==-1){posicion=0};//damos a posicion en valor inicial paguina cero, que seria la primera.

if(fotog==0)
{

for(i=0;i<=8;i++)
//ponemos border y cambiamos los tamaños y margenes de los cuadros de los menus centrales para adaptarlos a las minifotos
{
    $("#cuadro"+i).css("border", "solid thin #700");
    $("#cuadro"+i).css("margin-top", "20px");
    $("#cuadro"+i).css("padding-top", "0px");
    $("#cuadro"+i).css("width", "170px");
    $("#cuadro"+i).css("height", "195px");
    $("#cuadro"+i+"t").css("display", "none");
    $("#cuadro"+i).css("background-image", "url(imagenes/fcasanovia/vacia.png)")

    $("#cuadro8").css("margin-top", "20px");
    $("#cuadro8").css("margin-right", "0px");
    $("#cuadro5").css("margin-top", "20px");
    $("#cuadro5").css("margin-right", "0px");


//damos a dir el valor del directorio en funcion de la variable pantalla
    if (pantalla==1){dir="fcasanovia"; fotostotal=9; paginas=2};

//ponemos las fotos en los cuadros de las minifotos
    $("#cuadro"+i).css("background-image", "url(imagenes/"+dir+"/"+(i+posicion)+".png)");

}


}

//mostramos tantos minicuadros de numeros de paginas como paginas tenga la seccion
for(i=0;i<=paginas;i++)
{
$("#num"+i).css("display", "inherit");
}



if (resta>1)
{
for(i=(9-resta);i<=8;i++)
{
$("#cuadro"+i).css("display", "none");
}
}

}


//Funcion para mostrar la foto grande
function foto()
{

    // ocultamos todos los minicuadros de los numeros de las paginas
    for(i=0;i<=5;i++)
    {
    $("#num"+i).css("display", "none");
    }


for(i=0;i<=8;i++)
{
    $("#cuadro"+i).css("display", "none");
}


    //ajusta la forma de los cuadros 5 y 8 para convertirlos en botones anterior y sigiente.
    $("#cuadro5").css("border", "none");
    $("#cuadro5").css("padding-top", "0px");
    $("#cuadro5").css("height", "45px");
    $("#cuadro5").css("width", "45px");
    $("#cuadro5").css("display", "inherit");
    $("#cuadro5").css("margin-top", "170px");
    $("#cuadro5").css("margin-right", "685px");
    $("#cuadro5").css("background-image", "url(imagenes/menusfotos/anterior.png)");

    $("#cuadro8").css("border", "none");
    $("#cuadro8").css("padding-top", "0px");
    $("#cuadro8").css("height", "45px");
    $("#cuadro8").css("width", "45px");
    $("#cuadro8").css("display", "inherit");
    $("#cuadro8").css("margin-top", "170px");
    $("#cuadro8").css("background-image", "url(imagenes/menusfotos/siguiente.png)");

if(fotog==0)// muestra la foto seleccionada del minicuadro, y salta en caso de que estemos en foto grande para que funcionen los botones anterio y sigiente.
{

//define el numerodfoto a mostrar en la pantalla de minifotos (Cuando se pulsa desde las minifotos)

if (cuadro=="cuadro1"){numerodfoto=posicion+1}
if (cuadro=="cuadro2"){numerodfoto=posicion+2}
if (cuadro=="cuadro3"){numerodfoto=posicion+3}
if (cuadro=="cuadro4"){numerodfoto=posicion+4}
if (cuadro=="cuadro5"){numerodfoto=posicion+6}//ojo es +6 y no +5 por el desnivel--1 del boton anterior
if (cuadro=="cuadro6"){numerodfoto=posicion+6}
if (cuadro=="cuadro7"){numerodfoto=posicion+7}
if (cuadro=="cuadro8"){numerodfoto=posicion+7}//ojo es +7 y no +8 por el desnivel++1 del boton sigiente

}

$("#area").css("background-image", "url(imagenes/"+dir+"/"+numerodfoto+"g.png)")

fotog=1;// >Conmuta a fotogrande verdadero, para comunicarnos que estamos en foto grande.
}

});