<%template _header%>
<!--header end-->

<!--TheCurrent start-->
<div id="foruminfo">
	<div class="userinfo">
		<h2><a href="{config.forumurl}" class="home">{config.forumtitle}</a><span><a href="usercp.aspx">用户中心</a></span><span><a href="usercpspacemanagealbum.aspx">管理相册</a></span><span><a href="usercpspacemanagephoto.aspx?albumid={albumid}">管理图片</a></span><strong>增加图片</strong></h2>	</div>
	<div class="forumstats">
		<div id="search">
				<%template _quicksearch%>
		</div>
	</div>
</div>
<!--TheCurrent end-->

<!--主体-->
<img id="img_hidden" alt="1" style="position:absolute;top:-100000px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image');width:400;height:300"></img>
<div class="controlpannel">
   <%template _menu%>
	<div class="pannelcontent">
		<div class="pcontent">
			<div class="panneldetail">
				<%template _albummenu%>	
				<div class="pannelbody">
					<div class="pannellist">
					<%if page_err==0%>
						<%if ispost%>
							<%template _msgbox%>
						<%else%>
						<form action="" method="post" enctype="multipart/form-data">
						<div id="freePhotoSize" align="center"></div>
						<table cellpadding="0" cellspacing="0" border="0">
						<tr>
							<td  style="text-align:left; width:70%;">
								<label for="phototitle1" style="text-align:left;">标题:</label>
								<input name="phototitle1" type="text" id="phototitle1" style="width:400px" size="20" class="colorblue"
								onfocus="this.className='colorfocus';" onblur="this.className='colorblue';" maxlength="50" /><br />
								<label for="description1">描述:</label>
								<textarea name="description1" rows="4" style="width:400px" class="colorblue" onfocus="this.className='colorfocus';"
								onblur="this.className='colorblue';" ></textarea>
								<label for="phototitle1">&nbsp;</label><input type="file" id="photo1" onchange="PhotoView(1)" runat="server" size="50" name="photo1" class="colorblue"
								onfocus="this.className='colorfocus';" onblur="this.className='colorblue';">
							</td>
							<td id="td1" style="text-align:left;"><img src="{spaceurl}space/manage/images/invalid.gif" width="100" height="75" id="view1"></td>
						</tr>
						<tr>
							<td  style="text-align:left; width:70%;">
								<label for="phototitle2" style="text-align:left;">标题:</label>
								<input name="phototitle2" type="text" id="phototitle2" style="width:400px" size="20" class="colorblue"
								onfocus="this.className='colorfocus';" onblur="this.className='colorblue';" maxlength="50" /><br />
								<label for="description2">描述:</label>
								<textarea name="description2" rows="4" style="width:400px" class="colorblue" onfocus="this.className='colorfocus';"
								onblur="this.className='colorblue';" ></textarea>
								<label for="phototitle2">&nbsp;</label><input type="file" id="photo2" onchange="PhotoView(2)" runat="server" size="50" name="photo2" class="colorblue"
								onfocus="this.className='colorfocus';" onblur="this.className='colorblue';">
							</td>
							<td id="td2" style="text-align:left;"><img src="{spaceurl}space/manage/images/invalid.gif" width="100" height="75" id="view2"></td>
						</tr>
						<tr>
							<td  style="text-align:left; width:70%;">
								<label for="phototitle3" style="text-align:left;">标题:</label>
								<input name="phototitle3" type="text" id="phototitle3" style="width:400px" size="20" class="colorblue"
								onfocus="this.className='colorfocus';" onblur="this.className='colorblue';" maxlength="50" /><br />
								<label for="description3">描述:</label>
								<textarea name="description3" rows="4" style="width:400px" class="colorblue" onfocus="this.className='colorfocus';"
								onblur="this.className='colorblue';" ></textarea>
								<label for="phototitle3">&nbsp;</label><input type="file" id="photo3" onchange="PhotoView(3)" runat="server" size="50" name="photo3" class="colorblue"
								onfocus="this.className='colorfocus';" onblur="this.className='colorblue';">
							</td>
							<td id="td3" style="text-align:left;"><img src="{spaceurl}space/manage/images/invalid.gif" width="100" height="75" id="view3"></td>
						</tr>
						<tr>
							<td  style="text-align:left; width:70%;">
								<label for="phototitle4" style="text-align:left;">标题:</label>
								<input name="phototitle4" type="text" id="phototitle4" style="width:400px" size="20" class="colorblue"
								onfocus="this.className='colorfocus';" onblur="this.className='colorblue';" maxlength="50" /><br />
								<label for="description4">描述:</label>
								<textarea name="description4" rows="4" style="width:400px" class="colorblue" onfocus="this.className='colorfocus';"
								onblur="this.className='colorblue';" ></textarea>
								<label for="phototitle4">&nbsp;</label><input type="file" id="photo4" onchange="PhotoView(4)" runat="server" size="50" name="photo4" class="colorblue"
								onfocus="this.className='colorfocus';" onblur="this.className='colorblue';">
							</td>
							<td id="td4" style="text-align:left;"><img src="{spaceurl}space/manage/images/invalid.gif" width="100" height="75" id="view4"></td>
						</tr>
						<tr>
							<td  style="text-align:left; width:70%;">
								<label for="phototitle5" style="text-align:left;">标题:</label>
								<input name="phototitle5" type="text" id="phototitle5" style="width:400px" size="20" class="colorblue"
								onfocus="this.className='colorfocus';" onblur="this.className='colorblue';" maxlength="50" /><br />
								<label for="description5">描述:</label>
								<textarea name="description5" rows="4" style="width:400px" class="colorblue" onfocus="this.className='colorfocus';"
								onblur="this.className='colorblue';" ></textarea>
								<label for="phototitle5">&nbsp;</label><input type="file" id="photo5" onchange="PhotoView(5)" runat="server" size="50" name="photo5" class="colorblue"
								onfocus="this.className='colorfocus';" onblur="this.className='colorblue';">
							</td>
							<td id="td5" style="text-align:left;"><img src="{spaceurl}space/manage/images/invalid.gif" width="100" height="75" id="view5"></td>
						</tr>
						<tr>
							<td  style="text-align:left; width:70%;">
								<label for="phototitle6" style="text-align:left;">标题:</label>
								<input name="phototitle6" type="text" id="phototitle6" style="width:400px" size="20" class="colorblue"
								onfocus="this.className='colorfocus';" onblur="this.className='colorblue';" maxlength="50" /><br />
								<label for="description6">描述:</label>
								<textarea name="description6" rows="4" style="width:400px" class="colorblue" onfocus="this.className='colorfocus';"
								onblur="this.className='colorblue';" ></textarea>
								<label for="phototitle6">&nbsp;</label><input type="file" id="photo6" onchange="PhotoView(6)" runat="server" size="50" name="photo6" class="colorblue"
								onfocus="this.className='colorfocus';" onblur="this.className='colorblue';">
							</td>
							<td id="td6" style="text-align:left;"><img src="{spaceurl}space/manage/images/invalid.gif" width="100" height="75" id="view6"></td>
						</tr>
					</table>
					<div class="formarea">
						<input type="submit" name="Submit" value="上传" class="sbutton" ID="Submit1"/>
					</div>
						</form>
						<%/if%>
						</div>
					<%else%>
					<%template _usercperrmsgbox%>
					<%/if%>
			  </div>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
	var currentFreePhotoSize = {freephotosize};
	SetMessage(currentFreePhotoSize);
	function PhotoView(layer)
	{
		var file = $("photo" + layer).value;
		if (file != "")
		{
			var patn = /\.jpg$|\.jpeg$|\.gif$|\.png$/i;
			if (!patn.test(file))
			{
				clearFileInput($("photo" + layer));
				alert("相册只允许jpg、jpeg、gif或png格式的图片!");
				return;
			}
			if(document.all) //IE执行
			{
                insertImage(layer);
            }			
		}
		else
		{
			$("view" + layer).src = "{spaceurl}space/manage/images/invalid.gif";

		}
		setTimeout("CalSize()", 500);
	}
	
	function insertImage(id) 
{
    var localimgpreview = '';
    var path = $('photo' + id).value;
    var ext = path.lastIndexOf('.') == -1 ? '' : path.substr(path.lastIndexOf('.') + 1, path.length).toLowerCase();
    var re = new RegExp("(^|\\s|,)" + ext + "($|\\s|,)", "ig");
    var localfile = $('photo' + id).value.substr($('photo' + id).value.replace(/\\/g, '/').lastIndexOf('/') + 1);

    if(path == '') 
    {
        return;
    }

    var err = false;
    $('img_hidden').alt = id;
    try 
    {
        $('img_hidden').filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = 'image';
    } 
    catch (e) 
    {err = true;}
    try 
    {
        $('img_hidden').filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = $('photo' + id).value;
    } 
    catch (e) 
    {
		alert('无效的图片文件。');
		delAttach(id);

		err = true;		
        
        return;
    }
    var wh = {'w' : $('img_hidden').offsetWidth, 'h' : $('img_hidden').offsetHeight};
    if (wh['w']>100) 
    {
        wh['h']*= 100/wh['w'];
        wh['w']=100;
    }
    if (wh['h']>100) 
    {
        wh['w']*= 100/wh['h'];
        wh['h']=100;
    }
    $('img_hidden').style.width = wh['w'];
    $('img_hidden').style.height = wh['h'];
    try 
    {
        $('img_hidden').filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = 'scale';
    }
    catch (e)
    {
    }
    if (err == true)
    {
        $('img_hidden').src = $('photo' + id).value;
    }
    div = document.createElement('div');
    $('td' + id).removeChild($('td' + id).children(0));
    $('td' + id).appendChild(div);
    div.innerHTML = '<img style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=\'scale\',src=\'' + $('photo' + id).value+'\');width:'+wh['w']+';height:'+wh['h']+'" src=\'images/common/none.gif\' border="0" id="view' + id + '" aid="view'+ id +'" alt="" />';
}
	
	function clearFileInput(file){
		var form = document.createElement('form');
		document.body.appendChild(form);
		var pos = file.nextSibling;
		form.appendChild(file);
		form.reset();
		pos.parentNode.insertBefore(file, pos);
		document.body.removeChild(form);
	}
	function ShowFormatBytesStr(bytes)
	{
		if(bytes > 1073741824)
		{
			return((Math.round((bytes/1073741824)*100)/100).toString()+' GB');
		}
		else if(bytes > 1048576)
		{
			return((Math.round((bytes/1048576)*100)/100).toString()+' MB');
		}
		else if(bytes > 1024)
		{
			return((Math.round((bytes/1024)*100)/100).toString()+' KB');
		}
		else
		{
			return(bytes.toString()+' 字节');
		}
	}

	function CalSize()
	{
		var sumsize = 0;
			for(i = 1 ; i < 7 ; i++)
			{
				if($("photo" + i).value != "")
				{
					var photoSize = $("view" + i).fileSize;
					sumsize += parseInt(photoSize);
				}
			}
			SetMessage(currentFreePhotoSize - sumsize);
	}
	function SetMessage(bytesize)
	{
		if (is_ie && $("freePhotoSize"))
		{
			if(bytesize >= 0)
				$("freePhotoSize").innerHTML = "您还有<font color='#009900'>" + ShowFormatBytesStr(parseInt(bytesize)) + "</font>的上传空间";
			else
				$("freePhotoSize").innerHTML = "<font color='#ff0000'>警告：您已经超过最大上传空间" + -bytesize + "字节</font>";
		}
		
	}

</script>
<!--主体-->
</div>
<%template _copyright%>
<%template _footer%>
