<!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=gbk" />
<title>ImageEditor</title>
<link href="{AW_P}images/main.css" rel="stylesheet" type="text/css">
<script  type='text/javascript'>
var config = {charset:'{$_SET['def_charset']}',channelid : '{$channelid}',channeldir : '{$channeldir}',url : "{W_P}",web_path : "{$_SET[webpath]}"};
</script>
<script type="text/javascript">
var web_path = "{$_SET[webpath]}";
</script>
<script type="text/javascript" src="{WW_P}images/js/qmecms.js"></script>
<script type="text/javascript" src="{AW_P}images/js/admin.js"></script>
<script type="text/javascript" src="{AW_P}images/js/ImageEditor.js"></script>
<script type="text/javascript">
	var ic = null;
	var photo_size_w = {$data['width']};
	var photo_szie_h = {$data['height']};
	var range = photo_szie_h/photo_size_w;
	var cur_size_w = photo_size_w;
	var cur_size_h =  photo_szie_h;
	var ps = photo_size_w/cur_size_w;
	var dragLeft = 0;
	var dragTop = 0;
	var type = {$channelid};
	var dragWidth = Math.min({$pic_width}, photo_size_w);
	var dragHeight = Math.min({$pic_height}, photo_szie_h);
	var image = '{$data['img']}';
	var oldImage = '{$data['oldimg']}';

	(function(){
		if(!image.trim()) {
			alert("出错了，图片不存在");
			parent.qmeCms.dialogView.close();
			return false;
		}
	})();

	var ic = new Object();
	function Size(w, h){
		ic.Width = w;
		ic.Height = h;
		ic.dragWidth = ic.dragWidth > w ? w : ic.dragWidth;
		ic.dragHeight = ic.dragHeight > h ? h : ic.dragHeight;
		ic.Init();
	}
	function Pic(url){
		ic.Url = url;
		ic.Init();
	}
	function Opacity(i){
		ic.Opacity = i;
		ic.Init();
	}
	function Scale(b){
		var o = ic.Drag;
		var d = [o.offsetLeft, o.offsetTop, o.offsetWidth, o.offsetHeight];
		ic.Scale = b;
		ic.Init();
		ic.Drag.style.left = d[0] + 'px';
		ic.Drag.style.top = d[1] + 'px';
		ic.Drag.style.width = d[2] + 'px';
		ic.Drag.style.height = d[3] + 'px';
	}

	var ImageEditor = {
		infoDom:null,
		data:[0,0,0,0],
		init:function(){
			var o =this;
			this.data = [dragLeft,dragTop,dragWidth,dragHeight];
			this.infoDom = $('ImageEditorCropSize');
			$$E.addEvent($('ImageEditorTxtWidth'), 'change', function(){
				if($('ImageEditorChkConstrain').checked == false) return true;
				o.reTextWidth();
			});
			$$E.addEvent($('ImageEditorTxtHeight'), 'change', function(){
				if($('ImageEditorChkConstrain').checked == false) return true;
				o.reTextHeight();
			});
			$$E.addEvent($('ImageEditorChkConstrain'), 'change', function(){
				o.reTextWidth();
			});
		},
		reTextWidth:function(){
			var w = parseInt($('ImageEditorTxtWidth').value.trim());
			if(isNaN(w)){
				alert('must be a number');
				return false;
			}
			$('ImageEditorTxtHeight').value = parseInt(range * w);
		},
		reTextHeight:function(){
			var h = parseInt($('ImageEditorTxtHeight').value.trim());
			if(isNaN(h)){
				alert('must be a number');
				return false;
			}
			$('ImageEditorTxtWidth').value = parseInt(h / range);
		},
		setInfo:function(w,h){
			$('ImageEditorTxtWidth').value = w;
			$('ImageEditorTxtHeight').value = h;
		},
		reHeight:function(){
			var h = Math.max(document.body.offsetHeight, 500);
			parent.qmeCms.dialogView.reHeight(h);
		},
		action:function(ac, param, callback){
			var callback = callback || function(){};
			var param = param + "&imageName="+image+"&imageOldName="+oldImage;
			AJAX.request("system.php?sys=image_editor&actions=processImage&action="+ac,{
				method:'post',
				parameters:param,
				onComplete: function(json){
					var json = evaljson(json);
					if(json != null && json['status'] == 200){
						ImageEditor.reHeight();
						callback(json);
					}else{
						alert("something wrong the server");
					}
				}
			});
		},
		resize:function(){
			var w = parseInt($('ImageEditorTxtWidth').value.trim());
			var h = parseInt($('ImageEditorTxtHeight').value.trim());
			if(isNaN(w) || isNaN(h)){
				alert('width and height must be a number');
				return false;
			}
			var param = "width="+w+"&height="+h;
			$('btn_resize').disabled = true;
			this.action('resize', param, function(json){
				Pic(json.data.imageName + "?d="+Math.random());
				Size(json.data.width, json.data.height);
				ImageEditor.setInfo(json.data.width, json.data.height);
				$('btn_resize').disabled = false;
			});
		},
		crop:function(){
			var param = "param="+this.data.join(',');
			$('btn_crop').disabled = true;
			this.action('crop', param, function(json){
				Pic(json.data.imageName + "?d="+Math.random());
				Size(json.data.width, json.data.height);
				ImageEditor.setInfo(json.data.width, json.data.height);
				$('btn_crop').disabled = false;
			});
		},
		rotate:function(c){
			if($('btn_rotate_'+c) == null) return;
			var param = "degrees="+c;
			$('btn_rotate_'+c).disabled = true;
			this.action('rotate', param, function(json){
				Pic(json.data.imageName + "?d="+Math.random());
				Size(json.data.width, json.data.height);
				ImageEditor.setInfo(json.data.width, json.data.height);
				$('btn_rotate_'+c).disabled = false;
			});
		},
		border:function(){
			var p = $('ImageEditorBorderDpath').value.trim();
			var c = $('ImageEditorBorderColor').value.trim();
			$('btn_border').disabled = true;
			var param = "color="+c+"&size="+p;
			this.action('border', param, function(json){
				Pic(json.data.imageName + "?d="+Math.random());
				Size(json.data.width, json.data.height);
				ImageEditor.setInfo(json.data.width, json.data.height);
				$('btn_border').disabled = false;
			});
		},
		save:function(){
			$('btn_save').disabled = true;
			var type = 0;
			if( !window.confirm('是覆盖原图还是另存一张图？\n---------------------------------\n点击“确定”覆盖原图，点击“取消”重新生成一张图') ){
				type = 1;
			}
			this.action('save', 'type='+type.toString(), function(resp){
				parent.imgEditorCallback.complete(resp);
			});
		},
		viewActive:function(){
			$('btn_viewActive').disabled = true;
			this.action('viewActive', '', function(json){
				Pic(json.data.imageName + "?d="+Math.random());
				Size(json.data.width, json.data.height);
				ImageEditor.setInfo(json.data.width, json.data.height);
				$('btn_viewActive').disabled = false;
			});
		},
		clear:function(){
			parent.qmeCms.dialogView.close();
		}
	};

	domReady(function(){
		setInterval(function(){
			parent.qmeCms.dialogView.iframeOnload();
		}, 500);

		ic = new ImgCropper("bgDiv", "dragDiv", image, cur_size_w, cur_size_h, {
			dragTop: dragTop, dragLeft: dragLeft,
			Right: "rRight", Left: "rLeft", Up:	"rUp", Down: "rDown",
			RightDown: "rRightDown", LeftDown: "rLeftDown", RightUp: "rRightUp", LeftUp: "rLeftUp",
			dragWidth:dragWidth, dragHeight:dragHeight, resize:function(o){
				ImageEditor.infoDom.innerHTML = o.offsetWidth +" * "+ o.offsetHeight;
				ImageEditor.data = [o.offsetLeft,o.offsetTop,o.offsetWidth,o.offsetHeight];
			}
		});
		ImageEditor.init();
		Scale(type ? true : false);
		document.body.focus();
	});


