// JavaScript Document
/// Dichiarazione di variabili iniziale.
var larg_canvas=800;
var larg_bandon=170;
var bandon_x=((screen.width/2)-(larg_canvas/2)); // +(larg_bandon/2)????
var larg_quini=37;
var quadsotto_y=((larg_quini+2)*4);
var quadsotto_x=bandon_x+larg_bandon+5+(larg_quini+2);
var quad_sx_x=bandon_x+larg_bandon+2;
var quad_sx_y=larg_quini+2;
var scrittaLedic_x=bandon_x+larg_bandon+larg_quini+10;
var scrittaLedic_y=41;
//Quadrati che devono sparire prima dell'esecuzione dell'effetto sparizione casuale
var quad_sparire = new Array(22,23,24,26,27,28,30,31,32,34,35,36);
var quad_pulsanti = new Array(18,19,20);
var contenutopagina_x = quadsotto_x+30; // deve essere allineato con quadsotto.
var contenutopagina_y =230;
var titoloPagina_x = quad_sx_x+3;
var titoloPagina_y = quad_sx_y + 285;
if (getCookie("colore_pulsanti")){
  var colore_pulsanti=getCookie("colore_pulsanti");
 } else {
  var colore_pulsanti= "#333333";
 }
 if (getCookie("colore_pulsanti_chiaro")){
  var colore_pulsanti_chiaro=getCookie("colore_pulsanti_chiaro");
 } else {
  var colore_pulsanti_chiaro= "#666666";
 }
 
/// creo i quadratini bianchi.
function crea_quadratini(){
for (i=1; i<=50; i++){
daAppendare = document.getElementById("content");
ab = document.createElement("DIV");
ab.id="quad"+i;
ab.style.backgroundColor="#FFFFFF";
ab.style.height=larg_quini+"px";
ab.style.width=larg_quini+"px";
ab.style.position="absolute";
ab.style.zIndex=10;
ab.style.top="0px";
ab.style.left=40*i;
daAppendare.appendChild(ab);
}
}// FINE CREA_QUADRATINI.

// funzione per cercare elementi in un array
function inArray(stringa, arr){
risult=false;
for (i=0; i<arr.lenght; i++){
 (stringa===arr[i])?risult=true:null;
}
return risult;
}

// EFFETTO SPARIZIONE / RIAPPARIZIONE CASUALE QUADRATINI
function casual_disappear(msecs){
setTimeout(function(){
setInterval(function(){
var casuale=Math.floor(Math.random()*50)+1;
var casuale2=Math.floor(Math.random()*50)+1;
var casuale3=Math.floor(Math.random()*50)+1;
var casuale4=Math.floor(Math.random()*50)+1;
var casuale5=Math.floor(Math.random()*50)+1;
var casuale6=Math.floor(Math.random()*50)+1;
var casuale7=Math.floor(Math.random()*50)+1;
var casuale8=Math.floor(Math.random()*50)+1;

/*// DEBUG variabili
document.getElementById("debugdisplay").innerHTML="";
document.getElementById("debugdisplay").innerHTML="<br>";
document.getElementById("debugdisplay").innerHTML+="casuale: "+casuale+"<br>";
document.getElementById("debugdisplay").innerHTML+="casuale2: "+casuale2+"<br>";
document.getElementById("debugdisplay").innerHTML+="casuale3: "+casuale3+"<br>";
document.getElementById("debugdisplay").innerHTML+="casuale4: "+casuale4+"<br>";
document.getElementById("debugdisplay").innerHTML+="casuale5: "+casuale5+"<br>";
document.getElementById("debugdisplay").innerHTML+="casuale6: "+casuale6+"<br>";
document.getElementById("debugdisplay").innerHTML+="casuale7: "+casuale7+"<br>";
document.getElementById("debugdisplay").innerHTML+="casuale8: "+casuale8+"<br>";
//*/

//new Effect.Scale("quad"+casuale, 0, {scaleFromCenter: true });
//se il quad selezionato randomicamente non è nella array di quadrati invalidi, allora lo animo
try { Effect.toggle("quad"+casuale, "blind", { duration: 1.0 });} catch ( ErrN0 ) { null };
try { Effect.toggle("quad"+casuale2, "blind", { duration: 1.0 }); } catch ( ErrN0 ) { null };
try { Effect.toggle("quad"+casuale3, "blind", { duration: 1.0 }); } catch ( ErrN0 ) { null };
try { Effect.toggle("quad"+casuale4, "blind", { duration: 1.0 }); } catch ( ErrN0 ) { null };
// aggiungo una seconda funzione che fa solo ricomparire, per bilanciare.
try { Effect.Appear("quad"+casuale5, { duration: 1.0 }); } catch ( ErrN0 ) { null };
try { Effect.Appear("quad"+casuale6, { duration: 1.0 }); } catch ( ErrN0 ) { null };
try { Effect.Appear("quad"+casuale7, { duration: 1.0 }); } catch ( ErrN0 ) { null };
try { Effect.Appear("quad"+casuale8, { duration: 1.0 }); } catch ( ErrN0 ) { null };
}, 3000);
}, msecs);
}// FINE EFFETTO CASUALE.

