<?php

include('views/_header_shop.tpl.php');

if (isset($_GET['reg_ok'])) {
	$msg = 'Registration Successful';
}

if (isset($msg)) {
	echo "<b>$msg</b><br /><br />";
}

?>

<style type="text/css">
	button {
		height: 32px;
	margin-top: -3px;
	}
	#footer {
		border-top: 0px solid #d4d4d4;
		background: #FFF;
		padding: 0px 0 0 0;
	}
	.main-footer, #mmen {
		display: none;
	}

	/* ####################################### */
	/* ########## INSTAGRAM STYLING ########## */
	/* ####################################### */

	ul, menu, dir {
		display: block;
		list-style-type: disc;
		-webkit-margin-before: 1em;
		-webkit-margin-after: 1em;
		-webkit-margin-start: 0px;
		-webkit-margin-end: 0px;
		-webkit-padding-start: 0px;
	}
	ul.instagram-gallery {
		background: none;
	}

	ul.instagram-gallery img {
		width: 19.7%;
	height: auto;
	margin-right: 1px;
	margin-bottom: 1px;
	}

	img.il-photo_img {
		width: 100px;
	height: auto;
	}

	h1 {
		font-family: Montserrat, sans-serif;
	}

	#map-canvas {
		width: 100%;
	}

	h2 {
		border-bottom: 1px solid #ccc;
	padding-bottom: 5px;
	text-shadow: 0px 1px 0px #fff;
	margin-bottom: 0px;
	}

	ul.average-rating-stars {
		float: right;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	ul.average-rating-stars li {
		float: left;
		width: 21px;
		height: 21px;
	}
	ul.average-rating-stars li.on {
		background: transparent url(/static/images/star-on.png) no-repeat center center;
	}
	ul.average-rating-stars li.off {
		background: transparent url(/static/images/star-off.png) no-repeat center center;
	}

	#profile-gallery-wrapper {
		position: relative;
		height: auto;
		min-height: 375px;
		max-height: 375px;
		max-width: 50%;
		float: left;
		padding: 0px !important;
	}

	/* ##### IMAGE PORTFOLIO STUFF ##### */

	.half {
		float: left;
	width: 50%;
	overflow: hidden;
	max-width: 50%;
	}
	.rsDefaultInv .rsBullets {
		bottom: 35px !important;
	z-index: 999 !important;
	}
	.thumbcon {
		padding-bottom: 15px;
	}
	.thumb-wrapper {
		margin-top: 25px;
		width: 100%;
		height: auto;
		margin: auto;
	}
	.thumb-wrapper .thumb {
		float: left;
		margin-left: 1px;
		margin-bottom: 1px;
	}
	.thumb-wrapper .thumb img {
		width: 112px;
		height: 93px;
	}
	.fancybox-lock .fancybox-overlay {
	}
	.fancybox-overlay-fixed {
		z-index: 9999;
	}
	.fancybox-skin {
		padding: 0px !important;
	top: 3px !important;
	}

	/* ####################################### */
	/* ########## MOBILE STYLING ########## */
	/* ####################################### */

	@media screen and (max-device-width:  1024px), screen and (max-width:  1024px) {
		#profile-gallery-wrapper {
			position: relative;
			height: auto;
			min-height: 327px;
			max-height: 327px;
			max-width: 50%;
			float: left;
			padding: 0px !important;
		}
	}

	@media screen and (max-device-width:  979px), screen and (max-width:  979px) {

	}

	/******************************************************************************/
	@media screen and (max-device-width:  767px), screen and (max-width:  767px) {
		#profile-gallery-wrapper {
			position: relative;
			height: auto;
			min-height: 240px;
			max-height: 240px;
			max-width: 50%;
			float: left;
			padding: 0px !important;
		}
	}

	/* Landscape phones and down */
	@media (max-width: 480px) {
		.half {
			max-width: 100%;
	width: 100%;
		}
		#profile-gallery-wrapper {
			width: 100%;
	display: block;
	min-height: 240px;
	max-height: 240px;
			max-width: 100%;
	border: 0px;
	margin: 0 0 10px 0;
		}
		.thumb-wrapper .thumb img {
			width: 119px;
			height: 90px; /* was 88x70 */
		}
		ul.instagram-gallery img {
			width: 49.7%;
	height: auto;
	margin-right: 1px;
	margin-bottom: 1px;
		}
		ul.profile-gallery img {
			width: 49.7%;
	height: auto;
	margin-right: 1px;
	margin-bottom: 1px;
		}
		.fancybox-overlay-fixed {
			z-index: 999 !important;
		}
	}

	/* Landscape phones and down */
	@media (max-width: 320px) {
		.thumb-wrapper .thumb img {
			width: 100px;
			height: 80px;
		}
	}

