var container_height=240;     //thumb image container height
var imgWidth=520;             //big image width and container width
var imgBorder=0;              //big image border
var imgWidth_thum=100;        //thumb image width
var imgBorder_thum=0;         //thumb image border
var position_thum="center"; //thumb image position used for croping main image

var contents = new Array();
contents = [
	["/rotate/images/mission.gif", "http://www.techenterprises.org", "_self"],
	["/rotate/images/sanAntonio.gif", "http://www.techenterprises.org", "_self"],
	["/rotate/images/the3.gif", "http://www.techenterprises.org", "_self"] //no comma following last entry!
];

window.onload = getImages;

var zInterval = null, current=0, i, images="", images_thum="", thumbImg, showImg=0, startBox, hideImg, obj, image, imageId, slideNum, display, thumbFade;
 
function getImages() //loop through image array and place images in the cont1 div
{
	//calculate the thumb container and image height
	var thumbContHeight = (container_height/contents.length);

	for(i=0;i<contents.length;i++)
	{
		images+='<a href="'+contents[i][1]+'" onmouseover="stop_img();" onmouseout="go_img();"><img id="img'+i+'" src="'+contents[i][0]+'" width="'+imgWidth+'" border="'+imgBorder+'" style="position:absolute; display:none;" /></a>';
		
		//you can add onclick="startSlide('+i+');" if you need to select thumb instead of using the onmouseover="startSlide('+i+');"
		images_thum+='<div id="thumbImg'+i+'" onmouseover="startSlide('+i+');" style="width:'+imgWidth_thum+'px; height:'+thumbContHeight+'px; background-color:#000; background-image:url('+contents[i][0]+'); background-size:200px; background-position:'+position_thum+'; background-repeat:no-repeat; opacity:0.4; filter:alpha(opacity=40);"></div>';
	}
	images_thum+='<div id="mydiv" style="position:relative; top:'+-container_height+'px; z-index:10; width:30px; background-position:center left; background-image:url(/rotate/arrow.png); background-repeat:no-repeat;"></div>';
	
	document.getElementById('container').style.height = container_height+'px';
	document.getElementById('container').style.width = imgWidth+imgWidth_thum+'px';
	document.getElementById('cont1').style.width = imgWidth+'px';
	document.getElementById('cont1').style.height = container_height+'px';
	document.getElementById('cont2').style.height = container_height+'px';
	document.getElementById('cont1').innerHTML = images;
	document.getElementById('cont2').innerHTML = images_thum;
	document.getElementById('mydiv').style.height = thumbContHeight+'px';
	
	var timeoutID = setTimeout ( "startSlide()", 100 ); // start slide right away
}

var intervalID = setInterval ( "startSlide()", 5000 ); // loops slide at this speed

function stop_img() // onmouseover image stop the interval
{
	clearInterval(intervalID);
}

function go_img() // onmouseout of image start interval again
{
	clearInterval(intervalID);
	intervalID = setInterval ( "startSlide()", 3000 );
}

function startSlide(slideNum) //allows you to select image by hiding all of them before displaying selected image
{
	if(slideNum<=contents.length) { 
		for(i=0;i<contents.length;i++) 
		{
			document.getElementById('img'+i).style.display = 'none';
			document.getElementById('thumbImg'+i).style.opacity = .4; // fade previous thumb image in others
	 		document.getElementById('thumbImg'+i).style.filter = 'alpha(opacity:"40")'; //fade previous thumb image in IE
		}
		
		showImg=slideNum;
		clearInterval(intervalID); //clear the interval for clean transition
		stopFollow();
		intervalID = setInterval ( "startSlide()", 3000 ); //restart the interval for clean transition
		slideNum='';
	}
		
	//times shows and hides the images
	if(showImg>contents.length-1) { //if end of array reset hideImg to end and showImg to start
		showImg=0;
		hideImg=contents.length-1;
	}
	else
	{
		if(showImg==0) { //if start reset hideImg to last image hide
			hideImg=contents.length-1;
		}
		else
		{
			hideImg=showImg-1;
		}
	}

	// makes the photo completely tranpsarent by using the setOpacity function to set its opacity to zero. The image can then be made visible and faded in using the fadeIn function
	//positions the divname on the selected or rotating thumb image

	startBox = ((((container_height / contents.length) * showImg) - container_height)); 	
 	 imageId='img'+showImg;
  	 image = document.getElementById(imageId);
 	 setOpacity(image, 0);
 	 image.style.display = 'block'; // show current image
 	 fadeIn(imageId,0);
	
	 document.getElementById('img'+hideImg).style.display = 'none'; //Hide previous image
	 
	 document.getElementById('mydiv').style.top = startBox+'px'; //center arrow on selected thumb image
	 
	 thumbImg='thumbImg'+showImg;
	 thumbFade=document.getElementById(thumbImg);
	 thumbFade.style.opacity = 1;
	 thumbFade.style.filter = 'alpha(opacity:"100")'; //show 100% fade of thum image
	 document.getElementById('thumbImg'+hideImg).style.opacity = .4; // fade previous thumb image in others
	 document.getElementById('thumbImg'+hideImg).style.filter = 'alpha(opacity:"40")'; //fade previous thumb image in IE

	showImg++;
	
}

function setOpacity(obj, opacity) { //set the opacity
  		opacity = (opacity == 100)?99.999:opacity;
  
  		// IE/Win
  		obj.style.filter = "alpha(opacity:"+opacity+")";
  
  		// Safari<1.2, Konqueror
 		 obj.style.KHTMLOpacity = opacity/100;
  
  		// Older Mozilla and Firefox
  		obj.style.MozOpacity = opacity/100;
  
  		// Safari 1.2, newer Firefox and Mozilla, CSS3
 		 obj.style.opacity = opacity/100;
	}
	
function fadeIn(objId,opacity) { // make visible and faded in usign the setOpacity to apply fade to image
 		 if (document.getElementById) {
    		obj = document.getElementById(objId);
    		if (opacity <= 100) {
      			setOpacity(obj, opacity);
      			opacity += 5;
     			 window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 10);
   	 		}
  		}
	}