<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=unicode">
    <title>Contact</title>
    <style type="text/css">
        html
        {
            overflow-x: hidden;
            overflow-y: auto;
        }
        body
        {
            font-family: Arial, Helvetica,Sans-serif;
            color: black;
            background-color: #fff;
            font-size: 10.5pt;
            margin: 0em;
            padding: 0em;
            line-height: 1.5;
        }
        div
        {
            font-size: 1em;
        }
        table
        {
            empty-cells: show;
            margin: 0;
            padding: 0;
        }
        font
        {
            font-size: 1em;
        }
        ul
        {
            padding: 0 0 1em 1em;
        }
        ol
        {
            padding: 0 0 1em 1.3em;
        }
        li
        {
            line-height: 1.5em;
            padding: 0 0 0 0;
        }
        p
        {
            padding: 0;
        }
        h1, h2, h3, h4, h5
        {
            padding: 0;
        }
        h1
        {
            font-size: 1.3em;
        }
        h2
        {
            font-size: 1.1em;
        }
        h3
        {
            font-size: 1em;
            line-height: 1.4em;
            white-space: nowrap;
            padding: 0;
        }
        h4, h5, table
        {
            font-size: 1em;
        }
        sup, sub
        {
            font-size: .7em;
        }
        input, select, textarea, option
        {
            font-family: inherit;
            font-size: inherit;
            margin: 0;
            padding: 0;
        }
        img
        {
            border-style: none;
        }
        a
        {
            outline: none;
            color: #00c;
        }
        a:active
        {
            color: red;
        }
        a:visited
        {
            color: #551a8b;
        }
        hr
        {
            border-style: none;
            border-width: 0 0 0px 0;
            background-color: #EEE;
            border-bottom: #c9d7f1 1px solid;
            height: 0px;
            width: 99.9%;
            text-align: left;
            margin-top: 1em;
            margin-bottom: 1em;
            border-top-color: inherit;
            border-right-color: inherit;
            border-bottom-color: #C0C0C0;
            border-left-color: inherit;
        }
        .linetd
        {
            border-bottom: 1px #DBEDEA dashed;
            text-align: left;
        }
        #content_table input
        {
            background-color: #FAF7E7;
            border: 0;
            padding: 2px;
            border-bottom: 1px solid gray;
            font-size: 1em;
            padding-top: 0.5em;
        }
        #content_table textarea
        {
            background-color: #FAF7E7;
            border: 0;
            margin-top: 0px;
            border-bottom: 1px #DBEDEA dashed;
            font-size: 1em;
            width: 100%;
            padding: 0.5em;
            margin-left: -1em;
        }
        #photodiv
        {
            position: absolute;
            width: 120px;
            height: 150px;
            z-index: 10;
            float: left;
            margin-left: 2em;
            margin-top: -0.5em;
            border: 1px solid silver;
            padding: 2px;
            cursor: pointer;
            display:inline;
        }
        /*WizCustomCSS*/
        .lefttd
        {
            text-align: left;
        }
    </style>
