// Slideshow Script
// Home page slide show

next = 0
var trans = 0

// Set image source and division background to first image in array and call show function
function setup(){
document.getElementById('slide').style.background = 'transparent url(' + pix[next].src +  ')'
document.getElementById("pic").src = pix[next].src
//document.getElementById('caption').innerHTML = titles[next]
allpix()
nextPic() //
show()
}

// Increment image counter, set image source to next array image source and call fader function
function nextPic(status){
next++
if(next==pix.length){
next = 0
}
document.getElementById("pic").src = pix[next].src
fader()
}

// Increment image opacity and call show function to display change
// When it reaches 100 set division background to array image, reset image opacity to 0 and call show to display
function fader(){
trans = trans + 5
if(trans<100){
show()
setTimeout("fader()",50)
}else{
document.getElementById('slide').style.background = 'transparent url(' + pix[next].src +  ')'
trans = 0
show()
//document.getElementById('caption').innerHTML = titles[next]
auto = setTimeout("nextPic(1)",4000)
}
}

// Display image
function show(){
document.getElementById("pic").style.opacity= trans /100
document.getElementById("pic").style.filter  = "alpha(opacity=" + trans
}

// Make a javascript library containing an array called pix() that holds your list of images.
// You will also need to make a small transparent png called nothing.png to use as a placeholder and add the following code to your page.

// CSS- #slide { background: transparent url(nothing.png); height: image height; width: image width; }

// HTML-
// <div id="slide"><img alt="slide show" id="pic" src="nothing.png" height="image height" width="image width" /></div>
// <a href="javascript:nextPic();">next project</a>