<?php

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

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

$showalertbar = false;

if (isset($_GET['follow'])) {
	$showalertbar = true;
} else {
	$showalertbar = false;
}

$showalertbaralready = false;
if (isset($_GET['alreadyfollowing'])) {
	$showalertbaralready = true;
} else {
	$showalertbaralready = false;
}

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

?>

<script type="text/javascript" src="/static/js/jQuery/js/jquery.lightbox.js" defer> </script>
<link rel="stylesheet" type="text/css" href="/static/js/jQuery/css/jquery.lightbox.css" media="screen" defer />

<style type="text/css">
.spacer { padding-top: 53px; }
button { height:32px; margin-top:-3px; }
.btn {
	padding: 11px 16px;
}
.btn-blue {
	border-radius: 50px;
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
}
.btn-blue {
	border-color: #000 !important;
	color: #FFF;
	background: #000 !important;
}
.btn-blue:hover {
	background:#f11303 !important;
}
#footer {
    border-top: 0px solid #d4d4d4;
    background: #FFF;
    padding: 0px 0 0 0;
}
.main-footer { display:none; }

img.bgprofile {
	height: 290px;
	width: 100% !important;
	position: absolute;
	left: 0;
	top: 0;
	right:0;
	/*max-width: 560px;*/
	-webkit-filter: blur(75px); /* Safari 6.0 - 9.0 */
	filter: blur(75px);
}

.fancybox-next span {
	right: 5px;
	position: fixed;
}
.fancybox-prev span {
	left: 5px;
	position: fixed;
}
.fancybox-nav span {
	visibility: visible;
}
a.fancybox-nav.fancybox-next {
	position: fixed;
	right: 0px;
	width: 25px;
}
a.fancybox-nav.fancybox-prev {
	position: fixed;
	left: 0px;
	width: 25px;
}

.makeintro a {
	background:#eee; 
	padding:5px 15px;
	font-size:15px;
	border-radius:4px;
}

/* ####################################### */
/* ########## 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;
}

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; }
	
	h3 {
		font-family: Montserrat,'Open Sans',Raleway,Helvetica,Verdana,sans-serif;
		font-size:48px;
		text-shadow:0px 1px 0px #fff;
	}
	
	.alertbar a, .alertbar a:active, .alertbar a:link, .alertbar a:visited {
		background: rgba(255,255,255,.7);
		padding:3px 10px;
		border-radius: 50px;
		-webkit-border-radius: 50px;
		-moz-border-radius: 50px;
	}
	.alertbar a:hover {
		background: #00A1FE;
		color:#fff;
	}
	
	.fa-chevron-down{
		transform: rotate(0deg);
		transition: transform .3s linear;
	}

	.fa-chevron-down.open{
		transform: rotate(180deg);
		transition: transform .3s linear;
	}	

/* ############################################################################## */
/* ##############################  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: 586px) {
	.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: 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: 375px) {
	.thumb-wrapper .thumb img {
        width: 100px;
        height: 80px;

    }
    .qrfixedbottom { 
		padding-bottom:5px;
	}
/*	.scrollup {
		bottom: 120px;
	}*/
}

</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>-->

<?php if($showalertbar == true){ ?>
<div class="alertbar" style="display:nonex; background:#dd1000; color:#fff; height:40px; text-align: center; 
	font-weight:300; font-size:15px; line-height:40px; margin-bottom:0px; 
	font-family:Montserrat,'Open Sans',Raleway,Helvetica,Verdana,sans-serif;">
	<a href="#login" class="loginpop" style="color:#fff; font-weight:500">Login</a> or 
	<a href="/auth/join?ref=<?= $user['refcode'] ?>" class="" style="color:#fff; 
	font-weight:500">Sign up</a> to follow this account.
</div>
<?php } ?>

<?php if($showalertbaralready == true){ ?>
<div class="alertbar" style="display:nonex; background:#dd1000; color:#fff; height:50px; text-align: center; 
	font-weight:300; font-size:15px; line-height:50px; margin-bottom:0px; 
	font-family:Montserrat,'Open Sans',Raleway,Helvetica,Verdana,sans-serif;">
	You are following this account. &nbsp; <a href="/profile/<?= $user['user_slug']; ?>" style="font-weight:700;">Ok</a><!--are now following this account.-->
</div>
<?php } ?>

