Copyright 2011 Gaetan Renaudeau
http://greweb.fr/slider

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

mod = (X,Y) -> X-Y*Math.floor(X/Y)

requestAnimationFrame = `function(a,b){while(a--&&!(b=window["oR0msR0mozR0webkitR0r".split(0)[a]+"equestAnimationFrame"]));return b||function(a){setTimeout(a,15)}}(5)`

currentTime = `function(){return new Date().getTime()}`

tmplSlider = (o) ->
  slider = $("""
  <div class="slider">
    <div class="loader"><span class="spinner"></span> <span class="percent">0</span>%</div>
    <div class="slide-images"></div>
    <div class="options">
      <a class="prevSlide" href="javascript:;">prev</a>
      <span class="slide-pager"></span>
      <a class="nextSlide" href="javascript:;">next</a>
    </div>
  </div>
  """)
  slider.find('.slide-images').append(
    $.map(o.slides, (slide) -> $('<div class="slide-image">'+
      (if slide.link then '<a href="'+slide.link+'" target="_blank">' else '')+
      '<img src="'+slide.src+'">'+
      (if slide.name then '<span class="caption">'+slide.name+'</span>' else '')+
      (if slide.link then '</a>' else '')+
      '</div>')[0]
    )
  )
  slider.find('.slide-pager').append $.map(o.slides, (slide, i) ->
    $('<a href="javascript:;">' + (i + 1) + '</a>')[0]
  )
  slider

tmplSliderWithCanvas = (o) ->
  node = tmplSlider o
  node.find('div.slide-images').append('<canvas class="slide-images" />')
  node

SliderUtils = 
  extractImageData: (self, from, to) ->
    {width, height} = self.canvas[0]
    self.clean()
    self.drawImage self.images[from]
    fromData = self.ctx.getImageData 0, 0, width, height
    self.clean()
    self.drawImage self.images[to]
    toData = self.ctx.getImageData 0, 0, width, height
    output = self.ctx.createImageData width, height
    return fromData: fromData, toData: toData, output: output
    
  clippedTransition: ( clipFunction ) -> 
    (self, from, to, progress) ->
      {width, height} = self.canvas[0]
      ctx = self.ctx
      self.drawImage self.images[from]
      ctx.save()
      ctx.beginPath()
      clipFunction ctx, width, height, progress
      ctx.clip()
      self.drawImage self.images[to]
      ctx.restore()