</style>

<!-- FULL WIDTH CONTAINER -->
<div class="home-feature-category" style="background:#fff; padding:0px; border:none; margin-bottom:0px;">
	<input type='hidden' name='location_lat' value="<?= $user['location_lat']; ?>"/>
	<input type='hidden' name='location_lng' value="<?= $user['location_lng']; ?>" />
	<input type='hidden' name='location_last_lat' value="<?= $user['location_last_lat']; ?>"/>
	<input type='hidden' name='location_last_lng' value="<?= $user['location_last_lng']; ?>"/>
	<script src='/static/js/googlemaps/GoogleMapsProfileView.js'> </script>
	<div id="map-canvas"></div>

	<!-- PAGE CONTAINER WITH MARGINS -->
	<div class="container_12 clearfix" style="background:#fff;">
		<div class="grid_4 marked-category" style="padding-top:10px;">
			<?php
			if ($user['image']) {
				echo "<div style='width:auto; height:250px; padding:2px; border:1px solid #ccc; overflow:hidden;
				margin-bottom:15px;'>
				<div style='background:#000; width:auto; height:250px; margin:0; overflow:hidden;'>
				<img style='height:250px; width:auto !important; max-width:560px;' src='{$user['image']}' />
				</div></div>";
			}

			// create average rating stars list
			$avg_rating_stars = "<ul class='average-rating-stars'>";
			for ($i = 0, $m = 0; $m < 5; ++$i, $m++) {
				$on_or_off = $i < (int) $user['proposals_avg_rating_received'] ? "on" : "off";
				$avg_rating_stars .= "<li class='" . $on_or_off . "'>&nbsp;</li>";
			}
			$avg_rating_stars .= "</ul><div class='clear'></div>";
			?>

			<span style="font-size:36px; font-family:'Open Sans',Montserrat-Light,sans-serif; font-weight:300;">
			<?= $user['name'] ?>
			</span>
			<br /><br />
			<i class="fa fa-check-square-o"></i> <span style="color:#00C416;"><b>Verified:</b></span> <?= $user['is_activated'] ? "Yes" : "No" ?><br />
			<i class="fa fa-map-marker"></i> <?= $user['location'] ?><br />
			<i class="fa fa-link"></i> <?= $user['website'] ?><br />
			<i class="fa fa-user"></i> <b>Bio:</b> <?= nl2br(strip_tags($user['biography'])) ?><br />

			<?php
			if (!empty($user['linkedin_account']))
				: ?>
			<i class="fa fa-linkedin-square"></i> <b>LinkedIn:</b>
			<a target="_blank" href="<?= $user['linkedin_account'] ?>">View LinkedIn Profile</a><br />
			<?php endif; ?><br />

			<!-- START OF ACTION BUTTONS -->
			<div class="actions" style="">
				<?php
				// Only show Hire Candidate button if the logged in user
				// has created projects already.
				if ($website_options['enable_proposals'] && !empty($current_user_projects))
					: ?>

				<button class="btn btn-blue btn-buck-project hire-user load-popin"
				href="/project/selectCandidate?uid=<?= $user['id'] ?>"><span class="lbl">Hire Now &raquo;</span></button>

				<?php
				else
					:
				// The current logged in user has no open projects.
				?>

				<p style="display:none;">
					<i class="fa fa-info"></i>&nbsp;If you have an open project, you can hire a candidate from their profile page.</p>
				<!--<br />-->

				<?php
				endif; ?>

				<a href="#" class="btn btn-blue sendmsg">
					<i class="fa fa-envelope"></i> Message</a>

				<?php
				if ($isFollowed) {
				?>
				<a href="?unfollow" class="btn btn-blue">Unfollow</a>
				<?php
			} else {
				?>
				<a href="?follow" class="btn btn-blue">Follow</a>
				<!--&nbsp;&nbsp;Get updates <?= $user['name'] ?>&rsquo;s activity-->
				<?php
			}
				?>

				<?php
				if ($_SESSION['user']['is_admin'] == 2)
					: ?>
				<br><br>
				<form method="POST" action="/auth/loginas">
					<input type="hidden" name="log_as" value="<?= $user['id'] ?>">
					<button class="btn btn-red">Login as this user</button>
				</form>

				<?php endif ?>
			</div>

			<div id="sendMsg" style="display:none; padding-top:10px;">
				<form id="pm_form">
					Send private message to <?= $user['name'] ?>:<br />
					<input type="hidden" name="to" value="<?= $user['id'] ?>" />
					<textarea name="message" id="msgText"
					style="border-radius:0; border:1px solid #ddd; width:98%; height:90px; margin-bottom:5px;"></textarea>
					<br />
					<input type="submit" class="btn btn-blue" value="Send" />
				</form>
			</div>

			<script>
				$('.sendmsg').click(function () {
					$('#sendMsg').slideToggle(1000);
					//$('.actions').slideUp(700, function () {
					//$('#sendMsg').slideDown();
					//$('#sendMsg').slideToggle();
					//});

					$('#pm_form').submit(function () {
						$.ajax({
							url: '/messages/send',
							type: 'post',
							data: $(this).serialize(),
							success: function (d) {
								if (d == 'ok') {
									$('#sendMsg').html("Message Sent");
								}
							}
						});
						return false;
					});
					//sendmsg.preventDefault();
					return false;
				});
			</script>
			<br />
			<!-- END OF ACTION BUTTONS -->

			<?php
			if ($user['account_type'] == 'Model')
				: ?>
			Member Type 1 (ie. User)
			<?php endif; ?>
			<b>Height:</b> <?= $user['height']; ?><br />
			<b>Weight:</b> <?= $user['weight']; ?> lbs<br />
			<b>Eye Color:</b> <?= $user['eye_color']; ?><br />
			<b>Other Skills:</b> <?= $user['willing_to_do']; ?><br />

			<b>Proposals:</b> <?= $user['proposals_count'] ?><br />
			<b>Ave Rating:</b> <?= $user['proposals_avg_rating_received'] ?> / 5<br />
			<span style="float:left;"><?= $avg_rating_stars ?></span>
			<br /><br />
			<b>Projects:</b>
			<a class="load-popin" href="/project/summary?uid=<?= $user['id'] ?>">View Project History</a><br />

			<?php
			if ($user['account_type'] == 'Company')
				: ?>
			<?php else
				: ?>
			<?php endif; ?>

			<i class="fa fa-map-marker"></i> <?= $user['location'] ?><br />

			<?php
			if (!empty($user['mailing_address']))
				: ?>
			<b>Mailing:</b> <?= $user['mailing_address'] ?><br />
			<?php endif; ?>

			<?php
			if (!empty($user['category_name']))
				: ?>
			<b>Category:</b> <?= $user['category_name'] ?><br />
			<?php endif; ?>

			<b>Name:</b> <?= $user['contact_name'] ?><br />
			<b>E-Mail:</b> <?= $user['contact_email'] ?><br />
			<b>Phone:</b> <?= $user['contact_phone'] ?><br />
			<b>BTTBR:</b> <?= $user['contact_best_time'] ?>

			<div class="clear"></div>
		</div><!-- END OF 4 COLUMNS GRID  -->

		<div class="grid_4 marked-category" style="padding-top:0px;">
			<h2 style="font-family:'Open Sans',sans-serif; font-weight:300; border-bottom:1px solid #eee; padding-bottom:7px">
				Things I&rsquo;ve posted:
			</h2>
			<?php

			foreach ($user['projects'] as $project) {
				if (!$project['main_img']) {
					continue; // skip projects without main image
				}
				echo "<div style='height:auto; width:auto; padding:10px 0; border-bottom:1px solid #eee;'>
				<div style='float:left; display:inline-block; width:102px; height:102px;
				overflow:hidden; background:none; margin:0 10px 0 0'>
				<a href='/project/{$project['id']}'><img
				style='height:100px; width:auto; max-width:100px; min-width:100px; border-radius:50%;
				-moz-border-radius: 50%; -webkit-border-radius: 50%; border:1px solid #ddd;'
				src='" . getThumb($project['main_img']) . "' /></a></div>
				<div style='overflow:hidden; height:100px; width:auto; line-height:100px;'>{$project['title']}</div>
				<div class='clear'></div></div>";
			}
			?>

		</div>
		<div class="grid_4 marked-category" style="padding-top:0px;">
			<h2 style="font-family:'Open Sans',sans-serif; font-weight:300; border-bottom:1px solid #eee; padding-bottom:7px">
				Followers:
			</h2>
			<?php
			foreach ($user['followers'] as $fuser) {
				echo "<div style='height:auto; width:auto; padding:10px 0; border-bottom:1px solid #eee;'>
					<div style='float:left; display:inline-block; width:102px; height:102px;
					overflow:hidden; background:none; margin:0 10px 0 0'>
						<a href='/profile/{$fuser['user_slug']}'>
						<img src='" . getThumb($fuser['image']) . "'
						style='height:100px; width:auto; max-width:100px; min-width:100px; border-radius:50%;
				-moz-border-radius: 50%; -webkit-border-radius: 50%; border:1px solid #ddd; clear:both'  /></a>
					</div>
					<div style='float:left'><b>{$fuser['name']}</b><br />{$fuser['project_count']} projects<br />
					{$fuser['avg_rating_received']} average rating</div>
					<div class='clear'></div></div>";
			}
			?>
		</div>
		<!--<div class="grid_6 marked-category" style="background:red; padding-top:10px;">
		Content for Col 2
		</div>-->
		<!-- END OF 12 COLUMNS GRID -->
	</div><!-- END OF 12 COLUMN CONTAINER -->

	<div class="container_12 clearfix">
		<div class="grid_12" style="padding-top:0px; margin-bottom:0px;">

			<div id="profile-gallery-wrapper" class="royalSlider rsDefaultInv"
			style="padding:0px !important;">

				<?php
				if (empty($user['images']))
					: ?>

				<p>This user has not uploaded images yet.</p>

				<?php else
					: ?>

				<?php
				foreach ($user['images'] as $picture)
					: ?>
				<div style="position:absolute; background-size:cover; object-fit:cover; top:0; left:0; bottom:0; right:0;
					z-index:-99 !important; margin:0 !important; padding:0px !important; width:100%; height:auto;">
					<img src="/<?= $picture['file'] ?>"
					style="width:100%; height:auto;" />
				</div>
				<?php
				endforeach; ?>

				<?php endif; ?>

			</div>
			<!-- END OF RYSLIDER -->

			<script type="text/javascript">
				$(document).ready(function() {
					var fancylinks = $("a.lightboximg");
					fancylinks.click(function(event) {
						//event.stopPropagation();
						e.preventDefault();
					});
					fancylinks.fancybox();
				});
			</script>

			<div class="half" style="overflow:hidden;">
				<div class="thumbcon" style="position:relative; bottom:0px; left:0px; width:100%; white-space: nowrap;
			-webkit-overflow-scrolling: touch; text-align:center;
				height:auto; text-align:center; overflow: hidden; z-index:999">
					<div class="thumb-wrapper" style="text-align:center;">
						<?php
						foreach ($user['images'] as $picture)
							: ?>
						<div class="thumb" style="">
							<a href="/<?= $picture['file'] ?>" class="lightboximg"><img src="/<?= $picture['file'] ?>" /></a>
						</div>
						<?php
						endforeach; ?>
						<div class="clear"></div>
					</div>
				</div>
			</div>

			<div class="clear"></div>

			<div id="instagram-wrapper" style="border:none;">
				<div style="color:#aaa; padding:10px 10px 10px;
				text-align:center; font-size:2em; font-weight:300;">
					<img src="/static/images/instagram-icon-logo.png" alt="IG" style="height:40px; widht:auto;" />
					Username: <span id="instagram-user" style="font-weight:300; color:#000;"><?= $user['instagram_username'] ?>
				</div>
				<ul class="instagram-gallery"></ul>
			</div>
			<div class="clear"></div>
		</div><!-- GRID 12 COLS -->
	</div><!-- CONTAINER 12 COLS -->