/*// DEBUG
arr=quad_sparire
for (a=0; a<arr.length; a++) {
document.write(a + "= " + arr[a] + "<br>");
}
//*/
/* funzione di posizionamento pulsanti: prende il div passato e il quadratino sotto il quale deve comparire, poi fa diventare
bianco il quadratino e posiziona il div esattamente sotto di esso..*/
function mostraPuls(nome_puls, nome_quad){
pulsante = document.getElementById(nome_puls);
quadrato = document.getElementById(nome_quad);

quadrato.style.backgroundColor="#FFFFFF";
/*// TEST PER RIMUOVERE I QUADRATI DAL div e metterli nel documento. questo per evitare che vengano cambiati con la funzione cambiacolore.
quadrato.parentNode.removeChild(quadrato);
document.appendChild(quadrato);
//*/
pulsante.style.display="block";
var puls_top=parseInt(quadrato.style.top);
puls_top+=larg_quini+3;
//alert (puls_chisiamo_top);

pulsante.style.left=quadrato.style.left;
pulsante.style.top=puls_top+"px";


//annullo la possibilità che il quad sopra al pulsante sparisca.
quadrato.id="quad_"+nome_puls;

} //Fine funzione mostraPuls


/// INIZIO ANIMAZIONE INTRO
function animazione_intro(){
crea_quadratini();
///
var quadsotto=document.getElementById("quadsotto");
var bandon=document.getElementById("bandon");
var content=document.getElementById("content");
var primo=document.getElementById("primo");
var scrittaLedic=document.getElementById("scrittaLedic");
var quad_sx=document.getElementById("quad_sx");
var puls_chisiamo=document.getElementById("puls_chisiamo");
var quad18=document.getElementById("quad18");
var quad19=document.getElementById("quad19");
var quad20=document.getElementById("quad20");
var daAppendare = document.getElementById("content");
var contenutopagina = document.getElementById("contenutopagina");
var titoloPagina = document.getElementById("titoloPagina");
var funzionisito = document.getElementById("funzionisito");
//*/

new Effect.Move("primo", { 
x: screen.width/2-10, 
y: screen.height/2-180,
transition: Effect.Transitions.spring,
duration:1,
mode: "absolute"
});

setTimeout(
function(){
new Effect.Morph("primo", {
style: "background-color: #FFFFFF; width: "+screen.width+"; height: "+screen.height+"; left: 0px; top: 0px",
duration: 1
});
}, 1100);

daAppendare = document.getElementById("content");
///ANIMAZIONE DEI QUADRATINI CHE SI UNISCONO
// questo funziona! ma non posso variare i parametri per ogni oggetto...
setTimeout(function(){
new Effect.multiple("content", Effect.Morph, {style: "left: 300px; top: 300px; background-color:"+colore_pulsanti });
}, 3000);
childArr=daAppendare.childNodes;
colonne= 4;
setTimeout(function(){
//alert(childArr.length);
for (i=1; i<=childArr.length; i++){
ogg = document.getElementById("quad"+i);
ogg.style.top = ((Math.ceil(i/colonne)-1)*40)+"px";
ogg.style.left = ((i-((Math.ceil(i/colonne)-1)*colonne))*40)+(bandon_x-larg_quini)+5+"px";
}
//questo qui sotto per incompatibilità con IE che INSPIEGABILMENTE LASCIA il 49 e il 50 lì dove è senza riposizionarlo 
document.getElementById("quad49").style.display="none";
document.getElementById("quad49").id="quad_bastardo_IE";
document.getElementById("quad50").style.display="none";
document.getElementById("quad50").id="quad_bastardo_IE_2";
}, 9000);

// Muovo il bandon
setTimeout(function(){
document.getElementById("bandon").style.display = "block";
new Effect.Morph("bandon", {  
style: "height: "+screen.height+"px; left: "+bandon_x+"px",
transition: Effect.Transitions.spring,
duration:5
});
} ,9000);


///  questo ultimo pezzo è più o meno uguale a posizione_subito()
setTimeout(function(){
//quadsotto
new Effect.Appear("quadsotto");
quadsotto.style.top=quadsotto_y+"px";
quadsotto.style.left=quadsotto_x+"px";

//quad_sx
quad_sx.style.top=quad_sx_y+"px";
quad_sx.style.left=quad_sx_x+"px";
new Effect.Appear("quad_sx");

//scritta Ledic

scrittaLedic.style.left=scrittaLedic_x+"px";
scrittaLedic.style.top=scrittaLedic_y+"px";
new Effect.Appear("scrittaLedic");

//Pulsanti
mostraPuls("puls_chisiamo", "quad18");
mostraPuls("puls_portfolio", "quad19");
mostraPuls("puls_contatti", "quad20");

//contenutopagina
new Effect.Appear("contenutopagina");
contenutopagina.style.top=contenutopagina_y;
contenutopagina.style.left=contenutopagina_x;

//funzione per far sparire i quadrati da far sparire (definiti sopra in una array globale)
for (i=0; i<quad_sparire.length; i++) {
var aa=document.getElementById("quad"+quad_sparire[i]);
aa.style.display="none";
aa.id="";
}

//mostra il titolo della pagina.
titoloPagina.style.top=titoloPagina_y;
titoloPagina.style.left=titoloPagina_x;
new Effect.SlideDown("titoloPagina", {duration: 0.4});

//mostra le funzioni del sito.
funzionisito.style.display="block";
funzionisito.style.left=bandon_x+larg_bandon+10+"px";

}, 13000)
//quad_sx.style.display="block";

casual_disappear(13000);

//*/

}/// FINE ANIMAZIONE INTRO.

