Fire JS Bin - WallNotes10k

// 10K wallnotes,for the Event apart 10K App contest
// ©2010 Black Box. Developed by Craig Constantine and Eric Schmoyer
// Specifically not minified, just because
var db = null;
var mZ = 1;
var idx = localStorage.getItem('idx');
  idx=idx?idx.evalJSON():[];
var captured=null;
var seq = localStorage.getItem('seq');
  seq=seq?seq:1;
var sw=false;
function initwn(){
  
  Event.observe('w', 'dblclick',newWn);  
  Event.observe('m', 'mouseleave',function(e){this.hide();});  
  if(idx.length>0){
    idx.each(function(n){
      N=localStorage.getItem(n);
      if(N!=undefined)
        displayNote(N.evalJSON());
      });
  }else{
    N={title:'Welcome to WallNotes 10k', style:'p',note:'',x:100,y:100,z:2,r:0};
    N.note='Double-click on the background to create a new note. All notes are saved as you type.';
    nN(N);
    N={title:'Features', style:'g',note:'',x:400,y:90,z:3,r:-0.5};
    N.note='Click the icon on the upper right to change colors or email a note.<br /><br />';
    N.note+='Double click to select and edit text.';
    nN(N);
    N={title:'Movable', style:'b',note:'',x:450,y:220,z:4,r:0.8};
    N.note='Click and drag to place notes anywhere you want.';
    nN(N);
  }
}
Event.observe(window, 'load',initwn);
function newWn(event) {
  x =Event.pointerX(event);
  y = Event.pointerY(event);
  z=++mZ;
  r=0;
  N={ title:'Untitled note', style:'p',note:' ',x:x,y:y,z:z,r:r};
  nN(N);
}
function nN(N){
  id= seq++;
  N.id=id;
  localStorage.setItem('N'+id,Object.toJSON(N));
  idx[idx.length]='N'+id;
  localStorage.setItem('idx', Object.toJSON(idx));
  localStorage.setItem('seq',seq);
  displayNote(N);
}
function displayNote(N){
  id='wn'+N.id;
  //seq=N.id>seq?N.id+1:seq;
  $(document.body).insert('<div id="'+id+'"></div>');
  $(id).addClassName('n');
  $(id).addClassName(N.style);
  $(id).update('<a class="cB" onclick="M(this);"><img src="/attach/gear.png" alt="" /></a><h2>'+N.title+'</h2><div>'+N.note+'</div>');
  $(id).setStyle({
    top: N.y+'px',
    left: N.x+'px',
    zIndex: N.z
  });
  $(id).select('h2').first().setAttribute('contenteditable', true);
  $(id).store('dbId',N.id);
  $(id).store('r',N.r);
  $(id).store('style',N.style);
  setR($(id),N.r)
  nEd($(id),true);
  $(id).observe('mousedown', hBDrag);
  $(id).observe('mouseup', hEDrag);
  $(id).observe('keyup', aSv);
  $(id).style.webkitTransform='rotate(360deg)'
}
function nEd(N,B){
    $(N).select('h2').first().setAttribute('contenteditable', B);
    $(N).select('div').first().setAttribute('contenteditable', B);
}
function aSv(e){
  nSv(this);
}
function nSv(id){
  N={
    id: $(id).retrieve('dbId'),
    x: parseInt($(id).style.left), //getLayout not in 1.6.1
    y: parseInt($(id).style.top),
    z: $(id).zIndex,
    r: $(id).retrieve('r'),
    title: $(id).select('h2').first().innerHTML,
    note:  $(id).select('div').first().innerHTML,
    style: $(id).retrieve('style', 'r')
  };
  
  localStorage.setItem('N'+N.id, Object.toJSON(N));
  
}
function M(a){
  $('m').style.zIndex=mZ+100;
  captured=$(a).up();
  c=$(captured).retrieve('style');
  $w('m').each(function(n){ $('m').removeClassName(n); });
  $('m').addClassName(c);
  pAt(a,'m');
}
function nM(){
  $('m').hide();
  b=$(captured).select('div').first().innerHTML.replace(/\<br\>/g,'\n').stripTags().unescapeHTML();
  document.location.href='mailto:?subject='+$(captured).select('h2').first().innerHTML.stripTags().unescapeHTML()+
    '&body='+escape(b);
  captured=null;
  
}
function pAt(a,e){
  p=$(a).cumulativeOffset();
  $(e).style.top=p.top+'px';
  $(e).style.left=p.left+'px';
  $(e).show();
}
function hBDrag(e){
  captured = this;
  this.startX =  Event.pointerX(e) - this.offsetLeft;
  this.startY = Event.pointerY(e)  - this.offsetTop;
  this.mSx = Event.pointerX(e);
  this.mSy = Event.pointerY(e);
  this.store('oZ',this.style.zIndex);
  this.style.zIndex = ++mZ;
  r=cSwg(this.getWidth(), e.layerX);
  this.store('nR',r);
  nEd(this,false);
  $(document).observe('mousemove',hDrag);
}
function hEDrag(e){
   captured.removeClassName('drg');
   nEd(captured,true);
  if(e.shiftKey){
    captured.style.zIndex = capture.retrieve('oZ');
  }
  nSv(captured);
  if(sw){
    setR(this,captured.retrieve('nR'));
  }
  sw=false;
  captured=null;   
  $(document).stopObserving('mousemove');
}
function hDrag(e){
  captured.style.left = Event.pointerX(e) - captured.startX + 'px';
  captured.style.top = Event.pointerY(e) - captured.startY + 'px';
  captured.addClassName('drg');
  dx=Math.abs(captured.mSx - Event.pointerX(e));
  dy=Math.abs(captured.mSy - Event.pointerY(e));
  if(dx+dy>10){
    sw=true;
  }
}
function nD(a){
  $('m').hide();
  if($(a)){
    N=$(a).up();
    T=$(a).next().innerHTML;
  }else{
    N=captured;
    T=$(captured).select('h2').first().innerHTML;
    captured=null;
  }
  id=$(N).retrieve('dbId');
  if(confirm('Delete note "'+T+'"?')){
    N.addClassName('dm');
    localStorage.removeItem('N'+id);
    idx=idx.without('N'+id);
    localStorage.setItem('idx', Object.toJSON(idx));
    anim(N);
    setTimeout(function(){N.remove();},200);
  }
}
function nC(c){
  $w(captured.className).each(function(n){ captured.removeClassName(n); });
  captured.addClassName('n');
  captured.addClassName(c);
  $(captured).store('style',c);
  nSv(captured);
  captured=null;
  $('m').hide();
}
function setR(e,r){
    $(e).style.webkitTransform='rotate('+r+'deg)';
    $(e).style.mozTransform='rotate('+r+'deg)';
    $(e).style.transform='rotate('+r+'deg)';
    $(e).store('r' ,r);
}
function anim(e){
    $(e).style.webkitTransition=' -webkit-transform 0.2s ease-out';
    $(e).style.mozTransition=' -moz-transform 0.2s ease-out';
    $(e).style.transition=' transform 0.2s ease-out';
    $(e).style.webkitTransform='scale(.01)';
    $(e).style.mozTransform='scale(.01)';
    $(e).style.transform='scale(.01)';
}
function cSwg(width, grabbedX) {
  var rotationDegrees = ((width/2.0) -grabbedX)/(width/2.0);
  rotationDegrees = rotationDegrees *3; // inflate rotation
  return( rotationDegrees );
}

