<link rel="stylesheet" href="{$server}{$index_theme_path}{$index_theme_css_path}/crop/imgareaselect-default.css" type="text/css" />
<script language="JavaScript" type="text/javascript" src="{$server}{$index_theme_path}/js/jquery/jquery.imgareaselect.min.js"></script>
<h2>{$lang.profile.recrop}</h2>
<div id="slides" style="overflow: hidden; margin: 0; position: relative;">
	<div id="photo_edit" class="float_left photo_ed" style="min-height:260px; width: {if $data.x < $settings.gal_big_thumb_max_width}{$settings.gal_big_thumb_max_width+40}px;{else}{$data.x+40}px;{/if}">
		<div style="width:100%;height:100%;left: 80px;margin: 0 auto; text-align: center;"><img id="photo" style="" src="{$file}?rand={math equation='rand()'}" alt="" title=""/></div>
	</div>
	<div class="discr_div float_right" style="width: 102px;">
		<div id="photo_rotate">
			<a class="phototransfirm90" onclick="Rotate('90');">&nbsp;</a>
			<a class="phototransfirm-90" onclick="Rotate('270');">&nbsp;</a>
		</div>
		<div id="photo_prev" class="imgcanvas" style="overflow: hidden; position: relative;padding:0px;">
			<img src="{$file}" style="position: relative; width: {$data.thumb_max_width}px; height: {$data.thumb_max_height}px;" />
		</div>
	</div>
	
	<div class="savefile">
		<input type="button" class="button" onclick="SaveFile();" href="#crop" value="{$lang.profile.done_recrop}">
        <p></p><p><a onclick="Close();" href="#crop">{$lang.profile.crop_save_skip}</a></p>
	</div>
</div>
<script type="text/javascript">
{if $error != ''}ShowAjaxError('{literal}{$error}{/literal}' , "");{/if}
var image_id = {$image_id};
var aspect = '{$data.gal_big_thumb_max_width}:{$data.gal_big_thumb_max_height}';
var big_x = {$data.x};
var big_y = {$data.y};
{literal}
var act_sel = 'thumb';
var ias;
var new_x1;
var new_y1;
var new_x2;
var new_y2;
var new_w;
var new_h;
 
function Close(){
	$('#mask').hide();
	$('.window').hide();
	$('html, body').css({'overflow':''});
	window.location.href = SEO_SITE_ROOT+'/myprofile.php?sel=4';
}
 
function preview(img, selection) {
	var scaleX = {/literal}{$data.thumb_max_width}{literal} / (selection.width || 1);
	var scaleY = {/literal}{$data.thumb_max_height}{literal} / (selection.height || 1);            
	act_sel = 'thumb';
	if ({/literal}{$data.x}{literal} < {/literal}{$data.gal_big_thumb_max_width}{literal}){
		$('#photo_prev img').css({
			width: '100%',
			height: '100%',
			marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
			marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
		}); 
	}
    else{
		$('#photo_prev img').css({
			width: Math.round(scaleX * big_x) + 'px',
			height: Math.round(scaleY * big_y) + 'px',
			marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
			marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
		}); 
	}
}
$(document).ready(function () {
	$('#close').live("click", function (e) {
		$.post(SITE_ROOT+'/include/crop.php?sel=delete',{image_id:image_id},function(data){});
		ias.cancelSelection();
		$('#mask').hide();
		$('.window').hide();
	});
	$('#photo_prev') .css({
		width: '{/literal}{$data.thumb_max_width}{literal}px',
		height: '{/literal}{$data.thumb_max_height}{literal}px'
	});
    
	ias = $('#photo').imgAreaSelect({
		handles: true,
		aspectRatio: '1:1',
		minWidth: {/literal}{$data.gal_big_thumb_max_width}{literal},
		minHeight: {/literal}{$data.gal_big_thumb_max_height}{literal},
		onSelectChange: preview,
		parent: '#photo_edit',
		left: 0,
		top: 0,
		x1: 0,
		y1: 0,
		x2: {/literal}{$data.gal_big_thumb_max_width}{literal},
		y2: {/literal}{$data.gal_big_thumb_max_height}{literal},
		show: true,
		//zIndex: 2,
		onSelectEnd: function ( image, selection ) {
			new_x1=selection.x1;
			new_y1=selection.y1;
			new_x2=selection.x2;
			new_y2=selection.y2;
			new_w=selection.width;
			new_h=selection.height;
		},
		onInit: function(image, selection){
			new_x1=selection.x1;
			new_y1=selection.y1;
			new_x2=selection.x2;
			new_y2=selection.y2;
			new_w=selection.width;
			new_h=selection.height;
		},
		instance: true
	});
	sel = {
		x1: 0,
		y1: 0,
		width: {/literal}{$data.gal_big_thumb_max_width}{literal},
		height: {/literal}{$data.gal_big_thumb_max_height}{literal},
	}
	preview("", sel);
});

