{block name=metaTitle}Prezentacja{/block}
{block name=bodyPage}administrator_presentation_view{/block}
{block name=body}
	<div class="svg_sprite">{file_get_contents('theme/dobry-start/images/icons/svg/sprite.svg')}</div>
	<div id="p_slider_w4">
		<div id="p_slider_w3">
			<div id="p_slider_w2">
				<div class="p_slider_info p_slider_layer" data-layer="p_slider_info">
					<div class="p_slider_info_box">
						<div class="p_slider_info_box_ct">
							<div class="p_slider_info_box_ct_c c1">
								<div class="p_slider_info_box_img_ct">
									<div class="p_slider_info_box_img_ct_c"><img src="{url mode="root"}theme/dobry-start/images/p_slider_info_1.jpg" alt=""></div>
								</div>
								<div class="p_slider_info_box_desc">
									<div class="p_slider_info_box_desc_l"><div>1</div></div>
									<div class="p_slider_info_box_desc_r">Uruchom telefon</div>
								</div>
							</div>
							<div class="p_slider_info_box_ct_c c2">
								<div class="p_slider_info_box_img_ct">
									<div class="p_slider_info_box_img_ct_c">
										<div class="p_slider_info_input"><div class="p_slider_info_input_value">{url mode="host"}</div><div class="p_slider_info_input_i"></div></div>
										<img src="{url mode="root"}theme/dobry-start/images/p_slider_info_2.jpg" alt="">
									</div>
								</div>
								<div class="p_slider_info_box_desc">
									<div class="p_slider_info_box_desc_l"><div>2</div></div>
									<div class="p_slider_info_box_desc_r">Wejdź na {url mode="host"}</div>
								</div>
							</div>
							<div class="p_slider_info_box_ct_c c3">
								<div class="p_slider_info_box_img_ct">
									<div class="p_slider_info_box_img_ct_c">
										<div class="p_slider_info_phone_box">
											<div class="p_slider_info_phone_box_title">Wpisz kod</div>
											<div class="p_slider_info_phone_box_input">{$_MODEL.code}</div>
											<div class="p_slider_info_phone_box_btn">Dalej</div>
										</div>
										<img src="{url mode="root"}theme/dobry-start/images/p_slider_info_3.jpg" alt="">
									</div>
								</div>
								<div class="p_slider_info_box_desc">
									<div class="p_slider_info_box_desc_l"><div>3</div></div>
									<div class="p_slider_info_box_desc_r">Wpisz kod <span class="no_wrap">{$_MODEL.code}</span></div>
								</div>
							</div>
						</div>
						<div class="p_slider_info_box_ct_logo">
							<div class="p_slider_info_box_ct_c">
								<div class="ue_logo_w fadeInDown animated">
									<div class="space space_20 clear"></div>
									<div class="ue_logo"><img src="{url mode="root"}theme/dobry-start/images/ue.jpg" alt=""></div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="p_slider_settings p_slider_layer" data-layer="p_slider_settings">
					<div class="p_slider_settings_ov"></div>
					<div class="p_slider_settings_ct">
						<div class="p_slider_settings_ct_c">
							<nav>
								<div class="ul_ct">
									<div class="ul_ct_c">
										<ul>
											<li><a href="{url controller="index" action="index"}"><div class="icon"><svg><use xlink:href="{url mode="root"}theme/dobry-start/images/icons/svg/sprite.svg#shape-home"></use></svg></div><span>Powrót</span></a></li>
											<li><a href="#" class="fullscreen_btn"><div class="icon"><svg><use xlink:href="{url mode="root"}theme/dobry-start/images/icons/svg/sprite.svg#shape-expand"></use></svg></div><span>Pełny ekran</span></a></li>
											<li><a href="{url controller="prezentacje" action="edytuj" id=$_MODEL.id}"><div class="icon"><svg><use xlink:href="{url mode="root"}theme/dobry-start/images/icons/svg/sprite.svg#shape-pencil"></use></svg></div><span>Edytuj</span></a></li>
										</ul>
									</div>
								</div>
							</nav>
						</div>
					</div>
				</div>
				<div class="p_slider_icons">
					<div class="icons">
						<div class="icon settings" data-layer="p_slider_settings">
							<div class="icon_img"><svg><use xlink:href="{url mode="root"}theme/dobry-start/images/icons/svg/sprite.svg#shape-cog"></use></svg></div>
						</div>
						<div class="icon info" data-layer="p_slider_info">
							<div class="icon_img"><svg><use xlink:href="{url mode="root"}theme/dobry-start/images/icons/svg/sprite.svg#shape-info"></use></svg></div>
						</div>
					</div>
				</div>
				<div class="p_slider">
					{foreach from=$_MODEL.boards item=slide}
						{if isset($slide.htmlPlay)}
							{$slide.htmlPlay}
						{/if}
					{/foreach}
				</div>
			</div>
		</div>
	</div>
{/block}

