<html>
<head><title>Select Font</title>
<style>        
    <%include editor_dialog.css%>
</style>
<script>

var ie = false;
var ie6 = false;
if (window.navigator.appVersion.search('MSIE') > 0) ie = true;

// Allow for possible future versions of IE, which hopefully will support what IE6 supports
if (window.navigator.appVersion.search('MSIE 6') > 0 ||
    window.navigator.appVersion.search('MSIE 7') > 0 ||
    window.navigator.appVersion.search('MSIE 8') > 0)
    ie6 = true;

var fontList, styleList, sizeList, underline, colorList, fontBox, styleBox, sizeBox, sample, dlg, dialogWindow;

function initDialog() {
    fontList  = document.getElementById('fontList');
    styleList = document.getElementById('styleList');
    sizeList  = document.getElementById('sizeList');
    underline = document.getElementById('underline');
    fontBox   = document.getElementById('fontBox');
    colorList = document.getElementById('colorList');
    styleBox  = document.getElementById('styleBox');
    sizeBox   = document.getElementById('sizeBox');
    sample    = document.getElementById('sample');
    dlg       = document.getElementById('dlg');

    populateFont();

    opener.fontLoad(fontList, styleList, sizeList, colorList, underline);

    fontList.onchange  = loadFont;
    styleList.onchange = loadFont;
    sizeList.onchange  = loadFont;
    underline.onclick  = loadFont;
    colorList.onchange = loadFont;

    if (!ie) {
// Mozilla's default groove coloring isn't very nice; use a better one:
        document.getElementById('groove1').style.borderColor = 'ThreeDLightShadow';
        document.getElementById('groove2').style.borderColor = 'ThreeDLightShadow';

/* The following Javascript is used to change the styles on the various font
 * elements under Mozilla to adjust them slightly to look more or less the same
 * as they do under IE.  The specific problem arises because IE considers
 * positions to be relative to the element excluding the border, but Mozilla
 * includes the border.  Mozilla's approach seems more "correct", but since the
 * primary user base of the advanced editor is using IE, we do the dynamic
 * adjustments for Mozilla instead of IE.  They are relatively minor tweaks,
 * and taking them out certainly won't break anything.
 */
        fontBox.style.width = parseInt(fontBox.style.width) + 2 + 'px';
        fontBox.style.left = parseInt(fontBox.style.left) - 1 + 'px';
        fontBox.style.top = parseInt(fontBox.style.top) - 1 + 'px';
        styleBox.style.width = parseInt(styleBox.style.width) + 2 + 'px';
        styleBox.style.left = parseInt(styleBox.style.left) - 1 + 'px';
        styleBox.style.top = parseInt(styleBox.style.top) - 1 + 'px';
        sizeBox.style.width = parseInt(sizeBox.style.width) + 2 + 'px';
        sizeBox.style.left = parseInt(sizeBox.style.left) - 1 + 'px';
        sizeBox.style.top = parseInt(sizeBox.style.top) - 1 + 'px';

        var sampleTable = document.getElementById('sampleTable');
        sampleTable.style.height = parseInt(sampleTable.style.height) + 2 + 'px';
        sample.style.width = parseInt(sample.style.width) + 4 + 'px';
    }

    loadFont();
}

function populateFont() {
    if (ie6) {
        var fonts = [];
        for (var i = 1; i <= dlg.fonts.count; i++) fonts[i - 1] = dlg.fonts(i);
        fonts.sort();                
        for (var i = 0; i < fonts.length; i++) addFont(fontList, fonts[i]);
    }
    else {
        addFont(fontList, 'Arial');
        addFont(fontList, 'Arial Black');
        addFont(fontList, 'Arial Narrow');
        addFont(fontList, 'Century Gothic');
        addFont(fontList, 'Comic Sans MS');
        addFont(fontList, 'Courier');
        addFont(fontList, 'Courier New');
        addFont(fontList, 'Fixedsys');
        addFont(fontList, 'Garamond');
        addFont(fontList, 'Georgia');
        addFont(fontList, 'Lucida Console');
        addFont(fontList, 'MS Sans Serif');
        addFont(fontList, 'MS Serif');
        addFont(fontList, 'System');
        addFont(fontList, 'Tahoma');
        addFont(fontList, 'Times New Roman');
        addFont(fontList, 'Verdana');
        addFont(fontList, 'Webdings');
        addFont(fontList, 'Wingdings');
    }
}

function addFont (sel, fontName) {
    var o = document.createElement("OPTION");
    sel.options.add(o);
    o.innerHTML = fontName;
    o.value = fontName;
}

