Untitled

<apex:page sidebar="true" standardStylesheets="false"  controller="TestController" docType="html-5.0">
<head>
    <link href="{!URLFOR($Resource.AngularMP, 'css/bootstrap.min.css')}" rel="stylesheet" />
    <link href="{!URLFOR($Resource.AngularMP, 'css/bootstrap-responsive.min.css')}" rel="stylesheet" />

        <script src="{!URLFOR($Resource.AngularMP, 'js/vendor/jquery-2.0.0.min.js')}"></script>
    <script src="{!URLFOR($Resource.AngularMP, 'js/vendor/underscore-1.4.4.min.js')}"></script>
    <script src="{!URLFOR($Resource.AngularMP, 'js/vendor/angular.1.0.6.min.js')}"></script>
    <script src="{!URLFOR($Resource.AngularMP, 'js/vendor/dropdownToggle.js')}"></script>

    <script src="{!URLFOR($Resource.AngularMP, 'js/sdk/forcetk.mobilesdk.js')}"></script>
    <script src="{!URLFOR($Resource.AngularMP, 'js/sdk/smartsync.js')}"></script>
    <script src="{!URLFOR($Resource.AngularMP, 'js/sdk/angular-force.js')}"></script>
    <script src="{!URLFOR($Resource.AngularMP, 'js/sdk/forcetk.ui.js')}"></script>

    <script>
        var app = angular.module('myApp', []);
        app.controller('MainController', function($scope) {
            $scope.nickname = 'paul';
            $scope.lat = 0;
            $scope.lon = 0;
        });
    </script>

    <script>
        function setNickname(nickname){
            alert('setting variable');
            var lat = 0;
            var long = 0;
            if (navigator.geolocation) {
                alert('we are golden');
                navigator.geolocation.getCurrentPosition(function(position){
                        alert('alert 0');
                        lat = position.coords.latitude;
                        long = position.coords.longitude;
                        alert('alert 1: ' + lat + ', ' + long);
                });
            }else{
                alert('geolocation is unsupported?');
            }
            alert('alert 2: ' + lat + ', ' + long);
            jQuery('[id$=myHiddenField]').val(nickname);
            jQuery('[id$=latField]').val(lat);
            jQuery('[id$=longField]').val(long);
            passStringToController();
        }
    </script>

    <style media="screen" type="text/css">
        body{
            background-image: url('http://iphonewalls.net/wp-content/uploads/2013/04/Grassy%20Field%20iPhone%20Wallpaper.jpg');
            background-repeat: no-repeat;
            background-position: center;
            background-attachment: fixed;
        }

        .singleField{
            width: 84%;
            margin-left: 8%;
        }

        .doubleField{
            width: 35%;
            margin-left: 10%;
        }

        .whiteText{
            color: white;
        }

        .leftText{
            margin-left: 10%;
        }

        .rightText{
            margin-right: 10%;
            margin-left: 30%;
        }

        .iosButton{
            background-color: #EEEEEE;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            border: 0px solid;
            width: 20%;
            height: 6%;
        }

        .greenButton{
            background-color: #20be2f;
            color: #FFFFFF;
        }
    </style>
</head>

<body>
    <div ng-app="myApp" ng-controller="MainController">
        <h1 style='color:white; margin-left: 8%;'><b>Add Location</b></h1>
        <span class='singleField whiteText'>Location Nickname</span><span style='color:red'>*</span><br/>
        <input type="text" ng-model="nickname" class='singleField' /><br/>
        <span class='leftText whiteText'>Rating</span><span class='rightText whiteText'>Planned Visit Date</span><br/>
        <select class='doubleField' name="thelist" onChange="combo(this, 'theinput')" ng-model='rating'>
          <option>&#9733;</option>
          <option>&#9733;&#9733;</option>
          <option>&#9733;&#9733;&#9733;</option>
          <option>&#9733;&#9733;&#9733;&#9733;</option>
          <option>&#9733;&#9733;&#9733;&#9733;&#9733;</option>
        </select><input class='doubleField' type='date' ng-model='futureDate'/><br/>
        <span class='singleField whiteText' ng-model='description'>Description</span><br/>
        <textarea rows="8" cols="50" class='singleField'></textarea><br/>
        <span class='singleField'>Add a Picture</span><br/>
        <input class='singleField' style='width:60%' type="file" capture="camera" accept="image/*" id="cameraInput" name="cameraInput" ng-model='file'/><br/>
        <span ng-bind='file'></span><br/>
        <apex:form >
            <apex:inputHidden value="{!nickname}" id="myHiddenField"/>
            <apex:inputHidden value="{!latitude}" id="latField"/>
            <apex:inputHidden value="{!longitude}" id="longField"/>
            <apex:actionFunction name="passStringToController" action="{!myMethod}" rerender="myHiddenField, latField, longField"/>
            <button class='iosButton' style='position: absolute; top: 85%; left: 5%;'>Cancel</button><button class='iosButton greenButton' onclick="setNickname('{{nickname}}'); return false;" style='position: absolute; top: 85%; right: 5%;'>Add</button>
        </apex:form>
    </div>a


</body>
</apex:page>