//<![CDATA[


var nontransparent=new Array();
nontransparent['image11']='/images/block11.gif';
nontransparent['image12']='/images/block12.gif';
nontransparent['image13']='/images/block13.gif';
nontransparent['image21']='/images/block21.gif';
nontransparent['image22']='/images/block22.gif';
nontransparent['image23']='/images/block23.gif';
nontransparent['image31']='/images/block31.gif';
nontransparent['image32']='/images/block32.gif';
nontransparent['image33']='/images/block33.gif';

var imageArray=new Array();
imageArray['image11']='/images/workBlock11.gif';
imageArray['image12']='/images/workBlock12.gif';
imageArray['image13']='/images/workBlock13.gif';
imageArray['image21']='/images/workBlock21.gif';
imageArray['image22']='/images/workBlock22.gif';
imageArray['image23']='/images/workBlock23.gif';
imageArray['image31']='/images/workBlock31.gif';
imageArray['image32']='/images/workBlock32.gif';
imageArray['image33']='/images/workBlock33.gif';

var imageFlag=new Array();
imageFlag['image11']=true;
imageFlag['image12']=false;
imageFlag['image13']=false;
imageFlag['image21']=false;
imageFlag['image22']=false;
imageFlag['image23']=false;
imageFlag['image31']=false;
imageFlag['image32']=false;
imageFlag['image33']=false;

var textDiv=new Array();
textDiv['image11']='divWork11';
textDiv['image12']='divWork12';
textDiv['image13']='divWork13';
textDiv['image21']='divWork21';
textDiv['image22']='divWork22';
textDiv['image23']='divWork23';
textDiv['image31']='divWork31';
textDiv['image32']='divWork32';
textDiv['image33']='divWork33';

var textSpan=new Array();
textSpan['image11']='spanWork11';
textSpan['image12']='spanWork12';
textSpan['image13']='spanWork13';
textSpan['image21']='spanWork21';
textSpan['image22']='spanWork22';
textSpan['image23']='spanWork23';
textSpan['image31']='spanWork31';
textSpan['image32']='spanWork32';
textSpan['image33']='spanWork33';


var mainImageId=new Array();
mainImageId['image11']='mainImage11';
mainImageId['image12']='mainImage12';
mainImageId['image13']='mainImage13';
mainImageId['image21']='mainImage21';
mainImageId['image22']='mainImage22';
mainImageId['image23']='mainImage23';
mainImageId['image31']='mainImage31';
mainImageId['image32']='mainImage32';
mainImageId['image33']='mainImage33';


function link(){
   window.location="/work.html";
}

//changes button image onmouseover onmouseout
function rollImage(imgId,source){

   //Only change image if the button is not the the 'clicked one'
   if(imageFlag[imgId]==false) 
      document.getElementById(imgId).src=source;
   
}


//changes main image and text when button is CLICKED
function changeImage(imgId,source){
   
   //set all image style display to none
   for(var k in mainImageId){
      document.getElementById(mainImageId[k]).style.display="none";
   }

   //display main image that corresponds to button clicked 
   document.getElementById(mainImageId[imgId]).style.display="block";

   //set flag for all buttons to false;
   for(var j in imageFlag){
      imageFlag[j]=false;
   }

   //make all 9 small buttons transparent
   for (var i in imageArray) {
      rollImage(i,imageArray[i]);      
   }

   //make clicked image non-transparent
   imageFlag[imgId]=true;

   //make button 'clicked' non-transparent
   document.getElementById(imgId).src=nontransparent[imgId];

   //set all text style display to none
   for(var i in textSpan){   
      document.getElementById(textSpan[i]).style.display="none";
   }   
   for(var i in textDiv){
      document.getElementById(textDiv[i]).style.display="none";
   }
   
   //set corresponding text with the button clicked
   document.getElementById(textSpan[imgId]).style.display="inline"; 
   document.getElementById(textDiv[imgId]).style.display="inline";  

}//END FUNCTION






 //]]>