{include file='include/colorbox.inc.tpl'}
{combine_script id='jquery.jcrop' load='footer' require='jquery' path='plugins/thumbCropper/js/jquery.Jcrop.min.js'}
{combine_css path="plugins/thumbCropper/thumbcropper.css"}

{footer_script}
// Create variables (in this scope) to hold the API and image size
var jcrop_api;
var ws_data = {ldelim}
	'width':{$IMG_WIDTH},
	'height':{$IMG_HEIGHT},
	'ratio': {$IMG_WIDTH}/{$IMG_HEIGHT}
{rdelim};
var tc_pwg_token = '{$TC_PWG_TOKEN}';
var img_id={$IMG_ID};
var max_width, max_height;
var thumb_data = {ldelim}
	'x1': {$thumb_data.x1},
	'y1': {$thumb_data.y1},
	'x2': {$thumb_data.x2},
	'y2': {$thumb_data.y2},
{rdelim};
var ratio;
{literal}
jQuery(document).ready(function() {
	
	jQuery(".cbinline").colorbox({
		inline:true, 
		width:"80%",
		onComplete: function() {
		  $('#target').Jcrop({
			setSelect : [thumb_data.x1,thumb_data.y1,thumb_data.x2,thumb_data.y2],
			boxWidth: 800,
			boxHeight: 500,
			onChange: set_thumb_data,
			onSelect: set_thumb_data,
		  },function(){
			$("#websize_image").css("width",$(".jcrop-holder").css("width"));
			this.setSelect([thumb_data.x1,thumb_data.y1,thumb_data.x2,thumb_data.y2]);
			// Store the API in the jcrop_api variable
			jcrop_api = this;
		  });
		}
	});
	
	function update_thumb_size() {
		max_width =  parseInt($("#maxwidth").val());
		max_height = parseInt($("#maxheight").val());
		var dx = thumb_data.x2-thumb_data.x1;
		var dy = thumb_data.y2-thumb_data.y1;
		
		var nwidth = max_width;
		var nheight = Math.round(max_width/dx*dy);
		
		if (nheight > max_height) {
			nheight = max_height;
			nwidth = Math.round(max_height/dy*dx);
		}
		thumb_data.width = nwidth;
		thumb_data.height = nheight;

        var rx = thumb_data.width / dx;
        var ry = thumb_data.height / dy;

		$('#div_preview').css({
		width: thumb_data.width,
		height: thumb_data.height,
		margin: "0 auto"
		});
		$('#preview_max').css({
		width: max_width,
		height: max_height
		});
		$('#preview').css({
			width: Math.round(rx * ws_data.width) + 'px',
			height: Math.round(ry * ws_data.height) + 'px',
			marginLeft: '-' + Math.round(rx * thumb_data.x1) + 'px',
			marginTop: '-' + Math.round(ry * thumb_data.y1) + 'px'
		});
		
	}
	
	function set_thumb_data(c) {
		thumb_data.x1 = c.x;
		thumb_data.x2 = c.x2;
		thumb_data.y1 = c.y;
		thumb_data.y2 = c.y2;
		update_thumb_size();
	}
	
	function max_thub_size_changed() {
		if ($("select[name=ratio]").val()=='thumb') {
				max_width =  parseInt($("#maxwidth").val());
				max_height = parseInt($("#maxheight").val());
				jcrop_api.setOptions({'aspectRatio':max_width/max_height});
		}
	update_thumb_size();
	}
	
	$("#maxwidth").change(max_thub_size_changed);
	$("#maxheight").change(max_thub_size_changed);

	$("#center").click(function(e) {
		var dx = thumb_data.x2 - thumb_data.x1;
		var dy = thumb_data.y2 - thumb_data.y1;
		thumb_data.x1 = Math.round((ws_data.width-dx)/2);
		thumb_data.y1 = Math.round((ws_data.height-dy)/2);
		thumb_data.x2 = thumb_data.x1+dx;
		thumb_data.y2 = thumb_data.y1+dy;
		jcrop_api.setSelect([thumb_data.x1,thumb_data.y1,thumb_data.x2,thumb_data.y2]);
		update_thumb_size();
	});

	$("#reset").click(function(e) {
		thumb_data.x1 = 0;
		thumb_data.y1 = 0;
		thumb_data.x2 = ws_data.width;
		thumb_data.y2 = ws_data.height;
		jcrop_api.setSelect([thumb_data.x1,thumb_data.y1,thumb_data.x2,thumb_data.y2]);
		update_thumb_size();
	});

	$("select[name=ratio]").click(function(e) {
		switch ($(this).val()) {
		case "none" :
			jcrop_api.setOptions({'aspectRatio':0});
			break;
		case "image" :
			jcrop_api.setOptions({'aspectRatio':ws_data.ratio});
			break;
		case "thumb" :
			jcrop_api.setOptions({'aspectRatio':max_width/max_height});
			break;
		}
	});
	

	$("#create").click(function(e) {
		$.ajax({
			type: 'GET', 
			url: 'ws.php', 
			data: {
				method: "pwg.image.thumbcrop",
				format: 'json',
				image_id: img_id,
				x1: thumb_data.x1,
				y1: thumb_data.y1,
				x2: thumb_data.x2,
				y2: thumb_data.y2,
				width: thumb_data.width,
				height: thumb_data.height,
				pwg_token: tc_pwg_token,

			},
			dataType: 'json',
			success: ( function(data) {
				var th = $("img.Thumbnail");
				var uri=th.attr('src');
				th.attr('src',uri+"?"+(new Date().getTime()));
				$.colorbox.close();
			}),
			error: ( function(data) { 
			})}
		);
		e.stopPropagation();
		return false;
		
	});
	$("#tc_form").keypress(function(e){
		if (e.which == 13) {
			e.stopPropagation();
			return false;
		}
	});

});