{block name=styles}
	<!--[if lt IE 9]>
		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	<link href="https://fonts.googleapis.com/css?family=Lato:300,300i,400,400i,700,700i,900,900i" rel="stylesheet">
	<link rel="shortcut icon" type="image/x-icon" href="{url mode="root"}theme/dobry-start/images/favicon.ico">
	<link rel="stylesheet" type="text/css" href="{url mode="root"}theme/dobry-start/styles/css/main.css" />
	<link rel="stylesheet" type="text/css" href="{url mode="root"}theme/dobry-start/styles/css/font-awesome.css" />
	<link rel="stylesheet" type="text/css" href="{url mode="root"}theme/dobry-start/styles/css/chartist.css">
	<link rel="stylesheet" type="text/css" href="{url mode="root"}theme/dobry-start/styles/css/chartist-plugin-tooltip.css">
	<link rel="stylesheet" type="text/css" href="{url mode="root"}theme/dobry-start/styles/css/jqcloud.css">
	<link href="{url mode="root"}theme/dobry-start/tools/inspinia/css/bootstrap.min.css" rel="stylesheet">
	<link href="{url mode="root"}theme/dobry-start/tools/inspinia/css/plugins/iCheck/custom.css" rel="stylesheet">
	<link href="{url mode="root"}theme/dobry-start/tools/inspinia/css/plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" rel="stylesheet">
	<link href="{url mode="root"}theme/dobry-start/tools/inspinia/css/plugins/datapicker/datepicker3.css" rel="stylesheet">
	<link href="{url mode="root"}theme/dobry-start/tools/inspinia/css/plugins/daterangepicker/daterangepicker-bs3.css" rel="stylesheet">
	<link href="{url mode="root"}theme/dobry-start/tools/inspinia/css/plugins/jQueryUI/jquery-ui-1.10.4.custom.min.css" rel="stylesheet">
	<link href="{url mode="root"}theme/dobry-start/tools/inspinia/css/plugins/jqGrid/ui.jqgrid.css" rel="stylesheet">
	<link href="{url mode="root"}theme/dobry-start/tools/inspinia/css/plugins/jasny/jasny-bootstrap.min.css" rel="stylesheet">
	<link href="{url mode="root"}theme/dobry-start/tools/inspinia/css/plugins/summernote/summernote.css" rel="stylesheet">
	<link href="{url mode="root"}theme/dobry-start/tools/inspinia/css/animate.css" rel="stylesheet">
	<link href="{url mode="root"}theme/dobry-start/tools/inspinia/css/style.css" rel="stylesheet">
	<link href="{url mode="root"}theme/dobry-start/tools/inspinia/css/plugins/clockpicker/clockpicker.css" rel="stylesheet">
	<link href="{url mode="root"}theme/dobry-start/tools/inspinia/css/plugins/daterangepicker/daterangepicker-bs3.css" rel="stylesheet">
	<style>
		.slick-disabled { display: none !important; }
	</style>
{/block}

