// Script realizado por Ricardo Mora 
//www.sustanciadigital.com
//ricardo@sustanciadigital.com
//Si copias este script para uso personal porfavor  respeta mi autoria, de ser posible envia un  email (asunto: script de  sustancia) para tener el gusto  de conocerte y ayudarte


document.write("<div id='outMenuSus'  onclick=''  style='display:inline; position:fixed; width:1px; height:100px; top:0px; left:0px;  background-color:#transparent;  z-index:200; '></div>")



var capaSus ="";
var variableSus=900;
var variable2Sus= 3;
var apagador= true;
//**********************************************************************************************************
// funion que determinas si corre a la izquierda o al aderecha********************************************
function valorID(dato, dato2){ 

capaSus= dato;
//************


	if (dato2 < variable2Sus && apagador == true ){
		deducir= (variable2Sus-dato2);
		variableSus= 900*deducir;

		variable2Sus=dato2;
		apagador=false;
		
		animaSus();
		
		//botonActual(dato2);
	}
//******************

	if (dato2 > variable2Sus && apagador == true){
		deducir2= (dato2-variable2Sus);
		variableSus= 900*deducir2;

		//alert(variable);

		variable2Sus=dato2;
		
		apagador=false;
		
		restaurar3Sus();
		
		//botonActual(dato2);
		
	}



//******************

//capa protectora  para  evitar error  si  presionan varias veces 

//alturabody_Sus=screen.availHeight;
//alturabody2_Sus=document.body.scrollWidth;//???????????
	
	//elemento2_Sus=document.getElementById('outMenuSus'); //la capa  que sirve para rollout
//elemento2_Sus.style.width=100+("%");

//if (document.all){elemento2_Sus.style.height=alturabody_Sus+"px";}// ????????????????????????????
//else if (document.getElementById){elemento2_Sus.style.height= window.innerHeight+"px";} //?????????????

}


//********************************************************************************************************************
// funion desplaza la capa a la derecha********************************************
function animaSus(){ 
//establece las capas de proteccion  en el index (nivel de la capa)
document.getElementById('menufijo2').style.zIndex=21;


tiempo=setInterval ("anima2()", 10);
}


var alto =0;

//**********************************************************************
//**********************************************************************

function anima2(){ 


//este valor corresponde  al dezplazamiento inicial de la capa
if (alto >= variableSus ){

//restablece las capas  de proteccion  en el index (nivel de la capa)
document.getElementById('menufijo2').style.zIndex=19;

clearInterval (tiempo);
alto=0;

apagador=true;

}

else {
elemento3a=document.getElementById(capaSus);
elemento3a.style.left=parseInt(elemento3a.style.left)+100+"px";
alto +=100;
}



}


//*************************************************************************
// funion desplaza la capa a la izquierda********************************************

function restaurar3Sus(){ 

//establece las capas de proteccion  en el index (nivel de la capa)
document.getElementById('menufijo2').style.zIndex=21;

arriba=setInterval ("restaurar4()",10);
}

//**********************************************************************
//**********************************************************************
function restaurar4(){ 

//alert("si funciona");
if (alto >= variableSus){

//restablece las capas  base y de proteccion  en el index (nivel de la capa)
document.getElementById('menufijo2').style.zIndex=19;

clearInterval (arriba);
alto=0;

apagador=true;
}

else {
elemento4=document.getElementById('oCapaSus');
elemento4.style.left=parseInt(elemento4.style.left)-100+"px";
alto +=100;

}

}

//*****************************************************************************************************
//*****************************************************************************************************
//*****************************************************************************************************
//*****************************************************************************************************
//*****************************************************************************************************

function quitarmenus_Sus(){
	elemento2=document.getElementById('outMenuSus');
	elemento2.style.top=0+("px") ;
	elemento2.style.left=0+("px") ;
	elemento2.style.height=0+("px");
	
	
}
//*****************************************************************************************************
//*****************************************************************************************************
//*****************************************************************************************************
//*****************************************************************************************************
//*****************************************************************************************************

