///////////////////////////////////////////////////////////////////
// InTheMomentPhotoOverlay 
///////////////////////////////////////////////////////////////////

function InTheMomentPhotoOverlay() {
	
	this.photoEnabled = false;
	if (document.getElementById('lightbox')) {this.photoEnabled = true}
	
	if (this.photoEnabled) {
		this.addPhotoBtn = YAHOO.util.Dom.get('btn_moment_addphoto');
	
		this.overlay = YAHOO.util.Dom.get('lightbox');
		this.overlayContainer = YAHOO.util.Dom.get('lightbox_container');
		this.overlayCloseBtn = YAHOO.util.Dom.get('lightbox_close');
		this.overlayCloseBtn2 = YAHOO.util.Dom.get('btn_close');
		this.overlayCancelBtn = YAHOO.util.Dom.get('btn_cancel');
		
		this.attachPhoto = YAHOO.util.Dom.get('btn_attach_photo');
	
		this.fileUpload = YAHOO.util.Dom.get('file_photo');
		this.fileUploadContainer = YAHOO.util.Dom.get('file_upload_container');
	}
	
	this.updateBtn = YAHOO.util.Dom.get('btn_moment_update');
	
	this.form = this.updateBtn.getAttribute('rel');

	this.dialogBubble = YAHOO.util.Dom.get('error_dialog');
	this.errorMessage = YAHOO.util.Dom.get('error_mssg');
	this.closeDialogBtn = YAHOO.util.Dom.get('btn_dialog_close');
	
	this.txtBox = YAHOO.util.Dom.get('answer');
	this.defaultText = this.txtBox.value;
	this.photoAddedFlag = 0;
	this.imageUploadRequired = YAHOO.util.Dom.get('imageUploadConf');
	
	this.init();
}

///////////////////////////////////////////////////////////////////
// InTheMomentPhotoOverlay.init()
///////////////////////////////////////////////////////////////////
InTheMomentPhotoOverlay.prototype.init = function() {
	
	if (this.photoEnabled) {
		this.addPhotoBtn.href = 'javascript:void(0);';
		YAHOO.util.Event.addListener(this.addPhotoBtn, 'click', function() {
				this.addPhotoClick();
			}, this, true);
		
		this.overlayCloseBtn.href = 'javascript:void(0);';
		YAHOO.util.Event.addListener(this.overlayCloseBtn, 'click', function() {
				this.closeOverlay();
			}, this, true);
		
		this.overlayCloseBtn2.href = 'javascript:void(0);';
		YAHOO.util.Event.addListener(this.overlayCloseBtn2, 'click', function() {
				this.closeOverlay();
			}, this, true);
		
		this.overlayCancelBtn.href = 'javascript:void(0);';
		YAHOO.util.Event.addListener(this.overlayCancelBtn, 'click', function() {
				this.disposeFile();
				this.closeOverlay();
			}, this, true);
		
		this.attachPhoto.href = 'javascript:void(0);';
		YAHOO.util.Event.addListener(this.attachPhoto, 'click', function() {
				if (this.validatePhoto()) {
					this.showAttachedMssg();
				}
			}, this, true);
		
		YAHOO.util.Event.addListener(window, 'resize', function() {
				if(this.darkness && (this.overlay.style.display == 'block')) {
					this.setLightboxBackground();
					this.positionOverlay();
				}
			}, this, true);
	}
	

	YAHOO.util.Event.addListener(this.closeDialogBtn, 'click', function() {
			YAHOO.util.Dom.setStyle(this.dialogBubble, 'display', 'none');
		}, this, true);

	YAHOO.util.Event.addListener(this.txtBox, 'keyup', function() {
			YAHOO.util.Dom.setStyle(this.dialogBubble, 'display', 'none');
		}, this, true);

// validation events for the textbox
	
	YAHOO.util.Event.addListener(this.txtBox, 'focus', function() {
			if (this.txtBox.value == this.defaultText) {
				this.textboxOnFocus();
			}
		}, this, true);
	
	YAHOO.util.Event.addListener(this.txtBox, 'blur', function() {
			if (this.txtBox.value == '') {
				this.resetTextbox();
			}
		}, this, true);
	
}


