var IntroModal = View.extend({
  
  el: "#intro_modal",
  
  events: {
    "click .intro_proceed": "proceed",
    "click .intro_tagline": "navigateToTagline",
    "click a": "navigate",
  },

  alreadyShown: false,
  curtainBackgroundColor: false,
  
  initialize: function(){
    this.$introTitle = this.$(".intro_title")
    this.$introTaglineTop = this.$(".tagline_top")
    this.$introTaglineBottom = this.$(".tagline_bottom")
    this.$introContent = this.$(".intro_content")
    this.$introProceed = this.$(".intro_proceed")
  },

  check: function(){
    if (this.alreadyShown) {
      this.hide()
      return false
    }
    var lastMessage = localStorage.getItem('app.intro_modal_last_message')
    switch (app.store.showModal) {
      case 'never':
        this.hide()
        return false
      case 'once':
        if (lastMessage === app.store.modalContent) {
          this.hide()
          return false
        }
        this.show()
        return true
      case 'always':
        this.show()
        return true
      default:
        this.hide()
        return false
    }
  },

  build: function(){
    var modalTitle = app.store.modalTitle.trim()
    var modalTagline = app.store.modalTagline.trim()
    var modalTaglineHref = app.store.modalTaglineLink.trim()
    var modalContent = app.store.modalContent.trim()
    var modalButton = app.store.modalButton.trim().toUpperCase() || "PROCEED"
    if (app.store.modalBackgroundColor === 'black') {
      this.curtainBackgroundColor = 'white'
    } else {
      this.curtainBackgroundColor = 'black'
    }
    this.$el.addClass(app.store.modalBackgroundColor)
    if (modalTagline.length === 0) {
      app.store.modalTaglinePosition = 'hidden'
    }
    switch (app.store.modalTaglinePosition) {
      case 'hidden':
        this.$introTaglineBottom.hide()
        this.$introTaglineTop.hide()
        break
      case 'top':
        this.$introTaglineBottom.hide()
        this.$introTaglineTop.show()
        this.$introTaglineTop.addClass(app.store.modalTaglineColor)
        this.$introTaglineTop.text(app.store.modalTagline)
        break
      case 'bottom':
        this.$introTaglineTop.hide()
        this.$introTaglineBottom.show()
        this.$introTaglineBottom.addClass(app.store.modalTaglineColor)
        this.$introTaglineBottom.text(app.store.modalTagline)
        break
    }
    if (modalTitle.length === 0) {
      this.$introTitle.hide()
    } else {
      this.$introTitle.show()
      this.$introTitle.text(modalTitle)
    }
    if (modalContent.length === 0) {
      this.$introContent.hide()
    } else {
      this.$introContent.show()
      this.$introContent.text(modalContent)
    }
    this.$introProceed.html(sanitize(modalButton))
  },

  show: function(){
    this.alreadyShown = true
    this.build()
    this.$el.show()
    setTimeout(function(){
      this.$el.addClass('visible')
    }.bind(this), 20)
    app.curtain.show('opaque')
    setTimeout(function(){
      app.curtain.show('opaque')
    }, 300)
  },

  hide: function(){
    this.alreadyShown = true
    localStorage.setItem('app.intro_modal_last_message', app.store.modalContent)
    app.curtain.hide()
    this.$el.removeClass('visible')
    setTimeout(function(){
      this.$el.hide()
      app.curtain.$el.removeClass('opaque')
      if (this.curtainBackgroundColor) {
        app.curtain.$el.removeClass(this.curtainBackgroundColor)
      }
    }.bind(this), 300)
  },

  navigateToTagline: function(){
    var modalTaglineHref = app.store.modalTaglineLink.trim()
    if (modalTaglineHref.length) {
      this.hide()
      console.log(modalTaglineHref)
      if (modalTaglineHref.indexOf('http') === 0) {
        window.open(modalTaglineHref, '_system')
      } else {
        app.router.go(modalTaglineHref)
      }
    }
  },

  navigate: function(e){
    var href = $(e.currentTarget).attr('href').replace('#', '')
    console.log(href)
    this.hide()
    app.router.go(href)
  },
  
  proceed: function(){
    console.log('proceed')
    this.hide()
  },

})