<?php
	if($_SERVER['REQUEST_METHOD'] == "POST")
	{
        if($_SERVER['REQUEST_METHOD'] == "POST")
	    {
	 	    $filename = $_FILES['imgUpload']['name'];
		    $target_path = "uploadsDir/imagefiles/";
		    $target_path = $target_path . $filename;
		    move_uploaded_file($_FILES['imgUpload']['tmp_name'], $target_path);
	    }
	}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Insert Image</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="EditorStyle.css" rel="stylesheet" type="text/css" />

    <script language="javascript">
        function chkFile()
        {
            var filupload = document.getElementById("imgUpload").value;
            if(filupload == "")
            {
                alert("Please select a file");
               	return false;
            }    
            else
            {
                if(filupload.lastIndexOf(".gif") == -1 && filupload.lastIndexOf(".GIF") == -1 && filupload.lastIndexOf(".jpg") == -1 && filupload.lastIndexOf(".JPG") == -1 && filupload.lastIndexOf(".bmp") == -1 && filupload.lastIndexOf(".BMP") == -1 && filupload.lastIndexOf(".png") == -1 && filupload.lastIndexOf(".PNG") == -1)
                {
                    alert("The File you selected is not a IMAGE");
                    return false;
                }
            }            
        }
    
    
        var imgTag;
        function loadImg(imgName)
        {            
            imgTag = "<img src='uploadsDir/imagefiles/" + imgName + "'";
            document.getElementById("imgDiv").innerHTML = imgTag + " width='150' height='150' />";
        }
        
        function setImage()
        {
            if(imgTag)
            {
                var topWind = window.opener;
                topWind.editFrame.focus();
                var iWid = document.getElementById("imgWidth").value;
                var iHei = document.getElementById("imgHeight").value;
                var iBor = document.getElementById("txtBorder").value;
                var iAlt = document.getElementById("txtAltText").value;
                var iHS = document.getElementById("txtHSpace").value;
                var iVS = document.getElementById("txtVSpace").value;
                var iAlign = document.getElementById("selAlign").value;
                if(iWid)
                    imgTag += " width='"+ iWid + "'";
                if(iHei)
                    imgTag += " height='"+ iHei + "'";
                if(iBor)
                    imgTag += " border='"+ iBor + "'";
                if(iAlt)
                    imgTag += " alt='"+ iAlt + "'";
                if(iHS)
                    imgTag += " hspace='"+ iHS + "'";
                if(iVS)
                    imgTag += " vspace='"+ iVS + "'";
                if(iAlign != "0")
                    imgTag += " align='"+ iAlign + "'";
                var selectedRegion = topWind.editFrame.document.selection.createRange();
                selectedRegion.pasteHTML(imgTag + " >");
                window.close();
            }
            else
            {
                alert("You have not selected any image");
            }

        }
        
    </script>
</head>
<body topmargin="0" bottommargin="0" rightmargin="0" leftmargin="0" class='txtStyle'
    bgcolor='#99ccff'>
    <form name="form1" method="post" enctype="multipart/form-data">
    <table align="Center" cellpadding="2" cellspacing="2">
        <tr>
            <td colspan="2" align="center">
                INSERT IMAGE
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center">
				<input type="file" id="imgUpload" name="imgUpload" width="250" class="otherstyle">
                &nbsp;
				<input type="submit" class="buttonStyle2" value="Upload" onclick="return chkFile()">
            </td>
        </tr>
        <tr>
            <td align="center" class="txtStyle">
                List of Images
            </td>
            <td align="Center" class="txtStyle">
                Preview
            </td>
        </tr>
        <tr>
            <td align="center">
                <div id="listDiv" class="newDivStyle">
					<table width="100%" cellpadding="0" cellspacing="0">
                    <?php 
						$dir = opendir("uploadsDir/imagefiles/");
						while (($file = readdir($dir)) !== false)
						{
							if($file != "." && $file!= "..")
							  	echo "<tr><td class='norStyle' onfocusout=\"this.className = 'norStyle'\" onclick=\"loadImg('" . $file . "'); this.className = 'selStyle';\" style='cursor:default'>" . $file . "</td></tr>";
						}
						closedir($dir);
					 ?>
					 </table>
                </div>
            </td>
            <td align="Center">
                <div id="imgDiv" class="newDivStyle">
                </div>
            </td>
        </tr>
        <tr>
            <td align="left" class="txtStyle" colspan="2">
                Alternate Text:
                <input type="text" class="txtStyle" id="txtAltText" style="width: 214px" />
            </td>
        </tr>
        <tr>
            <td colspan="2" class="txtStyle">
                <table width="100%" cellpadding="2" cellspacing="1">
                    <tr>
                        <td align="left">
                            Width:
                        </td>
                        <td align="left">
                            <input type="text" class="txtStyle" id="imgWidth" style="width: 25px" value="150" />
                        </td>
                        <td>
                            Height:
                        </td>
                        <td align="left">
                            <input type="text" class="txtStyle" id="imgHeight" style="width: 25px" value="150" />
                        </td>
                        <td>
                            Border:
                        </td>
                        <td align="left">
                            <input type="text" class="txtStyle" id="txtBorder" style="width: 25px" value="1" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            HSpace:
                        </td>
                        <td align="left">
                            <input type="text" class="txtStyle" id="txtHSpace" style="width: 25px" />
                        </td>
                        <td>
                            VSpace:
                        </td>
                        <td align="left">
                            <input type="text" class="txtStyle" id="txtVSpace" style="width: 25px" />
                        </td>
                        <td>
                            Align:
                        </td>
                        <td align="left">
                            <select id="selAlign" class="txtStyle" style="width: 90px">
                                <option value="0">--Select--</option>
                                <option value="absbottom">AbsBottom</option>
                                <option value="absmiddle">AbsMiddle</option>
                                <option value="baseline">Baseline</option>
                                <option value="bottom">Bottom</option>
                                <option value="left">Left</option>
                                <option value="middle">Middle</option>
                                <option value="right">Right</option>
                                <option value="texttop">TextTop</option>
                                <option value="top">Top</option>
                            </select>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td colspan="2" align="right">
                <button id="btnOK" class="buttonStyle2" onclick="setImage()">
                    OK</button>&nbsp;
                <button id="btnCancel" class="buttonStyle2" onclick="window.close()">
                    Cancel</button>
            </td>
        </tr>
    </table>
    </form>
</body>
</html>	
	
