/*
 * Library to help properly display the photos in the articles.
 */
var Showcase = {
	checkInterval: 50,
	defaultSpeed: 500,
	fadeDelay: 700,
	viewing: false,
	hzpadding: 21 * 2,
	vtpadding: 36 * 2,
	bottomDist: 25,
	topdist: 100,
	previousPic: [],
	previousFactor: 0,
	currentPic: [],
	observe: false,
	overrideFactorDimensions: false,
	observeElement: null,
	loadingGif: null,
	fader: null,
	container: null,
	controlBox: null,
	picBox: null,
	controls: null,
	pages: null,
	closeLabel: null,
	timerid: null,
	thumbCaptionInitialOpacity: '0.5',
	thumbCaptionFinalOpacity: '0.9'
};

Showcase.initialize = function () {
	// Set up the top and left margins for the caption
	var thumbCaption = $('#thumbCaption');
	thumbCaption.css( { marginLeft: '-' + (thumbCaption.width() / 2) + 'px', 
						marginTop: '-' + (thumbCaption.height() / 2) + 'px', 
						opacity: 0,
						top: '50%',
						left: '50%'
					} );
	thumbCaption.animate( { opacity: Showcase.thumbCaptionInitialOpacity } , { duration: Showcase.defaultSpeed } );
	
	// Set up the mouse events for the div containing the overview picture on the main page
	$('#articleThumb').mouseenter(function () {
		$('#thumbCaption').css( { display:'block', opacity: Showcase.thumbCaptionInitialOpacity } );
		$('#thumbCaption').animate( { opacity: Showcase.thumbCaptionFinalOpacity } , { queue: false, duration: Showcase.defaultSpeed } );
	}).mouseleave(function () {
		$('#thumbCaption').animate( { opacity: Showcase.thumbCaptionInitialOpacity } , { queue: false, duration: Showcase.defaultSpeed } );
	});
	
	// Set up the mouse events for the next and previous page buttons
	$('#prevPage').mouseenter(function () {
		$('#prevPage').animate( { opacity: '1' } , { queue: false, duration: Showcase.defaultSpeed } );
	}).mouseleave(function () {
		$('#prevPage').animate( { opacity: '.3' } , { queue: false, duration: Showcase.defaultSpeed } );
	});
	$('#nextPage').mouseenter(function () {
		$('#nextPage').animate( { opacity: '1' } , { queue: false, duration: Showcase.defaultSpeed } );
	}).mouseleave(function () {
		$('#nextPage').animate( { opacity: '.3' } , { queue: false, duration: Showcase.defaultSpeed } );
	});
	
	// Cache the loading animation
	this.loadingGif = ce('img');
	this.loadingGif.src = "/images/loading_animate.gif";
	this.loadingGif.id = "articleLoadingAnimation";
	
	// Make the background fader
	this.fader = ce('div');
	this.fader.id = 'articleBackgroundFader';
	
	// Make the black box to hold the pics and controls
	this.controlBox = ce('div');
	this.controlBox.id = 'articlePicControlBox';
	
	// Put the loading gif in the corner
	ac(this.controlBox, this.loadingGif);
	
	// Make the pic box
	this.picBox = ce('div');
	this.picBox.id = 'articlePicBox';
	ac(this.controlBox, this.picBox);
	
	// Make the bottom controls
	this.controls = ce('div');
	this.controls.id = 'articlePicControls';
	this.pages = ce('span');
	this.pages.id = 'articlePicPages';
	var html = '';
	if (window.pics) {
		for (var i = 0; i < window.pics.length; ++i) {
			html += '<label id="articlePic' + i + '" class="articlePicPageNumber">' + (i + 1) + '</label><span class="articlePicPageNumberSpan">/</span>'; 
		}
	}
	this.pages.innerHTML = html;
	this.pages.removeChild(this.pages.lastChild);
	ac(this.controls, this.pages);
	ac(this.controlBox, this.controls);
	
	// Make the close button
	this.closeLabel = ce('label');
	this.closeLabel.id = 'articlePicCloseButton';
	this.closeLabel.innerHTML = 'x close';
	ac(this.controlBox, this.closeLabel);
	
	ac(document.body, this.fader);
	ac(document.body, this.controlBox);
	
	// Open the view
	$('#articleThumb').click(this.openPicView);
	
	// Close the view
	$(this.closeLabel).click(this.closePicView);
	$(this.fader).click(this.closePicView);
	
	// Open a new picture;
	$('label.articlePicPageNumber').click(this.changePic);
	
	// Resize event for the window
	$(window).resize(Showcase.resize);
	
//	$('#articlePicViewer').click(closePicView);
};

