gistfile1.txt

SlidingCanvas = new Class({

  Implements: [Options, Events],
  
  options: {
    history: true,
    suffix: '-page'
  },
  
  initialize: function(wrapper, pageWrapper, options) {
    this.setOptions(options)
    this.wrapper = wrapper

    this.pageWrapper = pageWrapper
    this.current = 0
    
    window.addEvent('resize', this.prepare.bind(this))
    if (this.options.history) this.initializeHistory()
    
    this.addEvent('stepLoaded', function(i, el) { this.adjust(el) }.bind(this))
    
    this.reset()
  },
  
  initializeHistory: function() {
    using('history', function() {
			var setter = function(hash) {
		    this.setPageByName(hash, true)
		  }.bind(this)
      this.history = HistoryManager.initialize({
				observeDelay: 30,
				onStart: setter,
				onStateChange: setter
			})
      this.history.start()
      this.addEvent('set', function(i, step) {
				if (i == 0) return location.hash = '#'
        this.history.setState(step.get('id').replace(this.options.suffix, ''))
      }.bind(this))
    }.bind(this))
  },
  
  forward: function() {
    this.set(this.current + 1)
    return false
  },
  
  back: function() {
    this.set(this.current - 1)
    return false
  },
  
  getPage: function(i) {
    return this.pages[$pick(i, this.current)]
  },

	setPageByName: function(name, fire) {
		var number
		this.pages.each(function(el, i) { if (el.get('id') == name + this.options.suffix) number = i}, this)
		return this.set(number, fire)
	},
  
  getPageURL: function(page) {
    return page.get('url')
  },
  
  getRequest: function(page) {
    return {url: this.getPageURL(page)}
  },
  
  onSuccess: function(html) {
    var page = this.getPage()
    if (html) page.set('html', html)
    
    if (!this.fx) this.fx = new Fx.Scroll(this.wrapper, {transition: Fx.Transitions.Circ.easeInOut, wheelStops: false})
		if (!page) return
		
		this.unfreeze()
    this.fx.cancel().toElement(page).chain(this.freeze.bind(this))
    
    return this.fireEvent('stepLoaded', [this.current, page.fade('in')])
  },
  
  requestPage: function(page) {
    new Request($merge(this.getRequest(page), {
      onSuccess: this.onSuccess.bind(this)
    })).send()
  },
  
  needsUpdate: function(page) {
    return !!this.getPageURL(page)
  },

  set: function(i, dontFire) {
		var page = this.getPage(i)
    if (!page) return

    this.fireEvent('beforeSet', [i, this.getPage()])
    this.current = i
    this.fireEvent('set', [i, page])

    if (this.needsUpdate(page)) {
      page.fade('hide');
      this.requestPage(page)
    } else {
      this.onSuccess()
    }
  },

	freeze: function() {
		this.pages.each(function(page) { 
			if (page == this.getPage()) {
				page.setStyle('visibility', 'visible')
			} else {
				page.setStyle('visibility', 'hidden')
				page.setStyle('height', this.getPage().offsetHeight - 60)
			}
		}, this)
	},
	
	unfreeze: function() {
		this.pages.each(function(page) {
			page.setStyle('visibility', 'visible').setStyle('height', 'auto')
		}, this)
	},
  
  prepare: function() {
    var width = this.wrapper.offsetWidth
    this.pageWrapper.setStyle('width', width * this.pages.length * 1.5)
    this.pages.each(function(el) {
      el.setStyle('width', width)
    })
    
    this.wrapper.scrollLeft = width * this.current
    this.adjust()
		this.freeze()
  },

  adjust: function(el, instant) {
		if (!this.getPage()) return
    this.wrapper.get('tween')[instant ? 'set' : 'start']('height', this.getPage().offsetHeight)
  },

	reset: function(wrapper) {
		if (wrapper) this.pageWrapper = wrapper
    this.pages = this.pageWrapper.getChildren()
		this.prepare()
	}
  
})