/// INIZIO FUNZIONE POSIZIONE_SUBITO
function posizione_subito(){
///
var quadsotto=document.getElementById("quadsotto");
var bandon=document.getElementById("bandon");
var content=document.getElementById("content");
var primo=document.getElementById("primo");
var scrittaLedic=document.getElementById("scrittaLedic");
var quad_sx=document.getElementById("quad_sx");
var puls_chisiamo=document.getElementById("puls_chisiamo");
var quad18=document.getElementById("quad18");
var quad19=document.getElementById("quad19");
var quad20=document.getElementById("quad20");
var puls_chisamo=document.getElementById("puls_chisamo");
var daAppendare = document.getElementById("content");
var contenutopagina = document.getElementById("contenutopagina");
var titoloPagina = document.getElementById("titoloPagina");
var funzionisito = document.getElementById("funzionisito");
//*/
crea_quadratini();


//quadratini
childArr=daAppendare.childNodes;
colonne= 4;
for (i=1; i<=childArr.length; i++){
ogg = document.getElementById("quad"+i);
ogg.style.top = ((Math.ceil(i/colonne)-1)*40)+"px";
ogg.style.left = ((i-((Math.ceil(i/colonne)-1)*colonne))*40)+(bandon_x-larg_quini)+5+"px";
ogg.style.backgroundColor=colore_pulsanti;
}

//sfondo
primo.style.height=screen.height;
primo.style.width=screen.width;
primo.style.backgroundColor="#FFFFFF";

//bandon
bandon.style.display="block";
bandon.style.height=screen.height;
bandon.style.width=larg_bandon;//variabile dichiarata nella pagina.
bandon.style.left=bandon_x;//variabile dichiarata nella pagina.

//quadsotto
Effect.Appear("quadsotto");
quadsotto.style.top=quadsotto_y+"px";
quadsotto.style.left=quadsotto_x+"px";

//quad_sx
quad_sx.style.top=quad_sx_y+"px";
quad_sx.style.left=quad_sx_x+"px";
Effect.Appear("quad_sx");

//scritta Ledic
scrittaLedic.style.left=scrittaLedic_x+"px";
scrittaLedic.style.top=scrittaLedic_y+"px";
//scrittaLedic.style.display="block";
Effect.Appear("scrittaLedic");

//Pulsanti
mostraPuls("puls_chisiamo", "quad18");
mostraPuls("puls_portfolio", "quad19");
mostraPuls("puls_contatti", "quad20");

new Effect.Appear("contenutopagina");
contenutopagina.style.top=contenutopagina_y;
contenutopagina.style.left=contenutopagina_x;

titoloPagina.style.top=titoloPagina_y;
titoloPagina.style.left=titoloPagina_x;
new Effect.SlideDown("titoloPagina", {duration: 0.4});

//mostra le funzioni del sito.
funzionisito.style.display="block";
funzionisito.style.left=bandon_x+larg_bandon+10+"px";

//funzione per far sparire i quadrati da far sparire (definiti sopra in una array globale)
for (i=0; i<quad_sparire.length; i++) {
var aa=document.getElementById("quad"+quad_sparire[i]);
aa.style.display="none";
aa.id="";
}

//EFFETTO CASUALE
casual_disappear(3000);
}// FINE FUNZIONE POSIZIONE_SUBITO

