
/**
* WYSIWYGObject
*
* A Javascript definition of a WYSIWYG HTML editor.
*
* @param h: The height of the editor
* @param w: The width of the editor
**/
function WYSIWYGObject( h, w ) { 

	this.buttons = new Object();
	this.selections = new Object();

	this.textArea = null;

	if ( parseInt( h ) < 200 ) h = 200;
	if ( parseInt( w ) < 400 ) w = 400;

	this.h = h;
	this.w = w;

}

new WYSIWYGObject();

/**
* Functions for changing various document properties
*
* BOLD
* ITALIC
*
**/
WYSIWYGObject.prototype.doBold = function() {
	cbGetContentDocument(this.textArea).execCommand('bold', false, null);
}

WYSIWYGObject.prototype.doItalic = function() {
	//this.textArea.contentDocument.execCommand('italic', false, null);
	cbGetContentDocument(this.textArea).execCommand('italic', false, null);
}

WYSIWYGObject.prototype.doUnderline = function() {
	cbGetContentDocument(this.textArea).execCommand('underline', false, null);
}
  
WYSIWYGObject.prototype.doLeft = function() {
	cbGetContentDocument(this.textArea).execCommand('justifyleft', false, null);
}

WYSIWYGObject.prototype.doCenter = function() {
	cbGetContentDocument(this.textArea).execCommand('justifycenter', false, null);
}

WYSIWYGObject.prototype.doRight = function() {
	cbGetContentDocument(this.textArea).execCommand('justifyright', false, null);
}

WYSIWYGObject.prototype.doOrdList = function() {
	cbGetContentDocument(this.textArea).execCommand('insertorderedlist', false, null);
}

WYSIWYGObject.prototype.doBulList = function() {
	cbGetContentDocument(this.textArea).execCommand('insertunorderedlist', false, null);
}
  
WYSIWYGObject.prototype.doForeCol = function() {
	var fCol = prompt('Enter foreground color', '');
    
	if(fCol != null)	
		cbGetContentDocument(this.textArea).execCommand('forecolor', false, fCol);
}

WYSIWYGObject.prototype.doBackCol = function() {
	var bCol = prompt('Enter background color', '');
    
	if(bCol != null)
		cbGetContentDocument(this.textArea).execCommand('backcolor', false, bCol);
}

WYSIWYGObject.prototype.doLink = function() {
	var myurl = prompt( 'Enter URL', 'http://');
	cbGetContentDocument(this.textArea).execCommand('createlink', false, myurl);
}
  
WYSIWYGObject.prototype.doImage = function() {
	var imgSrc = prompt('Enter image location', '');
    
	if(imgSrc != null)    
		cbGetContentDocument(this.textArea).execCommand('insertimage', false, imgSrc);
}
  
WYSIWYGObject.prototype.doRule = function() {
	cbGetContentDocument(this.textArea).execCommand('inserthorizontalrule', false, null);
}

WYSIWYGObject.prototype.doSize = function(fSize) {
	if(fSize != '')
	cbGetContentDocument(this.textArea).execCommand('fontsize', false, fSize);
}



