<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>{{ title }}</title>
<base href="{{ base }}" />

<script type="text/javascript" src="view/javascript/jquery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="view/javascript/jquery/ui/jquery-ui-1.8.16.custom.min.js"></script>
<link rel="stylesheet" type="text/css" href="view/javascript/jquery/ui/themes/ui-lightness/jquery-ui-1.8.16.custom.css" />

<script type="text/javascript" src="view/javascript/jquery/ui/external/jquery.bgiframe-2.1.2.js"></script>
<script type="text/javascript" src="view/javascript/jquery/jstree/jquery.tree.min.js"></script>
<script type="text/javascript" src="view/javascript/jquery/ajaxupload.js"></script>
<script type="text/javascript" src="../catalog/view/javascript/types.js"></script>
<script type="text/javascript" src="../catalog/view/javascript/language.js"></script>

<style type="text/css">
body {
	padding: 0;
	margin: 0;
	background: #F7F7F7;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
}
img {
	border: 0;
}
#container {
	padding: 0px 10px 7px 10px;
	height: 340px;
}
#menu {
	clear: both;
	height: 29px;
	margin-bottom: 3px;
}
#column-right,
#column-left {
	background: #FFF;
	border: 1px solid #CCC;
	height: 290px;
	overflow: auto;
	text-align: center;
}
#column-left {
	float: left;
	width: 20%;
}
#column-right {
	float: right;
	width: 78%;
	text-align: center;
}
#column-right div {
	text-align: left;
	padding: 5px;
}
#column-right a {
	display: inline-block;
	text-align: center;
	border: 1px solid #EEEEEE;
	cursor: pointer;
	margin: 5px;
	padding: 5px;
}
#column-right a.selected {
	border: 1px solid #7DA2CE;
	background: #EBF4FD;
}
#column-right input {
	display: none;
}
#dialog {
	display: none;
}
.button {
	display: block;
	float: left;
	padding: 8px 5px 8px 25px;
	margin-right: 5px;
	background-position: 5px 6px;
	background-repeat: no-repeat;
	cursor: pointer;
}
.button:hover {
	background-color: #EEEEEE;
}
.thumb {
	padding: 5px;
	width: 105px;
	height: 105px;
	background: #F7F7F7;
	border: 1px solid #CCCCCC;
	cursor: pointer;
	cursor: move;
	position: relative;
}
.copiar, .linkdireto {
  border-radius: 5px;
  padding: 5px 10px;
  border: 1px solid #ccc;
  outline: none;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.linkdireto {
  margin: 15px 0;
	width: calc(100% - 95px);
	margin-right: 10px;
}
.copiar {
	cursor: pointer;
	background: #003A88;
	border: 1px solid #003A88;
	color: #FFF;
	width: 85px;
}
.url-image {
	position: fixed;
  bottom: -17px;
  width: 780px;
  padding: 10px;
}
</style>


</head>
<body>
<div id="container" class="js-type-image" data-type-image="{{ type }}">
  <div id="menu">
		<a id="create" class="button" style="background-image: url('view/image/filemanager/folder.png');">
      {{ button_folder }}
		</a>
		<a id="delete" class="button" style="background-image: url('view/image/filemanager/edit-delete.png');">
      {{ button_delete }}
		</a>
		<a id="move" class="button" style="background-image: url('view/image/filemanager/edit-cut.png');">
      {{ button_move }}
		</a>
		<a id="copy" class="button" style="background-image: url('view/image/filemanager/edit-copy.png');">
      {{ button_copy }}
		</a>
		<a id="rename" class="button" style="background-image: url('view/image/filemanager/edit-rename.png');">
      {{ button_rename }}
		</a>
		<a id="upload" class="button" style="background-image: url('view/image/filemanager/upload.png');">
      {{ button_upload }}
		</a>
		<a id="refresh" class="button" style="background-image: url('view/image/filemanager/refresh.png');">
      {{ button_refresh }}
		</a>
	</div>
	<div class="clearfix">
		<div id="column-left"></div>
	  <div id="column-right"></div>
	</div>
</div>
<div class="url-image">
	<input type="text" class="linkdireto" name="linkdireto" value="" /><button class="copiar">Copiar url</button>
</div>

<script type="text/javascript">

  var url_link = {{ url_link|json_encode() }},
      Type_ImageUpload = new Type({{ Type_ImageUpload|json_encode() }}),
      languageForJs = {{ languageForJs|json_encode() }},
      field = '{{ (field) ? field : '' }}',
      size = '{{ (size) ? size : '' }}';

</script>

<script type="text/javascript" src="view/javascript/filemanager.js"></script>

</body>
</html>
