acidsound/observe.css

## observe.css
/* CSS declarations go here */
li {
  list-style: none;
}

@-webkit-keyframes spinForward {
   0% {-webkit-transform: scale(1,1);}
   50% {-webkit-transform: scale(1.1,1.1);}
   100% {-webkit-transform: scale(1,1);}
 }

.infRound {
  -webkit-animation: spinForward 4s infinite linear;
}

## observe.html
<head>
  <title>observe</title>
</head>

<body>
  {{loginButtons}}
  {{> rolling}}
  {{> main}}
</body>
<template name="rolling">
  <div class="container hero-unit">
    <!--<div class="label infRound span1">{{round}}</div>-->
    <div class='infRound' placeholder='Some text'>{{round}}</div>
    <button class="btn">CLICK</button>
  </div>
</template>

<template name="main">
  <div class="container">
    <form class="form-inline">
      <div class="controls controls-row">
        <label for='some' class="span1">input</label><input type="text" id="some" class="span9" value="{{lastPost}}">
        <button type="submit" class="btn">submit</button>
      </div>
    </form>
    <ul class="cards">
      {{#each messages}}
      <li class="row">
        <div class="message" id="{{_id}}">{{{message}}}</div>
        <div class="createdAt">{{{ago created_at}}}</div>
        <div class="refresh">{{{refresh}}}</div>
      </li>
      {{/each}}
    </ul>
  </div>
</template>

## observe.js
var Messages = new Meteor.Collection('messages');

if (Meteor.isClient) {
  Meteor.startup(function() {
    Session.set('limit', 10);
  });
  Meteor.autosubscribe(function () {
    Meteor.subscribe('messages', Session.get('limit'));
  });

  Template.main.events = {
    'keyup input':function (e) {
      amplify.store('lastPost', $("input").val());
    },
    'submit':function () {
      var inp = $("input");
      Meteor.call('insert', inp.val());
      inp.val('');
      return false;
    },
    'click li':function () {
      Meteor.call('delete', this);
    },
    'blur input':function () {
      console.log('away');
    },
    'focus input':function () {
      console.log('here');
    }
  };
  Template.main.messages = function () {
    var result = Messages.find({}, {sort:{created_at:-1}});
    result.observe({
      added:function(item, index) {

      }
    });
    return result;
  };
  Template.main.lastPost = function () {
    return amplify.store().lastPost;
  };
  Template.main.preserve(['div.message div', 'div.message iframe']);

  var updateTimer = function () {
    Meteor.call('refresh');
    Meteor.setTimeout(updateTimer, 1000);
  };
  updateTimer();

  Handlebars.registerHelper('ago', function (value) {
    return Math.floor((Date.now() - value) / 1000);
  });

  /*
   * Rolling
   */
  Session.set('round', 0);
  Template.rolling.round = function () {
    return Session.get('round');
  };
  Template.rolling.events({
    'click button':function () {
      Session.set('round', 1 + (Session.get('round') || 0));
    }
  });
  Template.rolling.preserve(['.hero-unit div']);
}

// <img src="http://rainmeter.net/cms/sites/default/files/cmsfiles/shark.gif">

if (Meteor.isServer) {
  Meteor.startup(function () {
    Meteor.publish('messages', function (count) {
      return Messages.find({}, {limit:count, sort:{created_at:-1}});
    });
  });
}

Meteor.methods({
  'insert':function (message) {
    Messages.insert({
      message:message,
      created_at:Date.now()
    });
  },
  'delete':function (item) {
    Messages.remove(item);
  },
  'refresh':function () {
    if (this.isSimulation) {
      Messages.update({}, {$unset:{_nothing:1}}, {multi:true});
    }
  }
})
	/* CSS declarations go here */
	li {
	list-style: none;
	}

	@-webkit-keyframes spinForward {
	0% {-webkit-transform: scale(1,1);}
	50% {-webkit-transform: scale(1.1,1.1);}
	100% {-webkit-transform: scale(1,1);}
	}

	.infRound {
	-webkit-animation: spinForward 4s infinite linear;
	}
	<head>
	<title>observe</title>
	</head>

	<body>
	{{loginButtons}}
	{{> rolling}}
	{{> main}}
	</body>
	<template name="rolling">
	<div class="container hero-unit">
	<!--<div class="label infRound span1">{{round}}</div>-->
	<div class='infRound' placeholder='Some text'>{{round}}</div>
	<button class="btn">CLICK</button>
	</div>
	</template>

	<template name="main">
	<div class="container">
	<form class="form-inline">
	<div class="controls controls-row">
	<label for='some' class="span1">input</label><input type="text" id="some" class="span9" value="{{lastPost}}">
	<button type="submit" class="btn">submit</button>
	</div>
	</form>
	<ul class="cards">
	{{#each messages}}
	<li class="row">
	<div class="message" id="{{_id}}">{{{message}}}</div>
	<div class="createdAt">{{{ago created_at}}}</div>
	<div class="refresh">{{{refresh}}}</div>
	</li>
	{{/each}}
	</ul>
	</div>
	</template>
	var Messages = new Meteor.Collection('messages');

	if (Meteor.isClient) {
	Meteor.startup(function() {
	Session.set('limit', 10);
	});
	Meteor.autosubscribe(function () {
	Meteor.subscribe('messages', Session.get('limit'));
	});

	Template.main.events = {
	'keyup input':function (e) {
	amplify.store('lastPost', $("input").val());
	},
	'submit':function () {
	var inp = $("input");
	Meteor.call('insert', inp.val());
	inp.val('');
	return false;
	},
	'click li':function () {
	Meteor.call('delete', this);
	},
	'blur input':function () {
	console.log('away');
	},
	'focus input':function () {
	console.log('here');
	}
	};
	Template.main.messages = function () {
	var result = Messages.find({}, {sort:{created_at:-1}});
	result.observe({
	added:function(item, index) {

	}
	});
	return result;
	};
	Template.main.lastPost = function () {
	return amplify.store().lastPost;
	};
	Template.main.preserve(['div.message div', 'div.message iframe']);

	var updateTimer = function () {
	Meteor.call('refresh');
	Meteor.setTimeout(updateTimer, 1000);
	};
	updateTimer();

	Handlebars.registerHelper('ago', function (value) {
	return Math.floor((Date.now() - value) / 1000);
	});

	/*
	* Rolling
	*/
	Session.set('round', 0);
	Template.rolling.round = function () {
	return Session.get('round');
	};
	Template.rolling.events({
	'click button':function () {
	Session.set('round', 1 + (Session.get('round') \|\| 0));
	}
	});
	Template.rolling.preserve(['.hero-unit div']);
	}

	// <img src="http://rainmeter.net/cms/sites/default/files/cmsfiles/shark.gif">

	if (Meteor.isServer) {
	Meteor.startup(function () {
	Meteor.publish('messages', function (count) {
	return Messages.find({}, {limit:count, sort:{created_at:-1}});
	});
	});
	}

	Meteor.methods({
	'insert':function (message) {
	Messages.insert({
	message:message,
	created_at:Date.now()
	});
	},
	'delete':function (item) {
	Messages.remove(item);
	},
	'refresh':function () {
	if (this.isSimulation) {
	Messages.update({}, {$unset:{_nothing:1}}, {multi:true});
	}
	}
	})