philipbreau/gist:7555046

## gistfile1.html
<!DOCTYPE html>
<html>
    <head>
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
      <script type="text/javascript" src="http://bridgeit.github.io/bridgeit.js/src/bridgeit.js"></script>
    </head>
    <body>
        <style>
        .button{
            height: 80px;
            margin: 10px 0;
            padding: 10px;
            width: 100%;
            border: 1px solid #333;
            background: linear-gradient(to bottom, #EEE 0%, #DDD 100%);
            text-decoration: none;
            color: #333;
            font-size: 16px;
            line-height: 60px;
            font-weight: bold;
            display: block;
            box-sizing: border-box;
        }
        </style>
        <script type="text/javascript">
        var uploadServiceURL = 'http://api.bridgeit.mobi/echo/';
        function onAfterPhotoCapture(event){
            var cameraBtn = document.getElementById('cameraBtn');
            if (event.preview)  {
                //show the thumbnail preview
                var thumbnailElem = document.createElement("img");
                thumbnailElem.setAttribute('src', event.preview);
                thumbnailElem.style.float = 'right';
            }
            if (event.response)  {
                //show the image
                var photoURL = event.response;
                var imageLink = document.createElement('a');
                imageLink.setAttribute('class','button');
                imageLink.innerHTML = 'Click to view the photo';
                imageLink.setAttribute('href', photoURL);
                //set the thumbnail img as the link child
                imageLink.appendChild(thumbnailElem);
                //append the new link after the camera btn
                cameraBtn.parentNode.appendChild(imageLink);
            }
        }
        </script>
        <button id='cameraBtn' class="button" type="button"
          onclick="bridgeit.camera('cameraBtn', 'onAfterPhotoCapture', {postURL: uploadServiceURL + 'blob/'});">
          Take a Photo</button>

    </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
	<script type="text/javascript" src="http://bridgeit.github.io/bridgeit.js/src/bridgeit.js"></script>
	</head>
	<body>
	<style>
	.button{
	height: 80px;
	margin: 10px 0;
	padding: 10px;
	width: 100%;
	border: 1px solid #333;
	background: linear-gradient(to bottom, #EEE 0%, #DDD 100%);
	text-decoration: none;
	color: #333;
	font-size: 16px;
	line-height: 60px;
	font-weight: bold;
	display: block;
	box-sizing: border-box;
	}
	</style>
	<script type="text/javascript">
	var uploadServiceURL = 'http://api.bridgeit.mobi/echo/';
	function onAfterPhotoCapture(event){
	var cameraBtn = document.getElementById('cameraBtn');
	if (event.preview) {
	//show the thumbnail preview
	var thumbnailElem = document.createElement("img");
	thumbnailElem.setAttribute('src', event.preview);
	thumbnailElem.style.float = 'right';
	}
	if (event.response) {
	//show the image
	var photoURL = event.response;
	var imageLink = document.createElement('a');
	imageLink.setAttribute('class','button');
	imageLink.innerHTML = 'Click to view the photo';
	imageLink.setAttribute('href', photoURL);
	//set the thumbnail img as the link child
	imageLink.appendChild(thumbnailElem);
	//append the new link after the camera btn
	cameraBtn.parentNode.appendChild(imageLink);
	}
	}
	</script>
	<button id='cameraBtn' class="button" type="button"
	onclick="bridgeit.camera('cameraBtn', 'onAfterPhotoCapture', {postURL: uploadServiceURL + 'blob/'});">
	Take a Photo</button>

	</body>
	</html>