/**
* WYSIWYGObject.render
*
* Creates a graphic representation of a WYSIWYG Object, attaches the WYSIWYGObject to it, and 
* returns the rendered editor.
**/
WYSIWYGObject.prototype.render = function() { 

	//the div to be returned
	var rdiv = document.createElement( 'div' );
	rdiv.style.width = this.w;
	//need to add some buffer to the height of the main div to make up for the padding and such
	rdiv.style.height = parseInt( this.h ) + 25;

	//the header div
	var hdiv = document.createElement( 'div' );
	hdiv.style.height = '30px';
	hdiv.style.backgroundColor = '#DEDEFF';
	hdiv.style.padding = '3px';
	hdiv.style.width = this.w;
	hdiv.style.border = "1px solid #9191FF";

	//the body div
	var bdiv = document.createElement( 'div' );
	bdiv.style.backgroundColor = '#FFF';
	bdiv.style.border = "0px";
	bdiv.style.borderLeft = "1px solid #9191FF";
	bdiv.style.borderRight = "1px solid #9191FF";
	bdiv.style.padding = '3px';
	bdiv.style.width = this.w;
	bdiv.style.height = parseInt( this.h ) - 60;

	//the footer div
	var fdiv = document.createElement( 'div' );
	fdiv.style.height = '30px';
	fdiv.style.backgroundColor = '#DEDEFF';
	fdiv.style.padding = '3px';
	fdiv.style.width = this.w;
	fdiv.style.border = "1px solid #9191FF";

	//create the header buttons
	this.buttons['bold'] = imageButton( 'bold', 'img/page/wysiwyg/bold.gif', selOn, selOff, selDown, selUp, function(e) { getTarget( e ).associatedWYSIWYG.doBold(); } );
	this.buttons['italic'] = imageButton( 'italic', 'img/page/wysiwyg/italic.gif', selOn, selOff, selDown, selUp, function(e) { getTarget( e ).associatedWYSIWYG.doItalic(); } );
	this.buttons['underline'] = imageButton( 'underline', 'img/page/wysiwyg/underline.gif', selOn, selOff, selDown, selUp, function(e) { getTarget( e ).associatedWYSIWYG.doUnderline(); } );
	this.buttons['left'] = imageButton( 'left', 'img/page/wysiwyg/left.gif', selOn, selOff, selDown, selUp, function(e) { getTarget( e ).associatedWYSIWYG.doLeft(); } );
	this.buttons['right'] = imageButton( 'right', 'img/page/wysiwyg/right.gif', selOn, selOff, selDown, selUp, function(e) { getTarget( e ).associatedWYSIWYG.doRight(); } );
	this.buttons['center'] = imageButton( 'center', 'img/page/wysiwyg/center.gif', selOn, selOff, selDown, selUp, function(e) { getTarget( e ).associatedWYSIWYG.doCenter(); } );
	this.buttons['ordlist'] = imageButton( 'ordlist', 'img/page/wysiwyg/ordlist.gif', selOn, selOff, selDown, selUp, function(e) { getTarget( e ).associatedWYSIWYG.doOrdList(); } );
	this.buttons['bullist'] = imageButton( 'bullist', 'img/page/wysiwyg/bullist.gif', selOn, selOff, selDown, selUp, function(e) { getTarget( e ).associatedWYSIWYG.doBulList(); } );
	this.buttons['forecol'] = imageButton( 'forecol', 'img/page/wysiwyg/forecol.gif', selOn, selOff, selDown, selUp, function(e) { getTarget( e ).associatedWYSIWYG.doForeCol(); } );
	this.buttons['bgcol'] = imageButton( 'bgcol', 'img/page/wysiwyg/bgcol.gif', selOn, selOff, selDown, selUp, function(e) { getTarget( e ).associatedWYSIWYG.doBackCol(); } );
	this.buttons['link'] = imageButton( 'link', 'img/page/wysiwyg/link.gif', selOn, selOff, selDown, selUp, function(e) { getTarget( e ).associatedWYSIWYG.doLink(); } );
	this.buttons['image'] = imageButton( 'image', 'img/page/wysiwyg/image.gif', selOn, selOff, selDown, selUp, function(e) { getTarget( e ).associatedWYSIWYG.doImage(); } );
	this.buttons['rule'] = imageButton( 'rule', 'img/page/wysiwyg/rule.gif', selOn, selOff, selDown, selUp, function(e) { getTarget( e ).associatedWYSIWYG.doRule(); } );

	for ( i in this.buttons ) { 

		hdiv.appendChild( this.buttons[i] );
		this.buttons[i].associatedWYSIWYG = this;

	}

	//create the drop down menus
	var sizemenu = document.createElement( 'select' );

	var optd = optionFactory( "", "--Text Size--" );
	var opt1 = optionFactory( "1", "Very Small" );
	var opt2 = optionFactory( "2", "Small" );
	var opt3 = optionFactory( "3", "Medium" );
	var opt4 = optionFactory( "4", "Medium Large" );
	var opt5 = optionFactory( "5", "Large" );
	var opt6 = optionFactory( "6", "Very Large" );

	sizemenu.options.add( optd );
	sizemenu.options.add( opt1 );
	sizemenu.options.add( opt2 );
	sizemenu.options.add( opt3 );
	sizemenu.options.add( opt4 );
	sizemenu.options.add( opt5 );
	sizemenu.options.add( opt6 );

	CBAddEventListener( sizemenu, "change", function(e) { getTarget( e ).associatedWYSIWYG.doSize( getTarget( e ).options[ getTarget( e ).selectedIndex ].value ); } );

	this.selections[ 'textsize' ] = sizemenu;

	for ( i in this.selections ) { 

		fdiv.appendChild( this.selections[i] );
		this.selections[i].associatedWYSIWYG = this;

	}

	//create the editable text area
	this.textArea = document.createElement ( 'iframe' );
	//this.textArea.associatedWYSIWYG = this;

	this.textArea.id = "editingArea";
	this.textArea.name = "editingArea";

	this.textArea.style.width = parseInt( this.w ) - 6;
	this.textArea.style.height = parseInt( this.h ) - 66;

	bdiv.appendChild( this.textArea );

	//put the whole thing together
	rdiv.appendChild( hdiv );
	rdiv.appendChild( bdiv );
	rdiv.appendChild( fdiv );

	rdiv.associatedWYSIWYG = this;

	return rdiv;

}

