var IntroView = View.extend({
  
  el: "#intro",
  
  events: {
    "click .store": "store",
    "click .hub": "hub",
    "click .story": "story",
    "click .archive": "archive",
  },
  
  initialize: function(){
    this.compass = this.$("#compass").get(0)
    this.orient = this.deviceorientation.bind(this)
  },
  
  show: function(){
    document.body.className = "intro"
    window.addEventListener("deviceorientation", this.orient)
    app.footer.hide()
    this.orient({ alpha: 0 })
    // get location..
  },

  hide: function(){
    window.removeEventListener("deviceorientation", this.orient)
  },

  deviceorientation: function(e){
    var heading
    if ('webkitCompassHeading' in e) {
      heading = e.webkitCompassHeading || 0
    }
    else {
      heading = e.alpha || 0
    }
    this.compass.style[transformProp] = "translateZ(0) translateX(-50%) translateY(-50%) rotate(" + heading + "deg)"
  },
  
  store: function(){ app.router.go("store") },
  hub: function(){ app.router.go("hub") },
  story: function(){ app.router.go("story") },
  archive: function(){ app.router.go("archive") },

})