//****************************************************//
//		WYSIWYG FUNCTIONS
//****************************************************//

function insertEditableArea(editableContentName, editableAreaAttributes, editableAreaLayout, editableAreaStyle, editableAreaContent) {
	if (document.designMode) {
		var editableFrameName = getFrameName(editableContentName);
				var boldButton = '<button type="submit" src="http://www.journeytowellness.com/images/layout/rtf/bold.png" value="B" alt="Bold" name="' + editableContentName + '_button" class="editableAreaButton" id="bold"><B>B</B></button>';
		var italicButton = '<button type="submit" src="http://www.journeytowellness.com/images/layout/rtf/italic.png" value="I" alt="Italic" name="' + editableContentName + '_button" class="editableAreaButton" id="italic"><I>I</I></button>';
		var underlineButton = '<button type="submit" src="http://www.journeytowellness.com/images/layout/rtf/underline.png" value="U" alt="Underlined" name="' + editableContentName + '_button" class="editableAreaButton" id="underline"><U>U</U></button>';
		var inserthorizontalruleButton = '<button type="submit" src="http://www.journeytowellness.comstock_text_center.png" value="H" alt="HR" name="' + editableContentName + '_button" class="editableAreaButton" id="inserthorizontalrule"><H>H</H></button>';
		var justifyleftButton = '<button type="submit" src="http://www.journeytowellness.comstock_text_left.png" value="A" alt="Align Left" name="' + editableContentName + '_button" class="editableAreaButton" id="justifyleft"><A>A</A></button>';
		var justifyfullButton = '<button type="submit" src="http://www.journeytowellness.comstock_text_justify.png" value="J" alt="Justify" name="' + editableContentName + '_button" class="editableAreaButton" id="justifyfull"><J>J</J></button>';
		var justifycenterButton = '<button type="submit" src="http://www.journeytowellness.comstock_text_center.png" value="A" alt="Align Center" name="' + editableContentName + '_button" class="editableAreaButton" id="justifycenter"><A>A</A></button>';
		var justifyrightButton = '<button type="submit" src="http://www.journeytowellness.comstock_text_right.png" value="A" alt="Align Right" name="' + editableContentName + '_button" class="editableAreaButton" id="justifyright"><A>A</A></button>';

		// create a hidden field that will hold everything that is typed in the textarea (text area because issues escaping in a way that will allow it to be a hidden field)
		var editableArea = '<textarea id="' + editableContentName + '" name="' + editableContentName + '" style="visibility: hidden; background-color: orange; display: inline; width: 1px; height: 1px;">' + editableAreaContent + '</textarea>';
		// create the iFrame to do the WYSIWYG editing
		editableArea += '<div id="' + editableContentName + '_if" style="clear: both; display: block; visibility: visible;" onMouseOut="iFrameUpdated(\'' + editableContentName + '\')"><iframe id="' + editableFrameName + '" ' + editableAreaAttributes + ' frameborder="0px"></iframe></div>';
		// create a visible text area to edit the source code
		editableArea += '<div id="' + editableContentName + '_ta" style="clear: both; display: none; visibility: hidden;"><textarea id="' + getAreaName(editableContentName) + '" ' + editableAreaAttributes + ' onkeyup="sourceUpdated(\'' + editableContentName + '\');">' + editableAreaContent + '</textarea></div>';
	
		var editableAreaHTML = editableAreaLayout;
				editableAreaHTML = editableAreaHTML.replace("[bold]", boldButton);
		editableAreaHTML = editableAreaHTML.replace("[italic]", italicButton);
		editableAreaHTML = editableAreaHTML.replace("[underlined]", underlineButton);
		editableAreaHTML = editableAreaHTML.replace("[hr]", inserthorizontalruleButton);
		editableAreaHTML = editableAreaHTML.replace("[align-left]", justifyleftButton);
		editableAreaHTML = editableAreaHTML.replace("[justify]", justifyfullButton);
		editableAreaHTML = editableAreaHTML.replace("[align-center]", justifycenterButton);
		editableAreaHTML = editableAreaHTML.replace("[align-right]", justifyrightButton);

		editableAreaHTML = editableAreaHTML.replace("[edit-area]", editableArea);
			
		// show all the controls and the editable views
		document.write(editableAreaHTML);
		document.close();
//      myContent = document.getElementById(editableContentName + "_fgitem");
//      myContent.innerHTML = editableAreaHTML;

		// initialize buttons with functions
		ititButtons(editableContentName);
		
		// to satisfy safari
		waitForLoad(editableContentName);

		var edit = document.getElementById(editableFrameName).contentWindow.document;
		if (edit.body) { // or causes error on IE...don't think this works at all
			edit.body.style = editableAreaStyle;
		}
	} else {
		// create a normal textarea if document.designMode does not exist
		document.write('<textarea name="' + editableContentName + '" style="width:' + editableAreaWidth + 'px; height:' + editableAreaHeight + 'px; ' + editableAreaStyle + '">' + editableAreaContent + '</textarea>');
	}
}