</script>
<style type="text/css">
body{background:#000;color:#000;font-size:12px;}
#rRightDown,#rLeftDown,#rLeftUp,#rRightUp,#rRight,#rLeft,#rUp,#rDown{opacity:0.5;position:absolute;background:#F00;width:10px; height:10px; z-index:500; font-size:0;line-height:0;}
#rUp,#rDown{margin-left:-5px;}
#rLeft,#rRight{margin-top:-5px;}
#dragDiv{border:0px solid #000000;}
</style>
</head>
<body>
<div class="color-select" id="color-select"></div>
<div id='divProcessing' style="width:200px;height:50px;display:none">
	<table border=0 cellpadding=0 cellspacing=0 width="100%" height="100%"><tr><td><img src="images/loading.gif"></td><td><font color=green><b>...Loading...请等待...</b></font></td></tr></table>
</div>
<script type="text/javascript">
qmeCms.color.build();
</script>
<table  cellpadding="2" cellspacing="1" class="tableborder">
	<tr><td class='tablerow'>
		<input type='button' id="btn_save" onclick="ImageEditor.save()" class="f-button" value='保存图像' />
		<input type='button' id="btn_viewActive" onclick="ImageEditor.viewActive()" value='还原图像' class="f-button" />
		边框厚度:<input type="text" size=3 maxlength=2 value=5 id="ImageEditorBorderDpath" class="f-text" style="text-align:center" />
		边框颜色:<input type="text" size=6 maxlength=7 class="f-text" value="#ffffff" id="ImageEditorBorderColor" onchange="this.style.background=this.value;" onclick="getColor(this, 'ImageEditorBorderColor');" />
		<input type='button' id="btn_border"  class="f-button" onclick="ImageEditor.border()" value='添加边框' />
		裁剪：<span id="ImageEditorCropSize"></span>
	</td></tr>
	<tr><td class=tablerow>
		宽度:<input id="ImageEditorTxtWidth" class="f-text" type="text" size="3" maxlength="4" value="{$data['width']}" style="text-align:center" />&nbsp;
		高度:<input id="ImageEditorTxtHeight" class="f-text" type="text" size="3" maxlength="4" value="{$data['height']}" style="text-align:center" />
		<input id="ImageEditorChkConstrain" type="checkbox" checked="checked" /> <label for="ImageEditorChkConstrain">等比约束</label>&nbsp;
		<input type='button' onclick="ImageEditor.resize();" id="btn_resize" value='缩放' class="f-button" />
		<input type='button' onclick="ImageEditor.crop()" id="btn_crop"  value='裁剪' class="f-button" />
		<input type='button' onclick="ImageEditor.rotate(90)" id="btn_rotate_90"  value="逆时针旋转" class="f-button" />
		<input type='button' onclick="ImageEditor.rotate(270)" id="btn_rotate_270"  value='顺时针旋转' class="f-button" />
	</td></tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="776">
		<div id="bgDiv" style="width:400px; height:500px;">
			<div id="dragDiv">
				<div id="rRightDown" style="right:0; bottom:0;"> </div>
				<div id="rLeftDown" style="left:0; bottom:0;"> </div>
				<div id="rRightUp" style="right:0; top:0;"> </div>
				<div id="rLeftUp" style="left:0; top:0;"> </div>
				<div id="rRight" style="right:0; top:50%;"> </div>
				<div id="rLeft" style="left:0; top:50%;"> </div>
				<div id="rUp" style="top:0; left:50%;"> </div>
				<div id="rDown" style="bottom:0;left:50%;"></div>
			</div>
		</div>
	</td>
  </tr>
</table>
</body>
</html>