/**
 * The ImageUpdateMouseListener listens for clicks on a radio button and fills 
 * a destImageElement on the preview pane with the associated image. This 
 * listener assumes that the value of the radio button = the id of the source 
 * image. It then uses the given destImageID to find the destination image and
 * sets it's src value to the src value of the source image.
 * Usage Example:
 * <!-- initialize the mouse listener -->
 * var imageUpdateMouseListener = new ImageUpdateMouseListener('mainImagePreview');
 *
 * <!-- The radio button -->
 * <input type="radio" value="NGALSBEKJQZHKRKFOITX" />
 * 
 * <!-- The source image -->
 * <img src="/images/designs/packages/main/babyshower1.gif" id="NGALSBEKJQZHKRKFOITX" />
 * 
 * <!-- The dest image -->
 * <img src="" id="mainImagePreview" />
 */
//public class ImageUpdateMouseListener implements MouseListener {

	/**
	 * Creates a new ImageUpdateMouseListener with the given mainImageElementID.
	 */
	function ImageUpdateMouseListener(destImageID, defaultColor, userUploadId) {
		this.destImageElement = document.getElementById(destImageID);
		this.userUploadElement = document.getElementById(userUploadId);
		this.userUploaded = this.userUploadElement.checked;
		this.defaultColor = defaultColor;
		this.mouseClicked = _imageUpdate_mouseClicked;
		this.mouseDoubleClicked = _imageUpdate_mouseDoubleClicked;
		this.mouseEntered = _imageUpdate_mouseEntered;
		this.mouseExited = _imageUpdate_mouseExited;
		this.mousePressed = _imageUpdate_mousePressed;
		this.mouseReleased = _imageUpdate_mouseReleased;
		this.setUserUploaded = _imageUpdate_setUserUploaded;
	}
	
	function _imageUpdate_setUserUploaded(userUploaded) {
		this.userUploaded = userUploaded;
	}
	
	function _imageUpdate_mouseClicked(event) {
		/*
		if(Logger) {
			Logger.log("_imageUpdate_mouseClicked");
		}
		*/
		eventSource = event.getSource();
		sourceImageSrc = '';
		sourceImageElement = null;
		if(!eventSource.src) {
			sourceImageElement = document.getElementById(eventSource.value);
		} else {
			sourceImageElement = eventSource;
			radioButtonElement = document.getElementById('RB_' + sourceImageElement.id);
			if(radioButtonElement) {
				radioButtonElement.checked = true;
			}
		}
		if(sourceImageElement) {
			sourceImageSrc = sourceImageElement.src;
		}
		/*
		if(Logger) {
			Logger.log("eventSource(exists:" + (eventSource != null) + 
				") - value: " + eventSource.value + "<br />sourceImageElement(exists:" + 
				(sourceImageElement != null) + ") - src: " + sourceImageSrc);
			Logger.log("destImageElement exists: " + (this.destImageElement != null));
		}
		*/
		if(this.destImageElement) {
			if(eventSource.id == this.userUploadElement.id && !this.userUploaded) {
				this.destImageElement.src = '/images/designs/packages/background/t.gif';
				this.destImageElement.style.backgroundColor = this.defaultColor;
			} else if(sourceImageSrc != null && eventSource.value != 'NA') {
				this.destImageElement.src = sourceImageSrc;
				this.destImageElement.style.backgroundColor = '';
			} else {
				this.destImageElement.src = '/images/designs/packages/background/t.gif';
				this.destImageElement.style.backgroundColor = this.defaultColor;
			}
		}
	}
	function _imageUpdate_mouseDoubleClicked(event) {}
	function _imageUpdate_mouseEntered(event) {}
	function _imageUpdate_mouseExited(event) {}
	function _imageUpdate_mousePressed(event) {}
	function _imageUpdate_mouseReleased(event) {}
//}

/**
 * The ColorPaletteMouseListener listens for clicks on div elements and 
 * sets the hex value for the currently selected custom color element. This 
 * listener assumes that the id of the div = the hex color (minus the #).
 * It then uses the value of the given formElementId to find the 
 * placeHolderFormElement and sets it's value to the hex color. 
 * Usage Example:
 * <!-- initialize the mouse listener -->
 * var colorPaletteMouseListener = new ColorPaletteMouseListener('colorPaletteControl');
 *
 * <!-- The color div -->
 * <div id="FFFFFF" style="background-color: #FFFFFF; width: 10px; height: 10px;"></div>
 *
 * <!-- The radio button that controls the color palette -->
 * <input type="radio" name="colorPaletteControl" value="backgroundColor" />
 * 
 * <!-- The place holder form element -->
 * <input type="hidden" name="backgroundColor" value="" />
 */
