/**
 * @file rte.js
 * @brief Script pour editeur WISIWING
*/

/**
 * Un bouton
*/
var RteButton = Class.create({
	
	/**
	 * Constructeur
	 * 
	 * @param id - Identifiant
	 * @param icon - Image du bouton
	 * @param action - Action à effectuer
	 * @param editor - Identifiant de l'éditeur sur lequel s'applique l'action
	 */
	initialize: function(id,icon,action,editor)  {
		this.id=id;
		this.icon=icon;
		this.action=action;
		this.editor=editor;
		this.rendered=false;
		this.disabled=false;
	},
	
	/**
	 * Code html du bouton
	 */
	render : function() {
		html='<a href="javascript:RteAction(\''+this.action+'\',\''+this.editor+'\',null);" id="'+this.id+'"><img src="'+this.icon+'"></img></a>';
		return html;
	}
	
	
});

/**
 * Séparateur
 */
var RteSeparator = Class.create({
	
	initialize : function() {
	},
	
	render : function() {
		return '<img src="/tphp/rte/img/separator.png"></img>';
	}
});

/**
 * Selecteur de format
 */
var RteFormatSelector = Class.create({
	
	initialize: function(editorId) {
		this.editorId=editorId;
		this.id=this.editorId+'_format';
		this.formats=new Array(
				{ tag : 'p' , name : 'Paragraphe' },
				{ tag : 'pre' , name : 'Formaté' },
				{ tag : 'address' , name : 'Addresse' },
				{ tag : 'h1' , name : 'Titre 1'},
				{ tag : 'h2' , name : 'Titre 2'},
				{ tag : 'h3' , name : 'Titre 3'},
				{ tag : 'h4' , name : 'Titre 4'},
				{ tag : 'h5' , name : 'Titre 5'},
				{ tag : 'h6' , name : 'Titre 6'}
				);
	
	},
	
	render: function() {
		html='<select id="'+this.id+'" onchange="javascript:RteSetFormat(\''+this.id+'\',\''+this.editorId+'\');">';
		for (i=0;i<this.formats.length;i++) {
			html+='<option value="<'+this.formats[i].tag+'>">'+this.formats[i].name+'</option>';
		}
		html+='</select>';
		return html;
	}
}
);

/**
 * Selecteur de font
 */
var RteFontSelector = Class.create({
	
	initialize: function(editorId) {
		this.editorId=editorId;
		this.id=this.editorId+'_font';
		this.fonts=new Array("Andale Mono","Arial","Arial Black","Book Antiqua","Comic Sans MS","Courier New",
				             "Georgia","Helvetica","Impact","Symbol","Tahoma","Terminal","Times New Roman",
				             "Trebuchet MS","Verdana","Webdings","Wingdings");
	},
	
	render: function() {
		html='<select id="'+this.id+'" onchange="javascript:RteSetFont(\''+this.id+'\',\''+this.editorId+'\');">';
		for (j=0;j<this.fonts.length;j++) 
			html+='<option>'+this.fonts[j]+'</option>';
		html+='</select>';
		return html;
	}
}
);


/**
 * Selecteur de taille font
 */
var RteFontSizeSelector = Class.create({
	
	initialize: function(editorId) {
		this.editorId=editorId;
		this.id=this.editorId+'_fontsize';
		this.size=new Array('8 pt','10 pt','12 pt','18 pt','24 pt','36 pt');
				
	},
	
	render: function() {
		html='<select id="'+this.id+'" onchange="javascript:RteSetFontSize(\''+this.id+'\',\''+this.editorId+'\');">';
		for (j=0;j<this.size.length;j++) 
			html+='<option value="'+j+'">'+this.size[j]+'</option>';
		html+='</select>';
		return html;
	}
}
);

var RteBreak = Class.create({
	
	initialize : function() {
	}
});