SliderTransitionFunctions =

  clock: 
    render: SliderUtils.clippedTransition (ctx, w, h, p) ->
      ctx.moveTo w/2, h/2
      ctx.arc w/2, h/2, Math.max(w, h), 0, Math.PI*2*p, false

  circle: 
    render: SliderUtils.clippedTransition (ctx, w, h, p) ->
      ctx.arc w/2, h/2, 0.6*p*Math.max(w, h), 0, Math.PI*2, false

  diamond: 
    render: SliderUtils.clippedTransition (ctx, w, h, p) ->
      w2=w/2
      h2=h/2
      dh=p*h
      dw=p*w
      ctx.moveTo w2,    h2-dh
      ctx.lineTo w2+dw, h2
      ctx.lineTo w2,    h2+dh
      ctx.lineTo w2-dw, h2

  verticalOpen: 
    render: SliderUtils.clippedTransition (ctx, w, h, p) ->
      nbSpike=8
      spikeh=h/(2*nbSpike) # the height of a demi-spike (triangle)
      spikew=spikeh
      pw=p*w/2
      xl=w/2-pw
      xr=w/2+pw
      spikel=xl-spikew
      spiker=xr+spikew
      ctx.moveTo xl, 0
      for hi in [0..nbSpike]
        h1=(2*hi)*spikeh
        h2=h1+spikeh
        ctx.lineTo spikel, h1
        ctx.lineTo xl, h2
      ctx.lineTo spiker, h
      for hi in [nbSpike..0]
        h1=(2*hi)*spikeh
        h2=h1-spikeh
        ctx.lineTo xr, h1
        ctx.lineTo spiker, h2

  horizontalOpen: 
    render: SliderUtils.clippedTransition (ctx, w, h, p) ->
      ctx.rect 0, (1-p)*h/2, w, h*p

  horizontalSunblind: 
    render: SliderUtils.clippedTransition (ctx, w, h, p) ->
      p = 1-(1-p)*(1-p) #non linear progress
      blinds = 6
      blindHeight = h/blinds
      for blind in [0..blinds]
        ctx.rect 0, blindHeight*blind, w, blindHeight*p

  verticalSunblind: 
    render: SliderUtils.clippedTransition (ctx, w, h, p) ->
      p = 1-(1-p)*(1-p)
      blinds = 10
      blindWidth = w/blinds
      for blind in [0..blinds]
        prog = Math.max(0, Math.min( 2*p-(blind+1)/blinds, 1))
        ctx.rect blindWidth*blind, 0, blindWidth*prog, h

  circles: 
    render: SliderUtils.clippedTransition (ctx, w, h, p) ->
      circlesY = 6
      circlesX = Math.floor circlesY*w/h
      circleW = w/circlesX
      circleH = h/circlesY
      maxWH = Math.max(w, h)
      maxRad = 0.7*Math.max(circleW, circleH)
      for x in [0..circlesX]
        for y in [0..circlesY]
          cx = (x+0.5)*circleW
          cy = (y+0.5)*circleH
          r = Math.max(0, Math.min(2*p-cx/w, 1)) * maxRad
          ctx.moveTo cx, cy
          ctx.arc cx, cy, r, 0, Math.PI*2, false

  squares: 
    render: SliderUtils.clippedTransition (ctx, w, h, p) ->
      p = 1-(1-p)*(1-p) #non linear progress
      blindsY = 5
      blindsX = Math.floor blindsY*w/h
      blindWidth = w/blindsX
      blindHeight = h/blindsY
      for x in [0..blindsX]
        for y in [0..blindsY]
          sx = blindWidth*x
          sy = blindHeight*y
          prog = Math.max(0, Math.min(3*p-sx/w-sy/h, 1))
          rw = blindWidth*prog
          rh = blindHeight*prog
          ctx.rect sx-rw/2, sy-rh/2, rw, rh

  fadeLeft: 
    init: (self, from, to) -> 
      data = SliderUtils.extractImageData(self, from, to)
      data.randomTrait = []
      h = self.canvas[0].height
      for y in [0..h]
        data.randomTrait[y] = Math.random()
      data

    render: (self, from, to, progress, data) ->
      blur = 150
      {width, height} = self.canvas[0]
      ctx = self.ctx
      fd = data.fromData.data
      td = data.toData.data
      out = data.output.data
      randomTrait = data.randomTrait
      
      `(function(){
        var wpdb = width*progress/blur;
        for (var x = 0; x < width; ++x) {
          var xdb = x/blur;
          for (var y = 0; y < height; ++y) {
            var b = (y*width + x)*4
            var p1 = Math.min(Math.max((xdb-wpdb*(1+randomTrait[y]/10)), 0), 1)
            var p2 = 1-p1
            for (var c = 0; c < 3; ++c) {
              var i = b + c;
              out[i] = p1 * (fd[i] ) + p2 * (td[i] )
            }
            out[b + 3] = 255;
          }
        }
      }())`
      self.ctx.putImageData data.output, 0, 0