function loadFont() {
    if (fontList.selectedIndex >= 0) {
        var font  = fontList.options[fontList.selectedIndex].value;
        fontBox.value = font
        sample.style.fontFamily = font;
    }
    if (styleList.selectedIndex >= 0) {
        var style = styleList.options[styleList.selectedIndex].value;            
        if (style == 'r') {
            styleBox.value  = 'Regular';
            sample.style.fontStyle  = 'normal';
            sample.style.fontWeight = 'normal';
        }
        else if (style == 'b') {
            styleBox.value  = 'Bold';
            sample.style.fontStyle  = 'normal';
            sample.style.fontWeight = 'bold';
        }
        else if (style == 'i') {
            styleBox.value  = 'Italic';
            sample.style.fontWeight = 'normal';
            sample.style.fontStyle = 'italic';
        }
        else if (style == 'bi') {
            styleBox.value  = 'Bold Italic';
            sample.style.fontWeight = 'bold';
            sample.style.fontStyle = 'italic';
        }
    }

    if (sizeList.selectedIndex >= 0) {            
        sizeBox.value = sizeList.options[sizeList.selectedIndex].innerHTML;
        sample.style.fontSize = sizeList.options[sizeList.selectedIndex].innerHTML;
    }

    if (colorList.selectedIndex >= 0) {            
        sample.style.color = colorList.options[colorList.selectedIndex].value;
    }

    if (underline.checked)
        sample.style.textDecoration = 'underline';
    else
        sample.style.textDecoration = 'none';

    
}

function colorDialog (do_equals, width, height) {
/*------------------------------------------------------------
 * show dialog window
 */
    var url = opener.baseURL + ';page=' + do_equals + '.html;' + opener.extraURL;
    if (!dialogWindow) dialogWindow = new Object();

    if (dialogWindow.win && !dialogWindow.win.closed && dialogWindow.url == url) {
        dialogWindow.win.focus();
    }
    else {
        if (dialogWindow.win && !dialogWindow.win.closed) dialogWindow.win.close();

        dialogWindow.returnFunc = colorReturn;
        dialogWindow.url = url;
        dialogWindow.width = width;
        dialogWindow.height = height;
        dialogWindow.name = Math.random().toString().replace(/\./, "");

        dialogWindow.left = (screen.width - width) / 2;
        dialogWindow.top = (screen.height - height) / 2;
        dialogWindow.attribs = 'left=' + dialogWindow.left + ',' +
            'top=' + dialogWindow.top + ',' +
            'resizable=no,statusbar=yes,' +
            'width=' + dialogWindow.width + ',' +
            'height=' + dialogWindow.height;

        dialogWindow.currentColor = colorList.value;
        dialogWindow.win = window.open(dialogWindow.url, dialogWindow.name, dialogWindow.attribs);
        dialogWindow.win.focus();
    }
}

function colorReturn(color) {
    var clr = color.toUpperCase();
    var select;
    if      (clr == '#000000') select = 'black';
    else if (clr == '#000080') select = 'navy';
    else if (clr == '#0000FF') select = 'blue';
    else if (clr == '#008000') select = 'green';
    else if (clr == '#008080') select = 'teal';
    else if (clr == '#00FF00') select = 'lime';
    else if (clr == '#00FFFF') select = 'aqua';
    else if (clr == '#800000') select = 'maroon';
    else if (clr == '#800080') select = 'purple';
    else if (clr == '#808000') select = 'olive';
    else if (clr == '#808080') select = 'gray';
    else if (clr == '#C0C0C0') select = 'silver';
    else if (clr == '#FF0000') select = 'red';
    else if (clr == '#FF00FF') select = 'fuchsia';
    else if (clr == '#FFFF00') select = 'yellow';
    else if (clr == '#FFFFFF') select = 'white';

    if (select) colorList.value = select;
    else {
        colorList.selectedIndex = colorList.options.length - 1;
        colorList.options[colorList.selectedIndex].value = color;
        colorList.options[colorList.selectedIndex].innerHTML = color;
    }

    loadFont();
}


function returnFont() {
    var font, size, color, under, bold, italic;

    if (fontList.selectedIndex >= 0)  font  = fontList.options[fontList.selectedIndex].value;
    if (sizeList.selectedIndex >= 0)  size  = sizeList.options[sizeList.selectedIndex].value;
    if (colorList.selectedIndex >= 0) color = colorList.options[colorList.selectedIndex].value;
    var under  = underline.checked;
    var bold   = /b/.test(styleList.value);
    var italic = /i/.test(styleList.value);
    opener.dialogWindow.returnFunc(font, size, color, bold, italic, under);
    window.close();
}