</div><!-- FULL WIDTH CONTAINER -->

<script type="text/javascript" src='/static/js/instagramLite.js'> </script>
<script type="text/javascript">
	$('.instagram-gallery').instagramLite({
		clientID: '<?= $instagram_client_id ?>',
		username: $("#instagram-user").text(),
		list: false,
		urls: false,
		load_more: '.load-more',
		success: function() {},
		error: function(errorCode, errorMessage) {

			console.log('There was an error with the request');

			if (errorCode && errorMessage) {
				console.log(errorCode +': '+ errorMessage);
			}
		}
	});

	$(".load-popin").each(function() {
		var href = $(this).attr("href");
		$(this).fancybox({
			'hideOnContentClick': true,
			'width': 1000,
			'height': 550,
			'autoDimensions': false,
			'autoSize': true,
			'transitionIn': 'elastic',
			'transitionOut': 'elastic',
			'speedIn': 500,
			'speedOut': 300,
			'centerOnScroll': true,
			'type': 'ajax',
			'href': href
		});
	});
</script>

<script type="text/javascript">
	jQuery(document).ready(function($) {
		$('#profile-gallery-wrapper').royalSlider({
			fullscreen: {
				enabled: true,
				nativeFS: true
			},
			controlNavigation: 'bullets',
			slideshowEnabled:true,                 // Autoslideshow enabled
			slideshowDelay:2000,                    // Delay between slides in slideshow
			slideshowPauseOnHover:true,             // Pause slideshow on hover
			slideshowAutoStart:true,                // Auto start slideshow
			autoPlay: {
				enabled: true,
				stopAtAction: false,
				pauseOnHover: true,
				delay: 3000,
			},
			autoScaleSlider: false,
			autoScaleSliderWidth: false,
			autoScaleSliderHeight: false,
			transitionType: 'fade',
			loop: true,
			imageScaleMode: 'fit-if-smaller',
			navigateByClick: false,
			numImagesToPreload:3,
			arrowsNav:true,
			arrowsNavAutoHide: true,
			arrowsNavHideOnTouch: true,
			keyboardNavEnabled: true,
			fadeinLoadedSlide: true,
			globalCaption: false,
			globalCaptionInside: false,
			thumbs: {
				arrows: true,
				autoCenter: true,
				appendSpan: true,
				firstMargin: true,
				paddingBottom: 75,
				paddingLeft: 150
			}
		});
	});
</script>

<script class="rs-file" src="/static/js/jquery.royalslider.min.js"> </script>
<link class="rs-file" href="/static/css/royalslider.css" rel="stylesheet">

<?php
include('views/_footer_shop.tpl.php'); ?>