<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<$icon>
<$charset>
<title>画像設定</title>

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

<script language="JavaScript" type="text/javascript">

/* ---------------------------------------------------------------------- *\
  Function    : insertImage()
  Description : Inserts image into the WYSIWYG.
\* ---------------------------------------------------------------------- */
function insertImage() {
    var n = WYSIWYG_Popup.getParam('wysiwyg');
    
    // get values from form fields
    var src = document.getElementById('uploadImageId').value;
    var alt = document.getElementById('alt').value;
    var width = document.getElementById('width').value
    var height = document.getElementById('height').value
    var border = document.getElementById('border').value
    var align = document.getElementById('align').value
    var vspace = document.getElementById('vspace').value
    var hspace = document.getElementById('hspace').value
    
    // insert image
    WYSIWYG.insertImage(src, width, height, align, border, alt, hspace, vspace, n);
    window.close();
}

/* ---------------------------------------------------------------------- *\
  Function    : loadImage()
  Description : load the settings of a selected image into the form fields
\* ---------------------------------------------------------------------- */
function loadImage() {
    var n = WYSIWYG_Popup.getParam('wysiwyg');
    
    // get selection and range
    var sel = WYSIWYG.getSelection(n);
    var range = WYSIWYG.getRange(sel);
    
    // the current tag of range
    var img = WYSIWYG.findParent("img", range);
    
    // if no image is defined then return
    if(img == null) return;
        
    // assign the values to the form elements
    for(var i = 0;i < img.attributes.length;i++) {
        var attr = img.attributes[i].name.toLowerCase();
        var value = img.attributes[i].value;
        //alert(attr + " = " + value);
        if(attr && value && value != "null") {
            switch(attr) {
                case "src": 
                    // strip off urls on IE
                    if(WYSIWYG_Core.isMSIE) value = WYSIWYG.stripURLPath(n, value, false);
                    if( $base.startsWith( value,"http://" ) == false &&
                        $base.startsWith( value,"https://" ) == false &&
                        $base.startsWith( value,"/" ) == false )  {
                        value = "/" + value ;
                    }
                    document.getElementById('uploadImageId').value = value;
                break;
                case "alt":
                    document.getElementById('alt').value = value;
                break;
                case "align":
                    selectItemByValue(document.getElementById('align'), value);
                break;
                case "border":
                    document.getElementById('border').value = value;
                break;
                case "hspace":
                    document.getElementById('hspace').value = value;
                break;
                case "vspace":
                    document.getElementById('vspace').value = value;
                break;
                case "width":
                    document.getElementById('width').value = value;
                break;
                case "height":
                    document.getElementById('height').value = value;
                break;              
            }
        }
    }
    
    // get width and height from style attribute in none IE browsers
    if(!WYSIWYG_Core.isMSIE && document.getElementById('width').value == "" && document.getElementById('width').value == "") {
        document.getElementById('width').value = img.style.width.replace(/px/, "");
        document.getElementById('height').value = img.style.height.replace(/px/, "");
    }
    
    // 画像が存在する場合は処理する.
    reloadImage() ;
}

