       left     : '10px'
       bottom   : '10px'
 
-    @addSubView downButton = new KDButtonView
+    @addSubView previousSubPageButton = new KDButtonView
       cssClass : 'Down'
-      title    : 'Down Page'
-      callback : => @slider.downPage()
+      title    : 'Previous SubPage'
+      callback : => @slider.previousSubPage()
 
-    downButton.setStyle
+    previousSubPageButton.setStyle
+      position : 'absolute'
+      left     : '200px'
+      bottom   : '10px'
+
+    @addSubView nextSubPageButton = new KDButtonView
+      cssClass : 'up'
+      title    : 'Next SubPage'
+      callback : => @slider.nextSubPage()
+
+    nextSubPageButton.setStyle
       position : 'absolute'
       right    : '200px'
       bottom   : '10px'
-
-    @addSubView upButton = new KDButtonView
-      cssClass : 'up'
-      title    : 'Up Page'
-      callback : => @slider.upPage()
-
-    upButton.setStyle
-      position : 'absolute'
-      left     : '200px'
-      bottom   : '10px'

    KD.getSingleton("mainView").enableFullscreen()

    @addSubView @slider = new Slider

    @slider.addPage page1 = new Page
      content  : 'Page 1'


  [X_COORD, Y_COORD] = [1, 2]

  @directions        =
    leftToRight      : ['left', 'top']
    topToBottom      : ['top', 'left']

  constructor:(options={}, data)->

    options.cssClass   = 'slider'
    super options, data

    @pages     = []
    @_coordsY  = []
    @_currentX = 0

    [@_pd, @_spd] = options.directions ? @constructor.directions.leftToRight

  addPage:(page)->
    @addSubView page

    stack = 100 * (@pages.length)
    pref  = {}
    pref[@_pd] = "#{stack}%"
    page.setStyle pref
    @pages.push [page]
    @_coordsY.push 0