function waitForLoad(editableContentName) {
    var iframe = document.getElementById(getFrameName(editableContentName));
    if (iframe.contentWindow) {
        activateAreaComponents(editableContentName);
    } else {
        // THIS IS RECERSIVE!  
        // WE'LL KEEP SCHEDULING
        // THE CHECK UNTIL isThePageLoaded()==true
        setTimeout('waitForLoad("' + editableContentName + '")', 10);
    }
}

function activateAreaComponents(editableContentName) {
    editableAreaContent = document.getElementById(editableContentName).value;
    var frameContent = '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head><body>' + editableAreaContent + '</body></html>';
    
	var editableFrameName = getFrameName(editableContentName);
    // assign the frame(textarea) to the edit variable using that frames id
    var iframe = document.getElementById(editableFrameName);
    if (!iframe.contentWindow) {
        alert("content window not created.  " + iframe.contentWindow);
    }
    var edit = document.getElementById(editableFrameName).contentWindow.document;
    
    // write the content to the textarea
    edit.write(frameContent);
    edit.close();
    
    // enable the designMode
    edit.designMode = "On";
}

function toggleSource(editableContentName) {
	myFrame = document.getElementById(editableContentName + "_if");
	myButtons = document.getElementById(editableContentName + "_buttons");
	myTA = document.getElementById(editableContentName + "_ta");
	myControl = document.getElementsByName(editableContentName + "_toggle_source")[0];
	
/*	tacontrol = document.getElementById(getAreaName(editableContentName));
	frame = document.getElementById(getFrameName(editableContentName));
	tacontrol.style.width = (parseInt(frame.style.width) + 4) + "px";
	tacontrol.style.height = (parseInt(frame.style.height) + 2) + "px"; */
	
	if (myTA.style.visibility != "visible") {
		// update source just in case
		iFrameUpdated(editableContentName);
		myButtons.style.visibility = "hidden";
		myFrame.style.display = "none";
		myFrame.style.visibility = "hidden";
		myTA.style.display = "block";
		myTA.style.visibility = "visible";
		updateSourceView(editableContentName);
		myControl.innerHTML = "View Rich Text";
	} else {
		myButtons.style.visibility = "visible";
		myFrame.style.display = "block";
		myFrame.style.visibility = "visible";
		myTA.style.display = "none";
		myTA.style.visibility = "hidden";
		refreshIFrame(editableContentName);
		myControl.innerHTML = "View HTML";
	}
}

function addLink(editableContentName) {	
	myLink = prompt("Enter in a URL for this link:");
	myLabel = prompt("Enter a label for this link:");

	myValue = '<a href="' + myLink + '" target="_blank">' + myLabel + '</a>';

	// just append to hidden field
	myField = document.getElementById(editableContentName);
	myField.value += myValue;
	
	// update appropriate view
	myTA = document.getElementById(editableContentName + "_ta");
	if (myTA.style.visibility != "visible") {
		updateIFrameView(editableContentName);
	} else {
		updateSourceView(editableContentName);
	}
	
}

// called when text area is updated
function sourceUpdated(editableContentName) {
	// get value in text area
	myValue = document.getElementById(getAreaName(editableContentName)).value;
	
	// update hidden field
	document.getElementById(editableContentName).value = myValue;
}

// called when iFrame is exited/updated
function iFrameUpdated(editableContentName) {
	var editableFrameName = getFrameName(editableContentName);
	// get iFrame contents
	// Explorer reformats HTML during document.write() removing quotes on element ID names
	// so we need to address Explorer elements as window[elementID]
	if (window[editableFrameName]) {
		content = window[editableFrameName].document.body.innerHTML;
	} else {
		content = document.getElementById(editableFrameName).contentWindow.document.body.innerHTML;
	}

	// update hidden field
	document.getElementById(editableContentName).value = content;
}

