// load array with images

// swap images on page through array

var currentImage;
var hiddenImage;
var theCurrentImageSrc;
var theHiddenImageSrc;
var rotateNumber = 1;
var selectedNumber = 0;
var continueRotation = true;
var changing;
var selectedThumb;

var imageArray = new Array();
var preloadArray = new Array();

function getImages() {
	// get images src and remove thumbs/ directory
	imageArray[0] = document.getElementById('is-t-0').src.replace(/thumbs\//gi, '');
	imageArray[1] = document.getElementById('is-t-1').src.replace(/thumbs\//gi, '');
	imageArray[2] = document.getElementById('is-t-2').src.replace(/thumbs\//gi, '');
	imageArray[3] = document.getElementById('is-t-3').src.replace(/thumbs\//gi, '');
	imageArray[4] = document.getElementById('is-t-4').src.replace(/thumbs\//gi, '');
	for(var x = 0; x < imageArray.length; x++) {
		var theImage = new Image();
		theImage.src = imageArray[x];
	}
	document.getElementById('is-t-0').style.cursor ='pointer';
	document.getElementById('is-t-1').style.cursor ='pointer';
	document.getElementById('is-t-2').style.cursor ='pointer';
	document.getElementById('is-t-3').style.cursor ='pointer';
	document.getElementById('is-t-4').style.cursor ='pointer';
}
function autoRotate() {
	if(continueRotation) {
		// get handle on currently displayed image
		currentImage = document.getElementById('currentImage');
		hiddenImage = document.getElementById('hiddenImage');
		opacity('currentImage', 100, 0, 1000);
		//alert(rotateNumber);
		var currentThumb = document.getElementById('is-t-' + (selectedNumber));
		//alert(currentThumb);
		currentThumb.className = '';
		setSelected();
		// set timeout - call this function again
		setTimeout("setCurrent()", 4000);
	}
}
function setSelected() {
	if(selectedNumber == 4) {
		selectedNumber = 0
	}
	else {
		selectedNumber++;
	}
	selectedThumb = document.getElementById('is-t-' + (selectedNumber));
	selectedThumb.className = 'selected';
}
function setCurrent() {
	if(!continueRotation){
		currentImage.src = hiddenImage.src;	
	}
	else {
		currentImage.parentNode.appendChild(hiddenImage);
		currentImage.id = "hiddenImage";
		hiddenImage.id = "currentImage";
		/*opacity('hiddenImage', 0, 100, 0);*/
		changeOpac(100, 'hiddenImage');
		setHidden();
		autoRotate();	
	}
	changing = false;
}
function setHidden() {
	// load new image into hidden IMG
	currentImage.src = imageArray[rotateNumber];
	if(rotateNumber == 4) {
		rotateNumber = 0;
	}
	else {
		rotateNumber++;
	}
}
function start() {
	go();
	setup();
	setTimeout("autoRotate()", 2000);
}
// sets the initially hidden image
function setup() {
	currentImage = document.getElementById('currentImage');
	document.getElementById('is-t-0').className = 'selected';
	hiddenImage = document.getElementById('hiddenImage');
	getImages();
	addOnClick();
	hiddenImage.src = imageArray[rotateNumber];
	rotateNumber++;
}

// add on click events
function addOnClick() {
	for(var x = 0; x < imageArray.length; x++) {
		var theImage = document.getElementById('is-t-' + x);
		addEvent(theImage, 'mouseup', processOnclick, false);
	}
}

// process onclick
function processOnclick(e) {
	// stop autorotate
	continueRotation = false;
	// if changing
	if(changing) {
		//do nothing
	}
	else {
		changing = true;
		getImages();
		// get src
		var eventObject = getEventObject(e);
		var theSrc = eventObject.src.replace(/thumbs\//gi, '');
		// loop through array to correct item
		for(var x = 0; x < imageArray.length; x++) {
			// remove currently selected class
			document.getElementById('is-t-'+ x).className = '';
			if(imageArray[x] == theSrc) {
				// set hidden large image
				//hiddenImage.style.display = 'none';
				hiddenImage.src = theSrc;
				//setTimeout("showHidden()", 100);
				//opacity('currentImage', 100, 0, 1000);
				setCurrent();		
			} 
		}
		eventObject.className = 'selected';
	}
}

/* --------------- GENERIC FUNCTIONS ---------------------- */ 

// function to add event listener regardless of browser 
// el is the DOM element, 
// eType is the event type, 
// fn is the function to execute and uC is the propogation type - true to propogate, false to not
function addEvent(el, eType, fn, uC) {
    if (el.addEventListener) {
        el.addEventListener(eType, fn, uC);
    }
    // IE Specific
    else if (el.attachEvent) {
	el.attachEvent('on' + eType, fn);
    }
    else {
	el['on' + eType] = fn;
    }
}

function getEventObject(e) {
    var eventObject;
    if (e.target) {
	eventObject = e.target;
	return eventObject;
    }
    else if (e.srcElement) {
	eventObject = e.srcElement;
	return eventObject;			
    }
    else if (window.event) {
	eventObject = window.event;
	return eventObject;	
    }
}

function stopDefaultEvent(e) {
    if (e && e.preventDefault) {
	e.preventDefault();
    }
    // IE Specific
    else if (window.event && (window.event.returnValue == null)) {
	window.event.returnValue = false;
    }
}

function stopEventBubble(e) {		
    if (e && e.stopPropogation) {
        e.stopPropogation();
    }
    // IE Specific
    else if (window.event && window.event.cancelBubble) {
	window.event.cancelBubble = true;
    }
}

/* --------------- FADE JS ---------------------- */ 

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);
    object.MozOpacity = (opacity / 100);
    object.KhtmlOpacity = (opacity / 100);
    object.filter = "alpha(opacity=" + opacity + ")";
}

window.onload = start;