///////////////////////////////////////////////////////////////////
// InTheMomentPhotoOverlay.submitForm()
///////////////////////////////////////////////////////////////////
InTheMomentPhotoOverlay.prototype.submitForm = function() {
	
	this.errorMessage.innerHTML = "Hold on a sec...<br />You'll need to enter text first."
	this.bubblePosX = YAHOO.util.Dom.getX(this.updateBtn) - 145;
	this.bubblePosY = YAHOO.util.Dom.getY(this.updateBtn) - 107;
	
	
	if (this.validateText()) {
		
		if(this.imageUploadRequired != null && this.imageUploadRequired.value == 2 && this.photoAddedFlag == 0){
			this.errorMessage.innerHTML = "Hold on a sec...<br /> You will need to upload an image before posting."
			YAHOO.util.Dom.setStyle(this.dialogBubble, 'display', 'block');
			YAHOO.util.Dom.setXY(this.dialogBubble, [this.bubblePosX,this.bubblePosY]);
			return;
		}
		
		YAHOO.util.Event.removeListener(this.updateBtn, 'click');
		YAHOO.util.Dom.removeClass(this.updateBtn, 'btn_blue_small');
		YAHOO.util.Dom.addClass(this.updateBtn, 'btn_uploading');
		this.updateBtn.innerHTML = "Uploading...";
		document[this.form].submit();
	}

}

///////////////////////////////////////////////////////////////////
// InTheMomentPhotoOverlay.addPhotoClick()
///////////////////////////////////////////////////////////////////
InTheMomentPhotoOverlay.prototype.addPhotoClick = function() {
	
	this.errorMessage.innerHTML = "Hold on a sec...<br />You'll need to enter text before uploading a photo."
	if (this.photoEnabled) {
		this.bubblePosX = YAHOO.util.Dom.getX(this.addPhotoBtn) - 122;
		this.bubblePosY = YAHOO.util.Dom.getY(this.addPhotoBtn) - 107;
	}
	
	if (this.validateText()) {
		// open photo upload window
		this.showOverlay();
	}

}


///////////////////////////////////////////////////////////////////
// InTheMomentPhotoOverlay.validateText()
///////////////////////////////////////////////////////////////////
InTheMomentPhotoOverlay.prototype.validateText = function() {
	if (this.txtBox.value == this.defaultText || this.txtBox.value == '' || this.txtBox.value.replace(/^\s+|\s+$/g,'') == '') {
		// display error bubble
		YAHOO.util.Dom.setStyle(this.dialogBubble, 'display', 'block');
		YAHOO.util.Dom.setXY(this.dialogBubble, [this.bubblePosX,this.bubblePosY]);
		return false;
	} else {
		return true;
	}

}


///////////////////////////////////////////////////////////////////
// InTheMomentPhotoOverlay.showOverlay()
///////////////////////////////////////////////////////////////////
InTheMomentPhotoOverlay.prototype.showOverlay = function() {
	
		
		/* scrolls page */
		var currentScroll = YAHOO.util.Dom.getDocumentScrollTop();
		var colAScroll = YAHOO.util.Dom.getY('main_container_wrapper');
		window.scrollBy(0, colAScroll - currentScroll);

		/* creates element with transparent dark background and sets element to full size of window*/
		this.darkness = document.createElement('img');
		this.darkness.src = "http://family.go.com/images/lightbox_bg.png";
		this.darkness.className = 'transparency';
		this.darkness.id = 'lightboxDarkBg';
		this.darkness.style.position = 'absolute';
		this.darkness.style.zIndex = 3;
		this.darkness.style.top = '0px';
		this.darkness.style.left = '0px';
		this.darkness.style.width = YAHOO.util.Dom.getDocumentWidth() + 'px';
		this.darkness.style.height = YAHOO.util.Dom.getDocumentHeight() + 'px';
		
		document.body.appendChild(this.darkness);
		
		this.positionOverlay();
		document.body.appendChild(this.overlay);
	
}

///////////////////////////////////////////////////////////////////
// InTheMomentPhotoOverlay.positionOverlay()
///////////////////////////////////////////////////////////////////
InTheMomentPhotoOverlay.prototype.positionOverlay = function() {
	
	var overlayHeight = parseInt(this.overlay.offsetHeight);
	//var overlayWidth = parseInt(this.overlay.offsetWidth);
	
	var viewportHeight = YAHOO.util.Dom.getViewportHeight();
	//var viewportWidth = YAHOO.util.Dom.getViewportWidth();
	var scrollTop = YAHOO.util.Dom.getDocumentScrollTop();
	var topCorrection = scrollTop - 0 + ((viewportHeight - overlayHeight) / 2);
	//var leftCorrection = ((viewportWidth - overlayWidth) / 2);
	
	/* positions overlays longer than page viewable height */
	if (overlayHeight >= viewportHeight) {
		topCorrection = YAHOO.util.Dom.getY('main_container_wrapper');
		window.scrollBy(0, topCorrection - YAHOO.util.Dom.getDocumentScrollTop());
	}
	
	this.overlay.style.position = 'absolute';
	this.overlay.style.zIndex = 10;
	this.overlay.style.top = topCorrection + 'px';
	//this.overlay.style.left = leftCorrection + 'px';
	
}

