<div style="height: 724px; width: 1244px; display: block;" id="box_layer_bg" class="fixed">&nbsp;</div>
 <div style="width: 1244px; display: block;" id="box_layer_wrap" class="fixed" align="center">
		<div id="owner_photo_edit" style="">
			<a onclick="croppingFormBox.hide()" href="javascript:void(0)" class="owner_photo_close">Закрыть</a>
			<div class="owner_photo_title">Фотография на Вашей странице</div>
			<div class="owner_photo_desc">Выбранная область будет показываться на Вашей странице.<br>Если изображение ориентировано неправильно.</div>
			<div id="owner_photo_error" class="msg"></div>
			<div style="width: 407px; height: 604px;" id="owner_photo_thumb">
				<div style="width: 407px; height: 604px;" id="owner_photo_rotate">
					<div style="width: 407px; height: 604px; margin: 0px auto; position: relative;">
						<img id="owner_photo_img" src="profile_files/53419f6a2e902ea80b000050.jpg" style="width: 407px; height: 604px; z-index: 1020;" onload="OwnerPhoto.editInit();">
						<div style="cursor: move; z-index: 1040; width: 367px; height: 564px; display: block;" class="croppingF_tag_frame">
							<img src="profile_files/53419f6a2e902ea80b000050.jpg" style="width: 407px; height: 604px; margin-left: -20px; margin-top: -20px;">
						</div>
						<div style="cursor: crosshair; left: 0px; top: 0px; width: 407px; height: 604px; z-index: 1030; display: block;" class="croppingF_tag_faded"></div>
						<div style="cursor: nw-resize; z-index: 1050; left: 15px; top: 15px; display: block;" class="tag_frame_handle nw"></div>
						<div style="cursor: n-resize; z-index: 1050; left: 198px; top: 15px; display: block;" class="tag_frame_handle n"></div>
						<div style="cursor: ne-resize; z-index: 1050; left: 382px; top: 15px; display: block;" class="tag_frame_handle ne"></div>
						<div style="cursor: w-resize; z-index: 1050; left: 15px; top: 297px; display: block;" class="tag_frame_handle w"></div>
						<div style="cursor: e-resize; z-index: 1050; left: 382px; top: 297px; display: block;" class="tag_frame_handle e"></div>
						<div style="cursor: sw-resize; z-index: 1050; left: 15px; top: 579px; display: block;" class="tag_frame_handle sw"></div>
						<div style="cursor: s-resize; z-index: 1050; left: 198px; top: 579px; display: block;" class="tag_frame_handle s"></div>
						<div style="cursor: se-resize; z-index: 1050; left: 382px; top: 579px; display: block;" class="tag_frame_handle se"></div>
					</div>
				</div>
				<div id="owner_photo_rotate_c"><div id="owner_photo_rotate_c1" onclick="OwnerPhoto.rotate(1)"></div><div id="owner_photo_rotate_c3" onclick="OwnerPhoto.rotate(3)"></div>
				</div>
			</div>
			<div class="owner_photo_controls">
				<div class="button_blue button_big"><button id="owner_photo_done_edit" onclick="OwnerPhoto.editDone()">Сохранить и продолжить</button></div><div class="button_cancel inl_bl" id="owner_photo_upload_return"><div class="button" onclick="OwnerPhoto.uploadReturn()">Вернуться назад</div></div>
			</div>
		</div>
</div>

#box_layer_bg {
	display: none;
	z-index: 1000;
	background: url(/images/layer_bg.png) repeat scroll 0 0 rgba(0, 0, 0, 0);	
	left: 0;
  top: 0;
}
#box_layer_wrap {
	display: none;
	z-index: 1050;
	left: 0;
  top: 0;
}
html {overflow: auto;}
.fixed {
    position: fixed;
		overflow: auto;
}
#owner_photo_edit {
	background-color: #FFFFFF;
	height: auto;
	width: 644px;
	margin-top: 10px;
	overflow:  auto;
}
.croppingF_tag_frame {
	position: absolute;
	left: 0;
  top: 0;
	left: 20px; 
	top: 20px;	
}	
.croppingF_tag_faded {
	position: absolute;
	left: 0;
  top: 0;
	background: url(/images/layer_bg_img.png) repeat scroll 0 0 rgba(0, 0, 0, 0);	
                                       	
}

var croppingFormBox = {
	show: function(){
		alert($('#owner_photo_thumb').height());
		if ($(window).height()>($('#owner_photo_thumb').height()+120))
			$('#box_layer_bg').css("height", $(window).height());
		else
			$('#box_layer_bg').css("height", $('#owner_photo_thumb').height()+120);
			
		alert($('#box_layer_bg').height());
		$('#box_layer_bg').css("width", $(window).width());
		$('#box_layer_wrap').css("width", $(window).width());
		$('#box_layer_bg').css("display", "block");
		$('#box_layer_wrap').css("display", "block");
	}, 
	hide: function(){
		$('#box_layer_bg').css("display", "none");
		$('#box_layer_wrap').css("display", "none");
	} 
}