<!DOCTYPE html>
<html>

<head>
  <link href="//cdnjs.cloudflare.com/ajax/libs/ratchet/2.0.2/css/ratchet-theme-android.min.css" rel="stylesheet">
  <link href="//cdnjs.cloudflare.com/ajax/libs/ratchet/2.0.2/css/ratchet.min.css" rel="stylesheet">
  <link href="style.css" rel="stylesheet">
  <script src="//rawgit.com/magnumjs/mag.js/master/dist/mag.0.21.4.min.js"></script>
</head>

<body>

  <div class="hidden">
    <h1>Hello Mag.JS!</h1>
    <a target="_tab" href="https://github.com/magnumjs/mag.js">GitHub</a> From : https://github.com/ccoenraets/react-employee-directory/blob/master/iteration8
    <hr/>
  </div>

  <div id="app">
    <stuff></stuff>
    <other></other>
  </div>



  <div class="hide">

    <div id="search-bar" class="bar bar-standard bar-header-secondary">
      <input type="search" />
    </div>


    <div id="homepage">
      <div class="header"></div>
      <div class="searcher"></div>

      <div class="contenty">

        <div id="employee-list">
          <ul class="table-view">
            <li class="table-view-cell media">
              <a href="#">
                <img class="media-object small pull-left" />
                <span></span>
                <p></p>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>



    <div class="employee-area">
      <div id="employee-page">
        <div class="header"></div>

        <div class="card">
          <ul class="table-view">
            <li class="table-view-cell media">
              <img class="media-object big pull-left" />
              <h1 class="span"></h1>
              <p></p>
            </li>
            <li class="table-view-cell media phone">
              <a href="" class="push-right">
                <span class="media-object pull-left icon icon-call"></span>
                <div class="media-body"><span>Call Office</span>
                  <p></p>
                </div>
              </a>
            </li>
          </ul>
        </div>

      </div>
    </div>

    <div id="header">
      <header class="bar bar-nav">
        <a href="#"></a>
        <h1 class="title"></h1>
      </header>
    </div>
  </div>

  <script src="//rawgit.com/magnumjs/mag.js/master/dist/mag.addons.0.21.min.js"></script>
  <script src="//cdn.rawgit.com/MaxArt2501/object-observe/master/dist/object-observe.min.js"></script>


  <script src="search-bar.js"></script>
  <script src="header.js"></script>
  <script src="employeeService.js"></script>
  <script src="employee-page.js"></script>
  <script src="employeeList.js"></script>
  <script src="homepage.js"></script>


  <script src="app.js"></script>

</body>

</html>
mag.module('app', {

  controller: function(props) {

    this.selectedEmployeeId = ''
    this.page = props.page

    this.didload = function() {

      mag.route.addRoute('', function() {
        this.page = 'home'
      }.bind(this));
      mag.route.addRoute('employees/:id', function(id) {
        this.page = ''
        this.selectedEmployeeId = id;
      }.bind(this));

      mag.route.start();

    }


    this.searchHandler = function(searchKey) {
      employeeService.findByName(searchKey).then(function(employees) {
        props.searchKey = searchKey
        props.employees = employees
      })
    }

  },
  view: function(state, props) {


    state.stuff = state.page == 'home' ? Homepage({
      key: "list",
      searchHandler: state.searchHandler,
      searchKey: props.searchKey,
      employees: props.employees
    }) : null;


    state.other = state.page != 'home' ? EmployeePage({
      key: "details",
      employeeId: state.selectedEmployeeId,
      service: employeeService
    }) : null;


  }
}, {
  searchKey: '',
  employees: []
})
.content > .table-view:first-child {
    margin-top: -2px;
}
.hide {
  display:none;
}
.hidden {
    opacity: 0;
}

img {
    display: none;
}

img[src] {
   display: block;
 }
 
.media-object.big {
    width: 80px;
    height: 80px;
    border-radius: 40px;
}

.media-object.small {
    width: 50px;
    height: 50px;
    border-radius: 25px;
}

.table-view-cell h1 {
    font-size: 20px;
    font-weight: normal;
    padding: 20px 0 4px 0;
    margin: 0;
}

input[type=search] {
    border-radius: 8px;
}

