var n="wcontent";

var width=document.getElementById('width');
var height=document.getElementById('height');
var hspace=document.getElementById('hspace');
var vspace=document.getElementById('vspace');
var border=document.getElementById('border');
var alt=document.getElementById('alt');
var alignment=document.getElementById('alignment');

function initWysiwyg(n) {

	var content = document.getElementById(n).value;
	var doc=document.getElementById('wysiwyg' + n).contentWindow.document; 
	
	doc.open();
	doc.write(content);
	doc.close();
	
	doc.body.contentEditable = true;
	doc.designMode = "on";
	 
	var xStl=doc.createElement('style');
	xStl.setAttribute("type", "text/css");
	var xDef='body {font-size:0.8em;font-family:tahoma}';
	
	if (xStl.styleSheet) {   // IE
	    xStl.styleSheet.cssText = xDef;
		doc.appendChild(xStl);
	} else {              // FF
	 	doc.body.style.fontFamily="tahoma";
	 	doc.body.style.fontSize="0.8em";
	}

	// Update the textarea with content in WYSIWYG when user submits form
  	var browserName = navigator.appName;
  	if (browserName == "Microsoft Internet Explorer") {
    	for (var idx=0; idx < document.forms.length; idx++) {
    		document.forms[idx].attachEvent('onsubmit', function() { updateTextArea(n); });
    	}
  	}  else {
  		for (var idx=0; idx < document.forms.length; idx++) {
   			document.forms[idx].addEventListener('submit',function OnSumbmit() { updateTextArea(n); }, true);
   		}
 	} 
 
}

function insertNodeAtSelection(insertNode, n) {
	// get current selection
	var sel =  document.getElementById('wysiwyg' + n).contentWindow.getSelection();
	var range = sel.getRangeAt(0);
	sel.removeAllRanges();

	// remove content of current selection from document
	range.deleteContents();

	// get location of current selection
	var container = range.startContainer;
	var pos = range.startOffset;

	// make a new range for the new selection
	range=document.createRange();
	 
	if (container.nodeType==3) {

	   var textNode = container;
	   container = textNode.parentNode;
	   var text = textNode.nodeValue;

	   // text before the split
	   var textBefore = text.substr(0,pos);
	   // text after the split
	   var textAfter = text.substr(pos);

	   var beforeNode = document.createTextNode(textBefore);
	   var afterNode = document.createTextNode(textAfter);

	   // insert the 3 new nodes before the old one
	   container.insertBefore(afterNode, textNode);
	   container.insertBefore(insertNode, afterNode);
	   container.insertBefore(beforeNode, insertNode);

	   // remove the old node
	   container.removeChild(textNode);

	 } else {
	   // else simply insert the node
	   afterNode = container.childNodes[pos];
	   container.insertBefore(insertNode, afterNode);
	 }

	 range.setEnd(afterNode, 0);
	 range.setStart(afterNode, 0);

	sel.addRange(range);

}

function updateTextArea(n) {
 
	document.getElementById(n).value = document.getElementById("wysiwyg" + n).contentWindow.document.body.innerHTML;
 
}

function formatSelection(v) {

	var elm = document.getElementById("wysiwyg" + n).contentWindow.document;  
	if (elm.selection && elm.selection.createRange) { // ie
	
		var str = elm.selection.createRange().text;
		var html= "<" + v + ">" + str + "</" + v + "> ";
		document.getElementById("wysiwyg" + n).contentWindow.focus();
		elm.selection.createRange().pasteHTML(html);   
	
	} else {
		var str=document.getElementById('wysiwyg' + n).contentWindow.getSelection();
		var html = document.getElementById('wysiwyg' + n).contentWindow.document.createElement(v);
		html.innerHTML = str;
		var node = insertNodeAtSelection(html, n);		
	}

	return;

}

