<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
    <$icon>
    <$charset>
    <title>リンク作成</title>
</head>

<$script src="/owwg/wysiwyg-popup-min.js">

<script type="text/javascript">

/* ---------------------------------------------------------------------- *\
  Function    : insertHyperLink() (changed)
  Description : Insert the link into the iframe html area
\* ---------------------------------------------------------------------- */
function insertHyperLink() {
    var n = WYSIWYG_Popup.getParam('wysiwyg');
    
    // get values from form fields
    var href = document.getElementById('linkUrl').value;
    var target = document.getElementById('linkTarget').value;
    var style = document.getElementById('linkStyle').value;
    var styleClass = document.getElementById('linkClass').value;
    var name = document.getElementById('linkName').value;
  
    // insert link
    WYSIWYG.insertLink(href, target, style, styleClass, name, n);
    window.close();
}

/* ---------------------------------------------------------------------- *\
  Function    : loadLink() (new)
  Description : Load the link attributes to the form
\* ---------------------------------------------------------------------- */
function loadLink() {
    // get params
    var n = WYSIWYG_Popup.getParam('wysiwyg');
    
    // get selection and range
    var sel = WYSIWYG.getSelection(n);
    var range = WYSIWYG.getRange(sel);
    var lin = null;
    if(WYSIWYG_Core.isMSIE) {
        if(sel.type == "Control" && range.length == 1) {    
            range = WYSIWYG.getTextRange(range(0));
            range.select();
        }
        if (sel.type == 'Text' || sel.type == 'None') {
            sel = WYSIWYG.getSelection(n);
            range = WYSIWYG.getRange(sel);
            // find a as parent element
            lin = WYSIWYG.findParent("a", range);
        }
    }
    else {
        // find a as parent element
        lin = WYSIWYG.findParent("a", range);
    }
    
    // if no link as parent found exit here
    if(lin == null) return;
        
    // set form elements with attribute values
    for(var i=0; i<lin.attributes.length; i++) {
        var attr = lin.attributes[i].name.toLowerCase();
        var value = lin.attributes[i].value;
        if(attr && value && value != "null") {
            switch (attr) {
                case "href":
                    // strip off urls on IE
                    if(WYSIWYG_Core.isMSIE) value = WYSIWYG.stripURLPath(n, value, false);
                    document.getElementById('linkUrl').value = value;
                break;
                case "target":
                    document.getElementById('linkTarget').value = value;
                    selectItemByValue(document.getElementById('linkTargetChooser'), value);
                break;
                case "name":
                    document.getElementById('linkName').value = value;
                break;
                case "class":
                    document.getElementById('linkClass').value = value;
                break;
                case "className":
                    document.getElementById('linkClass').value = value;
                break;
                
            }
        }
    }
    
    // Getting style attribute of the link separately, because IE interprets the 
    // style attribute is an complex object, and do not return a text stylesheet like Mozilla.
    document.getElementById('linkStyle').value = WYSIWYG_Core.replaceRGBWithHexColor(WYSIWYG_Core.getAttribute(lin, "style"));  
}

/* ---------------------------------------------------------------------- *\
  Function    : updateTarget() (new)
  Description : Updates the target text field
  Arguments   : value - Value to be set
\* ---------------------------------------------------------------------- */
function updateTarget(value) {
    document.getElementById('linkTarget').value = value;
}

/* ---------------------------------------------------------------------- *\
  Function    : selectItem()
  Description : Select an item of an select box element by value.
\* ---------------------------------------------------------------------- */
function selectItemByValue(element, value) {
    if(element.options.length) {
        for(var i=0;i<element.options.length;i++) {
            if(element.options[i].value == value) {
                element.options[i].selected = true;
                return;
            }
        }
        element.options[(element.options.length-1)].selected = true;
    }
}

</script>
<body bgcolor="#EEEEEE" marginwidth="0" marginheight="0" topmargin="0" leftmargin="0" onLoad="loadLink();">

<table border="0" cellpadding="0" cellspacing="0" style="padding: 10px;"><tr><td>

<span style="font-family: arial, verdana, helvetica; font-size: 11px; font-weight: bold;">リンク設定:</span>
    <table width="330" border="0" cellpadding="1" cellspacing="0" style="background-color: #F7F7F7; border: 2px solid #FFFFFF; padding: 5px;">
    <tr>
        <td style="padding-bottom: 2px; padding-top: 0px; font-family: arial, verdana, helvetica; font-size: 11px;">URL:</td>
        <td style="padding-bottom: 2px; padding-top: 0px;" colspan="3">
            <input type="text" name="linkUrl" id="linkUrl" value="http://" style="font-size: 10px; width: 100%;">
        </td>
    </tr>
    <tr>
        <td style="padding-bottom: 2px; width: 50px; font-family: arial, verdana, helvetica; font-size: 11px;">target:</td>
        <td style="padding-bottom: 2px;" colspan="3">
            <input type="text" name="linkTarget" id="linkTarget" value="" style="font-size: 10px; width: 65%;">
            &nbsp;
            <select name="linkTargetChooser" id="linkTargetChooser" style="font-size: 10px; width: 30%;" onchange="updateTarget(this.value);">
                <option value="" selected>no target</option>
                <option value="_blank">_blank</option>
                <option value="_self">_self</option>
                <option value="_parent">_parent</option>
                <option value="_top">_top</option>
                <option value="">custom</option>
            </select>
        </td>   
    </tr>
    <tr>
        <td style="padding-bottom: 2px; width: 50px; font-family: arial, verdana, helvetica; font-size: 11px;">style:</td>
        <td style="padding-bottom: 2px;" colspan="3">
            <input type="text" name="linkStyle" id="linkStyle" value="" style="font-size: 10px; width: 100%;">
        </td>   
    </tr>
    <tr>
        <td style="padding-bottom: 2px; width: 50px; font-family: arial, verdana, helvetica; font-size: 11px;">class:</td>
        <td style="padding-bottom: 2px;">
            <input type="text" name="linkClass" id="linkClass" value="" style="font-size: 10px; width: 90%;">
        </td>   
        <td style="padding-bottom: 2px; width: 30px; font-family: arial, verdana, helvetica; font-size: 11px;">name:</td>
        <td style="padding-bottom: 2px; width: 120px;">
            <input type="text" name="linkName" id="linkName" value="" style="font-size: 10px; width: 100%;">
        </td>   
    </tr>
 
</table>    

<div align="right" style="padding-top: 5px;">
    <input type="button" value="  リンク登録  " onClick="insertHyperLink();" style="font-size: 12px;" >&nbsp;
    <input type="button" value="  キャンセル  " onClick="window.close();" style="font-size: 12px;" ></div>

</td></tr></table>

</body>
</html>