/*
function ChangeStrokeColor(colore){
 window.ChangeStrokeColor(colore);
 }
function ChangeFillColor(colore){
 window.ChangeFillColor(colore);
}

*/
function cambia_colore(colore, colorechiaro, pagina) {
 setCookie("colore_pulsanti", colore);
 setCookie("colore_pulsanti_chiaro", colorechiaro);
 var formcontatti=document.getElementById("formcontatti");
 new Effect.multiple("content", Effect.Morph, {style: "background-color: "+colore});
 /* qui metto gli elementi specifici per ogni pagina */
 switch (pagina) {
  case "contatti":
    new Effect.multiple(formcontatti.elements, Effect.Morph, {style: "background-color: "+colorechiaro});
  break;
  case "portfolio":
  
  break;
  case "chisiamo":
  
  break;
  }
 // qui cambio il colore della scritta LEDIC svg
//window.ChangeStrokeColor(colore);
// window.ChangeFillColor(colorechiario);
 setTimeout(function(){
   new Effect.multiple(["quad_puls_chisiamo", "quad_puls_portfolio", "quad_puls_contatti"], Effect.Morph, {style: "background-color: #ffffff"}); 
 }, 4000);
 //document.getElementById("scrittaLedic").firstChild.src="img/LEDIC2r.png";
 colore_pulsanti=colore;
}