   
   '.play click': ->
     imageIds = @imageCookie.getAll()
-
+    $(".counter").text("1/"+imageIds.length)
     @displayScreen 'slideshow', @view('slideshow', { imageIds: imageIds })
+    
+  ## [ footer icons ]
+  '.next click': ->
+    currentIndex = $("#slideshow img:visible").index()
+    @showSlide currentIndex+1
+
+  '.prev click': ->
+    currentIndex = $("#slideshow img:visible").index()
+    @showSlide currentIndex+1
+    
+  showSlide: (index) ->
+    $("#slideshow img").hide()
+    $("#slideshow img:eq(#{index})").show()
+    totalCount = $("#slideshow img").length
+    $(".counter").text "#{index+1}/#{totalCount}"
     
   #VIEWS
     


  displayScreen: (type, html) ->
    switch type
      when "browse"
        @showIcons ".browseHeader, .searchWrap"
        @updateScreen null,null,"#browse",null,html
      when "artistList"
        @showIcons ".browseWrap, h1, .searchWrap"
        @updateScreen "#browse",null,"#artistList",@category,html
      when "albumList"
        @showIcons ".browseWrap, .backArrow, h1, .play, .manage, .searchWrap, .drag"
        @updateScreen "#artistList",@category,"#albumList",@artist,html
      when 'searchResults'
        @updateScreen null,null,'#searchResults',null,html
      when 'slideshow'
        @showIcons '.counter,.play'
        @updateScreen null,null,'#slideshow',null,html

  updateScreen: (previousType, previousName, currentType, currentName, currentHtml) ->
    @hideAllViews()

  ## TOP ICONS
    
  '.browseWrap click': (el) ->
    @showLastView()

  '.backArrow click': (el) ->
    @displayScreen el.attr("name"),null
