var topRow = null;
var theSelect = null;
var tina = null;
var smallPics = null;
var allImages = null;
var theImage = null;
var jCount = 0;

function addListeners() {
	topRow = getEl('topRow');
	theSelect = getEl('selection');
	tina = getEl('tina');
	smallPics = getEl('smallPics');
	theImage = getEl('small' + theMonth);
	theImage.style.borderColor = '#fff';
	theImage.style.borderStyle = 'inset';
	allImages = document.getElementsByTagName('img');
	jCount = allImages.length;
	for (var i = 0; i < jCount; i++) {
		theImage = allImages[i];
		if (theImage.className.indexOf('smallImage') != -1) {
			addEvent(theImage, 'click', showNewTina, false);
			addEvent(theImage, 'mouseover', highlightImage, false);
			addEvent(theImage, 'mouseout', highlightImage, false);
			addEvent(theImage, 'mousedown', buttonImage, false);
			addEvent(theImage, 'mouseup', buttonImage, false);
			//theImage.tinaLeft = findPosX(theImage.id);
			//theImage.tinaTop = findPosY('tina') + ((isIE) ? 626 : 586);
		} else if (theImage.id == 'tina')
			addEvent(theImage, 'click', function() {
				alert('Don\'t click me!\n\nClick the small pictures!');
			}, false);
	}

	resize();
	resetImages();

	if (!isIE)
		topRow.style.display = 'none';

	preloadTina();
}

function showNewTina(){
	var theNewMonth = getFront(getEnd(this.src, '/tk'), '-');
	if (theMonth == theNewMonth) return;

	theImage = getEl('small' + theMonth);
	theImage.style.borderColor = '#fff';
	theImage.style.borderStyle = 'outset';

	theMonth = theNewMonth;
	theImage = getEl('small' + theMonth);
	theImage.style.cursor = 'default';
	theImage.style.borderColor = '#fff';
	theImage.style.borderStyle = 'inset';

	var theNewSrc = 'Images/Tina/tk' + theMonth + '-98.jpg';
	if (!isIE) {
		tina.src = theNewSrc;
		return;
	}

	var theValue = theSelect.value;
	if (theValue == 23) {
		theValue = Math.floor(Math.random() * 24) - 1; // Random number from -1 through 22
	}

	if (theValue == -1) {
		tina.style.filter = 'progid:DXImageTransform.Microsoft.Fade()';
		tina.filters[0].apply();
		tina.src = theNewSrc;
		tina.filters[0].play(.8);
	} else {
		tina.style.filter = 'RevealTrans';
		tina.filters['RevealTrans'].transition = theSelect.value;
		tina.filters['RevealTrans'].apply();
		tina.src = theNewSrc;
		tina.filters['RevealTrans'].play(.6);
	}
}

function highlightImage(e) {
	var e = e || window.event;
	if (this.id == 'small' + theMonth) {
		if (e.type == 'mouseover')
			this.style.cursor = 'default';
		else
			this.style.cursor = 'pointer';
	} else {
		if (e.type == 'mouseover') {
			this.style.borderColor = '#fff';
			this.style.borderStyle = 'inset';
		}
		if (e.type == 'mouseout') {
			this.style.borderColor = '#fff';
			this.style.borderStyle = 'outset';
		}
	}
}

function buttonImage(e) {
	var e = e || window.event;
	resetImages();
	if (this.id == 'small' + theMonth)
		return;

	if (e.type == 'mousedown') {
		this.style.width = '104px';
		this.style.left = (parseInt(this.style.left) + 3) + 'px';
		this.style.height = '139px';
		this.style.top = (parseInt(this.style.top) + 3) + 'px';
	}
}

function resetImages() {
	var theImageLeft = 12;
	for (var i = 0; i < jCount; i++) {
		theImage = allImages[i];
		if (theImage.className.indexOf('smallImage') != -1) {
			theImage.style.left = theImageLeft + 'px'; // Set programmatically. To be used in buttonImage
			theImage.style.top = '20px'; // Set programmatically. To be used in buttonImage
			theImageLeft += 120;
			theImage.style.width = '110px';
			theImage.style.height = '145px';
		}
	}
}

function resize() {
	smallPics.style.left = (findPosX(tina) - 506) + 'px';
}

function preloadTina() {
	preloadImage('Images/Tina/tk01-98.jpg', 457, 600);
	preloadImage('Images/Tina/tk02-98.jpg', 457, 600);
	preloadImage('Images/Tina/tk03-98.jpg', 457, 600);
	preloadImage('Images/Tina/tk04-98.jpg', 457, 600);
	preloadImage('Images/Tina/tk05-98.jpg', 457, 600);
	preloadImage('Images/Tina/tk06-98.jpg', 457, 600);
	preloadImage('Images/Tina/tk07-98.jpg', 457, 600);
	preloadImage('Images/Tina/tk08-98.jpg', 457, 600);
	preloadImage('Images/Tina/tk09-98.jpg', 457, 600);
	preloadImage('Images/Tina/tk10-98.jpg', 457, 600);
	preloadImage('Images/Tina/tk11-98.jpg', 457, 600);
	preloadImage('Images/Tina/tk12-98.jpg', 457, 600);
}

addEvent(window, 'load', addListeners, false);
addEvent(window, 'resize', resize, false);