/* ---------------------------------------------------------------------- *\
  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;
            }
        }
    }
}

// イメージ選択画像.
selectImage = function( width,height ) {
    if( $base.isNull( width ) ) {
        width = 800 ;
    }
    if( $base.isNull( height ) ) {
        height = 400 ;
    }
    var params = "" ;
    if( $base.useString( "${params['id']}" ) ) {
        params = "id=${params['id']}" ;
    }
    params = $base.addNoCookieBySession( params ) ;
    var url = "" ;
    if( $base.useString( params ) ) {
        url = "/owwg/selectImage?" + params ;
    }
    else {
        url = "/owwg/selectImage" ;
    }
    window.open(url,'selectImage', "width="+width+",height="+height+",scrollbars=yes" ) ;
}

// リロードイメージ.
reloadImage = function() {
    var url = document.getElementById("uploadImageId").value ;
    if( $base.useString( url ) ) {
        if( $base.startsWith( url,"http://" ) == false &&
            $base.startsWith( url,"https://" ) == false &&
            $base.startsWith( url,"/" ) == false )  {
            url = "/" + url ;
            document.getElementById("uploadImageId").value = url ;
        }
        if( url.indexOf( "?" ) >= 0 ) {
            url = url + "&"+new Date().getTime() ;
        }
        else {
            url = url + "?"+new Date().getTime() ;
        }
        document.getElementById("_img_uploadImageId").src=url ;
    }
}

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

<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="400" border="0" cellpadding="0" 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;" width="80">画像URL:</td>
    <td style="padding-bottom: 2px; padding-top: 0px;" width="360">
        <input type="text" name="uploadImage" id="uploadImageId" value="" style="font-size: 10px; width: 68%;" onblur="reloadImage();">
        <input type="button" value="選択" onClick="selectImage();" style="font-size: 10px;" >
        <input type="button" value="load" onClick="reloadImage();" style="font-size: 10px;" >
        <br>
        <$svimg alt="イメージ" width="320" height="100" border="1" id='uploadImage'>
    </td>
 </tr>
 <tr>
  <td style="padding-bottom: 2px; padding-top: 0px; font-family: arial, verdana, helvetica; font-size: 11px;">代替:</td>
    <td style="padding-bottom: 2px; padding-top: 0px;"><input type="text" name="alt" id="alt" value=""  style="font-size: 10px; width: 100%;"></td>
 </tr>
</table>
    


<table width="400" border="0" cellpadding="0" cellspacing="0" style="margin-top: 10px;"><tr><td style="vertical-align:top;">

<span style="font-family: arial, verdana, helvetica; font-size: 11px; font-weight: bold;">レイアウト:</span>
<table width="190" border="0" cellpadding="0" 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;">横:</td>
  <td style="width:60px;padding-bottom: 2px; padding-top: 0px;"><input type="text" name="width" id="width" value=""  style="font-size: 10px; width: 100%;"></td>
 </tr>
 <tr>
  <td style="padding-bottom: 2px; padding-top: 0px; font-family: arial, verdana, helvetica; font-size: 11px;">縦:</td>
    <td style="padding-bottom: 2px; padding-top: 0px;"><input type="text" name="height" id="height" value=""  style="font-size: 10px; width: 100%;"></td>
 </tr>
 <tr>
  <td style="padding-bottom: 2px; padding-top: 0px; font-family: arial, verdana, helvetica; font-size: 11px;">枠線太さ:</td>
    <td style="padding-bottom: 2px; padding-top: 0px;"><input type="text" name="border" id="border" value="0"  style="font-size: 10px; width: 100%;"></td>
 </tr>
</table>    

</td>
<td width="10">&nbsp;</td>
<td style="vertical-align:top;">

<span style="font-family: arial, verdana, helvetica; font-size: 11px; font-weight: bold;">&nbsp;</span>
<table width="200" border="0" cellpadding="0" cellspacing="0" style="background-color: #F7F7F7; border: 2px solid #FFFFFF; padding: 5px;">
<tr>
  <td style="width: 115px;padding-bottom: 2px; padding-top: 0px; font-family: arial, verdana, helvetica; font-size: 11px;" width="100">位置:</td>
    <td style="width: 85px;padding-bottom: 2px; padding-top: 0px;">
    <select name="align" id="align" style="font-family: arial, verdana, helvetica; font-size: 11px; width: 100%;">
     <option value="">Not Set</option>
     <option value="left">Left</option>
     <option value="right">Right</option>
     <option value="texttop">Texttop</option>
     <option value="absmiddle">Absmiddle</option>
     <option value="baseline">Baseline</option>
     <option value="absbottom">Absbottom</option>
     <option value="bottom">Bottom</option>
     <option value="middle">Middle</option>
     <option value="top">Top</option>
    </select>
    </td>
 </tr>
 <tr>
  <td style="padding-bottom: 2px; padding-top: 0px; font-family: arial, verdana, helvetica; font-size: 11px;">Horizontal Space:</td>
    <td style="padding-bottom: 2px; padding-top: 0px;"><input type="text" name="hspace" id="hspace" value=""  style="font-size: 10px; width: 100%;"></td>
 </tr>
 <tr>
  <td style="padding-bottom: 2px; padding-top: 0px; font-family: arial, verdana, helvetica; font-size: 11px;">Vertical Space:</td>
    <td style="padding-bottom: 2px; padding-top: 0px;"><input type="text" name="vspace" id="vspace" value=""  style="font-size: 10px; width: 100%;"></td>
 </tr>
</table>    

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

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

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

</body>
</html>
