/*
Versión 0.1
*/

document.addEvent('domready', function() {
  var showroom = $('ccShowroom');
  var items_container = $('viewport').getElement('div#content');
  var items = items_container.getElements('li');
  var pages = items.length;
  var currentpage = 1;
  var position = 0;
  var offset = 480;

  var scroll = new Fx.Scroll($('viewport'), {
    offset: {'x': 0, 'y':0},
    transition: Fx.Transitions.Cubic.easeOut
  }).toLeft();

  var navigation = new Element('div',{
    'class': 'navigation'
  });

  var pagenumber = new Element('span',{
    'class': 'pagenumber',
    'text': currentpage+'/'+pages
  });

  var scrollLeftArea = new Element('button',{
    'id': 'scrollLeft',
    'html': ' '
  });

  var scrollRightArea = new Element('button',{
    'id': 'scrollRight',
    'html': ' '
  });

  navigation.adopt(scrollLeftArea);

  navigation.adopt(pagenumber);

  navigation.adopt(scrollRightArea);

  scrollLeftArea.addEvent('click', function(event) {
    event = new Event(event).stop();
    if (currentpage == 1) return;
    currentpage--;
    position += -(offset);
    scroll.start(position,0);
    pagenumber.set('text',currentpage+'/'+pages);
  });

  scrollRightArea.addEvent('click', function(event) {
    event = new Event(event).stop();
    if (currentpage >= pages) return;
    currentpage++;
    position += offset;
    scroll.start(position,0);
    pagenumber.set('text',currentpage+'/'+pages);
  });

  showroom.adopt(navigation);

});