/////////////////////////////////////////////////////////////////
// Multi-image rollover code by Ivaylo Getov
//
// Feel free to use it, just give me a credit in the header
//
// http://www.studio-antares.com
//
/////////////////////////////////////////////////////////////////


// Add variables for each set of images you want to highlight together.  
// I used colors to keep things clear, but you could use whatever
// if you add variables, you need to add a Roll Off and Roll On function for each new variable

// Green (Photo)
var x

// Red (Film)
var y

// Blue (Build)
var z

// Yellow (Design)
var w



/////////////////////////////
// Set opacity level and z-index

function OverLay(){

//document.getElementById('MasterContainer').style.zIndex = 5;
//document.getElementById('MasterContainer').style.visibility = 'visible';

///////////////////////////////
// Note: for this overall fade-in effect to work, you need to be using MooTools 1.2
var m = $('MasterContainer');
    var fx = new Fx.Tween(m,{
        duration: 2000,
        onComplete: function(){ 
                m.fade('out');
        }
    });
    fx.start('opacity',1,0.5);
///////////////////////////////

//new Effect.Opacity('MasterContainer', { to: 0.0, duration: 2.0 });

setTimeout("document.getElementById('MasterContainer').style.zIndex = -2;", 2300);
setTimeout("document.getElementById('MasterContainer').style.visibility = 'hidden';", 2300);
setTimeout("document.getElementById('MasterContainer').style.display = 'none';", 2300);
setTimeout("document.getElementById('MasterContainer').style.width = '0%';", 2300);
setTimeout("document.getElementById('MasterContainer').style.height = '0%';", 2300);

document.getElementById('OverLay').style.zIndex = 3;
document.getElementById('OverLay').style.width = '0%';
document.getElementById('OverLay').style.height = '0%';
document.getElementById('OverLay').style.opacity = 8/10;
document.getElementById('OverLay').style.filter = 'alpha(opacity=80)';

//new Effect.Opacity('OverLay', { to: 0.8, duration: 0.5 });


}




////////////////////////////
// Roll Off
function rollOffPhoto(){
document.getElementById('OverLay').style.width = "0%";
document.getElementById('OverLay').style.height = "0%";
blackLinks();
for(x=1; x<=16; x++) 
     {
          document.images['green'+x].src='main/menuimages/green' + x + '_off.jpg';
          document.images['green'+x].style.zIndex = 2;

          
          document.images.greenMain.src='main/menuimages/greenMain_off.jpg';
          document.images.greenMain.style.zIndex = 2;
          
     }; return false;      
     
}

function rollOffFilm(){
document.getElementById('OverLay').style.width = "0%";
document.getElementById('OverLay').style.height = "0%";
blackLinks();
for(y=1; y<=16; y++) 
     {
          document.images['red'+y].src='main/menuimages/red' + y + '_off.jpg';
          document.images['red'+y].style.zIndex = 2;

          
          document.images.redMain.src='main/menuimages/redMain_off.jpg';
          document.images.redMain.style.zIndex = 2;

     }; return false; 
}


function rollOffBuild(){
document.getElementById('OverLay').style.width = "0%";
document.getElementById('OverLay').style.height = "0%";
blackLinks();
for(z=1; z<=17; z++) 
     {
          document.images['blue'+z].src='main/menuimages/blue' + z + '_off.jpg';
          document.images['blue'+z].style.zIndex = 2;

   		  document.images.blueMain.src='main/menuimages/blueMain_off.jpg';
   		  document.images.blueMain.style.zIndex = 2;
     }; return false; 
}     

function rollOffDesign(){
document.getElementById('OverLay').style.width = "0%";
document.getElementById('OverLay').style.height = "0%";
blackLinks();    
for(w=1; w<=15; w++) 
     {
          document.images['yellow'+w].src='main/menuimages/yellow' + w + '_off.jpg';
          document.images['yellow'+w].style.zIndex = 2;

		  document.images.yellowMain.src='main/menuimages/yellowMain_off.jpg';
		  document.images.yellowMain.style.zIndex = 2;

     }; return false; 
}


////////////////////////////
// Roll On
function rollOnPhoto(){
document.getElementById('OverLay').style.width = "100%";
document.getElementById('OverLay').style.height = "100%";
whiteLinks();
document.getElementById('Link4').style.color = 'red';
for(x=1; x<=16; x++) 
     {
          document.images['green'+x].src='main/menuimages/green' + x + '_on.jpg';
          document.images['green'+x].style.zIndex = 5;

          
          document.images.greenMain.src='main/menuimages/greenMain_on.jpg';
          document.images.greenMain.style.zIndex = 5;

     }; return false; 
}

function rollOnFilm(){
document.getElementById('OverLay').style.width = "100%";
document.getElementById('OverLay').style.height = "100%";
whiteLinks();
document.getElementById('Link3').style.color = 'red';
for(y=1; y<=15; y++) 
     {
          document.images['red'+y].src='main/menuimages/red' + y + '_on.jpg';
          document.images['red'+y].style.zIndex = 5;

          
          document.images.redMain.src='main/menuimages/redMain_on.jpg';
          document.images.redMain.style.zIndex = 5;

     }; return false; 	 
}




function rollOnBuild(){
document.getElementById('OverLay').style.width = "100%";
document.getElementById('OverLay').style.height = "100%";
whiteLinks();
document.getElementById('Link1').style.color = 'red';
for(z=1; z<=17; z++) 
     {
          document.images['blue'+z].src='main/menuimages/blue' + z + '_on.jpg';
          document.images['blue'+z].style.zIndex = 5;

	      document.images.blueMain.src='main/menuimages/blueMain_on.jpg';
	      document.images.blueMain.style.zIndex = 5;

     }; return false; 
}     

function rollOnDesign(){
document.getElementById('OverLay').style.width = "100%";
document.getElementById('OverLay').style.height = "100%";
whiteLinks();
document.getElementById('Link2').style.color = 'red';    
for(w=1; w<=15; w++) 
     {
          document.images['yellow'+w].src='main/menuimages/yellow' + w + '_on.jpg';
          document.images['yellow'+w].style.zIndex = 5;

		  document.images.yellowMain.src='main/menuimages/yellowMain_on.jpg'; 
		  document.images.yellowMain.style.zIndex = 5;

     }; return false; 
}

function whiteLinks(){
for(d=1; d<=6; d++) 
     {
          document.getElementById('Link'+d).style.color = 'white';

     }; return false;
}

function blackLinks(){
for(d=1; d<=6; d++) 
     {
          document.getElementById('Link'+d).style.color = 'black';

     }; return false;
}