prefix = "/resources/js/";
uploadHandler = "/uploadMedia.php";

include(prefix+"superEditor/editorButtons.js");
include(prefix+"superEditor/actionHandlers.js");

var buttonBar = "<div id='buttonBar'>	<select id='fontname'>		<option class='arial' value='Arial'>Arial</option>		<option class='arialb' value='Arial Black'>Arial Black</option>		<option class='comic' value='Comic Sans Serif'>Comic Sans Serif</option>		<option class='courier' value='Courier New'>Courier New</option>		<option class='georgia' value='Georgia'>Georgia</option>		<option class='impact' value='Impact'>Impact</option>		<option class='palatino' value='Palatino Linotype'>Palatino</option>		<option class='tahoma' value='Tahoma'>Tahoma</option>		<option class='times' value='Times New Roman'>Times New Roman</option>		<option class='trebuchet' value='Trebuchet MS'>Trebuchet</option>		<option class='verdana' value='Verdana'>Verdana</option>	</select>	<select id='fontsize'>		<option value='6'>6</option>		<option value='8'>8</option>		<option value='9'>9</option>		<option value='10'>10</option>		<option value='12'>12</option>		<option value='14'>14</option>		<option value='16'>16</option>		<option value='18'>18</option>		<option value='20'>20</option>		<option value='24'>24</option>	</select>			<div class='separator'></div>			<div class='toggleButton' id='bold'>		<img class='imgCover' src='/resources/js/superEditor/bold.png' title='Bold' />	</div>	<div class='toggleButton' id='italic'>		<img class='imgCover' src='/resources/js/superEditor/italic.png' title='Italic' />	</div>	<div class='toggleButton' id='underline'>		<img class='imgCover' src='/resources/js/superEditor/underline.png' title='Underline' />	</div>			<div class='separator'></div>			<div class='radioButton' id='justifyleft'>		<img class='imgCover' src='/resources/js/superEditor/align_left.png' title='Align Left' />	</div>	<div class='radioButton' id='justifycenter'>		<img class='imgCover' src='/resources/js/superEditor/align_center.png' title='Align Center'/>	</div>	<div class='radioButton' id='justifyright'>		<img class='imgCover' src='/resources/js/superEditor/align_right.png' title='Align Right'/>	</div>			<div class='separator'></div>			<div class='toggleButton' id='insertorderedlist'>		<img src='/resources/js/superEditor/numbers.png' title='Insert Numbers' />	</div>	<div class='toggleButton' id='insertunorderedlist'>		<img src='/resources/js/superEditor/bullets.png' title='Insert Bullets' />	</div>			<div class='separator'></div>			<div class='toggleButton' id='foreColor'>		<img src='/resources/js/superEditor/color_wheel.png' title='Font Color' />	</div>	<div class='button' id='imageUpload'>		<img src='/resources/js/superEditor/picture_add.png' title='Insert Image' />		<div id='frameWrap'><iframe id='uploadFrame'></iframe></div>	</div>	<div class='toggleButton' id='insertLink'>		<img src='/resources/js/superEditor/world_link.png' title='Insert Link' />	</div>			<div class='separator'></div>		<div class='button' id='saveButton'>Save</div>		<div style='clear:both;'></div></div>";
includeCss();

function includeCss() {
	cssCode = "@import url('"+prefix+"superEditor/editor.css');";
	headObj = document.getElementsByTagName('head').item(0);
	firstCss = document.getElementsByTagName('style').item(0);
	
	if (document.all) {
		css = document.createElement('link');
		css.href = prefix+"superEditor/editor.css";
		css.rel = "stylesheet";
	} else {
		css = document.createElement('style');
		css.innerHTML = cssCode;	
	}
	
	css.type = 'text/css';
	if (firstCss) {
		headObj.insertBefore(css, firstCss);
	} else {
		headObj.appendChild(css);
	}
}