<?php if(isset($_GET['intro'])){ ?>
<div class="alertbar" style="display:nonex; background:#dd1000; color:#fff; height:50px; text-align: center; 
	font-weight:300; font-size:15px; line-height:50px; margin-bottom:0px; 
	font-family:Montserrat,'Open Sans',Raleway,Helvetica,Verdana,sans-serif;">
	Your intros have been sent... &nbsp; <a href="/profile/<?= $user['user_slug']; ?>" style="font-weight:700;">Ok</a><!--are now following this account.-->
</div>
<?php } ?>

<!--<div style="height:35px; width:35px; background:none; position:absolute; top: 170px; left:10px;">
	<a href="/members" style="float:left; z-index:-9999999999999999999999">
		<img src="/static/images/icons/back_arrow_button.png" alt="<" style="height:25px; width:25px; 
		margin-top:-5px; margin-right:7px;" align="middle"></a>
</div>-->

<!-- PAGE CONTAINER WITH MARGINS -->
    <div class="container_12 clearfix" style="background:#fff;">

        <div class="grid_12 marked-category" style="padding-top:0px;">
			<form method="POST" action="">
			<h2 style="font-family:Montserrat,'Open Sans',Raleway,Helvetica,Verdana,sans-serif;
				font-weight:300; border-bottom:1px solid #eee; padding-bottom:7px; font-size:16px;">
				<!--<a href="/members"><img src="/static/images/icons/directory_icon_cool.png" alt="All" 
					style="height:30px; margin-top:-3px" /></a> --><a href="/profile/myfollowers"><img 
					src="/static/client/mob_icon.gif" 
					alt="Mobs" style="height:22px; margin-top:-3px"></a> My Mob/Followers (<?= count($user['followers']) ?>):
				
				<div class="makeintrox" style="float:right; font-size:14px">
					<a href="/news" style="color:#000;" title="Click to view sent intros">Make Intros</a>
					<a href="#intros" class="loginpop" title="Making Intros"><img 
					src="/static/client/info_icon_black.png" alt="i" 
					style="height:22px; margin-top:-3px; margin-left:3px"></a>
				</div>
			</h2>
			<?php
			foreach ($user['followers'] as $fuser) {
				echo "<div style='height:auto; width:auto; padding:10px 0; border-bottom:1px solid #eee;
				position:relative; background:none;'>
					<div style='float:left; display:inline-block; width:102px; height:102px;
					overflow:hidden; background:none; margin:0 10px 0 0'>
						<a href='/profiles/{$fuser['user_slug']}'>
						<img src='" . getThumb($fuser['image']) . "'
						onerror=\"this.src='/static/images/users/default-avatar.jpg'\"
						style='object-fit:cover; 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='height:102px; line-height:102px; position:relative; 
					float:left; font-family:Montserrat,Open Sans,Raleway,Helvetica,Verdana,sans-serif;'>
						<a href='/profiles/{$fuser['user_slug']}'><b>{$fuser['name']}</b></a> 
						<span style='color:#ccc'>({$fuser['id']})</span> 					
					</div>
					<div style='position:absolute; right:10px; width:20px; background:none; line-height:102px;
					height:102px;'>
					<input class='txt' type='checkbox' name='invited_users[]' value='{$fuser['id']}' 
					style='width:20px;'>
					</div>
					<div style='float:left; display:none;'><br />{$fuser['project_count']} projects<br />
						{$fuser['avg_rating_received']} average rating
					</div>
					<div class='clear'></div>
					</div>";
			}
			?>
			<br />
			<div style="text-align:right;">
				<input type="hidden" name="user_id" value="<?= $user['id'] ?>" />
				<?php if($_SESSION['user']['id']===$user['id']) { ?>
				<input type="submit" class="btn btn-blue btn-buck-group" value="Send Intros" />
				<?php } ?>
			</div>
			</form>
		</div>
		<!-- END OF FOLLOWERS COLUMN/BLOCK -->
		
		<!--<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><!-- FULL WIDTH CONTAINER -->