//public class ColorPaletteMouseListener implements MouseListener {

	/**
	 * Creates a new ColorPaletteMouseListener with the given formElementId.
	 */
	function ColorPaletteMouseListener(formElementName) {
		this.formElementName = formElementName;
		this.mouseClicked = _colorPalette_mouseClicked;
		this.mouseDoubleClicked = _colorPalette_mouseDoubleClicked;
		this.mouseEntered = _colorPalette_mouseEntered;
		this.mouseExited = _colorPalette_mouseExited;
		this.mousePressed = _colorPalette_mousePressed;
		this.mouseReleased = _colorPalette_mouseReleased;
		this.getSelectedFormValue = _getSelectedFormValue;
		this.getSelectedFormObject = _getSelectedFormObject;
	}
	
	function _getSelectedFormValue() {
		returnValue = null;
		formElements = _getElementsByName(this.formElementName);
		for(i = 0; !returnValue && i < formElements.length; i++) {
			if(formElements[i].checked) {
				returnValue = formElements[i].value;
			}
		}
		return returnValue;
	}
	
	function _getSelectedFormObject() {
		returnValue = null;
		formElements = _getElementsByName(this.formElementName);
		for(i = 0; !returnValue && i < formElements.length; i++) {
			if(formElements[i].checked) {
				returnValue = colorPickerArray[i].hiddenField;
			}
		}
		return returnValue;
	}
	
	function _colorPalette_mouseClicked(event) {
		eventSource = event.getSource();
		formObject = this.getSelectedFormObject();
		selectedFormValue = this.getSelectedFormValue();
		colorBox = document.getElementById(selectedFormValue);
		if(colorBox) {
			colorBox.style.backgroundColor = eventSource.style.backgroundColor;
			formObject.value = eventSource.id;
			var previewElements = new Array();
			if(isIE) {
				_colorPalette_setColors("td", selectedFormValue, eventSource.style.backgroundColor);
				_colorPalette_setColors("div", selectedFormValue, eventSource.style.backgroundColor);
				_colorPalette_setColors("span", selectedFormValue, eventSource.style.backgroundColor);
				_colorPalette_setColors("table", selectedFormValue, eventSource.style.backgroundColor);
				_colorPalette_setColors("ul", selectedFormValue, eventSource.style.backgroundColor);
			} else {
				previewElements = _getElementsByName(selectedFormValue);
				nextPreviewElement = null;
				for(previewElementIndex = 0; previewElementIndex < previewElements.length; previewElementIndex++) {
					nextPreviewElement = previewElements[previewElementIndex];
					if(_doUpdateBackground(selectedFormValue)) {
						nextPreviewElement.style.backgroundColor = eventSource.style.backgroundColor;
					} else {
						nextPreviewElement.style.color = eventSource.style.backgroundColor;
					}
				}
			}
		}
	}
	
	function _doUpdateBackground(selectedFormValue) {
		return selectedFormValue == 'dyobgimage' || 
			selectedFormValue == 'dyoheaderbar' || 
			selectedFormValue == 'dyoreplybox'
	}
	
	function _colorPalette_setColors(tagName, selectedFormValue, newColor) {
		tempElements = document.getElementsByTagName(tagName);
		for(i = 0; i < tempElements.length; i++) {
			if(tempElements[i].className == selectedFormValue) {
				if(selectedFormValue == 'dyobgimage' || selectedFormValue == 'dyoheaderbar' || selectedFormValue == 'dyoreplybox') {
					tempElements[i].style.backgroundColor = newColor;
				} else {
					tempElements[i].style.color = newColor;
				}
			}
		}
	}
	function _colorPalette_mouseDoubleClicked(event) {}
	function _colorPalette_mouseEntered(event) {
		eventSource = event.getSource();
		eventSource.style.cursor = 'hand';
		eventSource.style.borderColor = '#000000';
	}
	function _colorPalette_mouseExited(event) {
		eventSource = event.getSource();
		eventSource.style.cursor = 'default';
		eventSource.style.borderColor = '#FFFFFF';
	}
	function _colorPalette_mousePressed(event) {}
	function _colorPalette_mouseReleased(event) {}
//}

/**
 * A FileUploadMouseListener can be attatched to any element and it will pass the
 * event along to the given delegate MouseListener and pretend the event came
 * from the given element.
 */
function FileUploadMouseListener(facadeElementId, delegateMouseListener) {
	this.delegate = delegateMouseListener;
	this.facade = document.getElementById(facadeElementId);
	this.mouseClicked = _delegate_mouseClicked;
	this.mouseDoubleClicked = _delegate_mouseDoubleClicked;
	this.mouseEntered = _delegate_mouseEntered;
	this.mouseExited = _delegate_mouseExited;
	this.mousePressed = _delegate_mousePressed;
	this.mouseReleased = _delegate_mouseReleased;
}

function _delegate_mouseClicked(event) {
	this.facade.checked = true;
	this.delegate.mouseClicked(new SimpleEvent(this.facade, event.getEvent()));
}
function _delegate_mouseDoubleClicked(event) {
	this.delegate.mouseDoubleClicked(new SimpleEvent(this.facade, event.getEvent()));
}
function _delegate_mouseEntered(event) {
	this.delegate.mouseEntered(new SimpleEvent(this.facade, event.getEvent()));
}
function _delegate_mouseExited(event) {
	this.delegate.mouseExited(new SimpleEvent(this.facade, event.getEvent()));
}
function _delegate_mousePressed(event) {
	this.delegate.mousePressed(new SimpleEvent(this.facade, event.getEvent()));
}
function _delegate_mouseReleased(event) {
	this.delegate.mouseReleased(new SimpleEvent(this.facade, event.getEvent()));
}