// call if updating source & RTF in real-time
function updateIFrameView(editableContentName) {
	content = document.getElementById(editableContentName).value;

	var editableFrameName = getFrameName(editableContentName);
	if (document.designMode) {
		// Explorer reformats HTML during document.write() removing quotes on element ID names
		// so we need to address Explorer elements as window[elementID]
		if (window[editableFrameName]) {
			window[editableFrameName].document.body.innerHTML = content;
		} else {
			document.getElementById(editableFrameName).contentWindow.document.body.innerHTML = content;
		}
	}
}
function refreshIFrame(editableContentName) {
	var editableFrameName = getFrameName(editableContentName);

	// write the content to the textarea
	if (navigator.appVersion.indexOf("Safari") > 0) { // if safari
		// essentially re-create the frame since Safari seems to "forget" the view
		var frameContent = '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head><body></body></html>';
		
		// does nothing but seems to help make content window appear in safari
		myFrame = document.getElementById(editableContentName + "_if");
		code = myFrame.innerHTML;

		var iframe = document.getElementById(editableFrameName);
		if (!iframe.contentWindow) {
			var iframe_string = iframe.toString();
			var iframe_type = typeof iframe;
			alert(iframe + " element " + iframe_string + " (" + iframe_type + ") id " + editableFrameName + " .contentWindow not exists");
			return;
		}
		var edit = document.getElementById(editableFrameName).contentWindow.document;
		
		// write the content to the textarea
		edit.write(frameContent);
	}

	updateIFrameView(editableContentName);

	document.getElementById(editableFrameName).contentWindow.document.designMode = "On";
}

function updateSourceView(editableContentName) {
	content = document.getElementById(editableContentName).value;
	// update text area
	textarea = document.getElementById(getAreaName(editableContentName));
	if (textarea) {
		textarea.value = content;
	}
}

function getFrameName(editableContentName) {
	return editableContentName + '_iframe';
}

function getAreaName(editableContentName) {
	return editableContentName + '_textarea';
}

function editableFrameContents(editableContentName) {
}

function ititButtons(editableContentName) {
	var kids = document.getElementsByTagName('button');

	for (var i=0; i < kids.length; i++) {
		if (kids[i].className == "editableAreaButton" && kids[i].name == editableContentName + "_button") {
			kids[i].onmouseover = buttonMouseOver;
			kids[i].onmouseout = buttonMouseOut;
			kids[i].onmouseup = buttonMouseUp;
			kids[i].onmousedown = buttonMouseDown;
			kids[i].onclick = buttonOnClick;
		}
	}
}

function buttonMouseOver() {
	// events for mouseOver on buttons
	// e.g. this.style.xxx = xxx
}

function buttonMouseOut() {
	// events for mouseOut on buttons
	// e.g. this.style.xxx = xxx
}


function buttonMouseUp() {
	// events for mouseUp on buttons
	// e.g. this.style.xxx = xxx
}

function buttonMouseDown(e) {
	// events for mouseDown on buttons
	// e.g. this.style.xxx = xxx

	// prevent default event (i.e. don't remove focus from text area)
	var evt = e ? e : window.event; 

	if (evt.returnValue) {
		evt.returnValue = false;
	} else if (evt.preventDefault) {
		evt.preventDefault( );
	} else {
		return false;
	}
}

function buttonOnClick() {
	// Explorer reformats HTML during document.write() removing quotes on element ID names
	// so we need to address Explorer elements as window[elementID]
	editableContentName = this.name.replace("_button", "");
	editableFrameName = getFrameName(editableContentName);
	if (window[editableFrameName]) {
		ret = window[editableFrameName].document.execCommand(this.id, false, null);
	} else {
		ret = document.getElementById(editableFrameName).contentWindow.document.execCommand(this.id, false, null);
	}
	if (!ret) {
		alert("that feature is not supported in this browser");
	}
	// update hidden field
	iFrameUpdated(editableContentName);
	return false;
}
function mailpage() {
	var title = document.title;
	var page_url = location.href;
	var re = new RegExp("\&", "g");
	var new_title = title.replace(re, "and");
		
	mail_str = "mailto:?subject=Check out this link from Journey to Wellness";
	mail_str += "&body=I thought you might be interested in the " + new_title;
	mail_str += ".\n\nYou can view it at " + page_url; 
	location.href = mail_str;
}