<script type="text/javascript">
	$(".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($) {
	$('.showqrcoderight').click(function(e) {
		//$(".AccordionPanelContent span").css("background-color", "white");
		$('.showqrcodeleft').css("background-color", "#eeeeee");
		$('.showqrcodeleft').css("color", "#aaaaaa");
		$('.showqrcoderight').css("background-color", "#ffffff");
		$('.showqrcoderight').css("color", "#000000");
		$('.qrcodeleft').fadeOut('slow', function() {
			$('.qrcoderight').fadeIn('slow');
		});
	});
	
	$('.showqrcodeleft').click(function(e) {
		$('.showqrcodeleft').css("background-color", "#ffffff");
		$('.showqrcodeleft').css("color", "#000000");
		$('.showqrcoderight').css("background-color", "#eeeeee");
		$('.showqrcoderight').css("color", "#aaaaaa");
		$('.qrcoderight').fadeOut('slow', function() {
			$('.qrcodeleft').fadeIn('slow');
		});
	});
	
	$('#chevron_pp').click(function () {
		$("#chevron_pp").toggleClass('fa-chevron-down fa-chevron-down open');
		//$("#pp_inputs").toggle();
		$("#pp_inputs").slideToggle();
	});

	$('#chevron_ppp').click(function () {
		$("#chevron_pp").toggleClass('fa-chevron-down fa-chevron-down open');
		//$("#pp_inputs").toggle();
		$("#pp_inputs").slideToggle();
	});
	
	// MODAL SLIDE UP
	$('#openGASettings,#closeGASettings').click(function () {
		//$("#dark_overlay").toggle("darkoverlay");
		if ($("#dark_overlay").hasClass('darkoverlay2')) {
			$("#dark_overlay").toggleClass('darkoverlay2');
		} else {
			$("#dark_overlay").toggleClass('darkoverlay2');
		}
		$('#ga_slide_up').slideToggle({
			direction: "up"
		}, 300);
		$(this).toggleClass('closeGASettings');
		//
	}); // end click
	
    $('#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
        }
    });
    
	$('.pleaselogin').click(function () {
		alert('Please login to do that...');
	});   
});
</script>

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

<div style="display:none;">
	<div id="shareqrcode" class="" style="max-width:600px; background:none !important;">
		<div class="overlay-bl-bg"></div>
		<div class="container_6 pop-content" style="background:none !important;">
			<div class="" style="background:none !important;">
				<div class="form login-form" style="background:none !important; -webkit-border-radius: 8px;
				-moz-border-radius: 8px; border-radius: 8px; width:100% !important">
					<h3 class="rs title-form" style="text-align:center"></h3>
					<!-- CONTENT CONTAINER STARTS HERE -->
					<div class="box-white" style="background:#fff; border:0px; /*max-height:350px;*/
						max-height:450px; padding:15px 20px 0; overflow:hidden; font-size:15px;
						text-align:left; line-height:22px; font-weight:300; margin-bottom:0 !important">

						<p class="rs" style="font-size:15px; line-height:24px; font-weight:600; text-align:left;">
								
							<div style="margin-bottom:10px; text-align:center;">
								<span style="font-size:19px; font-weight:600;"><img 
								src="/static/images/icons/link_icon.png" alt="link" 
								style="height:20px; margin-top:-3px" align="absmiddle"> Join this Account's Mob</span>
							</div>
							
							<img src="/3rdparty/phpqrcode/follow/<?= $user['user_slug'] ?>.png"
							alt="QR Code" style="width:125px; margin:4px 10px 0 0; border:1px solid #eee;" 
							align="left" />
								
							<span style="font-size:15px; font-weight:400;">Scan the QR Code with your phone&rsquo;s
							camera or <a href="/r/<?= $user['refcode'] ?>" style="font-weight:600;">tap here</a>.
							(Tip: long-press QR Code image to save)</span>				

						<br /><br />
						<textarea style="width:96%; min-height:25px; margin-top:10px; margin-bottom:3px; font-size:17px;
                        text-align:left; padding:10px 8px 12px; border:1px solid #ccc; font-weight:600;
                        -moz-border-radius: 5px; border-radius: 5px; -webkit-border-radius: 5px; background:#fff;
						color:#f11303;" onclick="this.focus();this.select()">https://flipmob.com/r/<?= $user['refcode'] ?></textarea>
							
							<!--<a href="/loyalty" title="ChattrBox Loyalty and Rewards"
								style="font-weight:600; color:#2996cc">Learn more
								<i class="fa fa-angle-right" aria-hidden="true"></i></a>-->
							<!--What if the entire Internet had a Loyalty + Rewards system?
							Companies, Businesses, Brands &amp; Influencers are making billions.
							We created ChattrBox to help the ones that truly care give a little
							something more back.-->
						</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<!-- ######################################### -->
