//updated by Andy Lo

var slideshow_width='36em' //SET IMAGE WIDTH
var slideshow_height='160px' //SET IMAGE HEIGHT
var pause=7000 //SET PAUSE BETWEEN SLIDE (3000=3 seconds)
var fadeinspeed = 5 //set the speed of image fade (between 1-20 larger number quicker transition) 
var fadeinstancename = "tourism" //a unique name for this fade in file, so you can use multiple versions on a web page just change this version

var fadeimages=new Array()
fadeimages[0]=["images/index/feature-banner-01.jpg","",""] //"image path", "url link", "_blank"
fadeimages[1]=["images/index/feature-banner-02.jpg","",""] 
fadeimages[2]=["images/index/feature-banner-03.jpg","",""] 
fadeimages[3]=["images/index/feature-banner-04.jpg","",""] 

// #### no need to touch anything below ####

var preloadedimages=new Array()
for (p=0;p<fadeimages.length;p++){
preloadedimages[p]=new Image()
preloadedimages[p].src=fadeimages[p][0]
}

document.write('<div style="position:relative;width:'+slideshow_width+';height:'
+slideshow_height+';overflow:hidden"><div id="canvas0" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height +';top:0;left:0;filter:alpha(opacity=0);-moz-opacity:0;"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height +';top:0;left:0;filter:alpha(opacity=0);-moz-opacity:0;"></div></div>')


var curpos=0
var currentdivid="canvas0"
var curimageindex=0
var nextimageindex=1

function fadepic(){
//keep increasing the opacity until 100%
if (curpos<100){
curpos+=fadeinspeed
if (tempobj.filters)
	{
	tempobj.filters.alpha.opacity=curpos
	}
else if (tempobj.style.MozOpacity){
	tempobj.style.MozOpacity=curpos/101
	}
}
else{
//cancels the setInterval function
clearInterval(dropslide)
nextcanvas=(currentdivid=="canvas0")? "canvas0" : "canvas1"
//gets the other canvas dom element eg <div id="canvas1"></div>
tempobj= document.getElementById(nextcanvas)
tempobj.innerHTML=insertimage(nextimageindex)
curimageindex = nextimageindex
nextimageindex=(nextimageindex<fadeimages.length-1)? nextimageindex+1 : 0
//End of routine! Pause a certain amount of time before starting again
setTimeout("rotateimage()",pause)
}
}


function rotateimage(){
preparenextdiv(currentdivid)
//get a dom reference to the current div
var divelement=tempobj=document.getElementById(currentdivid)
divelement.style.zIndex++
currentdivid=(currentdivid=="canvas0")? "canvas1" : "canvas0"
var divelement2=tempobj2=document.getElementById(currentdivid)
//call fadepic every x miliseconds
dropslide=eval(setInterval("fadepic()",50))
}

function preparenextdiv(currentdivid){
//sets the visibility to visible and then sets opacity to 0 for fade in function
var imgelement = document.getElementById(fadeinstancename+curimageindex)
imgelement.style.visibility="visible"
curpos=0
var divelement=document.getElementById(currentdivid)
if (divelement.filters)
divelement.filters.alpha.opacity=curpos
else if (divelement.style.MozOpacity)
divelement.style.MozOpacity=curpos/101
}

//creates the string <a href="link.html"><img src="/images/myimage.png" border="0" /></a>
function insertimage(i){
var tempcontainer=fadeimages[i][1]!=""? '<a href="'+fadeimages[i][1]+'" target="'+fadeimages[i][2]+'">' : ""
tempcontainer+='<img src="'+fadeimages[i][0]+'" border="0" id="' + fadeinstancename + [i] + '" />'
tempcontainer=fadeimages[i][1]!=""? tempcontainer+'</a>' : tempcontainer
return tempcontainer
}

//populates the div container <div id="canvas0"></div> with the 1st image in the array on startup
function startit(){
var divelement = document.getElementById(currentdivid)
divelement.innerHTML=insertimage(curimageindex)
rotateimage()
}
window.onload=startit