</script>
</head>
<body onLoad="initDialog()" class="body">

  <!-- In IE6, this object can be used to get a list of system fonts. Using document.write to create it resulted in a crash on some computers -->
  <object id="dlg" classid="clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b" width="0px" height="0px"></object>

  <div style="position: absolute; top: 7px; left: 10px" >Font:</div>
  <input type="text" id="fontBox" style="font-size: 8pt; font-family: MS Sans Serif; height: 22px; width: 160px; position: absolute; top: 27px; left: 10px">
  <select id="fontList" size="7" style="width: 162px; position: absolute; top: 49px; left: 9px"></select>

  <div style="border: 2px groove; position: absolute; top: 175px; left: 10px; height: 100px; width: 160px" id="groove1"><div style="position: relative; top: -9px; left: 5px; width: 3.75em; background-color: ButtonFace">&nbsp;Effects&nbsp;</div></div>
  <input type="checkbox" id="underline" style="position: absolute; top: 192px; left: 25px">
  <div type="text" style="font-family: 'MS Sans Serif'; font-size: 8pt; border-width: 0px; position: absolute; top: 194px; left: 48px; width: 60px" onclick="underline.click()">Underline</div>

  <div style="position: absolute; top: 218px; left: 25px">Color:</div>
  <select id="colorList" size="1" style="font-face: 8pt; width: 80; position: absolute; top: 238px; left: 25px">
    <option value="black">Black</option>
    <option value="gray">Gray</option>
    <option value="silver">Silver</option>
    <option value="white">White</option>
    <option value="lime">Lime</option>
    <option value="green">Green</option>
    <option value="yellow">Yellow</option>
    <option value="olive">Olive</option>
    <option value="red">Red</option>
    <option value="maroon">Maroon</option>
    <option value="fuchsia">Fuchsia</option>
    <option value="purple">Purple</option>
    <option value="aqua">Aqua</option>
    <option value="teal">Teal</option>
    <option value="navy">Navy</option>
    <option value="blue">Blue</option>
    <option value="">Custom</option>
  </select>
  <script>
      document.write('<button style="position: absolute; top: 235px; left: 115px; height: 25px; width: 25px; padding: 0px" onclick="colorDialog(\'editor_color\', 345, 193)" onmousedown="pressColorButton()" onmouseup="releaseColorButton()" onmouseout="releaseColorButton()">' +
                     '<img src="' + opener.imageURL + '/toolbar/font_color.gif" id="colorButtonImage" style="position: relative; ' + (ie ? 'left: -3px' : 'left: -5px') + '; top: -1px; width: 23px; height: 23px; border: 0px"></button>');
      function pressColorButton () {
          var img = document.getElementById('colorButtonImage');
          img.style.left = ie ? '-2px' : '-4px';
          img.style.top = '0px';
      }
      function releaseColorButton () {
          var img = document.getElementById('colorButtonImage');
          img.style.left = ie ? '-3px' : '-5px';
          img.style.top = '-1px';
      }
  </script>

  <div style="position: absolute; top: 7px; left: 180px">Style:</div>
  <input type="text" id="styleBox" style="font-size: 8pt; height: 22px; width: 77px; position: absolute; top: 27px; left: 185px" readonly>
  <select id="styleList" size="7" style="width: 79px; position: absolute; top: 49px; left: 184px">
    <option value="r">Regular</option>
    <option value="b">Bold</option>
    <option value="i">Italic</option>
    <option value="bi">Bold Italic</option>
  </select>

  <div style="position: absolute; top: 7px; left: 277px">Size:</div>
  <input type="text" id="sizeBox" style="font-size: 8pt; height: 22px; width: 60px; position: absolute; top: 27px; left: 277px" readonly>
  <select id="sizeList" size="7" style="width: 62px; position: absolute; top: 49px; left: 276px">
    <option value="1">8</option>
    <option value="2">10</option>
    <option value="3">12</option>
    <option value="4">14</option>
    <option value="5">18</option>
    <option value="6">24</option>
    <option value="7">36</option>
  </select>

  <div style="border: 2px groove; position: absolute; top: 175px; left: 185px; height: 100px; width: 153px" id="groove2"><div style="position: relative; top: -9px; left: 5px; width: 3.75em; background-color: buttonface">&nbsp;Sample&nbsp;</div></div>
  <table width="131" style="position: absolute; top: 189px; left: 195px; height: 76px" cellpadding=0 cellspacing=0 id="sampleTable"><tr><td valign="middle" align="center" class="sample"><div style="overflow: hidden; width: 131px" id="sample">AaBbYyZz</div></td></tr></table>

  <button class="button" onclick="returnFont()" style="position: absolute; top: 26px; left: 345px">OK</button>
  <button class="button" onclick="window.close()" style="position: absolute; top: 54px; left: 345px">Cancel</button>

</body>
</html>