///////////////////////////////////////////////////////////////////
// InTheMomentPhotoOverlay.setLightboxBackground()
// repositions darkness and overlay when window is resized
///////////////////////////////////////////////////////////////////
InTheMomentPhotoOverlay.prototype.setLightboxBackground = function(){
	this.darkness.style.width = YAHOO.util.Dom.getDocumentWidth() + 'px';
	this.darkness.style.height = YAHOO.util.Dom.getDocumentHeight() + 'px';
}

///////////////////////////////////////////////////////////////////
// InTheMomentPhotoOverlay.closeOverlay()
///////////////////////////////////////////////////////////////////
InTheMomentPhotoOverlay.prototype.closeOverlay = function() {
	document.body.removeChild(this.darkness);
	YAHOO.util.Dom.setStyle(this.overlay, 'top', '-5000px');
	//YAHOO.util.Dom.setStyle(this.overlay, 'visibility', 'hidden');
	this.overlayContainer.appendChild(this.overlay);
}

///////////////////////////////////////////////////////////////////
// InTheMomentPhotoOverlay.disposeFile()
///////////////////////////////////////////////////////////////////
InTheMomentPhotoOverlay.prototype.disposeFile = function() {
	
	var newEl = document.createElement('input');
	newEl.type = 'file';
	newEl.name = this.fileUpload.name;
	newEl.size = this.fileUpload.size;
	newEl.id = this.fileUpload.id;
	
	this.fileUploadContainer.innerHTML = '';
	this.fileUploadContainer.appendChild(newEl);
	this.fileUpload = YAHOO.util.Dom.get('file_photo');
	
}

///////////////////////////////////////////////////////////////////
// InTheMomentPhotoOverlay.validatePhoto()
///////////////////////////////////////////////////////////////////
InTheMomentPhotoOverlay.prototype.validatePhoto = function() {
	
	this.fileUpload = YAHOO.util.Dom.get('file_photo');
	var photo = this.fileUpload.value;
	
	var errorMessages = YAHOO.util.Dom.getElementsByClassName('error', 'div', this.overlay);
	for(var i = 0; i < errorMessages.length; i++) {
		errorMessages[i].style.display = 'none';
	}
	
	var validForm = true;
	if (photo == '') {
		document.getElementById('imageURIRequiredError').style.display = "block";
		validForm = false;
	} else {
		var ext = photo.substring(photo.indexOf('.') + 1);
		if (ext != 'gif' && ext != 'GIF' && ext != 'jpg' && ext != 'JPG' && ext != 'png' && ext != 'PNG') {
			document.getElementById('imageURIFormatError').style.display = "block";
			validForm = false;
		}
	}
	
	var certifyCheckbox = document.getElementById('certify_check');
	if (certifyCheckbox.checked == false) {
		document.getElementById('certify_checkRequiredError').style.display = "block";
		validForm = false;
	}
	
	if(validForm == true) {return true} else {return false}
}

///////////////////////////////////////////////////////////////////
// InTheMomentPhotoOverlay.showAttachedMssg()
///////////////////////////////////////////////////////////////////
InTheMomentPhotoOverlay.prototype.showAttachedMssg = function() {
	// close upload panel and display confirmation panel
	YAHOO.util.Dom.setStyle('attach_photo', 'display', 'none');
	YAHOO.util.Dom.setStyle('photo_attached_div', 'display', 'block');
	// swap 'add photo' btn with 'photo attached' message beneath underlay
	YAHOO.util.Dom.setStyle('btn_moment_addphoto', 'display', 'none');
	if(document.getElementById('moment_photo_attached_icon')) {
		YAHOO.util.Dom.setStyle('moment_photo_attached_icon', 'display', 'block');
	}
	this.photoAddedFlag = 1;	
		
	this.positionOverlay();
}

///////////////////////////////////////////////////////////////////
// InTheMomentPhotoOverlay.resetTextbox()
///////////////////////////////////////////////////////////////////
InTheMomentPhotoOverlay.prototype.resetTextbox = function() {
	// reset default text to textbox & change text color to grey
	this.txtBox.value = this.defaultText;
	YAHOO.util.Dom.setStyle(this.txtBox, 'color', '#999');
}

///////////////////////////////////////////////////////////////////
// InTheMomentPhotoOverlay.textboxOnFocus()
///////////////////////////////////////////////////////////////////
InTheMomentPhotoOverlay.prototype.textboxOnFocus = function() {
	
	// clear default text onfocus & change text color to black
	this.txtBox.value = '';
	YAHOO.util.Dom.setStyle(this.txtBox, 'color', '#000');

}

///////////////////////////////////////////////////////////////////
// this kicks everything off
///////////////////////////////////////////////////////////////////

var itmOverlay;

YAHOO.util.Event.onDOMReady(function() {
		itmOverlay = new InTheMomentPhotoOverlay();
	});