<ion-view view-title="Share">
<ion-content ng-controller="TakePhoto" style="text-align: center" ng-show="imgURI === undefined" class="ng-hide" ng-init="showPopup()">
	<h3>Example Photo:</h3>
    <img ng-show="imgURI === undefined" ng-src="img/hand_example.jpg" style="width: 80%;max-height: 500px;border: 1px solid #b2b2b2;border-radius: 2px;">
    <button class="button icon-left icon ion-ios-camera-outline" ng-click="takePicture()" style="background: #f66117;width: 80%">Take Picture</button>

	<button class="button icon-left icon ion-ios-information-outline" ng-click="showPopup()" style="background: #3e9611;margin-top: 5px;width: 80%">Picture Instructions</button>
	</div>
</ion-content>

<ion-content ng-show="imgURI !== undefined" class="ng-hide" style="padding: 10px" ng-controller="GetBackgrounds">
	<h2>Cool, huh?</h2>

	<div style="width: 100%;background: url('img/sun_example.jpg') no-repeat center center fixed;background-size: cover;">
		<img src="img/mask_example.png" style="width: 100%;height: 100%" />
	</div>

	Swipe left/right to change suns.

 	<div class="item item-input-inset">
   	  <button class="button icon-left icon ion-chevron-left" ng-click="takePicture()" style="background: #f66117;width: 80%">Retake Photo</button>

	  <button class="button icon-right icon ion-chevron-right" style="background: #3e9611;margin-top: 5px;width: 80%">Next</button>
    </div>
</ion-content>
</ion-view>