var slides = new Array();
var slideIndex = 0; // which slide are we viewing?
var fadeTimer = 5; // time, in seconds, it takes to swap images
var swapTimer = 2; 
var areaMap = 0;

var bdIds = new Array();   
bdIds[1] = 34;
bdIds[2] = 35;
bdIds[3] = 36;
bdIds[4] = 37;

function createImagesCollection(ID){
	picPath = "images/template/casestudies/";
		
	if(ID=='homepage') {
		picPath = "images/template/slideshow/";
		//areaMap=1;
		//slides[0] = picPath+"img0.jpg";
		slides[0] = picPath+"corporate_report.jpg";
        slides[1] = picPath+"bakertilly.jpg";
        slides[2] = picPath+"chamber_of_commerce.jpg";
        slides[3] = picPath+"monona.jpg";
        slides[4] = picPath+"localdirt.jpg";
        slides[5] = picPath+"img1.jpg";
        
        
	} else if(ID==1) {
		//mastercraft
		slides[0] = picPath+"mc1.jpg";
		slides[1] = picPath+"mc2.jpg";
		slides[2] = picPath+"mc3.jpg";
		slides[3] = picPath+"mc4.jpg";
	} else if(ID==2) {
		//aprilaire
		slides[0] = picPath+"aprilaire1.jpg";
		slides[1] = picPath+"aprilaire2.jpg";
		slides[2] = picPath+"aprilaire3.jpg";
	} else if(ID==3) {
		//rowland
		slides[0] = picPath+"rowland1.jpg";
		slides[1] = picPath+"rowland2.jpg";
		slides[2] = picPath+"rowland3.jpg";
		slides[3] = picPath+"rowland4.jpg";	
	} else {
		//rowland
		slides[0] = picPath+"vck1.jpg";
		slides[1] = picPath+"vck2.jpg";	
	}
	
	
}


function initSwap(id) {
	
	createImagesCollection(id)
	
    // CAREFUL! we ASSUME there's a page element with id 'fadeBox' to
    // contain the effected images
    var fadeBox = document.getElementById('fadeBox');
    // set up the actual images
    for(var i=0;i<slides.length;i++) {
        // hooray for the DOM
        var slide = document.createElement('img'); // a new image
        slide.id = 'mapPic_' + i;
//        slide.setAttribute("usemap",'#headerMap');
		slide.useMap = '#headerMap'
        slide.setAttribute("border",'0');
        
        if(i==5) {    
            slide.setAttribute("onclick",'location.href="index.php?page=contact"');   
            slide.setAttribute("style",'cursor:pointer;');
        } else if(i!=0) {
            slide.setAttribute("onclick",'location.href="index.php?page=portfolio&modalClientId='+bdIds[id]+'"');   
            slide.setAttribute("style",'cursor:pointer;');   
        }
         
         
         
        slide.src = slides[i]; // should show this image
        slide.style.position = 'absolute'; // important so images stay on top of each other
        slide.style.opacity = '0'; // init to transparent (CSS2)
        slide.style.filter = 'alpha(opacity:0)'; // init to transparent (MSIE)
        fadeBox.appendChild(slide); // put the image in the box
        slides[i] = slide; // reassign to same array for convenience
        // if it's the first image, let's show it now to avoid waiting
        if(i==0) {
            fade(i,1); // fade it in!
           // setTimeout(doSwap,swapTimer*1000); // start the swap timer!
        }
        // repeat for each slide       
    }
}

function doSwap(sens) {
    var s1 = slideIndex; // where *are* we?
    
    if(sens=="next") {
    	var s2 = s1+1
    	
    } 
    else  {
    	var s2 = s1-1;
    	
    }	
    
    if(s2 < slides.length-1) {
    		showBut('nextBut')
    } else {
    		hideBut('nextBut')
    }
    
    if(s2 < 1) {
    	hideBut('backBut')
    } else {
    	showBut('backBut')
    }
    
    if(areaMap==1 && s2==0) {
     
    	createAreaMap("mapPic_"+s2);
    }
    
    // we just wrapped to the beginning if we hit the end of the array, so...
    slideIndex = s2; // update slide index
    fade(s1,0); // fade the old slide out!
    fade(s2,1); // fade the new slide in!
  //  setTimeout(doSwap,swapTimer*1000); // do it again in swapTimer seconds!
}
 
function fade(whoid,dir) {
    var slide = slides[whoid]; // get the slide element at index whoid
    var completed; // so we know when the fade is done
    var opac = parseFloat(slide.style.opacity,10); // get a reference value
    // increment if fading in, decrement if fading out
    if(dir > 0) {
        opac += .1; // more opaque
        if(opac >= 1) {
            // fade is at max! fade done!
            completed = true;
            var sl = document.getElementById("mapPic_"+whoid)
            sl.style.zIndex=1
        }
    } else {
        opac -= .1; // less opaque
        if(opac <= 0) {
            // fade is at min! fade done!
            completed = true;
            var sl = document.getElementById("mapPic_"+whoid)
            sl.style.zIndex=0
        }
    }
    slide.style.opacity = opac; // set opacity (CSS2)
    slide.style.filter = 'alpha(opacity:'+(opac*100)+')'; // set opacity (MSIE)
    if(!completed) {
        // as long as the fade is not complete, keep doing this in 1/10 increments within fadeTimer seconds
        setTimeout("fade("+whoid+","+dir+")",parseInt(fadeTimer/10,10));
    }
}
 



function hideBut(but){
	document.getElementById(but).style.display = 'none'
}

function showBut(but){
	document.getElementById(but).style.display = 'block'
}


//function createAreaMap(pic) {
//	var elementHolder = document.getElementById('mapHolder');
// 	var newArea = document.createElement('area');
//  	 newArea.setAttribute('id',"link");
//  	 newArea.setAttribute('shape',"poly");
//  	 newArea.setAttribute('coords',"361,217,447,217,447,235,361,235");
//  	 newArea.setAttribute('href',"index.php?page=contact");
//	 elementHolder.appendChild(newArea);
//	 
//}


function createAreaMap(pic,id) {
    var elementHolder = document.getElementById('mapHolder');
     var newArea = document.createElement('area');
       newArea.setAttribute('id',"link");
       newArea.setAttribute('shape',"rect"); 
       newArea.setAttribute('coords',"264,210,743,238");
       newArea.setAttribute('href',"index.php?page=portfolio&modalClientId="+id);
     elementHolder.appendChild(newArea);
     
}