function SelectAct(par){
	ias.cancelSelection();
	var k = '{/literal}{$data.thumb_max_width}{literal}:{/literal}{$data.thumb_max_height}{literal}';
	if (par == 'photo') {
		k = '{/literal}{$data.x}{literal}:{/literal}{$data.y}{literal}';
		$('#photo_prev').hide();
		act_sel = 'photo';
		ias.setOptions({aspectRatio: '0:0',minWidth: big_x,minHeight: big_y,handles: false});
	} else {
		$('#photo_prev').show();
		act_sel = 'thumb';
		ias.setOptions({aspectRatio: k,minWidth: {/literal}{$data.gal_big_thumb_max_width}{literal},minHeight: {/literal}{$data.gal_big_thumb_max_height}{literal},handles: true});
	}
	ias.update();
}
function SaveFile(){
	$.post(SITE_ROOT+'/include/crop.php?sel=save_'+act_sel,{new_x1:new_x1,new_y1:new_y1,new_x2:new_x2,new_y2:new_y2,new_w:new_w,new_h:new_h,image_id:image_id},function(data){
		resp = getJQData(data);
		if(resp['error']!='ok'){
			ShowAjaxError(resp['error'] , "");
		} else {
			ias.cancelSelection();
			$('#mask').hide();
			$('.window').hide();
			window.location.href = SEO_SITE_ROOT+'/myprofile.php?sel=4';
		}
	});
}
function Rotate(par){
	$.post(SITE_ROOT+'/include/crop.php?sel=rotate',{par:par,image_id:image_id},function(data){
		resp = getJQData(data);
		
		add_width = resp['x']+40;
		if (resp['x'] < resp['gal_big_thumb_max_width']) add_width = resp['x']*2+40;
		$("#photo_edit").css('width', add_width);
		$(".window").css('width', add_width+215);
		if(resp['error']!=''){
			ShowAjaxError(resp['error'] , "")
		} else {
			//ias.cancelSelection();
			$('#photo_edit').html('<img id="photo" src="'+resp['file']+'?rand='+Math.random()+'" alt="" title="" />').delay(1000);
			$('#photo_prev').html('<img src="'+resp['file']+'?rand='+Math.random()+'" style="position: relative; width: '+resp['thumb_max_width']+'px; height: '+resp['thumb_max_height']+'" />').delay(1000);			
			big_x = resp['x'];
			big_y = resp['y'];
			if (act_sel == 'thumb') {
				/*ias.setOptions({aspectRatio: aspect});*/
				ias.setOptions({aspectRatio: '0:0',minWidth: big_x,minHeight: big_y,handles: false});
				act_sel = 'photo';
			} else {
					ias.setOptions({aspectRatio: '0:0',minWidth: big_x,minHeight: big_y,handles: false});
			}
		}
		//aspectRatio: aspect,
		ias.cancelSelection();
		ias = $('#photo').imgAreaSelect({
				handles: true,
				aspectRatio: '1:1',
				minWidth: resp['gal_big_thumb_max_width'],
				minHeight: resp['gal_big_thumb_max_height'],
				parent: '#photo_edit',
				left: 0,
				top: 0,	
				x1: 0,
				y1: 0,
				x2: {/literal}{$data.gal_big_thumb_max_width}{literal},
				y2: {/literal}{$data.gal_big_thumb_max_height}{literal},
				onSelectChange: preview,
				onSelectEnd: function ( image, selection ) {
						new_x1=selection.x1;
						new_y1=selection.y1;
						new_x2=selection.x2;
						new_y2=selection.y2;
						new_w=selection.width;
						new_h=selection.height;
				},
				instance: true
		});
		sel = {
			x1: 0,
			y1: 0,
			width: {/literal}{$data.gal_big_thumb_max_width}{literal},
			height: {/literal}{$data.gal_big_thumb_max_height}{literal},
		}
		preview("", sel);
	});
}
{/literal}
</script>