</head>
<body style="background-image: url('contact/_bg.gif'); padding-left: 2em;">
    <form action="#" method="post" name="formMain">
    <table style="width: 100%" border="0" cellspacing="0" cellpadding="20" width="100%"
        background="contact/_bg.gif">
        <tbody>
            <tr>
                <td align="left" style="padding: 0; border: 0;">
                    <table border="0" cellspacing="0" cellpadding="0" style="width: 700px">
                        <tbody>
                            <tr valign="top">
                                <td width="52" nowrap style="" height="80" valign="top"><img src="contact/_top_left.gif" width="52"></td>
                                <td align="right" style="background-image: url('contact/_top_bg.gif')" height="80" valign="top"><img src="contact/_top_pic.gif" width="70"></td>
                                <td width="51" nowrap style="" height="80" valign="top"><img src="contact/_top_right.gif" width="51"></td>
                            </tr>
                            <tr>
                                <td valign="top" background="contact/_mid_left.gif" nowrap style="padding: 0; border: 0;">
                                </td>
                                <td style="padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 4px;
                                    border: 0" valign="top" background="contact/_mid_bg.gif" align="left">
                                    <table id="content_table" style="border-collapse: collapse; margin-left: 1em; width: 95%"
                                        cellpadding="6" cellspacing="1">
                                        <tr>
                                            <td style="width: 40px;" class="linetd">
                                                <span id="labelName">Name</span>:
                                            </td>
                                            <td class="linetd">
                                                <input name="FN" type="text" size="20">
                                                <span id="labelTitle">Title</span>:<input name="TITLE" type="text" size="12">
                                                <div id="photodiv" onclick="browserphoto()">
                                                    <img id="photoImg" src="contact/nophoto.gif" width="120" height="150" alt="Photo"></div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="linetd" style="width: 40px">
                                                <span id="labelOrg">Organization</span>:
                                            </td>
                                            <td class="linetd">
                                                <input name="ORG" type="text" size="40" />
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="linetd" style="width: 40px">
                                                <span id="labelTele">Tele</span>:
                                            </td>
                                            <td class="linetd">
                                                <input name="TEL" type="text" size="40" />
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="linetd" style="width: 40px">
                                                <span id="labelEmail">Email</span>:
                                            </td>
                                            <td class="linetd">
                                                <input name="EMAIL" type="text" size="40" />
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="linetd" style="width: 40px">
                                                <span id="labelAddress">Address</span>:
                                            </td>
                                            <td class="linetd">
                                                <input name="ADR" type="text" size="40" />
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="linetd" style="width: 40px">
                                                <span id="labelURL">URL</span>:
                                            </td>
                                            <td class="linetd">
                                                <input name="URL" type="text" size="40" />
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="linetd" style="width: 40px">
                                                <span id="labelBirthday">Birthday</span>:
                                            </td>
                                            <td class="linetd">
                                                <p>
                                                    <input name="BDAY" type="text" value="    /  /  " size="20" /></p>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="linetd" style="width: 40px">
                                                <span id="labelIM">MSN/ICQ</span>:
                                            </td>
                                            <td class="linetd">
                                                <input name="IM" type="text" size="20" />
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="lefttd" valign="top" colspan="2">
                                                <span id="labelNote">Note</span>:<br>
                                                &nbsp;<textarea name="NOTE" cols="40" rows="5"></textarea>
                                            </td>
                                        </tr>
                                    </table>
                                    <div id="save" style="text-align: right; padding: 1em;">
                                        <input id="btnSave" style="width: 6em; height: 2em; font-size: 1em;" type="button"
                                            value="Save" onclick="actionSave()">&nbsp;
                                        <input id="btnClose" style="width: 6em; height: 2em; font-size: 1em;" type="button"
                                            value="Close" onclick="closeWindow()">
                                    </div>