var RteBackgroundSelector = Class.create({
	
	initialize: function(editorId,form) {
		this.editor=editorId;
		this.form=form;
		this.id=this.editor+'_bg';
		this.icon='/tphp/rte/img/back.png';
		this.colors=new Array(
		 '#000000',
         '#993300',
         '#333300',
         '#003300',
         '#003366',
         '#000080',
         '#333399',
         '#333333',
         '#800000',
         '#FF6600',
         '#808000',
         '#008000',
         '#008080',
         '#0000FF',
         '#666699',
         '#808080',
         '#FF0000',
         '#FF9900',
         '#99CC00',
         '#339966',
         '#33CCCC',
         '#3366FF',
         '#800080',
         '#999999',
         '#FF00FF',
         '#FFCC00',
         '#FFFF00',
         '#00FF00',
         '#00FFFF',
         '#00CCFF',
         '#993366',
         '#C0C0C0',
         '#FF99CC',
         '#FFCC99',
         '#FFFF99',
         '#CCFFCC',
         '#CCFFFF',
         '#99CCFF',
         '#CC99FF',
         '#FFFFFF');

	},

	render : function() {
		html='<a href="javascript:RteShowBackground(\''+this.id+'\',\''+this.editor+'\');" id="'+this.id+'"><img src="'+this.icon+'"></img></a>';
		dbg=document.createElement('div');
		dbg.id=this.id+'_sel';
		dbg.style.position='absolute';
		dbg.style.display='none';
		
		bgtable=document.createElement('table');
		bgtable.style.border='1px solid black';
		bgtable.style.background='#fff';
		bgtbody=document.createElement('tbody');
		for (c=0;c<this.colors.length;c++) {
			if ( c % 8 == 0 ) {
				bgtr=document.createElement('tr');
				bgtbody.appendChild(bgtr);
			}
			bgtd=document.createElement('td');
			
			
			bgtd.style.border='1px solid black';
			bgtd.style.background=this.colors[c];
			bgtd.innerHTML='<a href="javascript:RteSetBackground(\''+this.id+'\',\''+this.editor+'\',\''+this.colors[c]+'\');"><img style="border:0px;margin:0px;width:10px;height:10px" src="/tphp/rte/img/blank.png"></img></a>';
			bgtr.appendChild(bgtd);
		}
		bgtable.appendChild(bgtbody);
		dbg.appendChild(bgtable);
		this.form.appendChild(dbg);
		return html;
	}
});


var RteForegroundSelector = Class.create({
	
	initialize: function(editorId,form) {
		this.editor=editorId;
		this.form=form;
		this.id=this.editor+'_fg';
		this.icon='/tphp/rte/img/fore.png';
		this.colors=new Array(
		 '#000000',
         '#993300',
         '#333300',
         '#003300',
         '#003366',
         '#000080',
         '#333399',
         '#333333',
         '#800000',
         '#FF6600',
         '#808000',
         '#008000',
         '#008080',
         '#0000FF',
         '#666699',
         '#808080',
         '#FF0000',
         '#FF9900',
         '#99CC00',
         '#339966',
         '#33CCCC',
         '#3366FF',
         '#800080',
         '#999999',
         '#FF00FF',
         '#FFCC00',
         '#FFFF00',
         '#00FF00',
         '#00FFFF',
         '#00CCFF',
         '#993366',
         '#C0C0C0',
         '#FF99CC',
         '#FFCC99',
         '#FFFF99',
         '#CCFFCC',
         '#CCFFFF',
         '#99CCFF',
         '#CC99FF',
         '#FFFFFF');

	},

	render : function() {
		html='<a href="javascript:RteShowForeground(\''+this.id+'\',\''+this.editor+'\');" id="'+this.id+'"><img src="'+this.icon+'"></img></a>';
		dbg=document.createElement('div');
		dbg.id=this.id+'_sel';
		dbg.style.position='absolute';
		dbg.style.display='none';
		
		bgtable=document.createElement('table');
		bgtable.style.border='1px solid black';
		bgtable.style.background='#fff';
		bgtbody=document.createElement('tbody');
		for (c=0;c<this.colors.length;c++) {
			if ( c % 8 == 0 ) {
				bgtr=document.createElement('tr');
				bgtbody.appendChild(bgtr);
			}
			bgtd=document.createElement('td');
			
			
			bgtd.style.border='1px solid black';
			bgtd.style.background=this.colors[c];
			bgtd.innerHTML='<a href="javascript:RteSetForeground(\''+this.id+'\',\''+this.editor+'\',\''+this.colors[c]+'\');"><img style="border:0px;margin:0px;width:10px;height:10px" src="/tphp/rte/img/blank.png"></img></a>';
			bgtr.appendChild(bgtd);
		}
		bgtable.appendChild(bgtbody);
		dbg.appendChild(bgtable);
		this.form.appendChild(dbg);
		return html;
	}
});

var RteLinkSelector = Class.create({

	initialize: function(editorId,form) {
		this.editor=editorId;
		this.id=this.editor+'_link';
		this.icon='/tphp/rte/img/link.png';
		this.form=form;
	},

    render : function() {
		html='<a href="javascript:showLinkDialog(\''+this.id+'\',\''+this.editor+'\');"><img src="'+this.icon+'"></img></a>';
		return html;
	}
});