// intercambia las capas en la seccion  carpeta botones Diseño Multimedia, Diseño 2d y personales ********************************************************
 
function cambiar(capa1, capa2, capa3, seleccion){
 elemento=document.getElementById(capa1);
elemento.style.top= 0;
 
elemento3a=document.getElementById(capa2);
elemento3a.style.top= -500+"px";

elemento3b=document.getElementById(capa3);
elemento3b.style.top= -500+"px";


//capa que presenta el diaporama, fondo negro que presenta  una por una las imagenes
 elemento1=document.getElementById('celda4b4');
elemento1.style.top= -500+"px";

//lo siguiente  permite  cambiar el color de los botones 

if (seleccion == 1 ){document.getElementById('op1').style.color="#000000"; document.getElementById('op2').style.color="#990000"; document.getElementById('op3').style.color="#990000";}
if (seleccion == 2 ){document.getElementById('op2').style.color="#000000"; document.getElementById('op1').style.color="#990000"; document.getElementById('op3').style.color="#990000";}
if (seleccion == 3 ){document.getElementById('op3').style.color="#000000"; document.getElementById('op1').style.color="#990000"; document.getElementById('op2').style.color="#990000";}
}


//muestra el fondo

function mostrar(valor){
//capa que presenta el diaporama, fondo negro que presenta  una por una las imagenes
 elemento1=document.getElementById('celda4b4');
elemento1.style.top= 40+"px";
objeto=valor;
//alert(objeto);
}

function cerrar(){
document.imagenes.src="demos/cargando.gif";
 elemento1=document.getElementById('celda4b4');
elemento1.style.top= -500+"px";
}

//*****************************************************************************************************
//*****************************************************************************************************
//*****************************************************************************************************
//*****************************************************************************************************
//*****************************************************************************************************


//*******************
// JavaScript Document
//arreglo de la seccion  web multmedia
var lista= new Array( "demos/web/web09.jpg","demos/web/web05.jpg","demos/web/web06.jpg","demos/web/web07.jpg", "demos/web/web08.jpg", "demos/web/web01.jpg", "demos/web/web02.jpg", "demos/web/web03.jpg", "demos/web/web04.jpg", "demos/web/web18.jpg", "demos/web/web20.jpg", "demos/web/web17.jpg", "demos/web/web23.jpg", "demos/web/web22.jpg", "demos/web/web21.jpg", "demos/web/web15.jpg", "demos/web/web14.jpg", "demos/web/web16.jpg", "demos/web/web13.jpg", "demos/web/web12.jpg", "demos/web/web11.jpg", "demos/web/web10.jpg");
/*var lista2= new Array;

lista2[0]="Multimedia  de  Arte2<br> (Diseño y Programación) <br> www.arte2.com.mx";
lista2[1]="Revista digital Ser Joven <br>(Diseño y Programación) <br> www.serjoven.net";
lista2[2]="Sito High Sales <br>(Diseño y Programación) <br> www.highsalescrm.com";
lista2[3]="Redesiño  del sitio  -El cine a las calles-  <br>(Diseño Y Administración)";
lista2[4]="Sito de Expo tu colegio<br> (Diseño, Administración y Programación) <br> www.expotucolegio.com";
lista2[5]="Sitio  creado para la comunicación interna del INITE <br>(Diseño y Programación)";

lista2[6]="Administración del sitio con mas de 300 páginas en su interior. Acceso  a planes de estudio de la UNITEC <br>(Diseño, Administración  y Programación) <br>www.eva.com.mx";
lista2[7]="Sitio  de la UNITEC  y  Universidad Latina <br> (Diseño y Programación)";
lista2[8]="Sitio  creado para la comunicación interna del INITE <br>(Diseño y Programación)";
lista2[9]="Multimedia creado para la Facultad de filisofía y letras ed la UNAM (Programación)";
lista2[10]="Multimedia, proyecto personal realizado en el Posgrado del Instituto nacional de Bellas Artes (Concepto, Investigación, Diseño y Programación)";
lista2[11]="Multimedia creado para el equipo Cruz Azul <br>(Diseño y Programación)";
lista2[12]="Multimedia creado para Comisión del Agua <br>(Diseño y Programación)";
lista2[13]="Multimedia creado para el equipo Cruz Azul <br>(Diseño y Programación)";
lista2[14]="Sitio Web  creado para Enlace Tecnológico, catalogo de prodcutos <br>(Diseño y Programación) ";
lista2[15]="Multimedia creado para el pintor Mario Nuñez, catálogo de obras  <br>(Programación) ";
lista2[16]="Juegos Multimedia creados para el sitio web  de Nutrisa  <br>(Diseño y Programación) ";
lista2[17]="Sitio Web creado  para SIGN EMPRESARIAL, directorio  de logistica  <br>(Diseño y Programación) ";
lista2[18]="Juegos Multimedia creados para la Unión de Sociedades de Oaxaca  <br>(Diseño y Programación) ";
lista2[19]="Sitio Web creado  para SELECSA, empresa de almacenamiento <br>(Diseño y Programación) ";
lista2[20]="Multimedia creado  para SIGN EMPRESARIAL, directorio  de logística  <br>(Diseño y Programación) ";
lista2[21]="Juegos Multimedia creados para el Estado de Hidalgo<br>( Programación) ";
// arreglo de la seccion 2d*/

