function vhqEditor (fieldId, btns) {
this.panelStatus = null;
this.s = null;
this.r = null;
this.iconsRoot = '/images/vhqEditor/icons/';
this.fieldId = fieldId;
this.fieldElem = document.getElementById(fieldId);
var fieldContents = this.fieldElem.value;
if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)) {
var ieversion=new Number(RegExp.$1);
}
this.editorElem = document.createElement('div');
this.editorElem.style.width = this.fieldElem.offsetWidth + 'px';
this.editorElem.style.height = this.fieldElem.offsetHeight + 'px';
this.fieldElem.parentNode.insertBefore(this.editorElem,this.fieldElem);
this.barElem = document.createElement('div');
this.barElem.className = 'vhqEditorBar';
this.editorElem.appendChild(this.barElem);
this.frameElem = document.createElement('iframe');
this.frameElem.frameBorder = 0;
this.frameElem.src = '';
this.frameElem.className = 'vhqEditor';
if (ieversion < 7) {
this.frameElem.style.width = (this.fieldElem.offsetWidth - 4) + 'px';
} else {
this.frameElem.style.width = (this.fieldElem.offsetWidth - 2) + 'px';
}
this.frameElem.style.height = (this.fieldElem.offsetHeight - this.barElem.offsetHeight - 4) + 'px';
this.editorElem.appendChild(this.frameElem);
this.fieldElem.style.display = "none";
frame = this.frameElem.contentWindow.document;
frame.open();
frame.write('' + fieldContents + '');
frame.close();
frame.designMode = 'on';
frm = this.getParentTag('form');
if (frm) {
if (frm.addEventListener) {
frm.addEventListener("submit", this.syncValues.bind(this), false );
} else {
frm.attachEvent("onsubmit", this.syncValues.bind(this));
}
}
this.panelElem = document.createElement('div');
this.panelElem.className = 'vhqEditorPanel';
this.panelElem.style.width = '200px';
this.editorElem.appendChild(this.panelElem);
var btn = null;
for (var i = 0; i < btns.length; i++) {
btn = btns[i];
if (btn == 'bold') {
this.createIcon('bold', null);
} else if (btn == 'italic') {
this.createIcon('italic', null);
} else if (btn == 'underline') {
this.createIcon('underline', null);
} else if (btn == 'left') {
this.createIcon('justifyleft', null);
} else if (btn == 'right') {
this.createIcon('justifyright', null);
} else if (btn == 'center') {
this.createIcon('justifycenter', null);
} else if (btn == 'justify') {
this.createIcon('justifyfull', null);
} else if (btn == 'orderedlist') {
this.createIcon('insertorderedlist', null);
} else if (btn == 'unorderedlist') {
this.createIcon('insertunorderedlist', null);
} else if (btn == 'outdent') {
this.createIcon('outdent', null);
} else if (btn == 'indent') {
this.createIcon('indent', null);
} else if (btn == 'font') {
this.createFontSelect();
} else if (btn == 'fontSize') {
this.createFontSizeSelect();
} else if (btn == 'foreColor') {
this.createForeColorSelect();
} else if (btn == 'backColor') {
this.createBackColorSelect();
} else if (btn == 'link') {
this.createLink();
} else if (btn == 'linkBreak') {
this.createIcon('unlink', null);
} else if (btn == 'photo') {
this.insertPhoto();
} else if (btn == 'video') {
this.insertVideo();
} else if (btn == 'music') {
this.insertMusic();
} else if (btn == 'face') {
this.insertFace();
} else if (btn == 'direction') {
this.createDirectionIcons();
}
}
return true;
}
vhqEditor.prototype.getParentTag = function (name) {
var elem = this.frameElem;
name = name.toLowerCase();
do {
if(elem && elem.nodeName && elem.nodeName.toLowerCase() == name) {
return elem;
}
elem = elem.parentNode;
} while(elem);
return false;
}
vhqEditor.prototype.findTag = function (t, a, v) {
t = t.toUpperCase();
var content = this.frameElem.contentWindow.document.body;
var tags = content.getElementsByTagName(t);
for (var i = 0; i < tags.length; i++) {
if (tags[i].getAttribute(a) == v) {
return tags[i];
}
}
}
vhqEditor.prototype.syncValues = function () {
html = this.frameElem.contentWindow.document.body.innerHTML;
this.fieldElem.value = html;
}
vhqEditor.prototype.createIcon = function (cmd, args) {
var btn = document.createElement('div');
btn.className = 'vhqEditorIconsContainer';
btn.onclick = this.callCmd.bind(this, cmd, args);
this.barElem.appendChild(btn);
var img = document.createElement('img');
img.className = 'vhqEditorIcons';
img.border = 0;
img.src = this.iconsRoot + cmd + ".png";
img.height = 16;
btn.appendChild(img);
}
vhqEditor.prototype.createFontSelect = function () {
var btn = document.createElement('img');
btn.onclick = this.showFonts.bind(this, btn);
btn.className = 'vhqEditorSelects';
btn.src = this.iconsRoot + "selectFont.png";
this.barElem.appendChild(btn);
}
vhqEditor.prototype.createFontSizeSelect = function () {
var btn = document.createElement('img');
btn.onclick = this.showFontSizes.bind(this, btn);
btn.className = 'vhqEditorSelects';
btn.src = this.iconsRoot + "selectFontSize.png";
this.barElem.appendChild(btn);
}
vhqEditor.prototype.createForeColorSelect = function () {
var btn = document.createElement('img');
btn.onclick = this.showColorPicker.bind(this, btn, 'forecolor');
btn.className = 'vhqEditorSelects';
btn.src = this.iconsRoot + "forecolor.png";
this.barElem.appendChild(btn);
}
vhqEditor.prototype.createBackColorSelect = function () {
var btn = document.createElement('img');
if (navigator.userAgent.indexOf('MSIE') !=-1 || navigator.userAgent.indexOf('Safari') !=-1) {
btn.onclick = this.showColorPicker.bind(this, btn, 'backcolor');
} else {
btn.onclick = this.showColorPicker.bind(this, btn, 'hilitecolor');
}
btn.className = 'vhqEditorSelects';
btn.src = this.iconsRoot + "backcolor.png";
this.barElem.appendChild(btn);
}
vhqEditor.prototype.insertFace = function () {
var btn = document.createElement('img');
btn.onclick = this.showFaces.bind(this, btn);
btn.className = 'vhqEditorSelects';
btn.src = this.iconsRoot + "face-smile.png";
this.barElem.appendChild(btn);
}
vhqEditor.prototype.createDirectionIcons = function () {
var btn = document.createElement('img');
btn.onclick = this.changeDirection.bind(this, 'ltr');
btn.className = 'vhqEditorSelects';
btn.src = this.iconsRoot + "ltr.png";
this.barElem.appendChild(btn);
btn = document.createElement('img');
btn.onclick = this.changeDirection.bind(this, 'rtl');
btn.className = 'vhqEditorSelects';
btn.src = this.iconsRoot + "rtl.png";
this.barElem.appendChild(btn);
}
vhqEditor.prototype.createLink = function () {
var btn = document.createElement('img');
btn.onclick = this.displayLinksBox.bind(this);
btn.className = 'vhqEditorSelects';
btn.src = this.iconsRoot + "link.png";
this.barElem.appendChild(btn);
}
vhqEditor.prototype.insertPhoto = function () {
var btn = document.createElement('img');
btn.onclick = selectShowRoom.bind(this, 1, 'Editor');
btn.className = 'vhqEditorSelects';
btn.src = this.iconsRoot + "photo.png";
this.barElem.appendChild(btn);
}
vhqEditor.prototype.insertVideo = function () {
var btn = document.createElement('img');
btn.onclick = selectShowRoom.bind(this, 3, 'Editor');
btn.className = 'vhqEditorSelects';
btn.src = this.iconsRoot + "video.png";
this.barElem.appendChild(btn);
}
vhqEditor.prototype.insertMusic = function () {
var btn = document.createElement('img');
btn.onclick = selectShowRoom.bind(this, 2, 'Editor');
btn.className = 'vhqEditorSelects';
btn.src = this.iconsRoot + "music.png";
this.barElem.appendChild(btn);
}
vhqEditor.prototype.callCmd = function (cmd, args) {
this.reSelectRange();
this.hidePanel();
this.frameElem.contentWindow.document.execCommand(cmd, false, args);
this.frameElem.contentWindow.focus();
}
vhqEditor.prototype.getFrameSelection = function () {
if (window.getSelection) {
return this.frameElem.contentWindow.getSelection();
} else {
return this.frameElem.contentWindow.document.selection;
}
}
vhqEditor.prototype.getFrameRange = function () {
var s = this.getFrameSelection();
if (!s) { return null; };
if (s.rangeCount > 0) {
return s.getRangeAt(0);
} else {
return s.createRange();
}
}
vhqEditor.prototype.reSelectRange = function () {
if(window.getSelection) {
if (this.s) {
this.s.removeAllRanges();
this.s.addRange(this.r);
}
} else {
if (this.r) {
this.r.select();
}
}
}
vhqEditor.prototype.showPanel = function (btn, w) {
if (this.panelElem.style.display != 'none') {
this.panelElem.style.display = 'none';
}
this.frameElem.contentWindow.focus();
this.s = this.getFrameSelection();
this.r = this.getFrameRange();
this.panelElem.style.top = this.barElem.offsetTop + this.barElem.offsetHeight + 'px';
this.panelElem.style.left = this.barElem.offsetLeft + btn.offsetLeft + 'px';
this.panelElem.style.width = w + 'px';
this.panelElem.style.display = 'inline';
//this.panelElem.onmouseout = this.hidePanel.bind(this);
}
vhqEditor.prototype.hidePanel = function () {
this.panelElem.style.display = 'none';
this.panelElem.innerHTML = '';
this.panelStatus = null;
}
vhqEditor.prototype.showFonts = function (btn) {
if (this.panelStatus == 'fonts') {
this.panelElem.innerHTML = '';
this.hidePanel();
} else {
this.hidePanel();
var fonts = new Array (
new Array('arial', 'Arial'),
new Array('comic sans ms', 'Comic Sans'),
new Array('courier new', 'Courier New'),
new Array('georgia', 'Georgia'),
new Array('helvetica', 'Helvetica'),
new Array('impact', 'Impact'),
new Array('tahoma', 'Tahoma'),
new Array('times new roman', 'Times'),
new Array('trebuchet ms', 'Trebuchet'),
new Array('verdana', 'Vernada')
);
var row;
for (var i = 0; i < fonts.length; i++) {
row = document.createElement('div');
row.className = 'vhqEditorRows';
row.style.fontFamily = fonts[i][0];
row.onclick = this.callCmd.bind(this, 'fontname', fonts[i][0]);
row.innerHTML = fonts[i][1];
this.panelElem.appendChild(row);
};
this.showPanel(btn, 100);
this.panelStatus = 'fonts';
}
}
vhqEditor.prototype.showFontSizes = function (btn) {
if (this.panelStatus == 'fontSizes') {
this.panelElem.innerHTML = '';
this.hidePanel();
} else {
this.hidePanel();
var fontSizes = new Array (
new Array('1', '8pt', '1 (8 pt)'),
new Array('2', '10pt', '2 (10 pt)'),
new Array('3', '12pt', '3 (12 pt)'),
new Array('4', '14pt', '4 (14 pt)'),
new Array('5', '18pt', '5 (18 pt)'),
new Array('6', '24pt', '6 (24 pt)'),
new Array('7', '32pt', '7 (32 pt)')
);
var row;
for (var i = 0; i < fontSizes.length; i++) {
row = document.createElement('div');
row.className = 'vhqEditorRows';
row.style.fontSize = fontSizes[i][1];
row.onclick = this.callCmd.bind(this, 'fontsize', fontSizes[i][0]);
row.innerHTML = fontSizes[i][2];
this.panelElem.appendChild(row);
};
this.showPanel(btn, 200);
this.panelStatus = 'fontSizes';
}
}
vhqEditor.prototype.showColorPicker = function (btn, cmd) {
if (this.panelStatus == cmd) {
this.panelElem.innerHTML = '';
this.hidePanel();
} else {
this.hidePanel();
var column, cell, container;
var colors = new Array('#000000', '#000080', '#008000', '#008080', '#800000', '#800080', '#808000', '#808080', '#c0c0c0', '#0000ff', '#00ff00', '#00ffff', '#ff0000', '#ff00ff', '#ffff00', '#ffffff', '#333333', '#4c4c4c', '#4c4c4c', '#666666', '#999999', '#b3b3b3', '#cccccc', '#e6e6e6', '#e6e6ff', '#ff3366', '#dc2300', '#b84700', '#ff3333', '#eb613d', '#b84747', '#b80047', '#99284c', '#94006b', '#94476b', '#944794', '#9966cc', '#6b4794', '#6b2394', '#6b0094', '#5e11a6', '#280099', '#4700b8', '#2300dc', '#2323dc', '#0047ff', '#0099ff', '#00b8ff', '#99ccff', '#00dcff', '#00cccc', '#23b8dc', '#47b8b8', '#33a3a3', '#198a8a', '#006b6b', '#004a4a', '#355e00', '#5c8526', '#7da647', '#94bd5e', '#00ae00', '#33cc66', '#3deb3d', '#23ff23', '#e6ff00', '#ffff99', '#ffff66', '#e6e64c', '#cccc00', '#b3b300', '#808019', '#666600', '#4c1900', '#663300', '#663300', '#804c19', '#996633', '#cc6633', '#ff6633', '#ff9966', '#ffcc99', '#9999ff', '#993366', '#ffffcc', '#ccffff', '#660066', '#ff8080', '#0066cc', '#333366', '#666699', '#9999cc', '#ccccff', '#004586', '#ff420e', '#ffd320', '#579d1c', '#7e0021', '#83caff', '#314004', '#aecf00', '#4b1f6f', '#ff950e', '#c5000b', '#0084d1', '#ffffff');
container = document.createElement('div');
this.panelElem.appendChild(container);
for (var i = 0; i < colors.length; i++) {
if (i % 8 == 0) {
column = document.createElement('div');
column.className = 'vhqEditorColorPickerColumn';
container.appendChild(column);
}
cell = document.createElement('div');
cell.className = 'vhqEditorColorPickerCell';
cell.style.backgroundColor = colors[i];
cell.onclick = this.callCmd.bind(this, cmd, colors[i]);
cell.innerHTML = ' ';
column.appendChild(cell);
};
this.showPanel(btn, 196);
this.panelStatus = cmd;
}
}
vhqEditor.prototype.showFaces = function (btn) {
if (this.panelStatus == 'faces') {
this.panelElem.innerHTML = '';
this.hidePanel();
} else {
this.hidePanel();
var faces = new Array (
new Array('smiley-cool', 'Cool'),
new Array('smiley-cry', 'Cry'),
new Array('smiley-embarassed', 'Embarassed'),
new Array('smiley-foot-in-mouth', 'Foot in mouth'),
new Array('smiley-frown', 'Frown'),
new Array('smiley-innocent', 'Innocent'),
new Array('smiley-kiss', 'Kiss'),
new Array('smiley-laughing', 'Laughing'),
new Array('smiley-money-mouth', 'Money mouth'),
new Array('smiley-sealed', 'Sealed'),
new Array('smiley-smile', 'Smile'),
new Array('smiley-surprised', 'Surprised'),
new Array('smiley-tongue-out', 'Tongue out'),
new Array('smiley-undecided', 'Undecided'),
new Array('smiley-wink', 'Wink'),
new Array('smiley-yell', 'Yell')
);
var row;
for (var i = 0; i < faces.length; i++) {
row = document.createElement('div');
row.className = 'vhqEditorIconsContainer';
row.onclick = this.callCmd.bind(this, 'insertimage', this.iconsRoot + faces[i][0] + '.gif', null, null, 18, 18);
this.panelElem.appendChild(row);
ico = document.createElement('img');
ico.className = 'vhqEditorIcons';
ico.src = this.iconsRoot + faces[i][0] + '.gif';
ico.title = faces[i][1];
ico.alt = faces[i][1];
row.appendChild(ico);
};
this.showPanel(btn, 110);
this.panelStatus = 'faces';
}
}
vhqEditor.prototype.displayLinksBox = function () {
this.s = this.getFrameSelection();
this.r = this.getFrameRange();
pBox = new vhqPbox;
pBox.displayTransparentLayer();
pBox.displayBox('');
var insertBt = document.getElementById('vhqEditorInsertBt');
insertBt.onclick = this.createLinks.bind(this);
}
vhqEditor.prototype.createLinks = function () {
var url = document.getElementById('vhqEditorUrl').value;
var title = document.getElementById('vhqEditorTitle').value;
var target = document.getElementById('vhqEditorTarget').options[document.getElementById('vhqEditorTarget').selectedIndex].value;
var tmpLinkUrl = 'javascript:vhqEditorTmpLink();';
hidePbox();
if (url && url != 'http://') {
this.callCmd('createlink', tmpLinkUrl);
var ln = this.findTag('A', 'href', tmpLinkUrl);
ln.href = url;
ln.target = target;
ln.title = title;
ln.alt = title;
}
}
vhqEditor.prototype.insertImage = function (url, title, align, w, h) {
this.reSelectRange();
this.frameElem.contentWindow.focus();
var tmpImgUrl = 'javascript:vhqEditorTmpImgUrl();';
this.callCmd('insertimage', tmpImgUrl);
var img = this.findTag('IMG', 'src', tmpImgUrl);
img.src = url;
img.border = 0;
if (title) {
img.title = title;
img.alt = title;
}
if (w) {
img.width = w;
}
if (h) {
img.height = h;
}
if (align == 'left' || align == 'right') {
if (navigator.userAgent.indexOf('MSIE') !=-1) {
img.style.styleFloat = align;
} else {
img.style.cssFloat = align;
}
}
}
vhqEditor.prototype.changeDirection = function (direction) {
this.s = this.getFrameSelection();
this.r = this.getFrameRange();
var tag = this.frameElem.contentWindow.document.body;
if (direction == 'rtl') {
tag.style.direction = 'rtl';
tag.style.textAlign = 'right';
} else {
tag.style.direction = 'ltr';
tag.style.textAlign = 'left';
}
this.frameElem.contentWindow.focus();
this.reSelectRange();
}