<!--                                     <div style="display: none;">
                                        <input id="PHOTO" name="PHOTO" type="file" onchange="changephoto()" accept="image/*" /></div> -->
                                </td>
                                <td background="contact/_mid_right.gif" nowrap style="padding: 0; border: 0;">
                                    <img src="contact/_spacer.gif" width="1" height="280">
                                </td>
                            </tr>
                            <tr>
                                <td title="bottom_left" nowrap><img src="contact/_bottom_left.gif" width="52" height="47"></td>
                                <td valign="bottom" background="contact/_bottom_bg.gif" align="right" ><img src="contact/_bottom_pic.gif" width="70" height="47"></td>
                                <td title="bottom_right" nowrap style="padding: 0; border: 0;"><img src="contact/_bottom_right.gif" width="51" height="47"></td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
        </tbody>
    </table>
    </form>

    <script language="javascript">
    var objApp = window.external;
    var objDatabase = objApp.Database;
    var objCommon = objApp.CreateWizObject("WizKMControls.WizCommonUI");
    var objDoc = null;

    var photoFileName = "";

    function saveToWiz(force) {
            try {
               //
                var content = "";
                if (!force) {
                    var contentText = "";
                    if (contentText.length == 0) {
                        if (content.length < 10)
                            return;
                    }
                }
                //
                var title = formMain.FN.value;
                
                if(title == null || title.length <1)
                {
                    title = getLocalString("UnnamedContact");
                }
                //
                var location = "/My Contacts/";
                //
                var objFolder = objDatabase.GetFolderByLocation(location, true);
                //
                if (objDoc == null) {
                 
                    objDoc = objFolder.CreateDocument2(title, "");
                    
                    objDoc.Type = "contact";
                }
                //
                if (objDoc.Location != location) {
                    objDoc.MoveTo(objFolder);
                }
                objDoc.ChangeTitleAndFileName(title);
                //
                //
                var filename = objApp.GetHtmlDocumentPath(document) + "contact\\" + getLocalString("TemplateFileName");
                var htmltext = objCommon.LoadTextFromFile(filename);

                htmltext = htmltext.replace("%doc_title%", formMain.FN.value);
                htmltext = htmltext.replace("%FN%", formMain.FN.value);
                htmltext = htmltext.replace("%TITLE%", formMain.TITLE.value);
                htmltext = htmltext.replace("%ORG%", formMain.ORG.value);
                htmltext = htmltext.replace("%TEL%", formMain.TEL.value);
                htmltext = htmltext.replace("%EMAIL%", formMain.EMAIL.value);
                htmltext = htmltext.replace("%ADR%", formMain.ADR.value);
                htmltext = htmltext.replace("%URL%", formMain.URL.value);
                htmltext = htmltext.replace("%BDAY%", formMain.BDAY.value);
                htmltext = htmltext.replace("%IM%", formMain.IM.value);
                htmltext = htmltext.replace("%NOTE%", formMain.NOTE.value);
                
                var photourl = objApp.GetHtmlDocumentPath(document) + "contact\\nophoto.gif";
                if(photoFileName)
                {
                    photourl = photoFileName
                }
                htmltext = htmltext.replace("%PHOTO%", photourl);
                //
                
                
                objDoc.UpdateDocument3(htmltext, 0);
                //
                var params = "/DatabasePath=" + objDatabase.DatabasePath + " /KbGUID=" + objDatabase.KbGUID + " /DocumentGUID=" + objDoc.GUID;
                objApp.Window.ExecCommand("locatedocument", params);
            }
            catch (err) {
                alert(err);
            }
        }
        //
        function actionSave() {
            saveToWiz(true);
        }
        //
        //
        function onPluginWindowClosing() {
            try {
                saveToWiz(false);
            }
            catch (err) {
                alert(err)
                return -1;
            }
            return 0;
        }


    function closeWindow() {
        objApp.Window.CloseHtmlDialog(document, 0);
    }

    var languageFileName;

    function getLanguageFileName(objApp) {
        if (languageFileName == null || languageFileName == "") {
            var path = objApp.GetHtmlDocumentPath(document);
            languageFileName = path + "contact.ini";
        }
        //
        return languageFileName;
    }
    function localizeCurrentDocument(objApp) {
        objApp.LocalizeHtmlDocument(getLanguageFileName(objApp), document);
    }
    //
    function getLocalString(stringName) {
        return objApp.LoadStringFromFile(getLanguageFileName(objApp), stringName);
    }
    //
    localizeCurrentDocument(objApp);
    //
    function localizeEditorButtons() {
        var elements = document.getElementsByTagName("li");
        for (var i = 0; i < elements.length; i++) {
            var element = elements[i];
            if (element.title && element.title != "") {
                element.title = getLocalString(element.title);
                element.innerText = element.title;
            }
        }
    }
        

    function browserphoto()
    {
        // formMain.PHOTO.click();
        var filename = objCommon.SelectWindowsFile(true, "(*.bmp;*.png;*.gif;*.jpg;)|*.bmp;*.png;*.gif;*.jpg|");
        //
        if (filename) {
            photoFileName = filename;
            changephoto(filename);
        }
    }
    
    function changephoto(filename)
    {
        var ext = filename.substr(filename.lastIndexOf('.') + 1);
        ext = ext.toLowerCase();
        //
        if (ext == 'bmp' || ext == 'png' || ext == 'gif' || ext == 'jpg')
        {
            formMain.photoImg.src = filename;
        }
        else
        {
            alert('Not image file.');
        }
    }
    
    onload=function(){
        formMain.FN.focus();
    }
    </script>

</body>
</html>
