﻿ /*****************************************************************************************************************************/
 /*                                                                                                        SCROLL MULTIPLE BÁSICO  ( No personalizable )                                                                                                               */
 /* 							       Creado por: Francisco Almarza   - 27 de Septiembre de 2009 							      */
 /*****************************************************************************************************************************/
 
 
 // Paso 1: Definir las variables tipo Image que serán incluidas en el arreglo para su manipulación, temp y temp2 son las imágenes superiores (en este caso, los globos de texto)
var imagenes = new Array();
var temp1 = new Image(78,82);
var temp2 = new Image(78,82);
var temp3 = new Image(78,82);
var temp4 = new Image(78,82);
var temp5 = new Image(78,82);
var temp6 = new Image(78,82);
var temp7 = new Image(78,82);
var temp8 = new Image(78,82);
var tempA = new Image(78,82);
var tempB = new Image(78,82);
var tempC = new Image(78,82);
var tempD = new Image(78,82);
var tempE = new Image(78,82);
var tempF = new Image(78,82);
var tempG = new Image(78,82);
var tempH = new Image(78,82);


var unoA=new Image(150,200);
var unoB=new Image(150,200);
var dosA=new Image(150,200);
var dosB=new Image(150,200);
var tresA=new Image(150,200);
var tresB=new Image(150,200);
var cuatroA=new Image(150,200);
var cuatroB=new Image(150,200);
var cincoA=new Image(150,200);
var cincoB=new Image(150,200);
var seisA=new Image(150,200);
var seisB=new Image(150,200);
var sieteA=new Image(150,200);
var sieteB=new Image(150,200);
var ochoA=new Image(150,200);
var ochoB=new Image(150,200);

// Paso 2: Se asignan  los valores de cada imagen ()En este caso, los terminados en A son los blanco y negro (duotono) y los B son los a color
 
tempA.src="images/who/imgs/globos/paulina2.png";
tempB.src="images/who/imgs/globos/pablo2.png";
tempC.src="images/who/imgs/globos/ximena2.png";
tempD.src="images/who/imgs/globos/rodrigo2.png";
tempE.src="images/who/imgs/globos/paulo2.png";
tempF.src="images/who/imgs/globos/pamela2.png";
tempG.src="images/who/imgs/globos/stefano2.png";
tempH.src="images/who/imgs/globos/monica2.png";
temp1.src="images/who/imgs/globos/paulina.png";
temp2.src="images/who/imgs/globos/pablo.png";
temp3.src="images/who/imgs/globos/ximena.png";
temp4.src="images/who/imgs/globos/rodrigo.png";
temp5.src="images/who/imgs/globos/paulo.png";
temp6.src="images/who/imgs/globos/pamela.png";
temp7.src="images/who/imgs/globos/stefano.png";
temp8.src="images/who/imgs/globos/monica.png";
unoA.src="images/who/imgs/duotono/DIAV-wwa01v-paulina-villalobos.png";
unoB.src="images/who/imgs/color/DIAV-wwa01-paulina-villalobos.png";
dosA.src="images/who/imgs/duotono/DIAV-wwa02v-pablo-sills.png";
dosB.src="images/who/imgs/color/DIAV-wwa02-pablo-sills.png";
tresA.src="images/who/imgs/duotono/DIAV-wwa03v-ximena-munoz.png";
tresB.src="images/who/imgs/color/DIAV-wwa03-ximena-munoz.png";
cuatroA.src="images/who/imgs/duotono/DIAV-wwa04v-rodrigo-gajardo.png";
cuatroB.src="images/who/imgs/color/DIAV-wwa04-rodrigo-gajardo.png";
cincoA.src="images/who/imgs/duotono/DIAV-wwa05v-paulo-munoz.png";
cincoB.src="images/who/imgs/color/DIAV-wwa05-paulo-munoz.png";
seisA.src="images/who/imgs/duotono/DIAV-wwa06v-pamela-padruno.png";
seisB.src="images/who/imgs/color/DIAV-wwa06-pamela-padruno.png";
sieteA.src="images/who/imgs/duotono/DIAV-wwa07v-stefano-banaglia.png";
sieteB.src="images/who/imgs/color/DIAV-wwa07-stefano-banaglia.png";
ochoA.src="images/who/imgs/duotono/DIAV-wwa08v-monica-labra.png";
ochoB.src="images/who/imgs/color/DIAV-wwa08-monica-labra.png";

// Paso 3: Se almacenan  las imagenes en el arreglo
imagenes[0]=unoA;
imagenes[1]=unoB;
imagenes[2]=dosA;
imagenes[3]=dosB;
imagenes[4]=tresA;
imagenes[5]=tresB;
imagenes[6]=cuatroA;
imagenes[7]=cuatroB;
imagenes[8]=cincoA;
imagenes[9]=cincoB;
imagenes[10]=seisA;
imagenes[11]=seisB;
imagenes[12]=sieteA;
imagenes[13]=sieteB;
imagenes[14]=ochoA;
imagenes[15]=ochoB;