var RtePictureSelector = Class.create({

	initialize: function(editorId,form) {
		this.editor=editorId;
		this.id=this.editor+'_picture';
		this.icon='/tphp/rte/img/picture.png';
		this.form=form;
	},

    render : function() {
		html='<a href="javascript:showPictureDialog(\''+this.id+'\',\''+this.editor+'\');"><img src="'+this.icon+'"></img></a>';
	
		return html;
	}
});


/**
 * Editeur
*/
var RteEditor = Class.create({

	initialize: function(areaId,width,height) {
		this.area=$(areaId);
		Element.hide(this.area);
		
		this.areaId=areaId;
		this.editorId='rte_editor_'+this.areaId;
		
		
		this.form=this.area.parentNode;
		this.form.onsubmit=function formSubmit() {
			for (l=0;l<this.elements.length;l++) {
				ed=$('rte_editor_'+this.elements[l].name);
				if ( ed != undefined) {
					win=ed.contentWindow;
					doc=(Prototype.Browser.IE) ? (win.document) : (ed.contentDocument);
					this.elements[l].value=doc.body.innerHTML;
				}
			}
		 
		};
		
		this.buttons=new Array(
				new RteButton(this.editorId+'_bold','/tphp/rte/img/bold.png','bold',this.editorId),
				new RteButton(this.editorId+'_italic','/tphp/rte/img/italic.png','italic',this.editorId),
				new RteButton(this.editorId+'_underline','/tphp/rte/img/underline.png','underline',this.editorId),
				new RteButton(this.editorId+'_strike','/tphp/rte/img/strike.png','strikethrough',this.editorId),
				new RteSeparator(),
				new RteButton(this.editorId+'_left','/tphp/rte/img/left.png','justifyleft',this.editorId),
				new RteButton(this.editorId+'_center','/tphp/rte/img/center.png','justifycenter',this.editorId),
				new RteButton(this.editorId+'_right','/tphp/rte/img/right.png','justifyright',this.editorId),
				new RteSeparator(),
				new RteFormatSelector(this.editorId),
				new RteFontSelector(this.editorId),
				new RteFontSizeSelector(this.editorId),
				new RteBreak(),
				new RteButton(this.editorId+'_ol','/tphp/rte/img/ol.png','insertOrderedList',this.editorId),
				new RteButton(this.editorId+'_ul','/tphp/rte/img/ul.png','insertUnorderedList',this.editorId),
				new RteSeparator(),
				new RteButton(this.editorId+'_outdent','/tphp/rte/img/outdent.png','outdent',this.editorId),
				new RteButton(this.editorId+'_indent','/tphp/rte/img/indent.png','indent',this.editorId),
				new RteSeparator(),
				new RteButton(this.editorId+'_undo','/tphp/rte/img/undo.png','undo',this.editorId),
				new RteButton(this.editorId+'_redo','/tphp/rte/img/redo.png','redo',this.editorId),
				new RteSeparator(),
				new RteBackgroundSelector(this.editorId,this.form),
				new RteForegroundSelector(this.editorId,this.form),
				new RteSeparator(),
				new RteLinkSelector(this.editorId,this.form),
				new RtePictureSelector(this.editorId,this.form)
				
				
				
				);
		dmenu=document.createElement('div');
		dmenu.style.background='#fff';
		menu=document.createElement('table');
		menu.style.background='#fff';
		tbody=document.createElement('tbody');
		tr=document.createElement('tr');
		
		for (i=0;i<this.buttons.length;i++) {
			button=this.buttons[i];
			if ( button instanceof RteBreak ) {
				tbody.appendChild(tr);
				menu.appendChild(tbody);
				dmenu.appendChild(menu);
				menu=document.createElement('table');
				tbody=document.createElement('tbody');
				tr=document.createElement('tr');
			} else {
			  td=document.createElement('td');
			  td.innerHTML=this.buttons[i].render();
			  tr.appendChild(td);
			}
		}
		tbody.appendChild(tr);
		menu.appendChild(tbody);
		menu.className='rteMenu';
		dmenu.appendChild(menu);
		this.form.appendChild(dmenu);
			
		this.width=width;
		this.height=height;
		
		this.frame=document.createElement('iframe');
		this.frame.width=width;
		this.frame.height=height;
		this.frame.id=this.editorId;
		this.frame.style.background='white';
		
		this.form.appendChild(this.frame);
		
		this.frameWindow=this.frame.contentWindow;
		
		if ( Prototype.Browser.IE ) {
			this.frameDocument=this.frameWindow.document;
			body=this.frameDocument.createElement('body');
			this.frameDocument.appendChild(body);
		}
		else
			this.frameDocument=this.frame.contentDocument;
		
		this.frameDocument.open();
		this.frameDocument.writeln('<html><head><style> p { margin:0px; }</style><body>');
		this.frameDocument.writeln($F(this.area.id));
		this.frameDocument.writeln('</body>');
		this.frameDocument.close();
		this.frameDocument.designMode='on';
		if ( ! Prototype.Browser.IE )
		 this.frameDocument.body.contentEditable='true';
		
		this.frameWindow.focus();
	}
});