Showcase.openPicView = function () {
	if (!Showcase.viewing) {
		var w = window.pics[0][1];
		var h = window.pics[0][2];
		var m = w/2;
		$(Showcase.fader).css( { display: 'block', height: document.documentElement.scrollHeight + 'px' } );
		$(Showcase.fader).animate( { opacity: '0.7' } , { queue: false, duration: Showcase.fadeDelay, complete: function () {
								$(Showcase.controlBox).css( { display: 'block', width: w+'px', height: h+'px', marginLeft: '-'+m+'px' } );
								$(Showcase.controlBox).animate( { opacity: '1' } , { duration: Showcase.fadeDelay } );
								Showcase.changePic();
							}
						} );
		Showcase.viewing = true;
	}
};

Showcase.closePicView = function () {
	if (Showcase.viewing) {
		$(Showcase.controlBox).animate( { opacity: '0' } , { queue: true, duration: Showcase.fadeDelay, complete: function () {
						$(Showcase.controlBox).css( { display: '' } );
						removeChildren(Showcase.picBox);
						$(Showcase.fader).animate( { opacity: '0' } , { queue: true, duration: Showcase.fadeDelay, complete: function () {
							$(Showcase.fader).css( { display: '' } );
						} } );
					}
				});
		Showcase.viewing = false;
	}
}

Showcase.changePic = function () {
	/*
	 * NOTE: When this is called from the click event this function is actually run in the context of the jQuery Event (so in this case, the label page number)
	 */
	
	// Cancel any timeouts if there is one active
	if (Showcase.timerid != null) {
		clearTimeout(Showcase.timerid);
		Showcase.timerid = null;
	}
	
	// Place the current pic properties into the old pic ones
	Showcase.previousPic = Showcase.currentPic;
	
	// Get the pic number and src string
	var num = 0;
	if (this.tagName == 'LABEL') {
		num = Number(this.id.substring(10));
	}
	Showcase.currentPic = window.pics[num];
	var src = window.pics[num][0];
	Showcase.overrideFactorDimensions = false;
	var useLoadingAnimation = true;
	
	// Make the DOM element to start loading the pic right away
	var el = null;
	var ext = src.substring(src.length - 3).toLowerCase();
	if (ext == 'swf') {
		// Animated flash object
		el = ce('object');
		el.width = window.pics[num][1];
		el.height = window.pics[num][2];
		var param = ce('param');
		param.name = "movie";
		param.value = src;
		ac(el,param);
		var embed = ce("embed");
		embed.src = src;
		embed.width = window.pics[num][1];
		embed.height = window.pics[num][2];
		ac(el,embed);
		Showcase.overrideFactorDimensions = true;
		useLoadingAnimation = false;
	} else {
		// Regular picture
		el = ce("img");
		el.src = src;
		el.style.width = "100%";
		el.style.height = "100%";
	}
	Showcase.observeElement = el;
	
	if (useLoadingAnimation) {
		Showcase.loadingGif.style.display = 'block';
	}
	
	Showcase.observeLoadingPic();
}

Showcase.observeLoadingPic = function () {
	if (Showcase.observeElement.tagName != 'OBJECT') {
		if (!Showcase.observeElement.complete) {
			Showcase.timerid = setTimeout(Showcase.observeLoadingPic, Showcase.checkInterval);
			return;
		} else {
			clearTimeout(Showcase.timerid);
			Showcase.timerid = null;
		}
	}
	
	// Check if there is anything to remove during the animation sequence
	if (Showcase.picBox.childNodes.length > 0) {
		$(Showcase.picBox.lastChild).animate( { opacity: '0' }, { queue: true, duration: Showcase.defaultSpeed, complete: function() { 
			Showcase.picBox.removeChild(Showcase.picBox.lastChild);
			Showcase.loadNewPic();
			}
		} );
	} else {
		Showcase.loadNewPic();
	}
}