{/literal}
{/footer_script}
<div style="display: none;">
	<div id="thumbcropper">

		<h2>{'Thumbnail customization'|@translate}</h1>
			<form id="tc_form">
				<table>
				<tr><td rowspan="2">
				<div id="websize_image" style="margin:0 auto;width: 800px">
					<img src="{$IMG_SRC}" id="target" alt="image"/>
				</div>
				</td>
				<td>
				<fieldset><legend>{'Preview'|@translate}</legend>
					<div id="preview_max" style="padding:0 auto;">
					<div id="div_preview" style="width:100px;height:100px;overflow:hidden;">
						<img src="{$IMG_SRC}" id="preview" alt="{'Preview'|@translate}" />
					</div>
					</div>
				</fieldset>
				</td>
				</tr>
				<tr>
				<td class="tcfields">
				<fieldset><legend>{'Settings'|@translate}</legend>
				<p>{'Max width'|@translate} :
				<input type="text" name="maxwidth" id="maxwidth" value="{$thumb_data.width}" size="4" maxlength="4" /> {'px'|@translate}</p>
				<p>{'Max height'|@translate} :
				<input type="text" name="maxheight" id="maxheight" value="{$thumb_data.height}" size="4" maxlength="4" /> {'px'|@translate}</p>
				<p>{'Thumbnail ratio'|@translate} :
				<select name="ratio">
					<option value="none" selected="selected">{'No constraint'|@translate}</option>
					<option value="image">{'Original image ratio'|@translate}</option>
					<option value="thumb">{'Thumbnail max size ratio'|@translate}</option>
				</select><p>
				<p><input type="button" id="center" value="{'Center'|@translate}" /></p>
				<p><input type="button" id="reset" value="{'Reset'|@translate}" /></p>
				<p><input type="button" id="create" value="{'Create thumbnail'|@translate}" /></p>
				</fieldset>
				</td>
				</tr>
				</table>
			</form>

	</div>
</div>