<html>
<head>
<title>__#BUFFERTITLE#__</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="../viewerfiles/viewer.css" type="text/css">
<style type="text/css">
    td.Title
    {
        font-family: __#@font#__;
        font-weight: bold;
        font-size: 13pt;
    }
    td.SubTitle
    {
        font-family: __#@font#__;
        font-weight: bold;
        font-size: __#@fontsize#__;
        background-color: #DCDCDC;
        color: black;
        height: 20px;
    }
    .BufferSwatch
    {
        border: black 1px solid;
        height: 16px;
        font-family: __#@font#__;
        font-size: 7pt;
    }
    td.InfoText
    {
        background-color: #FFFFCC;
        color: #666666;
        font-family: __#@font#__;
        font-size: __#@fontsize#__;
    }
    .RegText
    {
        font-family: __#@font#__;
        font-size: __#@fontsize#__;
    }
    .Ctrl
    {
        font-family: __#@font#__;
        font-size: __#@fontsize#__;
    }
</style>

<script language="javascript" src="../viewerfiles/browserdetect.js"></script>
<script language="javascript" src="../viewerfiles/util.js"></script>
<script language=javascript>

var popup = %s;
var lcolor = "000000";
var ffcolor = "ff0000";
var fbcolor = "ffffff";
var transparent = 1;
var pickClr;
var thousandSeparator = "__#THOUSANDSEPARATOR#__";
var decimalSeparator = "__#DECIMALSEPARATOR#__";

function InitDocument()
{
    document.getElementById("distance").focus();
    var w = msie? document.body.clientWidth: window.innerWidth - 40;
    document.getElementById("layers").style.width = (w > 200? 200: w) + "px";
    FillLayerList();
}

function FillLayerList()
{
    var list = document.getElementById("layers");
    var listNames = document.getElementById("layerNames");
    list.options.length = 0;
    var layers = GetParent().GetMapFrame().GetSelectedLayers();
    if(layers.length > 0)
    {
        for(var i = 0; i < layers.length; i++)
        {
            var layer = layers[i];
            list.options[i] = new Option(layer.legend != ""? layer.legend: layer.name);
            if(i == 0)
                list.options[0].selected = true;
            listNames.options[i] = new Option(layer.name);
        }
    }
    else
        list.options[0] = new Option("__#BUFFERNOLAYER#__");
    document.getElementById("Done").disabled = layers.length == 0;
}

function UpdateColors()
{
    var elt;
    document.getElementById("lcolor").value = lcolor;
    elt = document.getElementById("lcolorswtach").style;
    elt.backgroundColor = "#" + lcolor;
    elt.color = "#" + lcolor;

    document.getElementById("ffcolor").value = ffcolor;
    elt = document.getElementById("ffcolorswtach").style;
    elt.backgroundColor = "#" + ffcolor;
    elt.color = "#" + ffcolor;

    document.getElementById("fbcolor").value = fbcolor;
    document.getElementById("fbtransp").value = transparent;
    elt = document.getElementById("fbcolorswtach").style;
    elt.backgroundColor = transparent? "#ffffff": "#" + fbcolor;
    elt.color = transparent? "black": "#" + fbcolor;
}

function Validate()
{
    var field = document.getElementById("distance");
    var num = ParseLocalizedFloat(field.value);
    if(isNaN(num) || num == 0)
    {
        alert("__#BUFFERERRORZERODISTANCE#__");
        field.focus();
        return false;
    }
    field = document.getElementById("buffer");
    if(field.value == "")
    {
        alert("__#BUFFERERRORNOLAYERNAME#__");
        field.focus();
        return false;
    }
    field = document.getElementById("thickness");
    num = ParseLocalizedFloat(field.value);
    if(isNaN(num) || num < 0)
    {
        alert("__#BUFFERERRORNEGATIVETHICKNESS#__");
        field.focus();
        return false;
    }
    UpdateColors();
    return true;
}

function GetSelection()
{
    var sel = GetParent().GetMapFrame().GetSelectionXML();
    if(sel == "")
    {
        alert("__#BUFFERERRORNOSELECTION#__");
        return false;
    }
    document.getElementById("selection").value = sel;
    return true;
}

function GetInputLayers()
{
    var layers = document.getElementById("layers");
    var layerNames = document.getElementById("layerNames");
    var lyrs = "";
    for(var i = 0; i < layers.length; i++)
    {
        if(layers.options[i].selected)
        {
            if(lyrs != "")
                lyrs += ",";
            lyrs += layerNames.options[i].text;
        }
    }
    if(lyrs == "")
        return false;
    document.getElementById("inLayers").value = lyrs;
    return true;
}

function GetParent()
{
    if(popup)
        return opener;
    else
        return parent.parent;
}