body{
    font-family: StoneSans, "Lucida Grande";
    font-size: 10px;  
    color: #333;
    background: #555555;
}
h2{
  font-weight: bold;
  padding-top: 5px;
  margin-bottom: 3px;
  font-size: 10px;
}

#w{
  position:absolute;
  top:  0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index:0;
}
#m{
  position:absolute;
  padding: 0px;
}
#m a{
  display: block;
  padding: 3px 20px 3px 10px;
  cursor: pointer;
  min-height: 10px;
  opacity: 0.75;
  color: #000;
}
#m a:hover{

opacity: 1;
}
.drg{
  opacity: 0.5;
  cursor: move;

}
div.n{
  width: 150px;
  padding: 0 5px 5px 5px;
  position: absolute;
  min-height: 150px;
  -webkit-box-shadow: rgba(64,64,64,0.8) 5px 5px 20px;
  -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    
  -moz-box-shadow: rgba(64,64,64,0.8) 5px 5px 20px;
  border-radius: 3px;
  box-shadow: rgba(64,64,64,0.8) 5px 5px 20px;
  overflow: hidden;
}

.cB{
  position: absolute;
  top:  5px;
  right: 5px;
  font-weight: bold;
  color: rgba(0,0,0,0.25);
  font-size: 14px;
  height: 9px;
  display: block;
  cursor: pointer;
}

/* @group Colors */

.gr{
  background-color: #eee;
  border: 1px solid #9e9e9e;
}
.gr h2{
border-bottom: 1px solid #9e9e9e;

}
.y{
  background-color: #fef49c;
  border: 1px solid #bca902;
}
.y h2{
  border-bottom: 1px solid #bca902;
  
}
.g{
  background-color: #b7e56f;
  border: 1px solid #8caf55;
  }
.g h2{
    border-bottom: 1px solid #8caf55;
}

.mb{
  background-color: #6d9aca;
  border: 1px solid #527498;

}
.mb h2{
    border-bottom: 1px solid #527498;
}
.p{
  background-color: #ad9ec5;
  border: 1px solid #a08ac3;
  }
.p h2{
    border-bottom: 1px solid #a08ac3;
}
.r{
  background-color: #edadd3;
  border: 1px solid #b2829f;
  }
.r h2{
    border-bottom: 1px solid #b2829f;
}
.b{
  background-color: #b6caff;
  border: 1px solid #7591dc;
  }
.b h2{
    border-bottom: 1px solid #7591dc;
}

/* @end */