//	Slideshow script


//Images to be used in slideshow
//	More images may be added to the slideshow by simply adding elements to this array

imgArray = new Array();
imgArray[0] = 'images/custom/slideshow/shanghai.jpg';
imgArray[1] = 'images/custom/slideshow/hospitals.jpg';
imgArray[2] = 'images/custom/slideshow/breastandthyroid.jpg';
imgArray[3] = 'images/custom/slideshow/cancer.jpg';
imgArray[4] = 'images/custom/slideshow/dentistry.jpg';
imgArray[5] = 'images/custom/slideshow/gammaknife.jpg';
imgArray[6] = 'images/custom/slideshow/gastrointestinal.jpg';
imgArray[7] = 'images/custom/slideshow/gynecology.jpg';
imgArray[8] = 'images/custom/slideshow/heart.jpg';
imgArray[9] = 'images/custom/slideshow/ivf.jpg';
imgArray[10] = 'images/custom/slideshow/joint.jpg';
imgArray[11] = 'images/custom/slideshow/liver.jpg';
imgArray[12] = 'images/custom/slideshow/lung.jpg';
imgArray[13] = 'images/custom/slideshow/plastic.jpg';
imgArray[14] = 'images/custom/slideshow/sexualreassignment.jpg';
imgArray[15] = 'images/custom/slideshow/spine.jpg';
imgArray[16] = 'images/custom/slideshow/stemcell.jpg';
imgArray[17] = 'images/custom/slideshow/organtransplant.jpg';
imgArray[18] = 'images/custom/slideshow/urology.jpg';

//	path of link for each image - index in linkArray corresponds to index in imgArray
linkArray = new Array();
linkArray[0] = 'pages/shanghai.html';
linkArray[1] = 'pages/hospitals.html';
linkArray[2] = 'catalog/Breast_and_Thyroid-53-1.html';
linkArray[3] = 'catalog/Cancer-3-1.html';
linkArray[4] = 'catalog/Dentistry-18-1.html';
linkArray[5] = 'catalog/Gamma_Knife-68-1.html'; //gamma knife
linkArray[6] = 'catalog/Gastrointestinal_Disorder-1-1.html';
linkArray[7] = 'catalog/Gynecology-6-1.html';
linkArray[8] = 'catalog/Heart-7-1.html';
linkArray[9] = 'catalog/In_Vitro_Fertilization-8-1.html';
linkArray[10] = 'catalog/Joint-9-1.html';
linkArray[11] = 'catalog/Liver-12-1.html';
linkArray[12] = 'catalog/Lung-10-1.html';
linkArray[13] = 'catalog/Plastic_and_Reconstruction-11-1.html';
linkArray[14] = 'catalog/Sexual_Reassignment-20-1.html';
linkArray[15] = 'catalog/Spine-15-1.html';
linkArray[16] = 'catalog/Stem_Cell_Therapy-72-1.html'; //stem cell
linkArray[17] = 'catalog/Organ_Transplant-14-1.html';
linkArray[18] = 'catalog/Urology-16-1.html';

// Preload the images
var len = imgArray.length;
var preLoad = new Array();

for(i = 0; i < len; i++)
{
	preLoad[i] = new Image(100, 100);
	preLoad[i].src = imgArray[i];
}

//Duration each image will show before transition
slideShowSpeed = 5000;


//Current position in the array.
currentPos = 0;

// method to start/run the slideshow
function runSlideShow() {
	
	//increase the current position each time this method is called. 
	//	the '%imgArray.length' keeps the current position within the bounds of the array.
	currentPos = ++currentPos%imgArray.length;
	
	//call blendimage function. 
	//	1st argument = id of 1st div tag (current image)
	//	2nd argument = id of image inside the div tag (for the new image)  
	//	3rd argument = path of new image - from the array
	//	4th argument = duration of the transition
	//	5th argument = id of link (anchor tag) that wraps the img
	//	6th argument = path of new link address
	blendimage('main-banner','main-banner2',imgArray[currentPos],400, 'slideLink', linkArray[currentPos]);
	
	//pause and recursively call this function
    timervar = setTimeout('runSlideShow()', slideShowSpeed);
}


function opacity(id, opacStart, opacEnd, millisec) {
	//speed for each frame
	var speed = Math.round(millisec / 100);
	var timer = 0;

	//determine the direction for the blending, if start and end are the same nothing happens
	if(opacStart > opacEnd) {
		for(i = opacStart; i >= opacEnd; i--) {
			setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
			timer++;
		}
	} else if(opacStart < opacEnd) {
		for(i = opacStart; i <= opacEnd; i++)
			{
			setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
			timer++;
		}
	}
}

//change the opacity for different browsers
function changeOpac(opacity, id) {
	var object = document.getElementById(id).style; 
	object.opacity = (opacity / 100);	/* CSS Compliant style */
	object.MozOpacity = (opacity / 100);	/* Legacy Mozilla style */
	object.KhtmlOpacity = (opacity / 100);	
	object.filter = "alpha(opacity=" + opacity + ")";  /* IE style */
}

//parameters:  divid = id of 1st div, imageid = id of 2nd div, imagefile = path of new image, millisec = transition duration
function blendimage(divid, imageid, imagefile, millisec, linkid, linkLocation) {
	var speed = Math.round(millisec / 100);
	var timer = 0;
	
	//set the current image as background
	document.getElementById(divid).style.backgroundImage = 'url(' + document.getElementById(imageid).src + ')';
		
	//make image transparent
	changeOpac(0, imageid);
	
	//make new image
	document.getElementById(imageid).src = imagefile;

	document.getElementById(linkid).href = linkLocation;
	
	//fade in image
	for(i = 0; i <= 100; i++) {
		setTimeout("changeOpac(" + i + ",'" + imageid + "')",(timer * speed));
		timer++;
	}
	
}


//function to skip to a specified slide.
//	resets the timer, then calls runSlideShow() with a new current position in the array
function skipToSlide(pos){

	clearTimeout(timervar);
	
	currentPos = pos;
	
	blendimage('main-banner','main-banner2',imgArray[currentPos],400, 'slideLink', linkArray[currentPos]);	
    timervar = setTimeout('runSlideShow()', slideShowSpeed);	
}