function PickColor(what, allowTransparency, transparent)
{
    var clr;
    if((pickClr = what) == 0)
        clr = lcolor;
    else if(pickClr == 1)
        clr = ffcolor;
    else if(pickClr == 2)
        clr = fbcolor;
   else
        return;
    height = allowTransparency? 470: 445;
    w = window.open("%s?LOCALE=%s&CLR=" + clr + "&ALLOWTRANS=" + (allowTransparency? "1":"0") + "&TRANS=" + (transparent?"1":"0"), "colorPicker", "toolbar=no,status=no,width=355,height=" + height);
    w.focus();
}

function OnColorPicked(clr, trans)
{
    if(pickClr == 0)
        lcolor = clr;
    else if(pickClr == 1)
        ffcolor = clr;
    else if(pickClr == 2)
    {
        fbcolor = clr;
        transparent = trans? 1 : 0;
    }
    UpdateColors();
}

function RefreshLayers()
{
    FillLayerList();
}

function OnCancel()
{
    mf = GetParent();
    mf.mapFrame.ClearSelection();
    mf.GotoHomePage();
}

function ValidateInput(id)
{
    var input = document.getElementById(id);
    if(isNaN(input.value))
    {
        alert("__#BUFFERINPUTWARNNING#__");
    }
}

</script>
</head>
<body onload="InitDocument()" marginwidth=5 marginheight=5 leftmargin=5 topmargin=5 bottommargin=5 rightmargin=5>
<form id="Frm" method="post" action="%s" onsubmit="if(!Validate() || !GetSelection() || !GetInputLayers()) return false;">
    <table class="RegText" border="0" cellspacing="0" width="100%%">
        <tr><td class="Title">__#BUFFERTITLE#__<hr></td></tr>
        <tr><td class="SubTitle">__#BUFFERSUBTITLE#__</td></tr>
        <tr><td height="6">
          <table border="0" cellspacing="0" cellpadding="3" width="100%%">
            <tr><td height="6"></td></tr>
            <tr><td class="InfoText">__#BUFFERINFOTEXT#__</td></tr>
          </table>
        </td></tr>
        <tr><td height="6"></td></tr>
        <tr><td >__#BUFFERDISTANCE#__</td></tr>
        <tr><td><input type="edit" name="DISTANCE" id="distance" value="1" size="5" class="Ctrl" onkeyup="ValidateInput('distance')">
          <select name="UNITS" class="Ctrl">
            <option value="mi" %s>__#DISTANCEMILES#__</option>
            <option value="ki" %s>__#DISTANCEKILOMETERS#__</option>
            <option value="fe">__#DISTANCEFEET#__</option>
            <option value="me">__#DISTANCEMETERS#__</option>
          </select>
        </td></tr>
        <tr><td height="6"></td></tr>
        <tr><td>__#BUFFERLAYERS#__</td></tr>
        <tr><td valign="top">
          <select size="4" name="D1" multiple id="layers" class="Ctrl">
          </select>
        </td></tr>
        <tr><td><input type="button" value="__#BUTTONREFRESH#__" style="width: 70px;" class="Ctrl" onclick="RefreshLayers()"></td></tr>
        <tr><td height="6"></td></tr>
        <tr><td>__#BUFFERNAME#__</td></tr>
        <tr><td><input type="edit" name="BUFFER" id="buffer" value="__#BUFFERNAMETEXT#__" size="25" class="Ctrl"></td></tr>
        <tr><td><input type="checkbox" checked name="MERGE" class="Ctrl">__#BUFFERMERGE#__</td></tr>
        <tr><td height="6"></td></tr>

        <tr><td>
          <table cellspacing=0 cellpadding=0 border=0 width="100%%" class="RegText">
            <tr><td valign=top>
            <table cellspacing=0 cellpadding=0 border=0 width="100%%" class="RegText">
              <tr><td class="SubTitle">__#BUFFERFILLSTYLE#__</td></tr>
              <tr><td height="6"></td></tr>
              <tr><td>__#BUFFERFILLPATTERN#__</td></tr>
              <tr><td>
                <select name="FILLSTYLE" class="Ctrl" style="width: 85px;">
                  <option value="Solid" selected>__#FILLSOLID#__</option>
                  <option value="Net">__#FILLNET#__</option>
                  <option value="Line">__#FILLLINE#__</option>
                  <option value="Line_45">__#FILLLINE45#__</option>
                  <option value="Line_90">__#FILLLINE90#__</option>
                  <option value="Line_135">__#FILLLINE135#__</option>
                  <option value="Square">__#FILLSQUARE#__</option>
                  <option value="Box">__#FILLBOX#__</option>
                  <option value="Cross">__#FILLCROSS#__</option>
                  <option value="Dash">__#FILLDASH#__</option>
                  <option value="Dolmit">__#FILLDOLMIT#__</option>
                  <option value="Hex">__#FILLHEX#__</option>
                  <option value="Sacncr">__#FILLSACNCR#__</option>
                  <option value="Steel">__#FILLSTEEL#__</option>
                </select>
              </td></tr>
              <tr><td height="6"></td></tr>
              <tr><td>__#BUFFERFOREGROUNDCOLOR#__</td></tr>
              <tr><td><span class="BufferSwatch" id="ffcolorswtach" style="color: #ff0000; background-color: #ff0000">__#TRANSPARENT#__</span>&nbsp;&nbsp;
                <input type="button" value="..." style="width: 22px;" onclick="PickColor(1,false,false)" class="Ctrl"></td></tr>
              <tr><td height="6"></td></tr>
              <tr><td>__#BUFFERTRANSPARENCY#__</td></tr>
              <tr><td><input type="text" id="foretrans" name="FORETRANS" size="4" value="50" class="Ctrl" onkeyup="ValidateInput('foretrans');"> %%</td></tr>
              <tr><td height="6"></td></tr>
              <tr><td>__#BUFFERBACKGROUNDCOLOR#__</td></tr>
              <tr><td><span class="BufferSwatch" id="fbcolorswtach" >&nbsp;__#TRANSPARENT#__&nbsp;</span>&nbsp;&nbsp;
                <input type="button" value="..." style="width: 22px;" onclick="PickColor(2,true,transparent)" class="Ctrl"></td></tr>
              <tr><td height="6"></td></tr>
            </table>
          </td><td width=1></td><td valign=top>
            <table cellspacing=0 cellpadding=0 border=0 width="100%%" class="RegText">
              <tr><td class="SubTitle">__#BUFFERBORDERSTYLE#__</td></tr>
              <tr><td height="6"></td></tr>
              <tr><td>__#BUFFERBORDERLINEPATTERN#__</td></tr>
              <tr><td>
                <select name="LINESTYLE" class="Ctrl">
                  <option value="Solid" selected>__#LINESOLID#__</option>
                  <option value="Dash">__#LINEDASH#__</option>
                  <option value="Dot">__#LINEDOT#__</option>
                  <option value="DashDot">__#LINEDASHDOT#__</option>
                  <option value="DashDotDot">__#LINEDASHDOTDOT#__</option>
                  <option value="Rail">__#LINERAIL#__</option>
                  <option value="BORDER">__#LINEBORDER#__</option>
                  <option value="DIVIDE">__#LINEDIVIDE#__</option>
                  <option value="FENCELINE1">__#LINEFENCELINE#__</option>
                </select>
              </td></tr>
              <tr><td height="6"></td></tr>
              <tr><td>__#BUFFERBORDERLINECOLOR#__</td></tr>
              <tr><td><span class="BufferSwatch" id="lcolorswtach" style="color: #000000; background-color: #000000">__#TRANSPARENT#__</span>&nbsp;&nbsp;
                <input type="button" value="..." style="width: 22px;" onclick="PickColor(0, false,false)" class="Ctrl"></td></tr>
              <tr><td height="6"></td></tr>
              <tr><td>__#BUFFERBORDERLINETHICKNESS#__</td></tr>
              <tr><td><input type="edit" name="THICKNESS" id="thickness" value="1" size="10" class="Ctrl" onkeyup="ValidateInput('thickness')"></td></tr>
              <tr><td> </td></tr>
            </table>
          </td></tr>
          </table>
        </td></tr>

        <tr><td height="6"><hr></td></tr>
        <tr><td><input id="Done" type="submit" value="__#BUTTONDONE#__" style="width: 70px;" class="Ctrl">&nbsp;<input id="Cancel" type="button" value="__#BUTTONCANCEL#__" style="width: 70px;" class="Ctrl" onclick="OnCancel()"></td></tr>
        <tr><td height="6"></td></tr>
      </table>
      <table border="0" cellspacing="0" cellpadding="5" width="100%%" class="Regext">
        <tr><td class="InfoText">
          <div style="position: relative; left: -25px;">
            <ul>
              __#BUFFERHELP#__
            </ul>
          </div>
        </td></tr>
    </table>

    <input type="hidden" name="MAPNAME" value="%s">
    <input type="hidden" name="SESSION" value="%s">
    <input type="hidden" name="POPUP" value="%s">
    <input type="hidden" name="LOCALE" value="%s">
    <input type="hidden" name="LCOLOR" id="lcolor" value="#000000">
    <input type="hidden" name="FFCOLOR" id="ffcolor" value="#f00000">
    <input type="hidden" name="FBCOLOR" id="fbcolor" value="#ffffff">
    <input type="hidden" name="TRANSPARENT" id="fbtransp" value="1">
    <input type="hidden" name="LAYERS" id="inLayers" value="">
    <input type="hidden" name="SELECTION" id="selection" value="">
    <select size="4" id="layerNames" style="visibility: hidden">
    </select>
</form>
</body>
</html>