class Slider
  constructor: (container) -> @container = $(container)
  current: 0
  lastHumanNav: 0
  duration: 4000
  w: '640px'
  h: '430px'
  theme: 'theme-dark'

  tmpl: tmplSlider
  

  circular: (num) -> mod num, @slides.size()

  slide: (num) ->

    if @slides && @pages
      num = Math.max(0, Math.min(num, @slides.size()-1))

      @slides.eq(@current).removeClass "current"
      @slides.eq(num).addClass "current"

      @pages.eq(@current).removeClass "current"
      @pages.eq(num).addClass "current"
    @current = num
    this

  next: -> @slide @circular(@current+1)

  prev: -> @slide @circular(@current-1)

  setDuration: (@duration) ->
    this

  setTransition: (transition) ->
    if @node
      @node.removeClass(@transition) if @transition
      @node.addClass(transition) if transition
    @transition = transition
    this

  setTheme: (theme = "theme-dark") ->
    if @node
      @node.removeClass(@theme) if @theme
      @node.addClass(theme) if theme
    @theme = theme
    this

  setSize: (@w, @h) ->
    if @node
      @node.width w
      @node.find(".slide-image").width w
      @node.find(".slide-images").height h
    this

  fetchJson: (url, options, transformer) ->
    params = $.extend({}, options)
    transformer ?= (json) -> json
    $.getJSON url, params, (json) => @setPhotos transformer(json)
    this

  _sync: ->
    @setTransition @transition
    @setTheme @theme
    @setSize @w, @h
    @slide @current
  

  setPhotos: (@photos) ->

    @node = @tmpl(slides: photos).addClass("loading")
    @container.empty().append @node
    @_sync()

    nbLoad = 0
    imgs = @node.find(".slide-image img").bind("load", =>
      total = imgs.size()
      if ++nbLoad == total
        @node.removeClass "loading"
        @start()

      @node.find(".loader .percent").text Math.floor(100 * nbLoad / total)
    )
    @node.find(".loader").text "No photo"  if imgs.size() == 0
    this
  

  start: ->
    @slides = @node.find(".slide-image")
    @pages = @node.find(".slide-pager a")
    @_sync()
    @_bind()
    this

  stop: ->
    @_unbind()
    this
  

  _bind: ->
    @_unbind()
    @node.find(".prevSlide").click => @prev()
    @node.find(".nextSlide").click => @next()
    self = this
    if @node
      @node.find(".slide-pager a").each (i) ->
        $(this).click -> self.slide i
      now = -> currentTime()
      @node.find(".options a").click => @lastHumanNav = now()
    
    if not @timeout
      loop_ = =>
        @next() if now() - @lastHumanNav > 2000
        @timeout = setTimeout(loop_, @duration)
      @timeout = setTimeout(loop_, @duration)
    this

  _unbind: ->
    if @node
      @node.find(".prevSlide, .nextSlide, .slide-pager a, .options a").unbind 'click' 
    if @timeout
      clearTimeout @timeout
      @timeout = null

class SliderWithCanvas extends Slider
  transitionFunction: SliderTransitionFunctions.clock
  transitionDuration: 1500
  tmpl: tmplSliderWithCanvas

  _sync: () ->
    renderMode = @renderMode
    super
    @setRenderMode(renderMode)

  start: () ->
    @notCanvas = @node.find '.slide-images:not(canvas) img'
    @canvas = @node.find 'canvas.slide-images'
    @ctx = @canvas[0].getContext '2d' if @canvas[0] and @canvas[0].getContext
    @images = $.map(@photos, ((photo) => 
      img = new Image()
      img.src = photo.src
      img
    )) if @photos
    super

  setSize: (w, h) ->
    super w, h
    @canvas.attr("height", h).attr("width", w) if @canvas
    this

  setRenderMode: (@renderMode) ->
    if @ctx
      if @renderMode is 'canvas'
        @drawImage @images[@current]
        @notCanvas.hide()
        @canvas.show()
      else
        @canvas.hide()
        @notCanvas.show()
    this

  setTransition: (transition) -> 
    @setRenderMode 'css'
    super transition
    this

  setTransitionFunction: (@transitionFunction) -> 
    @setRenderMode 'canvas'
    this

  setTransitionDuration: (@transitionDuration) ->
    @setRenderMode 'canvas'
    this

  slide: (num) ->
    @fromSlide = @current
    @toSlide = num
    @transitionStart = currentTime()
    if @ctx and @renderMode is 'canvas'
      @startRender()
    super num

  clean: -> @ctx.clearRect 0, 0, @canvas[0].width, @canvas[0].height

  drawImage: (img) -> 
    {width, height} = @canvas[0]
    @ctx.drawImage img, 0, 0, width, width*img.height/img.width

  _renderId: 0

  startRender: ->
    if @transitionFunction.init
      @tfdata = @transitionFunction.init this, @fromSlide, @toSlide
    @render(++@_renderId, @transitionFunction)

  render: (id, transitionFunction) ->
    now = currentTime()
    if id==@_renderId and now >= @transitionStart
      progress = Math.min(1, (now - @transitionStart) / @transitionDuration)
      if progress == 1
        @clean()
        @drawImage @images[@toSlide]
      else
        transitionFunction.render this, @fromSlide, @toSlide, progress, @tfdata
        requestAnimationFrame (=>@render(id, transitionFunction)), @canvas[0]

window.Slider = SliderWithCanvas
window.SliderTransitionFunctions = SliderTransitionFunctions
window.SliderUtils = SliderUtils