/**
* WYSIWYGObject.getHTML
*
* Returns the inner HTML of the iframe object
**/
WYSIWYGObject.prototype.getHTML = function() { 

	//alert ( ( new String( cbGetContentDocument(this.textArea).body.innerHTML ) ).replace( /&/g, "%26" ) );
	return ( new String( cbGetContentDocument(this.textArea).body.innerHTML ) ).replace( /&/g, "%26" );

}

/**
* WYSIWYGObject.turnOnEditing
*
* Turns the editing ability on on the textArea
**/
WYSIWYGObject.prototype.turnOnEditing = function() { 

	cbGetContentDocument(this.textArea).designMode = 'on';

} 

/**
* ImageButton
*
* A helper function for creating Image Buttons
**/
function imageButton( 
			button_id ,
			image_src ,
			mouse_over , 
			mouse_out , 
			mouse_down ,
			mouse_up ,
			click
		    ) {
	
	var rbut = new Image();
	rbut.src = image_src;

	if ( mouse_over != null ) 
		CBAddEventListener( rbut, "mouseover", mouse_over );
	if ( mouse_out != null ) 
		CBAddEventListener( rbut, "mouseout", mouse_out );
	if ( mouse_down != null ) 
		CBAddEventListener( rbut, "mousedown", mouse_down );
	if ( mouse_up != null ) 
		CBAddEventListener( rbut, "mouseup", mouse_up );
	if ( click != null ) 
		CBAddEventListener( rbut, "click", click );

	return rbut;

}

/**
* OptionFactory
* 
* Creates a select list option
**/
function optionFactory( opt_value, opt_text ) { 

	ropt = document.createElement( 'option' );
	ropt.value = opt_value;
	ropt.text = opt_text;

	return ropt;

}

/**
* Button Style Functions
**/
function selOn( e ) {
	var my_target = getTarget( e )
	my_target.style.borderColor = '#000000';
	my_target.style.backgroundColor = '#B5BED6';
	my_target.style.cursor = 'pointer';	
}
  
function selOff( e ) {
	var my_target = getTarget( e )
	my_target.style.borderColor = '#D6D3CE';  
	my_target.style.backgroundColor = '#DEDEFF';
}

function selDown( e ) {
	var my_target = getTarget( e )
	my_target.style.backgroundColor = '#8492B5';
}
  
function selUp( e ) {
	var my_target = getTarget( e )
	my_target.style.backgroundColor = '#B5BED6';
}

/**
* EditingSetupClosure
*
* Set up a closure to call the turn on editing function and set initial content of an editing window
*
* @param w The WYSIWYGObject we are setting up
* @param c The initial text 
**/
function EditingSetupClosure( w, c ) {

	var u_window = w;
	var u_content = c;

	var rf = function() { 

		u_window.turnOnEditing();

		if( u_content != null ) {
			setTimeout( function() { cbGetContentDocument(u_window.textArea).body.innerHTML = u_content; }, 200 );
		}		

	}

	return rf;

}

/**
* cbGetContentDocument
*
* @param i a IFrame text area
*
* @returns the document object of the IFrame
**/
function cbGetContentDocument( i ) { 



	if ( i.contentDocument ) 
		return i.contentDocument;
	else if ( i.contentWindow && i.contentWindow.document )
		return i.contentWindow.document;
	else if ( i.document )
		return i.document;

}