function toggleHTML(obj,n) {

 var mde=obj.value

 	switch(mde) {
	
 		case "HTML":
			obj.value="VIEW";
			document.getElementById('but01').setAttribute('disabled','true');
			document.getElementById('but02').setAttribute('disabled','true');
			document.getElementById('but03').setAttribute('disabled','true');
			document.getElementById('but04').setAttribute('disabled','true');
			document.getElementById('but05').setAttribute('disabled','true');
			document.getElementById('but06').setAttribute('disabled','true');
						
			document.getElementById(n).value=document.getElementById("wysiwyg" + n).contentWindow.document.body.innerHTML;			
			
			// Hide picture stock & upload panel 
			document.getElementById('pictureStockHeader').style.display="none";	
			document.getElementById('pictureStock').style.display="none";		
			document.getElementById('pictureUploadPanel').style.display="none";	
				
			document.getElementById(n).style.display="block";
			document.getElementById('wysiwyg'+n).style.display="none";
		break;
		
		case "VIEW":

			if(	obj.value=="VIEW") {
				obj.value="HTML";
				document.getElementById('but01').removeAttribute('disabled');
				document.getElementById('but02').removeAttribute('disabled');
				document.getElementById('but03').removeAttribute('disabled');
				document.getElementById('but04').removeAttribute('disabled');
				document.getElementById('but05').removeAttribute('disabled');
				document.getElementById('but06').removeAttribute('disabled');
							
				document.getElementById("wysiwyg" + n).contentWindow.document.body.innerHTML=document.getElementById(n).value;
				
				//Show picture stock & upload panel 
				document.getElementById('pictureStockHeader').style.display="block";	
				document.getElementById('pictureStock').style.display="block";		
				document.getElementById('pictureUploadPanel').style.display="block";	
			
				document.getElementById(n).style.display="none";
				document.getElementById('wysiwyg'+n).style.display="block";
			}else{
				document.getElementById('but01').setAttribute('disabled','true');
				document.getElementById('but02').setAttribute('disabled','true');
				document.getElementById('but03').setAttribute('disabled','true');
			
				document.getElementById(n).style.display="block";
				document.getElementById('wysiwyg'+n).style.display="none";
			}
		break;

	}
	
	updateTextArea(n);

}


function insertPic(pic,width,height,hspace,vspace,alt,alignment,border){

	var elm = window.opener.document.getElementById("wysiwyg" + n).contentWindow.document;  
		
	if (elm.selection && elm.selection.createRange) { // ie
	 	window.opener.document.getElementById("wysiwyg" + n).contentWindow.focus();
		var img="<img src=\""+pic+"\" width=\""+width.value+"\" height='"+height.value+"' hspace='"+hspace.value+"' vspace='"+vspace.value+"' alt='"+alt.value+"' align='"+alignment.value+"'  border='"+border.value+"' />";
		elm.selection.createRange().pasteHTML(img); 
	
	}else{
			
		var img=elm.createElement('img');
		img.setAttribute('src',pic);	

		if(width.value>0){
			img.setAttribute('width',width.value);
		}
		if(height.value>0){
			img.setAttribute('height',height.value);
		}
		if(hspace.value>0){
			img.setAttribute('hspace',hspace.value);
		}
		if(vspace.value>0){
			img.setAttribute('vspace',vspace.value);
		}		

		img.setAttribute('alt',alt.value);
		
		if(alignment.value!=""){
			img.setAttribute('align',alignment.value);
		}
		if(border.value>0){
			img.setAttribute('border',border.value);
		}		
			
	 	var win=window.opener.document.getElementById("wysiwyg" + n).contentWindow;
		win.focus();
		var sel = win.getSelection();
		var insertNode=img;

		var range = sel.getRangeAt(0);

		sel.removeAllRanges();
		range.deleteContents();

		var container = range.startContainer;
		var pos = range.startOffset;

		range=document.createRange();
		 
		if (container.nodeType==3) {

		   var textNode = container;
		   container = textNode.parentNode;
		   var text = textNode.nodeValue;

		   var textBefore = text.substr(0,pos);
		   var textAfter = text.substr(pos);

		   var beforeNode = document.createTextNode(textBefore);
		   var afterNode = document.createTextNode(textAfter);

		   // insert the 3 new nodes before the old one
		   container.insertBefore(afterNode, textNode);
		   container.insertBefore(insertNode, afterNode);
		   container.insertBefore(beforeNode, insertNode);

		   // remove the old node
		   container.removeChild(textNode);

		 } else {
		   // else simply insert the node
		   afterNode = container.childNodes[pos];
		   container.insertBefore(insertNode, afterNode);
		 }

		 range.setEnd(afterNode, 0);
		 range.setStart(afterNode, 0);
		sel.addRange(range);

	}
	window.close();
	return true;
}

function calculate(ratio, current_value,  x) {

	if(!isNaN(current_value)) {
	var newvalue= current_value*ratio;
		document.frmViewPic.elements[x].value=Math.round(newvalue);
	}

}