.card {
    margin-top:54px;
}
var Homepage = mag.create('homepage', {
  view: function(state, props) {

    state.header = Header({
      key: 'heady',
      text: "Employee Directory",
      back: "false"
    });

    state.searcher = SearchBar({
      key: 'searchy',
      searchHandler: props.searchHandler
    });

    if (props.employees.length) {
      state.contenty = EmployeeList({
        key: 'listy',
        employees: props.employees
      });
    }
  }
})
var EmployeePage = mag.create('employee-page', {
  controller: function(props) {

    this.employee = {};

    this.getEmp = function(id) {
      props.service.findById(id).then(function(result) {
        this.employee = result;
      }.bind(this));
    }

  },
  view: function(state, props) {

    state.header = Header({
      key: 'empl',
      text: "Employee Page",
      link: 'home',
      back: "true"
    })

    if (props.employeeId) {

      state.getEmp(props.employeeId)

      state.img = {
        _src: "http://coenraets.org/apps/react-employee-directory/iteration7/pics/" + state.employee.firstName + "_" + state.employee.lastName + ".jpg"
      }

      state.span = state.employee.firstName + ' ' + state.employee.lastName

      state.p = state.employee.title

      state.phone = {
        a: {
          _href: 'tel:' + state.employee.officePhone
        },
        p: state.employee.officePhone
      }

    }

  }
})
employeeService = (function () {

    var findById = function (id) {
            var deferred = mag.deferred();
            var employee = null;
            var l = employees.length;
            for (var i = 0; i < l; i++) {
                if (employees[i].id == id) {
                    employee = employees[i];
                    break;
                }
            }
            deferred.resolve(employee);
            return deferred.promise;
        },

        findByName = function (searchKey) {
            var deferred = mag.deferred();
            var results = employees.filter(function (element) {
                var fullName = element.firstName + " " + element.lastName;
                return fullName.toLowerCase().indexOf(searchKey.toLowerCase()) > -1;
            });
            deferred.resolve(results);
            return deferred.promise;
        },

        findByManager = function (managerId) {
            var deferred = mag.deferred();
            var results = employees.filter(function (element) {
                return managerId === element.managerId;
            });
            deferred.resolve(results);
            return deferred.promise;
        },

        employees = [
            {"id": 1, "firstName": "James", "lastName": "King", "managerId": 0, "managerName": "", "reports": 4, "title": "President and CEO", "department": "Corporate", "mobilePhone": "617-000-0001", "officePhone": "781-000-0001", "email": "jking@fakemail.com", "city": "Boston, MA", "pic": "james_king.jpg", "twitterId": "@fakejking", "blog": "http://coenraets.org"},
            {"id": 2, "firstName": "Julie", "lastName": "Taylor", "managerId": 1, "managerName": "James King", "reports": 2, "title": "VP of Marketing", "department": "Marketing", "mobilePhone": "617-000-0002", "officePhone": "781-000-0002", "email": "jtaylor@fakemail.com", "city": "Boston, MA", "pic": "julie_taylor.jpg", "twitterId": "@fakejtaylor", "blog": "http://coenraets.org"},
            {"id": 3, "firstName": "Eugene", "lastName": "Lee", "managerId": 1, "managerName": "James King", "reports": 0, "title": "CFO", "department": "Accounting", "mobilePhone": "617-000-0003", "officePhone": "781-000-0003", "email": "elee@fakemail.com", "city": "Boston, MA", "pic": "eugene_lee.jpg", "twitterId": "@fakeelee", "blog": "http://coenraets.org"},
            {"id": 4, "firstName": "John", "lastName": "Williams", "managerId": 1, "managerName": "James King", "reports": 3, "title": "VP of Engineering", "department": "Engineering", "mobilePhone": "617-000-0004", "officePhone": "781-000-0004", "email": "jwilliams@fakemail.com", "city": "Boston, MA", "pic": "john_williams.jpg", "twitterId": "@fakejwilliams", "blog": "http://coenraets.org"},
            {"id": 5, "firstName": "Ray", "lastName": "Moore", "managerId": 1, "managerName": "James King", "reports": 2, "title": "VP of Sales", "department": "Sales", "mobilePhone": "617-000-0005", "officePhone": "781-000-0005", "email": "rmoore@fakemail.com", "city": "Boston, MA", "pic": "ray_moore.jpg", "twitterId": "@fakermoore", "blog": "http://coenraets.org"},
            {"id": 6, "firstName": "Paul", "lastName": "Jones", "managerId": 4, "managerName": "John Williams", "reports": 0, "title": "QA Manager", "department": "Engineering", "mobilePhone": "617-000-0006", "officePhone": "781-000-0006", "email": "pjones@fakemail.com", "city": "Boston, MA", "pic": "paul_jones.jpg", "twitterId": "@fakepjones", "blog": "http://coenraets.org"},
            {"id": 7, "firstName": "Paula", "lastName": "Gates", "managerId": 4, "managerName": "John Williams", "reports": 0, "title": "Software Architect", "department": "Engineering", "mobilePhone": "617-000-0007", "officePhone": "781-000-0007", "email": "pgates@fakemail.com", "city": "Boston, MA", "pic": "paula_gates.jpg", "twitterId": "@fakepgates", "blog": "http://coenraets.org"},
            {"id": 8, "firstName": "Lisa", "lastName": "Wong", "managerId": 2, "managerName": "Julie Taylor", "reports": 0, "title": "Marketing Manager", "department": "Marketing", "mobilePhone": "617-000-0008", "officePhone": "781-000-0008", "email": "lwong@fakemail.com", "city": "Boston, MA", "pic": "lisa_wong.jpg", "twitterId": "@fakelwong", "blog": "http://coenraets.org"},
            {"id": 9, "firstName": "Gary", "lastName": "Donovan", "managerId": 2, "managerName": "Julie Taylor", "reports": 0, "title": "Marketing Manager", "department": "Marketing", "mobilePhone": "617-000-0009", "officePhone": "781-000-0009", "email": "gdonovan@fakemail.com", "city": "Boston, MA", "pic": "gary_donovan.jpg", "twitterId": "@fakegdonovan", "blog": "http://coenraets.org"},
            {"id": 10, "firstName": "Kathleen", "lastName": "Byrne", "managerId": 5, "managerName": "Ray Moore", "reports": 0, "title": "Sales Representative", "department": "Sales", "mobilePhone": "617-000-0010", "officePhone": "781-000-0010", "email": "kbyrne@fakemail.com", "city": "Boston, MA", "pic": "kathleen_byrne.jpg", "twitterId": "@fakekbyrne", "blog": "http://coenraets.org"},
            {"id": 11, "firstName": "Amy", "lastName": "Jones", "managerId": 5, "managerName": "Ray Moore", "reports": 0, "title": "Sales Representative", "department": "Sales", "mobilePhone": "617-000-0011", "officePhone": "781-000-0011", "email": "ajones@fakemail.com", "city": "Boston, MA", "pic": "amy_jones.jpg", "twitterId": "@fakeajones", "blog": "http://coenraets.org"},
            {"id": 12, "firstName": "Steven", "lastName": "Wells", "managerId": 4, "managerName": "John Williams", "reports": 0, "title": "Software Architect", "department": "Engineering", "mobilePhone": "617-000-0012", "officePhone": "781-000-0012", "email": "swells@fakemail.com", "city": "Boston, MA", "pic": "steven_wells.jpg", "twitterId": "@fakeswells", "blog": "http://coenraets.org"}
        ];

    // The public API
    return {
        findById: findById,
        findByName: findByName,
        findByManager: findByManager
    };

}());
var Header = mag.create('header', {
  view: function(state, props) {
    state.a = {
      _class: "icon icon-left-nav pull-left" + (props.back === "true" ? "" : " hidden"),
      _href: '#'
    }
    state.h1 = props.text
  }
})
var EmployeeList = mag.create('employee-list', {
  view: function(state, props) {

    state.li = props.employees.map(function(employee) {

      return {
        a : {_href: "#employees/" + employee.id },
        img: {
          _src: "http://coenraets.org/apps/react-employee-directory/iteration7/pics/" + employee.firstName + "_" + employee.lastName + ".jpg"
        },
        span: employee.firstName + ' ' + employee.lastName,
        p: employee.title
      }

    });
  }
})
var SearchBar = mag.create('search-bar', {
  controller: function(props) {

    // init
    this.willload = function() {
      props.searchHandler('');
    };

  },
  view: function(state, props) {

    state.input = {
      _config: function(node){
        node.focus();
      },
      _onInput: function() {
        props.searchHandler(this.value);
      }
    }
  }
})