<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Images</title>
<link href="/webjars/bootstrap/3.3.5/css/bootstrap.min.css"
	rel="stylesheet" media="screen" />

<script src="/webjars/jquery/2.1.4/jquery.min.js"></script>
<script src="/webjars/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<style type="text/css">
.clickable-row>td {
	-webkit-transition: all 0.5s linear;
	-moz-transition: all 0.5s linear;
	-o-transition: all 0.5s linear;
	-ms-transition: all 0.5s linear;
	transition: all 0.5s linear;
}

.clickable-row:hover>td {
	background-color: #c9c9c9;
}

.big-dialog {
	width: 90vw;
	height: 80vh;
}

.imageModal {
	max-width: 600px;
	max-height: 400px;
}

.bigImageModal {
	max-width: 80vw;
	height: 75vh;
}

#link {
	display: block;
	padding-bottom: 80px;
	width: 100%;
	height: 100%;
}

#alertMassage {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	width: 100%;
}
</style>
</head>

<body>
	<noscript>
		<div id="alertMassage">
			<div class="alert alert-warning"
				style="text-align: center; font-size: 14px;">
				<strong>In Ihrem Browser ist JavaScript deaktiviert,</strong> die
				Funktionalit&auml;t wurde eingeschr&auml;nkt.
			</div>
		</div>
		<div class="container" align="center" style="margin-top: 60px;">
			<div class="col-md-8 col-md-offset-2">
				<div class="panel panel-default">
					<div class="panel-body">
						<table class="table table-striped"
							style="padding-left: 15px; padding-right: 15px;">
							<tr>
								<th width="150px" style="text-align: center;">Bild</th>
								<th style="text-align: center;">Beschreibung</th>
							</tr>
							
						</table>
					</div>
				</div>
			</div>
		</div>
	</noscript>
	<div class="container" align="center" style="margin-top: 20px;">
		<div class="col-md-8 col-md-offset-2">
			<div class="panel panel-default" style="visibility: hidden;"
				id="withJS">
				<div class="panel-body">
					<table class="table table-striped"
						style="padding-left: 15px; padding-right: 15px;">
						<tr>
							<th width="150px" style="text-align: center;">Bild</th>
							<th style="text-align: center;">Beschreibung</th>
						</tr>
						
					</table>
				</div>
			</div>
		</div>
	</div>
	<div id="showPicture" class="modal fade">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header" style="text-align: center;">
					<p></p>
				</div>
				<div class="modal-body" style="text-align: center;">
					<img id="imageModal" class="clickImage imageModal" />
				</div>
				<div class="modal-footer">
					<div style="float: left">
						<a role="button" id="previous" class="btn btn-default"> <span
							class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
						</a> <a role="button" id="next" class="btn btn-default"> <span
							class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
						</a>
					</div>
					<button id="bigImage" class="btn btn-default clickImage">
						<span id="bigImageSpan" class="glyphicon glyphicon-resize-full">
							Vergrößern</span>
					</button>
					<button class="btn btn-default" data-dismiss="modal"
						aria-label="Schließen" style="font-family: Monaco;">Schließen</button>
				</div>
			</div>
		</div>
	</div>


	<script type="text/javascript">
		$(window).load(function() {
			document.getElementById('withJS').style.visibility = "visible";
		});

		var currentRow;

		var onLinkClick = function(source) {
			currentRow = source;
			if ($(currentRow).next().index() == -1) {
				$('#next').addClass('disabled');
			} else {
				$('#next').removeClass('disabled');
			}
			if ($(currentRow).prev().index() == 0) {
				$('#previous').addClass('disabled');
			} else {
				$('#previous').removeClass('disabled');
			}
			$("#showPicture .modal-header p").html($(source).data("pUrl"));
			$("#showPicture .modal-body img").attr('src',
					$(source).data("imgUrl"));
			$('#previous').click(function() {
				onLinkClick($(source).prev());
			});
			$('#next').click(function() {
				onLinkClick($(source).next());
			});
		};

		$('.clickImage').click(
				function() {
					if ($('#bigImageSpan').text() == " Vergrößern") {
						$('.modal-dialog').addClass("big-dialog");
						$('#imageModal').addClass("bigImageModal").removeClass(
								"imageModal");
						$('#bigImageSpan').text(" Verkleinern").removeClass(
								"glyphicon-resize-full").addClass(
								"glyphicon-resize-small");
					} else {
						normalSize();
					}
				});

		function normalSize() {
			$(".modal-dialog").removeClass("big-dialog");
			$('#imageModal').removeClass("bigImageModal")
					.addClass("imageModal");
			$('#bigImageSpan').text(" Vergrößern").removeClass(
					"glyphicon-resize-small").addClass("glyphicon-resize-full");
		}
	</script>
</body>
</html>