<!-- ####           SHARE MODAL          ##### -->
<!-- ######################################### -->
<div id="ga_slide_up" style="display:none; z-index: 51; position:fixed; bottom:0; left:0; width:100%;
	height:500px; margin-bottom:-45px; background:rgba(0,0,0,.85); -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; z-index:9999;">

	<!-- ################################### -->
	<!-- ####### TOP MODAL BAR AREA ####### -->
	<!-- ################################### -->
	<div style="height:50px; text-align:center; position:relative;">
		<div style="position:absolute; right:0; float:right; margin-right:5px; margin-top:10px; width:30px; height:30px; text-align:center; padding:5px; background:none;" id="closeGASettings">
			<a href="#" class="closeGASettings" style="color:#fff;"><img 
			src="/static/images/icons/close_x_white.png" style="height:25px;" /></a>
		</div>
		<div style="position:relative; float: none; display:inline-block; width:300px; overflow: hidden; height:40px; line-height:50px; background:none; font-size:16px; font-weight:700; letter-spacing:1px; color:#fff; text-align:center; padding-top:5px; font-family:Montserrat,Raleway,'Open Sans',Helvetica,Verdana,sans-serif;">
			SHARE OR JOIN THIS FLIPMOB
		</div>
	</div>

	<!-- ############################################ -->
	<!-- #######    GENERAL MODAL SETTINGS    ####### -->
	<!-- ############################################ -->
	<div style="padding: 0px 10px 60px;  margin:0 auto; overflow:hidden; /*max-height:330px;*/ background:none; 
	max-width:600px; text-align:center">
	
		<div style="font-size:17px; color:#ccc;">
			<img src="/static/images/icons/qr_scanner_icon.png" alt="Scan"
			style="height:27px; margin-right:3px;" /> Scan with your phone&rsquo;s camera or
			<a href="/r/<?= $user['refcode'] ?>" style="font-weight:600;">tap here</a>
			to join my flipmob.<!--<span style="color:#ff8692"></span>-->
			<br /><br />
			<img src="/3rdparty/phpqrcode/referrals/user_<?= $user['id'] ?>.png" alt="absmiddle"
			style="height:140px; margin-top:0px; margin-right:0px; border:0px solid #ddd;
			box-shadow: 0 3px 10px rgb(0 0 0 / 20%);">
			<br /><br />
			<!--<span style="font-size:15px;">
				<a href="/referrals" title="Referrals" style="font-weight:600;">flipmob.com/referrals</a> 
			(Tip: long-press QR Code to save)</span>
			<br /><br />-->

			<div class="box-grayxxx" style="padding-bottom: 15px; margin-top:10px; color:#aaa;">
				<img src="/static/images/icons/link_icon_white.png" alt="link" 
				style="height:20px; margin-top:-3px" align="absmiddle"> SHARE LINK
				<br>
				<textarea style="width:96%; max-width:400px; height:auto; margin-top:5px; margin-bottom:3px; 
					font-size:15px; text-align:left; padding:10px 8px 8px; border:1px solid #00A1FE; font-weight:400;
                    -moz-border-radius: 50px; border-radius: 50px; -webkit-border-radius: 50px; background:none;
                    color:#fff;" rows="1"
                    onclick="this.focus();this.select()">https://flipmob.com/r/<?= $user['refcode'] ?></textarea>
				<br>
				<div style="display:nonex; font-weight:300; font-size:12px; line-height:17px; color:#aaa">
					click/tap-to-copy
				</div>
				<div style="position:absolute; right:10px; bottom:30; height:30px; width:30px;">
					<a href="sms:?&amp;body=Hi. Connect with me at FlipMob.com at 
					https://flipmob.com/r/<?= $user['user_slug'] ?>" 
					title="Click here to share by text" class="texticon"><i class="fa fa-share"></i></a>
				</div>
			</div>

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

		<br /><br /><br /><br /><br /><br />
	</div>
	<div style="display:none; position:absolute; bottom:0; left:0; width:30px; height:30px; float:left; 
	text-align:center; padding:10px; background:none;" id="closeGASettings">
		<a href="#" class="closeGASettings" style="color:#fff;"><img 
		src="/static/images/icons/close_x_white.png" style="height:25px;" /></a>
	</div>
