<html>
<head>
<meta charset="utf-8">
<meta  name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width">
<title></title>
<!--local lib-->
<!--<script src="lib/ionic/js/ionic.bundle.js"></script>-->
<!--cloud lib-->
<script src="https://code.ionicframework.com/1.3.2/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above-->
<!--<link href="css/ionic.app.css" rel="stylesheet">-->
<!--local lib-->
<!--<link href="lib/ionic/css/ionic.css" rel="stylesheet">-->
<!--cloud lib-->
<link href="https://code.ionicframework.com/1.3.2/css/ionic.css" rel="stylesheet">
<!--ionic custom styling-->
<style>
  .platform-ios .manual-ios-statusbar-padding{padding-top:20px}.manual-remove-top-padding{padding-top:0}.manual-remove-top-padding .scroll{padding-top:0!important}.list.card.manual-card-fullwidth,ion-list.manual-list-fullwidth div.list{margin-left:-10px;margin-right:-10px}.list.card.manual-card-fullwidth>.item,ion-list.manual-list-fullwidth div.list>.item{border-radius:0;border-left:0;border-right:0}.show-list-numbers-and-dots ul{list-style-type:disc;padding-left:40px}.show-list-numbers-and-dots ol{list-style-type:decimal;padding-left:40px}
</style>
</head>  
<body ng-app="app" animation="slide-left-right-ios7" >
  <div>
    <div>
      <ion-nav-bar class="bar-stable">
        <ion-nav-back-button></ion-nav-back-button>
      </ion-nav-bar>
      <ion-nav-view></ion-nav-view>
    </div>
  </div>
  <script id="home.html" type="text/ng-template">
    <ion-view title="Home" id="page1">
  <ion-nav-buttons side="left" class="has-header">
    <button class="button icon ion-log-in" 
      ng-click="doLogin()" ng-hide="loggedin"> Login</button>
    <button class="button icon ion-log-out" 
      ng-click="doLogout()" ng-show="loggedin"> Logout</button>
  </ion-nav-buttons>
  <ion-nav-buttons side="right" class="has-header">
    <button class="button button-icon icon ion-plus-circled" 
      ng-click="showProjectModal()" ng-show="loggedin"></button>
  </ion-nav-buttons>    
      <ion-content padding="true" class="has-header">
        <div ng-hide="loggedin" 
          style="text-align:center;font-size:600%;margin-top: 50%;
    left: 50%;">
          <i class="icon ion-locked"></i>
        </div>
        <div ng-show="loggedin"
          style="text-align:center;font-size:600%;margin-top: 50%;
    left: 50%;">      
          <i class="icon ion-unlocked"></i>
        </div>
      </ion-content>
    </ion-view>
  </script>
  <script>
/*create js object app, bind to html app, use ionic framework*/    
var app=angular.module('app',['ionic']);
/******************************/
/*define CONTROLLERS & CONFIGS*/
/******************************/      
/*define app.controller methods*/    
app.controller('homeCtrl',['$scope',function($scope){
  $scope.loggedin=false;
  $scope.doLogin=function(){$scope.loggedin=true}
  $scope.doLogout=function(){$scope.loggedin=false}
  
}]); 
/*define app.config method*/    
app.config(function($stateProvider,$urlRouterProvider){
  $stateProvider.state('home',{url:'/page1',templateUrl:'home.html',controller:'homeCtrl'});
  $urlRouterProvider.otherwise('/page1')
});
/************************/
/*define SYSTEM SETTINGS*/
/************************/
app.config(function($ionicConfigProvider, $sceDelegateProvider){
  $sceDelegateProvider.resourceUrlWhitelist([ 'self','*://www.youtube.com/**', '*://player.vimeo.com/video/**']);
})
app.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }
  });
});

/*
  This directive is used to disable the "drag to open" functionality of the Side-Menu
  when you are dragging a Slider component.
*/
app.directive('disableSideMenuDrag', ['$ionicSideMenuDelegate', '$rootScope', function($ionicSideMenuDelegate, $rootScope) {
    return {
        restrict: "A",  
        controller: ['$scope', '$element', '$attrs', function ($scope, $element, $attrs) {

            function stopDrag(){
              $ionicSideMenuDelegate.canDragContent(false);
            }

            function allowDrag(){
              $ionicSideMenuDelegate.canDragContent(true);
            }

            $rootScope.$on('$ionicSlides.slideChangeEnd', allowDrag);
            $element.on('touchstart', stopDrag);
            $element.on('touchend', allowDrag);
            $element.on('mousedown', stopDrag);
            $element.on('mouseup', allowDrag);

        }]
    };
}]);

/*
  This directive is used to open regular and dynamic href links inside of inappbrowser.
*/
app.directive('hrefInappbrowser', function() {
  return {
    restrict: 'A',
    replace: false,
    transclude: false,
    link: function(scope, element, attrs) {
      var href = attrs['hrefInappbrowser'];

      attrs.$observe('hrefInappbrowser', function(val){
        href = val;
      });
      
      element.bind('click', function (event) {

        window.open(href, '_system', 'location=yes');

        event.preventDefault();
        event.stopPropagation();

      });
    }
  };
});
  </script>
  </body>
</html>