function SuperEditor( id, defaultFont, defaultSize) {
	if (typeof(id) == "string")
		this.containerObj = document.getElementById(id);		//Container object
	else 
		this.containerObj = id;
	
	this.content 	= this.containerObj.innerHTML;	//Current content
	this.editorObj 	= null; 						//The iframe
	this.doc 		= null; 						//Holds the actual edited document
	this.formatState= null;
	this.saveAction = null;
	this.defaultFont = defaultFont;
	this.defaultSize = defaultSize;
	
	this.registerEditor = function ( id ) {
		var height = this.containerObj.offsetHeight;
		if (height < 150) height = 150; // make sure the menus are at least visible...
		
		this.containerObj.innerHTML = buttonBar+"<iframe id='editor'></iframe>";
		
		//this.containerObj.onclick = null; //why did I do this again? weird.....
		
		this.editorObj = document.getElementById('editor');
		this.editorObj.style.height = height+5+"px";
		this.containerObj.style.height = height+36+"px";
		this.doc = this.editorObj.contentWindow.document;
		
		this.containerObj.style.border = "1px solid black";
		
		//We need to delay the designMode setting to give browser a chance to make the element..
		var thisObj = this;
		setTimeout(function () {thisObj.setDesignMode();}, 100);
	}
	
	this.registerEditor(id); //Initiate the editor right now!
	
	this.setDesignMode = function () {
		if (this.editorObj.document) { //IE and Opera
			this.doc.designMode = "On";
		} else {
			this.editorObj.contentDocument.designMode = "On";
			//For some strange reason, this.doc changes...
			this.doc = this.editorObj.contentWindow.document; 
			this.doc.execCommand("styleWithCss", false, true);
		}
		style = getStyles();
		style += "* { font-family:'"+defaultFont+"'; font-size:"+defaultSize+"pt; }\n";
		style += "body { text-align:left; background:none; }\n";
		this.doc.write( "<style>"+style+"</style>" + this.content );
		this.doc.close();
		
		this.setupButtons();
		this.registerKeys();
		this.focusOnDoc();
	}
	this.setupButtons = function () {
		elements = document.getElementsByTagName("div");
		this.formatState = new FormatState(this);
		
		for (i in elements) {
			if (elements[i].className == "button") {
				this.formatState.newButton(elements[i]);
			} else if (elements[i].className == "toggleButton") {
				this.formatState.newButton(elements[i], "toggle");
			} else if (elements[i].className == "radioButton") {
				this.formatState.newButton(elements[i], "radio");
			}
		}
		
		//Set up select boxes - CLEAN ME UP LATER!!!
		fontName = document.getElementById('fontname');
		fontSize = document.getElementById('fontsize');
		formatState = this.formatState;
		for (i = 0; i < fontName.options.length ; i ++) 
			if (fontName.options[i].value == defaultFont)
				fontName.selectedIndex = i;
		for (i = 0; i < fontSize.options.length ; i ++) 
			if (fontSize.options[i].value == defaultSize)
				fontSize.selectedIndex = i;
		fontName.onchange = function() {formatState.setState("fontname")};
		fontSize.onchange = function() {formatState.setState("fontsize") };
		fontName.onfocus = function() {formatState.selChange['fontname'] = false;};
		fontName.onblur = function () {formatState.selChange['fontname'] = true;};
		fontSize.onfocus = function() {formatState.selChange['fontsize'] = false;};
		fontSize.onblur = function () {formatState.selChange['fontsize'] = true;};
		
		//Setup image uploading - CLEAN ME UP LATER AS WELL!!!
		delayMe = function () {imgUploader = new UploadHandler( document.getElementById('uploadFrame') );};
		window.setTimeout(delayMe, 100);
		
	}
	
	this.focusOnDoc = function () {
		if (this.editorObj.document && document.all) 
			this.editorObj.contentWindow.document.body.focus();
			//return 0;
		else this.editorObj.contentWindow.focus();
	}
	
	this.doAction = function ( action ) {
		var simpleActions = Array("bold", "italic", "underline", "justifyleft", "justifycenter", "justifyright","insertorderedlist", "insertunorderedlist");
			
		obj = document.getElementById(action);
		
		if (inArray(action, simpleActions)) {
			this.doc.execCommand(action, false, null);
		} else if (action == "fontname" || action == "fontsize") {
			this.doc.execCommand(action, false, obj.options[obj.selectedIndex].value);
			clearFontTags(this.doc);
		}
		
		this.focusOnDoc();
	}
	this.registerKeys = function () {
		var thisObj = this;
		if (document.addEventListener) {
			document.addEventListener("keypress", function (e) {return thisObj.keyHandler(e)}, true);
    			this.doc.addEventListener("keypress", function (e) {return thisObj.keyHandler(e)}, true);
    		}
	}
	this.keyHandler = function (e) {
		hotkeys = { 98:"bold", 105:"italic", 117:"underline"};
		evt = e ? e : window.event;
		keyCode = evt.keyCode ? evt.keyCode : evt.charCode;
		
		if (evt.ctrlKey) { 
			if (hotkeys[keyCode]) {
				this.formatState.setState(hotkeys[keyCode]);
				if (evt.preventDefault) evt.preventDefault();
				return false;
			} else if (keyCode == 115) {
				if (this.saveAction) this.saveAction();
			}
		}
		
	}
	this.getContent = function () {
		return this.doc.body.innerHTML;
	}
	this.setSave = function ( obj ) {
		this.saveAction = obj;
		saveBtn = document.getElementById('saveButton');
		saveBtn.onclick = this.saveAction;
		saveBtn.style.display = "block";
	}
	this.getSelection = function () {
		if ( window.getSelection ) {
			return this.editorObj.contentWindow.getSelection();
		} else if (document.getSelection) {
			return this.doc.getSelection();
		} else if (document.selection) {
			return this.doc.selection;
		} else {
			return "";
		}
	}
	this.insertHTML = function (html, selection) {
		if (window.getSelection) {
			if (selection)
				selection.deleteFromDocument();
			
			this.doc.execCommand("inserthtml", false, html);			
		} else if (document.selection) {
			selection.pasteHTML(html);
		} else {
			this.doc.body.innerHTML += html;
		}
	}
	
	
	this.clear = function () {
		this.containerObj.innerHTML = this.doc.body.innerHTML;
		this.containerObj.style.border = "none";
		this.containerObj.style.height = "auto";
	}
}