/*var dosd= new Array("demos/mini/2d01.jpg", "demos/mini/2d02.jpg", "demos/mini/2d03.jpg", "demos/mini/2d04.jpg", "demos/mini/2d05.jpg", "demos/mini/2d06.jpg", "demos/mini/2d07.jpg","demos/mini/2d08.jpg","demos/mini/2d09.jpg","demos/mini/2d10.jpg","demos/mini/2d11.jpg", "demos/mini/2d12.jpg", "demos/mini/2d13.jpg","demos/mini/2d14.jpg", "demos/mini/2d15.jpg", "demos/mini/2d16.jpg", "demos/mini/2d17.jpg", "demos/mini/2d18.jpg", "demos/mini/2d19.jpg");
var dosdtext= new Array()
dosdtext [0]="Stock de imágenes";	
dosdtext [1]="Stock de imágenes";
dosdtext [2]="Stock de imágenes";
dosdtext [3]="Stock de imágenes";
dosdtext [4]="Stock de imágenes";
dosdtext [5]="Stock de imágenes";
dosdtext [6]="Stock de imágenes";
dosdtext [7]="Stock de imágenes";
dosdtext [8]="Stock de imágenes";
dosdtext [9]="Stock de imágenes";
dosdtext [10]="Stock de imágenes";
dosdtext [11]="Stock de imágenes";
dosdtext [12]="Pantalla para HighSales <br> HighSalescrm.com";
dosdtext [13]="Hoja de Venta -impresión <br> Realizado para arte2.com.mx";
dosdtext [14]="Hoja de Venta - impresión <br> Realizado para arte2.com.mx";
dosdtext [15]="Hoja de Venta - impresión <br> Realizado para arte2.com.mx";
dosdtext [16]="Hoja de Venta -impresión <br> Realizado para arte2.com.mx";
dosdtext [17]="Hoja de Venta <br> (arte2.com.mx)";
dosdtext [18]="Stock de íconos para High Sales";
					 */
					 
/*					 
var person= new Array("demos/personal/per01.jpg", "demos/personal/per02.jpg", "demos/personal/per03.jpg", "demos/personal/per04.jpg", "demos/personal/per05.jpg", "demos/personal/per06.jpg");
var personaltext= new Array()
personaltext [0]="";	
personaltext [1]="";	
personaltext [2]="";	
personaltext [3]="";	
personaltext [4]="";	
personaltext [5]="";	*/



