mhkeller/gist:5938408

## gistfile1.txt
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>crazy-julian-shit</title>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>
	<style type="text/css" media="screen">
		.stateViews {
			margin: 10px;
			background: #ffc;
		}

		.stateViews div {
			margin: 2px;
		}

		.mapStateViews {
			position: absolute;
			top: 30px;
			right: 30px;
			width: 300px;
			height: 300px;
			border: 8px solid #fc0;
		}

		.mapStateView {
			position: absolute;
			width: 30px;
			height: 30px;
			background: #cf0;
		}

		.mapStateView.ticked {
			background: #f00;
		}

	</style>
	<script>
		(function() {
			'use strict';

			window.MyApp = window.MyApp || {};

			var State = Backbone.Model.extend({
				defaults: {
					ticked: false
				},
				toggle: function() {
					this.set({ticked: !this.get('ticked')})
				}
			})

			var States = Backbone.Collection.extend({
				model: State
			})


			var StateView = Backbone.View.extend({
				initialize: function() {
					_.bindAll(this, 'render')
					this.model.bind('change:ticked', this.render)
				},
				events: {
					"click": 'toggleState'
				},
				toggleState: function() {
					this.model.toggle();
					console.log(this.model.get('ticked'))
				},
				render: function() {
					this.$el.html(this.model.get('ticked') + ' :: ' + this.model.get('name'))
					return this;
				}
			})

			var StatesView = Backbone.View.extend({
				className: 'stateViews',
				render: function() {
					var self = this;
					this.collection.each(function(state) {
						self.$el.append(new StateView({model:state}).render().el)
					});
					return this;
				}
			})

			var MapStateView = Backbone.View.extend({
				initialize: function() {
					_.bindAll(this, 'render')
					this.model.bind('change:ticked', this.render)
				},
				className: 'mapStateView',
				events: {
					"click": 'toggleState',
					"mouseenter": 'mouseenter',
					"mouseleave": 'mouseleave'
				},
				mouseenter: function() {
					console.log('haha')
					this.$el.fadeTo(1, 0.7)
				},
				mouseleave: function() {
					this.$el.fadeTo(1, 1)
				},
				toggleState: function() {
					this.model.toggle();
					console.log(this.model.get('MapStateView ticked'))
				},
				render: function() {
					this.$el.html(this.model.get('name'))
					this.$el.toggleClass('ticked', this.model.get('ticked'))
					if (this.model.get('ticked')) {
						this.$el.animate({top: this.model.get('statePosition')['x'], left: this.model.get('statePosition')['y'] })
					} else {
						this.$el.animate({top: this.model.get('boxPosition')['x'], left: this.model.get('boxPosition')['y'] })
					}
					return this;
				}
			})

			var MapStatesView = Backbone.View.extend({
				className: 'mapStateViews',
				render: function() {
					var self = this;
					this.collection.each(function(state) {
						self.$el.append(new MapStateView({model:state}).render().el)
					});
					return this;
				}
			})

			MyApp.init = function() {

				var states = new States([
					{ usps: "NY", name: "New York", statePosition: { x: 10, y: 0 }, boxPosition: { x: 30, y: 20 } },
					{ usps: "NJ", name: "New Jersey", statePosition: { x: 10, y: 50 }, boxPosition: { x: 30, y: 70 } },
					{ usps: "CA", name: "California", statePosition: { x: 10, y: 100 }, boxPosition: { x: 30, y: 120 } }
				]);

				var $states = $('#states')

				for (var i=0; i<10; i++) {
					$states.append(new StatesView({collection: states}).render().el)
				}

				$states.append(new MapStatesView({collection: states}).render().el)

				console.log(states)
			}


		})();

		$(function() {
			MyApp.init();
		})

	</script>
</head>
<body>

	<div id="states"></div>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>crazy-julian-shit</title>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>
	<style type="text/css" media="screen">
	.stateViews {
	margin: 10px;
	background: #ffc;
	}

	.stateViews div {
	margin: 2px;
	}

	.mapStateViews {
	position: absolute;
	top: 30px;
	right: 30px;
	width: 300px;
	height: 300px;
	border: 8px solid #fc0;
	}

	.mapStateView {
	position: absolute;
	width: 30px;
	height: 30px;
	background: #cf0;
	}

	.mapStateView.ticked {
	background: #f00;
	}

	</style>
	<script>
	(function() {
	'use strict';

	window.MyApp = window.MyApp \|\| {};

	var State = Backbone.Model.extend({
	defaults: {
	ticked: false
	},
	toggle: function() {
	this.set({ticked: !this.get('ticked')})
	}
	})

	var States = Backbone.Collection.extend({
	model: State
	})


	var StateView = Backbone.View.extend({
	initialize: function() {
	_.bindAll(this, 'render')
	this.model.bind('change:ticked', this.render)
	},
	events: {
	"click": 'toggleState'
	},
	toggleState: function() {
	this.model.toggle();
	console.log(this.model.get('ticked'))
	},
	render: function() {
	this.$el.html(this.model.get('ticked') + ' :: ' + this.model.get('name'))
	return this;
	}
	})

	var StatesView = Backbone.View.extend({
	className: 'stateViews',
	render: function() {
	var self = this;
	this.collection.each(function(state) {
	self.$el.append(new StateView({model:state}).render().el)
	});
	return this;
	}
	})

	var MapStateView = Backbone.View.extend({
	initialize: function() {
	_.bindAll(this, 'render')
	this.model.bind('change:ticked', this.render)
	},
	className: 'mapStateView',
	events: {
	"click": 'toggleState',
	"mouseenter": 'mouseenter',
	"mouseleave": 'mouseleave'
	},
	mouseenter: function() {
	console.log('haha')
	this.$el.fadeTo(1, 0.7)
	},
	mouseleave: function() {
	this.$el.fadeTo(1, 1)
	},
	toggleState: function() {
	this.model.toggle();
	console.log(this.model.get('MapStateView ticked'))
	},
	render: function() {
	this.$el.html(this.model.get('name'))
	this.$el.toggleClass('ticked', this.model.get('ticked'))
	if (this.model.get('ticked')) {
	this.$el.animate({top: this.model.get('statePosition')['x'], left: this.model.get('statePosition')['y'] })
	} else {
	this.$el.animate({top: this.model.get('boxPosition')['x'], left: this.model.get('boxPosition')['y'] })
	}
	return this;
	}
	})

	var MapStatesView = Backbone.View.extend({
	className: 'mapStateViews',
	render: function() {
	var self = this;
	this.collection.each(function(state) {
	self.$el.append(new MapStateView({model:state}).render().el)
	});
	return this;
	}
	})

	MyApp.init = function() {

	var states = new States([
	{ usps: "NY", name: "New York", statePosition: { x: 10, y: 0 }, boxPosition: { x: 30, y: 20 } },
	{ usps: "NJ", name: "New Jersey", statePosition: { x: 10, y: 50 }, boxPosition: { x: 30, y: 70 } },
	{ usps: "CA", name: "California", statePosition: { x: 10, y: 100 }, boxPosition: { x: 30, y: 120 } }
	]);

	var $states = $('#states')

	for (var i=0; i<10; i++) {
	$states.append(new StatesView({collection: states}).render().el)
	}

	$states.append(new MapStatesView({collection: states}).render().el)

	console.log(states)
	}


	})();

	$(function() {
	MyApp.init();
	})

	</script>
	</head>
	<body>

	<div id="states"></div>

	</body>
	</html>