// La información que se incluye en el div inferior (Aqui se usa un innerHTML, pero se puede optimizar con otros recursos) 
/******************* Variables para la información ************************/
var paulina = "<table border='0' width='500px'><tr><td rowspan='3' valign='top' width='95px'><img src='images/who/imgs/curriculo/DIAV-wwa01c-paulina-villalobos.png' /></td><td><span class='titulos_tablas_eng'></span></td><td></td></tr><tr class='titulos_tablas_eng'><td valign='top'><span class='titulos_tablas_eng'></span></td><td>Architect, Universidad de Chile.<br />Postgraduate in Urban Management, Japan.<br />Light & Design Designer, KTH, Sweden.<br />MA Architectural Lighting Design, Wismar, Germany.<br />PLDA member (Professional Lighting Design Association)<br />IES member (Illuminating Engineering Society of North America)</td></tr><tr></td><td><td></td></tr></table>";
var pablo = "<table border='0' width='500px'><tr><td rowspan='3' valign='top' width='95px'><img src='images/who/imgs/curriculo/DIAV-wwa02c-pablo-sills.png' /></td><td><span class='titulos_tablas_eng'></span></td><td></td></tr><tr class='titulos_tablas_eng'><td valign='top'><span class='titulos_tablas_eng'></span></td><td>Architect, Universidad Católica de Valparaíso.<br />Postgraduate in Architectural Planning & Preservation, Columbia University, NY.<br /> Master of Science Renewable Energy and Architecture, Nottingham, UK.</td></tr><tr><td></td><td></td></tr></table>";
var ximena = "<table border='0' width='500px'><tr><td rowspan='3' valign='top' width='95px'><img src='images/who/imgs/curriculo/DIAV-wwa03c-ximena-munoz.png' /></td><td><span class='titulos_tablas_eng'></span></td><td></td></tr><tr class='titulos_tablas_eng'><td valign='top'><span class='titulos_tablas_eng'></span></td><td>Architect, Pontificia Universidad Cat&oacute;lica de Chile. <br />MA in Architectonic Lighting Design, IED Mil&aacute;n. <br />PLDA member (Professional Lighting Design Association).</td></tr><tr><td></td></tr></table>";
var rodrigo = "<table border='0' width='500px'><tr><td rowspan='3' valign='top' width='95px'><img src='images/who/imgs/curriculo/DIAV-wwa04c-rodrigo-gajardo.png' /></td><td valign='top'><span class='titulos_tablas_eng'></span></td><td valign='top'></td></tr><tr class='titulos_tablas_eng'><td valign='top'><span class='titulos_tablas_eng'></span></td><td valign='top'>Architect, Universidad Diego Portales.</td></tr><tr><td></td></tr></table>";
var paulo = "<table border='0' width='500px'><tr><td rowspan='3' valign='top' width='95px'><img src='images/who/imgs/curriculo/DIAV-wwa05c-paulo-munoz.png' /></td><td><span class='titulos_tablas_eng'></span></td><td></td></tr><tr class='titulos_tablas_eng'><td valign='top'><span class='titulos_tablas_eng'></span></td><td>Architect, Universidad Diego Portales. <br />PLDA member (Professional Lighting Design Association).<br />LEED Certification Experience.</td></tr><tr><td></td></tr></table>";
var pamela = "<table border='0' width='500px'><tr><td rowspan='3' valign='top' width='95px'><img src='images/who/imgs/curriculo/DIAV-wwa06c-pamela-padruno.png' /></td><td><span class='titulos_tablas_eng'></span></td><td></td></tr><tr class='titulos_tablas_eng'><td valign='top'><span class='titulos_tablas_eng'></span></td><td>Architect, Universidad de Chile.<br />MSc Light & Design, KTH, Sweden.<br />PLDA member (Professional Lighting Design Association).<br />Postgraduate in Architectonic Lighting Design, DUOC UC.</td></tr><tr><td></td></tr></table>";
var monica = "<table border='0' width='500px'><tr><td rowspan='3' valign='top' width='95px'><img src='images/who/imgs/curriculo/DIAV-wwa08c-monica-labra.png' /></td><td valign='top'><span class='titulos_tablas_eng'></span></td><td valign='top'></td></tr><tr class='titulos_tablas_eng'><td valign='top'><span class='titulos_tablas_eng'>Industrial Designer,Universidad de Chile<br />Diplomate in Strategic Marketing, Duoc UC</span></td><td></td></tr><tr><td></td></tr></table>";  
var stefano = "<table border='0' width='500px'><tr><td rowspan='3' valign='top' width='95px'><img src='images/who/imgs/curriculo/DIAV-wwa07c-stefano-banaglia.png' /></td><td><span class='titulos_tablas_eng'></span></td><td></td></tr><tr class='titulos_tablas_eng'><td valign='top'><span class='titulos_tablas_eng'>Graduate in Public Relations, IULM University, Milan, Italy</span></td><td></td></tr><tr><td></td></tr></table>"; 
 
 
 // Función que intercambia la imagen  por otra (sirve para el rollover: roolin y roolout)
  function cambia(nombre,activa)
  {
		
      document.images[nombre].src=activa.src;
  }
  
  function cambia2(nombre,activa,numero)
  {
	  if(numero==1){  	
		getElementById(nombre).style.background='images/who/imgs/globo-tenue.png';
	  }else{
	    getElementById(nombre).style.background='images/who/imgs/globo-destacado.png';
	  }
  }
  
  // Cambio de la ruta de la variable imagen (s utiliza para cuando se clickea sobre una imagen para que quede a color permanente menete hasta que se clickee otra [para  eso se utiliza reset  ])
  function change(original,nuevo){
		original.src=nuevo.src; /* pierdo la antigua*/
		reset(original);
  }
  
  // Reseteo manual, vuelve todas las imágenes a duotono, menos la que fue seleccionada
  function reset(saltar){
    for (x in imagenes)
	{
		if(imagenes[x] == saltar){
			// nada
			//alert(" el elemento " + saltar.src + " fue saltado en el valor " + x );
		}else{
		   switch(x)

			{

			case "0":
				unoA.src="images/who/imgs/duotono/DIAV-wwa01v-paulina-villalobos.png";
				document.primera.src = unoA.src;
			break;

			case "1":
				unoB.src="images/who/imgs/color/DIAV-wwa01-paulina-villalobos.png";
			break;

			case "2":
				dosA.src="images/who/imgs/duotono/DIAV-wwa02v-pablo-sills.png";
				document.segunda.src = dosA.src;
			break;

			case "3":
				dosB.src="images/who/imgs/color/DIAV-wwa02-pablo-sills.png";
			break;

			case "4":
				tresA.src="images/who/imgs/duotono/DIAV-wwa03v-ximena-munoz.png";
				document.tercera.src = tresA.src;
			break;
			
			case "5":
				tresB.src="images/who/imgs/color/DIAV-wwa03-ximena-munoz.png";
			break;
			/**/
			case "6":
				cuatroA.src="images/who/imgs/duotono/DIAV-wwa04v-rodrigo-gajardo.png";
				/*document.cuarta.src = cuatroA.src;*/
			break;
			
			case "7":
				cuatroB.src="images/who/imgs/color/DIAV-wwa04-rodrigo-gajardo.png";
			break;
			
			case "8":
				cincoA.src="images/who/imgs/duotono/DIAV-wwa05v-paulo-munoz.png";
				/*document.quinta.src = cincoA.src;*/
			break;
			
			case "9":
				cincoB.src="images/who/imgs/color/DIAV-wwa05-paulo-munoz.png";
			break;
			
			case "10":
				seisA.src="images/who/imgs/duotono/DIAV-wwa06v-pamela-padruno.png";
				document.sesta.src = seisA.src;
			break;
			
			case "11":
				seisB.src="images/who/imgs/color/DIAV-wwa06-pamela-padruno.png";
			break;
			
			case "12":
				sieteA.src="images/who/imgs/duotono/DIAV-wwa07v-stefano-banaglia.png";
				document.septima.src = sieteA.src;
			break;
			
			case "13":
				sieteB.src="images/who/imgs/color/DIAV-wwa07-stefano-banaglia.png";
			break;
			
			case "14":
				ochoA.src="images/who/imgs/duotono/DIAV-wwa08v-monica-labra.png";
				document.octava.src = ochoA.src;
			break;
			
			case "15":
				ochoB.src="images/who/imgs/color/DIAV-wwa08-monica-labra.png";
			break;
				
			}	
		}
		
	//document.write(mycars[x] + "<br />");
		//document.
	
	}
	  
  }
  
  // Segun el nombre que se ingrese, cambia la información del Div inferior
  function cambiarContenido(nombre){
		switch(nombre)

			{

			case "paulina":
				document.getElementById("micapa").innerHTML = paulina;
			break;

			case "pablo":
				document.getElementById("micapa").innerHTML = pablo;
			break;

			case "ximena":
				document.getElementById("micapa").innerHTML = ximena;
			break;
			
			case "rodrigo":
				document.getElementById("micapa").innerHTML = rodrigo;
			break;
			
			case "paulo":
				document.getElementById("micapa").innerHTML = paulo;
			break;
			
			case "pamela":
				document.getElementById("micapa").innerHTML = pamela;
			break;
			
			case "stefano":
				document.getElementById("micapa").innerHTML = stefano;
			break;
			
			case "monica":
				document.getElementById("micapa").innerHTML = monica;
			break;
			
			}
      
  }
 