//*****************************************************************************************************
//*****************************************************************************************************
//*****************************************************************************************************
//*****************************************************************************************************
//*****************************************************************************************************
// Código: Cuando se accede a una las imagenes dentro de la seccion carpeta (Pantalla negra)  tiene la opcion siguiente y anterior
var indice= new Number()
var indice2= new Number()
var conteo= lista.length ;
var conteo2= dosd.length ;
var conteo3= person.length ;
var objeto =0; //esta varible toma su valor en la funcion Mostrar, paara saber que capa es la que esta activa

function siguiente(){ 
indice++;

if (objeto == 1 ){
if (indice == conteo ){indice=0;}
imagen(indice);
}

if (objeto == 2 ){
if (indice ==  conteo2){indice=0;}
imagen2(indice);
}

if (objeto == 3 ){
if (indice ==  conteo3){indice=0;}
imagen3(indice);
}

}

function anterior(){ 
indice--;

if (objeto == 1 ){
if (indice < 0 ){indice=conteo-1;}
imagen(indice);
}

if (objeto == 2 ){
if (indice < 0 ){indice=conteo2-1;}
imagen2(indice);}

if (objeto == 3 ){
if (indice < 0 ){indice=conteo3-1;}
imagen3(indice);
}
}
 
 function imagen(img){ 
 document.imagenes.src=lista[img];
 document.getElementById('contenido').innerHTML= lista2[img];
 indice=img;
 }
 
  function imagen2(img){ 
 
 document.imagenes.src=dosd[img];
  document.getElementById('contenido').innerHTML= dosdtext[img];
indice=img;
}

function imagen3(img){ 
 
 document.imagenes.src=person[img];
  document.getElementById('contenido').innerHTML= personaltext[img];
indice=img;
}

//**********************************************************************************************************************
//**********************************************************************************************************************
//**********************************************************************************************************************
//**********************************************************************************************************************
//**********************************************************************************************************************
//**********************************************************************************************************************
// mueve una imagen del fondo cuando se presiona  el boton inicio
var rumbo=0;
function fondomueve(){ 
tiempofondo=setInterval ("fondomueve2()", 10);
rumbo+=1;
}


var altofondo =0;


function fondomueve2(){ 
//este valor corresponde  al dezplazamiento inicial de la capa
if (altofondo >= 50 ){
if (rumbo >= 4 ){rumbo=0;}

clearInterval (tiempofondo);

altofondo=0;
}

if (rumbo==1) {
elemento3a=document.getElementById('fondoanima');
elemento3a.style.left=parseInt(elemento3a.style.left)+10+"px";
elemento3a.style.top=parseInt(elemento3a.style.top)-2+"px";
altofondo +=1;
}

if (rumbo==2) {
elemento3a=document.getElementById('fondoanima');
elemento3a.style.left=parseInt(elemento3a.style.left)+1+"px";
elemento3a.style.top=parseInt(elemento3a.style.top)+4+"px";
altofondo +=1;
}

if (rumbo==3) {
elemento3a=document.getElementById('fondoanima');
elemento3a.style.left=parseInt(elemento3a.style.left)-10+"px";
elemento3a.style.top=parseInt(elemento3a.style.top)+2+"px";
altofondo +=1;
}

if (rumbo==4) {
elemento3a=document.getElementById('fondoanima');
elemento3a.style.left=parseInt(elemento3a.style.left)-1+"px";
elemento3a.style.top=parseInt(elemento3a.style.top)-4+"px";
altofondo +=1;

}

}



//**********************************************************************************************************************
//**********************************************************************************************************************
//**********************************************************************************************************************
//**********************************************************************************************************************
//  abre la ventana de demos ******************************************************************
function ventana (valor1,valor2,valor3) {
dat = 'width=' + valor2 + ',height=' + valor3 + ',left=50,top=50,scrollbars=no,resize=no';
window.open(valor1,'',dat)
}