orlybg/jsbin.ciwomeve.html

## jsbin.ciwomeve.html
<!DOCTYPE html>
<html>
    <head>
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
        <meta charset="utf-8">
        <title>DBdiff!</title>
        <meta name="description" content="Database diff tool">
        <link rel="stylesheet" href="dbdiff.css">


    </head>
    <body>
        <header>
            <h1>DBdiff Tool</h1>
        </header>
        <nav></nav>
        <section id='dashboard'>
            <div>
                <span>Host 1:</span>
                <select id='host-select-1'></select>
                <button id='host-select-1-btn'>Select Host</button>
            </div>
            <div>
                <span>Host 2:</span>
                <select id='host-select-2'></select>
                <button id='host-select-2-btn'>Select Host</button>
            </div>
        </section>

             <footer></footer>
        <script>
            $(function() {
                //alert('yeah!');
                DbDiff.init();
                DbDiff.populateHostList();
            });
        </script>
    </body>
</html>

## jsbin.ciwomeve.js
var s,
DbDiff = {

  settings: {
    hostList : ['SELECT HOST', 'tuna.letstalk.com', 'foo.bar'],
    $hostSelect1: $('#hostSelect1'),
    $hostSelect2: $('#hostSelect2'),

    $host1Btn:    $('#host-select-1-btn')
  },


  init: function init() {
      s = this.settings;
      //alert('foo');
      this.bindUIActions();
      this.populateHostLists();
  },
  bindUIActions: function bindUIActions() {
    //alert('bar');
     s.$host1Btn.on("click", function() {
      DbDiff.selectHostAction();
    });

  },
  selectHostAction: function selectHostAction() {
    alert('baz');

  },
  populateHostLists: function populateHostLists() {
      var options = [],
          $hosts = $('#host-select-1, #host-select-2');

      $.each($hosts, function(idx, host) {
            $.each(s.hostList, function(key, value) {
                var $host = $(host);
                $host.append($("<option></option>").attr("value", value).text(value));
            });
        });


  }


};

(function() {
  DbDiff.init();
  //DbDiff.populateHostLists();
})();
	<!DOCTYPE html>
	<html>
	<head>
	<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
	<meta charset="utf-8">
	<title>DBdiff!</title>
	<meta name="description" content="Database diff tool">
	<link rel="stylesheet" href="dbdiff.css">


	</head>
	<body>
	<header>
	<h1>DBdiff Tool</h1>
	</header>
	<nav></nav>
	<section id='dashboard'>
	<div>
	<span>Host 1:</span>
	<select id='host-select-1'></select>
	<button id='host-select-1-btn'>Select Host</button>
	</div>
	<div>
	<span>Host 2:</span>
	<select id='host-select-2'></select>
	<button id='host-select-2-btn'>Select Host</button>
	</div>
	</section>

	<footer></footer>
	<script>
	$(function() {
	//alert('yeah!');
	DbDiff.init();
	DbDiff.populateHostList();
	});
	</script>
	</body>
	</html>
	var s,
	DbDiff = {

	settings: {
	hostList : ['SELECT HOST', 'tuna.letstalk.com', 'foo.bar'],
	$hostSelect1: $('#hostSelect1'),
	$hostSelect2: $('#hostSelect2'),

	$host1Btn: $('#host-select-1-btn')
	},


	init: function init() {
	s = this.settings;
	//alert('foo');
	this.bindUIActions();
	this.populateHostLists();
	},
	bindUIActions: function bindUIActions() {
	//alert('bar');
	s.$host1Btn.on("click", function() {
	DbDiff.selectHostAction();
	});

	},
	selectHostAction: function selectHostAction() {
	alert('baz');

	},
	populateHostLists: function populateHostLists() {
	var options = [],
	$hosts = $('#host-select-1, #host-select-2');

	$.each($hosts, function(idx, host) {
	$.each(s.hostList, function(key, value) {
	var $host = $(host);
	$host.append($("<option></option>").attr("value", value).text(value));
	});
	});


	}


	};

	(function() {
	DbDiff.init();
	//DbDiff.populateHostLists();
	})();