function viewsource() {
	alert(editor.getContent());
}

function FormatState( editor ) {
	this.editor = editor;
	this.doc = editor.doc;
	
	this.objects = new Array();
	this.objects["justify"] = new RadioSelector(this);
	this.selChange = {"fontname":false, "fontsize":false};
	
	this.menuButtons = {"insertLink":insertLink, "foreColor":colorSelect, "imageUpload":null};
	
	this.newButton = function ( obj, type) {
		if (type == "toggle") {
			this.objects[obj.id] = new ToggleButton(obj, this);
		} else if (type == "radio") {
			this.objects["justify"].addButton(obj);
		} else {
			this.objects[obj.id] = new Button(obj, this);
		}
	}
	
	this.updateStates = function () {
		selectStates = new Array("fontname", "fontsize");
		binaryStates = new Array("bold", "italic", "underline", "insertorderedlist", "insertunorderedlist");
		justifyStates = new Array("justifyleft", "justifycenter", "justifyright" );
		
		try {
		for (state in selectStates) {
			if (this.selChange[selectStates[state]]) {
				obj = document.getElementById(selectStates[state]);
				curState = this.doc.queryCommandValue(selectStates[state]);
				for (opt = 0; opt < obj.options.length; opt++) {
					if (obj.options[opt].value && obj.options[opt].value.toLowerCase() == curState)
						obj.selectedIndex = opt;
				}
			}
		}
		
		for (state in binaryStates) {
			curState = this.doc.queryCommandState(binaryStates[state]);
			this.objects[binaryStates[state]].setActive(curState);
		}
		for (state in justifyStates) 
			if (this.doc.queryCommandState(justifyStates[state]))
				this.objects["justify"].setActive(justifyStates[state]);
		} catch (e) {};
	}
	
	this.setState = function ( obj ) {
		if (obj.setActive) {
			obj.setActive();
			if (this.menuButtons[obj.getID()]) this.menuButtons[obj.getID()](obj, this.editor);
			else this.editor.doAction(obj.getID());
		} else {
			if (this.objects[obj]) this.objects[obj].setActive();
			this.editor.doAction(obj);
		}
		
		this.editor.focusOnDoc();
	}
	
	this.stateUpdateLoop = function stateUpdateLoop() {
		this.updateStates();
		clearFontTags(this.doc);
		
		var thisObj = this;
		setTimeout(function () {thisObj.stateUpdateLoop()}, 100);
	}
	var thisObj = this;
	setTimeout(function () {thisObj.stateUpdateLoop()}, 5000); //Start state updating
}

function getStyles() {
	styles = "";
	curStyles = document.getElementsByTagName("style");
	for ( i in curStyles) {
		if (typeof(curStyles[i]) == "object") 
			styles += curStyles[i].innerHTML;
	}
	return styles +  " body { margin:1px; border:none; } \n p { margin:0px; } \n";
}

function clearFontTags(doc) {

	content = doc.body.innerHTML;
	if (content.toLowerCase().indexOf("<font") != -1) {		
		pos = content.indexOf("<FONT");
		if (pos == -1) pos = content.indexOf("<font");
		tag = content.substring(pos,content.indexOf(">", pos)+1);
		
		fontType = tag.substring(tag.indexOf("=")+1);
		fontType = fontType.substring(0,fontType.length-1);
		
		action = tag.substring(tag.indexOf(" ")+1, tag.indexOf("=")).toLowerCase();
		
		if (action == "face") {
			change = "font-family";
		} else if (action == "size") {
			change = "font-size";
			fontType = obj.options[obj.selectedIndex].value + "pt";
		} else {
			alert(action);
		}
		
		newCode = content.substring(0,pos);
		newCode += "<span style='"+change+":"+fontType+";'>"
		newCode += content.substring(content.indexOf(">", pos)+1);
		newCode = newCode.replace("</FONT>", "</span>");
		newCode = newCode.replace("</font>", "</span>");
		
		doc.body.innerHTML = newCode;
	}
}
function inArray( obj, arr ) {
	for (i = 0; i < arr.length; i++) if (arr[i] == obj) return true;
	return false;
}