</div>

<!-- ################################################################################## -->
<!-- ########################           SHARE MODAL           ######################### -->
<!-- ################################################################################## -->
<div id="ga_slide_up2" style="display:none; z-index: 51; position:fixed; bottom:0; left:0; width:100%;
	height:530px; margin-bottom:-45px; background:#fff; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px;">

	<!-- ################################### -->
	<!-- ####### TOP MODAL BAR AREA ####### -->
	<!-- ################################### -->
	<div style="height:50px; text-align:center; position:relative;">
		<div style="position:absolute; right:0; float:right; margin-right:5px; margin-top:10px; width:30px; height:30px; text-align:center; padding:5px; background:none;" id="closeGASettings">
			<a href="#" class="closeGASettings" style="color:#fff;"><img 
			src="/static/images/icons/close_x_black.png" style="height:25px;" /></a>
		</div>
		<div style="position:relative; float: none; display:inline-block; width:300px; overflow: hidden; height:40px; line-height:50px; background:none; font-size:16px; font-weight:700; letter-spacing:1px; color:#222; text-align:center; padding-top:5px; font-family:Montserrat,Raleway,'Open Sans',Helvetica,Verdana,sans-serif;">
			SHARE THIS CHALLENGE
		</div>
	</div>

	<!-- ############################################ -->
	<!-- #######    GENERAL MODAL SETTINGS    ####### -->
	<!-- ############################################ -->
	<div style="padding: 0px 10px 60px;  margin:0 auto; overflow:hidden; /*max-height:330px;*/ background:none; 
	max-width:600px; text-align:center">
	
		<div style="font-size:17px;">
		
			<span style="font-size:15px;">Share your Challenge(s) and you&rsquo;ll receive 50% of 
				the Prize Value if someone wins. Learn more at
				<a href="/referrals" title="Referrals" style="font-weight:600;">playpassphrase.com/referrals</a> 
			(Tip: long-press QR Code to save)</span>
			<br /><br />


			<div class="box-gray" style="padding-bottom: 15px; margin-top:10px">
				<img src="/static/images/icons/link_icon.png" alt="link" 
				style="height:20px; margin-top:-3px" align="absmiddle"> SHARE LINK
				<br>
				<textarea style="width:90%; height:48px; margin-top:3px; margin-bottom:3px; font-size:17px;
                        text-align:left; padding:10px 8px 8px; border:1px solid #ccc; font-weight:300;
                        -moz-border-radius: 5px; border-radius: 5px; -webkit-border-radius: 5px; background:#fff;
                        color:#333;" rows="3"
                        onclick="this.focus();this.select()">https://playpassphrase.com/challenges/<?= $challenge['id'] ?></textarea>
				<br>
				<div style="display:none; font-weight:300; font-size:11px; line-height:17px;">
					Note: r = referral + your ID &amp; s = solution + the Solution ID
				</div>
			</div>

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

		<br /><br /><br /><br /><br /><br />
	</div>
	<div style="display:none; position:absolute; bottom:0; left:0; width:30px; height:30px; float:left; text-align:center; padding:10px;
		background:none;" id="closeGASettings">
	<a href="#" class="closeGASettings" style="color:#fff;"><img src="/static/images/icons/close_x_black.png" style="height:25px;" /></a>
	</div>
</div>

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