Showcase.loadNewPic = function () {
	// Adjust the size of the display to the browser dimensions
	var factor = 1;
	if (!Showcase.overrideFactorDimensions) {
		var maxwidth = (window.innerWidth || document.documentElement.clientWidth) - Showcase.hzpadding;
		var maxheight = (window.innerHeight || document.documentElement.clientHeight) - Showcase.vtpadding - Showcase.topdist - Showcase.bottomDist;
		if (Showcase.currentPic[2] > maxheight) {
			factor = maxheight / Showcase.currentPic[2];
		} else if (Showcase.currentPic[1] > maxwidth) {
			factor = maxwidth / Showcase.currentPic[1];
		}
	}
	// Change to the new picture with animation
	if (Showcase.observeElement.tagName == 'OBJECT') {
		// This is a SWF file
		ac(Showcase.picBox, Showcase.observeElement);
	} else {
		// This is a standard picture
		var w = (Showcase.currentPic[1] * factor);
		var m = w / 2;
		var h = (Showcase.currentPic[2] * factor);
		var s = Showcase.defaultSpeed;
		if (Math.floor(Showcase.previousPic[1] * Showcase.previousFactor) == Math.floor(Showcase.currentPic[1] * factor) && 
				Math.floor(Showcase.previousPic[2] * Showcase.previousFactor) == Math.floor(Showcase.currentPic[2] * factor)) {
			s = 0;
		}
		Showcase.previousFactor = factor;
		$(Showcase.observeElement).css( { opacity: '0', display: 'none' } );
		$(Showcase.controlBox).animate( { width: w + 'px' }, { queue: false, duration: s } )
				.animate( { marginLeft: '-' + m + 'px' }, { queue: false, duration: s } )
				.animate( { height: h + 'px' } , { queue: false, duration: s, complete: function () {
					Showcase.observeElement.style.display = 'block';
					ac(Showcase.picBox, Showcase.observeElement);
					$(Showcase.observeElement).animate( { opacity: '1' }, { queue: true, duration: Showcase.defaultSpeed, complete: function () {
						$(Showcase.loadingGif).css( { display: 'none' } );
					}
					} );
				}
				} );
	}
}

Showcase.resize = function () {
	// Don't do anything if this is a flash object
	if (!Showcase.viewing || Showcase.currentPic[0].substring(Showcase.currentPic[0].length - 3).toLowerCase() == 'swf') {
		return;
	}
	
	// Adjust the size of the display to the browser dimensions
	var factor = 1;
	if (!Showcase.overrideFactorDimensions) {
		var maxwidth = (window.innerWidth || document.documentElement.clientWidth) - Showcase.hzpadding;
		var maxheight = (window.innerHeight || document.documentElement.clientHeight) - Showcase.vtpadding - Showcase.topdist - Showcase.bottomDist;
		if (Showcase.currentPic[2] > maxheight) {
			factor = maxheight / Showcase.currentPic[2];
		} else if (Showcase.currentPic[1] > maxwidth) {
			factor = maxwidth / Showcase.currentPic[1];
		}
	}
	
	if (Showcase.previousFactor == factor) {
		return;
	}
	
	// This is a standard picture
	var w = (Showcase.currentPic[1] * factor);
	var m = w / 2;
	var h = (Showcase.currentPic[2] * factor);
	var s = Showcase.defaultSpeed;
	Showcase.previousFactor = factor;
	$(Showcase.controlBox).animate( { width: w + 'px' }, { queue: false, duration: s } )
			.animate( { marginLeft: '-' + m + 'px' }, { queue: false, duration: s } )
			.animate( { height: h + 'px' } , { queue: false, duration: s } );
};

function removeChildren (e) {
	for (var i = 0; i < e.childNodes.length; ++i) {
		e.removeChild(e.firstChild);
	}
}

window.onload = function () {
	window.Showcase = Showcase;
	Showcase.initialize();
};