/**
 * Functions for jQuery to execute upon DOM ready.
 */
$(document).ready(function() {
	addRollover();
	addArtifactDropdowns();
	addPopups();
	loadImGoingImage();
});


/**
 * Popups: Add some popup configurations that can be invoked with
 * the use of a class.
 * Uses jQuery.
 * 
 * Example usage:
 * <a href="popup_page.html" class="popup">Open popup window</a>
 * <a href="popup_page.html" class="popup-controls">Open popup window with controls</a>
 */
function addPopups(){
	// 800x600 with no controls. Use class="popup"
	$("a.popup").open({
		width: 800,
		height: 600,
		toolbar: false,
		scrollbars: true,
		resizeable: false,
		status: false,
		top: 50,
		left: self.screen.availWidth/2 - 400
	});
	
	// 800x600 with controls. Use class="popup-controls"
	$("a.popup-controls").open({
		width: 800,
		height: 600,
		toolbar: true,
		location: true,
		scrollbars: true,
		resizeable: true,
		status: true,
		top: 50,
		left: self.screen.availWidth/2 - 400
	});
	
	// 400x350 without controls, for media players. Use class="popup-media"
	$("a.popup-media").open({
		width: 400,
		height: 350,
		scrollbars: false,
		resizeable: false,
		status: false,
		top: 50,
		left: self.screen.availWidth/2 - 200
	});
	
	// Custom configuration for Front2Back. Use class="popup-front2back"
	$("a.popup-front2back").open({
		width: 795,
		height: 542,
		toolbar: false,
		menubar: false,
		status: true,
		scrollbars: false,
		resizeable: true,
		directories: false,
		top: 50,
		left: self.screen.availWidth/2 - 400
	});
}


/**
 * I'm Going - random images
 * Uses jQuery.
 */
function loadImGoingImage() {
	// Check if I'm Going box exists on this page before loading images
	if ($('#imGoingImage').length != 0) {
		var imgPath = "../static/gw/images/features/";
		var images = new Array(
			imgPath + "imgoing_caitlin.jpg",
			imgPath + "imgoing_chris.jpg",
			imgPath + "imgoing_delia.jpg",
			imgPath + "imgoing_eric.jpg"
		);
		loadRandomImage("imGoingImage", images);	
	}
}


/**
 * Load a random image into the given IMG element.  Select the image from
 * the given array (images).
 * @param {String} imgElementId
 * @param {Array} images
 */
function loadRandomImage(imgElementId, images) {
	var rand = Math.floor(Math.random() * images.length);
	document.getElementById(imgElementId).src = images[rand];
}


/**
 * Add a rollover effect for Style Guide standard image buttons.
 * Just give the button a class of 'imgbutton'.
 * Uses jQuery.
 * 
 * HTML example:
 *     <a href="http://www.ed.gov/"><img class="imgbutton" src="ed_off2.gif"></a>
 * 
 * Button image filenames must be in this format:
 *     BUTTON_NAME_off2.gif = Normal image
 *     BUTTON_NAME_over.gif = Rollover image
 */
function addRollover(){
	$("img.imgbutton").hover(function(){
		this.src = this.src.replace("_off2", "_over");
	}, function(){
		this.src = this.src.replace("_over", "_off2");
	});
}


/**
 * Add behavior for artifact downloads from SELECT dropdown inputs.
 * Uses jQuery.
 * 
 * The SELECT tag must have an unique ID, and a class of "artifact-dropdown".
 * The submit "button" should simply be an A (link) tag containing an IMG.  The A tag
 * should have an unique ID consisting of the SELECT ID plus "_link".  The IMG
 * tag should have an unique ID named after the SELECT ID plus "_button".
 * 
 * The first option in the SELECT block is considered the default.
 * 
 * Opens artifacts in a new window (target="_blank").
 * 
 * HTML example:
 * 
 * <select id="artifacts1" class="artifact-dropdown">
 *     <option selected value="thispage.html" title="No file selected!">Please make a selection</option>
 *     <option value="file1.pdf" title="First file">Number One</option> 
 *     <option value="file2.pdf" title="Second file">Number Two</option>
 * </select>
 * <a id="artifacts1_link" href="thispage.html"><img id="artifacts1_button" src="button.gif" alt="Download"></a>
 * 
 */
function addArtifactDropdowns(){
	$("select.artifact-dropdown").change(function(){
		buttonLink = document.getElementById(this.id + "_link");
		buttonImage = document.getElementById(this.id + "_button");
		currentSelection = this.options[this.selectedIndex];
		defaultOption = this.options[0];
		
		// Set the button link based on the selected OPTION.
		buttonLink.href = currentSelection.value;
		
		// Use the OPTION's title, if available, as the title and alternate text for the button.
		// Otherwise, use the OPTION's content.
		if (currentSelection.title) {
			buttonLink.title = "Download: " + currentSelection.title;
			buttonImage.alt = "Download: " + currentSelection.title;
		}
		else {
			buttonLink.title = "Download: " + currentSelection.innerHTML;
			buttonImage.alt = "Download: " + currentSelection.innerHTML;
		}
		
		// Set button to open in a new window only if the default option isn't selected.
		if (currentSelection.value == defaultOption.value) 
			buttonLink.target = "";
		else 
			buttonLink.target = "_blank";
	});
}