{block name=scripts}
	<script type="text/javascript" src="{url mode="root"}theme/dobry-start/tools/js/jquery-3.2.1.min.js"></script>
	<script type="text/javascript" src="{url mode="root"}theme/dobry-start/tools/js/svgxuse.js"></script>
	<script type="text/javascript" src="{url mode="root"}theme/dobry-start/tools/js/slick.js"></script>
	<script type="text/javascript" src="{url mode="root"}theme/dobry-start/tools/js/jqcloud.js"></script>
	<script type="text/javascript" src="{url mode="root"}theme/dobry-start/tools/inspinia/js/plugins/jquery-ui/jquery-ui.min.js"></script>
	<script type="text/javascript" src="{url mode="root"}theme/dobry-start/tools/inspinia/js/plugins/jasny/jasny-bootstrap.min.js"></script>
	<script type="text/javascript" src="{url mode="root"}theme/dobry-start/tools/inspinia/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
	<script type="text/javascript" src="{url mode="root"}theme/dobry-start/tools/inspinia/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="{url mode="root"}theme/dobry-start/tools/js/chartist.js"></script>
	<script type="text/javascript" src="{url mode="root"}theme/dobry-start/tools/js/chartist-plugin-tooltip.js"></script>
	<script type="text/javascript" src="{url mode="root"}theme/dobry-start/tools/js/chartist-plugin-bar-labels.js"></script>
	<script type="text/javascript" src="{url mode="root"}theme/dobry-start/tools/js/newWaterfall.js"></script>
	<script type="text/javascript" src="{url mode="root"}theme/dobry-start/tools/js/main.js"></script>
	<script type="text/javascript" src="{url mode="root"}theme/dobry-start/tools/js/jquery.countdown360.js"></script>
	<script type="text/javascript" src="{url mode="root"}public/scripts/websocket.js"></script>
	<script type="text/javascript" src="{url mode="root"}public/scripts/tools.js"></script>
	<script type="text/javascript">
		var lockSlideChange = false;

		var usersSlide = new Array();
		{foreach from=$_MODEL.boards item=slide}
			usersSlide["{$slide.board_id}"] = new Array();
		{/foreach}

		$(document).ready(function () {
			var currentSlide = "0";

			$("*[data-quiz-index]").each(function (index) {
				$(this).text(index + 1);
			});

			$(".p_slider").slick({
				accessibility: false,
            autoplay: false,
            autoplaySpeed: 2000,
            slidesToScroll: 1,
            slidesToShow: 1,
            infinite: false
			});

			$(".p_slider").on("afterChange", function(event, slick, direction) {
				if(currentSlide == direction) {
					return false;
				}

				currentSlide = direction;

				var slide = $(".p_slide[data-slick-index='" + direction + "']"), slideId = $(slide).data("slide");

				sendWebSocket({ command: "goToSlide", slideId: slideId });
			});

			$(document).bind("keydown", function(e) {
				if(!lockSlideChange) {
					var code = e.keyCode || e.which;
					if(code == 37 || code == 38) {
						$(".p_slider").slick("slickPrev");
					} else if(code == 32 || code == 39 || code == 40) {
						$(".p_slider").slick("slickNext");
					} else if(code == 27) {
						location.href = '{url controller="prezentacje" action="edytuj" id=$_MODEL.id}';
					}
				}
			});

			document.oncontextmenu = function() {
				return false;
			};

			$(document).mousedown(function (e) {
				if(e.button == 2) {
					var cPrev = $(".slick-prev");
					var cNext = $(".slick-next");
					var cIconSettings = $(".icons .icon.settings");
					var cIconInfo = $(".icons .icon.info");
					var cSettings = $(".p_slider_settings.p_slider_layer");
					var cInfo = $(".p_slider_info.p_slider_layer");

					if(
						!cPrev.is(e.target) && cPrev.has(e.target).length === 0 && 
						!cNext.is(e.target) && cNext.has(e.target).length === 0 && 
						!cIconSettings.is(e.target) && cIconSettings.has(e.target).length === 0 && 
						!cIconInfo.is(e.target) && cIconInfo.has(e.target).length === 0 && 
						!cSettings.is(e.target) && cSettings.has(e.target).length === 0 && 
						!cInfo.is(e.target) && cInfo.has(e.target).length === 0
					) {
						$(".p_slider").slick("slickPrev");
					}

					return false; 
				}
				
				return true; 
			}); 

			$(document).on("click", function (e) {
				var cPrev = $(".slick-prev");
				var cNext = $(".slick-next");
				var cIconSettings = $(".icons .icon.settings");
				var cIconInfo = $(".icons .icon.info");
				var cSettings = $(".p_slider_settings.p_slider_layer");
				var cInfo = $(".p_slider_info.p_slider_layer");

				if(
					!cPrev.is(e.target) && cPrev.has(e.target).length === 0 && 
					!cNext.is(e.target) && cNext.has(e.target).length === 0 && 
					!cIconSettings.is(e.target) && cIconSettings.has(e.target).length === 0 && 
					!cIconInfo.is(e.target) && cIconInfo.has(e.target).length === 0 && 
					!cSettings.is(e.target) && cSettings.has(e.target).length === 0 && 
					!cInfo.is(e.target) && cInfo.has(e.target).length === 0
				) {
					$(".p_slider").slick("slickNext");
				}
			});

			initWebSocket({
				mode: "presenter",
				identifier: "{$_MODEL.id}",
				user: "{$userId}",
				onopen: function () {
					sendWebSocket({ command: "goToSlide", slideId: $(".p_slide[data-slick-index='0']").data("slide") });
				},
				onmessage: function (message) {
					webSocketAction(message);
				}
			});
		});

		window.onbeforeunload = function(e) {
			sendWebSocket({ command: "closePresentation" });
			$.get("{url controller="prezentacje" action="wylacz" id=$_MODEL.id area="prezenter"}");
		};

		function webSocketAction(message) {
			var dataJS = JSON.parse(message);
			
			switch(dataJS.command) {
				case "initUser":
					initUser();
					break;
				case "supportUser":
					supportUser();
					break;
				case "saveResult":
					refreshContent();
					break;
				case "quizInit":
					slideUserAdd(dataJS.slideId, dataJS.userId);

					var fn = window["refreshQuizUsers_" + MD5(dataJS.slideId)];
					if(typeof fn === "function") {
						fn();
					}
					break;
			}
		}
		
		function initUser() {
			var index = $(".p_slider").slick("slickCurrentSlide");
			var slide = $(".p_slide[data-slick-index='" + index + "']"), slideId = $(slide).data("slide");

			sendWebSocket({ command: "goToSlide", slideId: slideId });
		}

		function refreshContent() {
			var index = $(".p_slider").slick("slickCurrentSlide");
			var slide = $(".p_slide[data-slick-index='" + index + "']");
			
			switch($(slide).data("results")) {
				case "quiz":
					$.get("{url controller="index" action="index"}/slajdy/quiz-wyniki/{$_MODEL.id}/" + $(slide).data("slide"), { update: true }, function (response) {
						if(response.status == true) {
							$("*[data-slide-quiz='chart']", slide).html(response.chart);
							$("*[data-slide-quiz='rank']", slide).html(response.rank);
							$("*[data-slide-quiz='users']", slide).html(response.users);

							window.dispatchEvent(new Event("resize"));
						}
					}, "json");
					break;
				default:
					$.get("{url controller="index" action="index"}/slajdy/uruchom/{$_MODEL.id}/" + $(slide).data("slide"), { update: true }, function (response) {
						if(response.status == true) {
							$(slide).html(response.content);

							window.dispatchEvent(new Event("resize"));
						}
					}, "json");
			}
		}

		function slideLock() {
			lockSlideChange = true;

			$(".p_slider .slick-arrow").addClass("hide");
			$(".p_slider").slick("slickSetOption", {
				arrows: false,
				draggable: false
			});
		}

		function slideUnLock() {
			lockSlideChange = false;

			$(".p_slider .slick-arrow").removeClass("hide");
			$(".p_slider").slick("slickSetOption", {
				arrows: true,
				draggable: true
			});
		}

		function slideUserAdd(slideId, userId) {
			if(usersSlide[slideId].indexOf(userId) == -1) {
				usersSlide[slideId].push(userId);
			}
		}

		function slideUserRemove(slideId, userId) {
			usersSlide[slideId].splice(quizUsers.indexOf(userId), 1);
		}

		function slideUsersCount(slideId) {
			return usersSlide[slideId].length;
		}
	</script>
{/block}