function RteAction(action,editorId,option) {
	frame=$(editorId);
	win=frame.contentWindow;
	
	if ( Prototype.Browser.IE ) 
		doc=win.document;
	else
		doc=frame.contentDocument;
	
	win.focus();
	doc.execCommand(action,false,option);
	win.focus();
}

function RteSetFormat(id,editorId) {
	format=$F(id);
	RteAction("formatBlock",editorId,format);
}

function RteSetFont(id,editorId) {
	font=$F(id);
	RteAction("fontname",editorId,font);
}

function RteSetFontSize(id,editorId) {
	font=$F(id);
	RteAction("fontsize",editorId,font);
}


function RteShowForeground(id,editorId) {
	bg=$(id);
	dbg=$(id+'_sel');

	buttonOffset=bg.cumulativeOffset();
	dbg.style.zIndex=500;
	dbg.style.left=buttonOffset[0]+'px';
	dbg.style.top=(buttonOffset[1]+20)+'px';
	Element.show(dbg);
	
}

function RteSetForeground(id,editorId,color) {
	bg=$(id);
	dbg=$(id+'_sel');
	Element.hide(dbg);
	
	RteAction("forecolor",editorId,color);
}

function RteShowBackground(id,editorId) {
	bg=$(id);
	dbg=$(id+'_sel');

	buttonOffset=bg.cumulativeOffset();
	dbg.style.zIndex=500;
	dbg.style.left=buttonOffset[0]+'px';
	dbg.style.top=(buttonOffset[1]+20)+'px';
	Element.show(dbg);
	
}

function RteSetBackground(id,editorId,color) {
	bg=$(id);
	dbg=$(id+'_sel');
	Element.hide(dbg);
	if ( Prototype.Browser.IE )
		  action='backcolor';
	else
		  action='hilitecolor';
	RteAction(action,editorId,color);
}

function showLinkDialog(id,editorId) {
   dlg=window.open('/tphp/rte/script/link.php?id='+editorId,"create","width=480px,height=350px,resizable=1");
   ws=(screen.width-480)/2;
   hs=(screen.height-350)/2;
   dlg.moveTo(ws,hs);
}

function showPictureDialog(id,editorId) {
	   dlg=window.open('/tphp/rte/script/picture.php?id='+editorId,"create","width=490px,height=450px,resizable=1");
	   ws=(screen.width-480)/2;
	   hs=(screen.height-350)/2;
	   dlg.moveTo(ws,hs);
}


function pictureChangePosition() {
 position=$F('position');
 switch(position) {
  case 'baseline' :
  case 'top'      :
  case 'middle'	  :
  case 'bottom'   : $('example').setAttribute('style','');
  					$('example').style.verticalAlign=position;
  				
                    break;
  case 'left'    : 
  case 'right'   : border=$('example').style.border;
                   padding=$('example').style.padding;
                   margin=$('example').style.margin;
                   style="border:"+border+";padding:"+padding+";margin:"+margin+";float:"+position;
                   $('example').setAttribute('style',style);
                   $('example').style.float=position;
                   break;
 }
}

function pictureSetBorder() {
 border_width=$F('border_width');
 border_color=$F('border_color');
 border_style=$F('border_style');
 border_space=$F('border_space');
 margin=$F('margin');
 
 border=border_width+'px '+border_style+ ' '+border_color;
 
 $('example').style.border=border;
 $('example').style.padding=border_space+'px';
 $('example').style.margin=margin+'px';
 
}


function pictureSetWidth() {
 picture_width=$F('width');
 picture_proportion=$F('proportion');
 
 
  $('example').style.width=picture_width+'px';
}

function RteSubmit(id) {
	alert('id='+id);
	area=$(id);
	editor=$('rte_editor_'+id);
	win=editor.contentWindow;
	if ( Prototype.Browser.IE ) 
		doc=win.document;
	else
		doc=editor.contentDocument;
	area.value=doc.body.innerHTML;
}