var ScrollingPod = Class.create();
ScrollingPod.prototype = {
  
  initialize: function(element, options) {
    this.element = $(element);
    this.content = {}
    this.page = 0;
    this.pageButtons = $A();
    
    this.options = $H({
      containerClass:   '.scrollContainer',
      leftBtnClass:     '.leftBtn',
      rightBtnClass:    '.rightBtn',
      paginationClass:  '.pagination',
      childrenPerPage:  this.element.readAttribute('childrenPerPage') || 3
    }).merge(options || {}).toObject();
    
    this.elements = {
      container:        this.element.select(this.options.containerClass).first(),
      leftBtn:          this.element.select(this.options.leftBtnClass).first(),
      rightBtn:         this.element.select(this.options.rightBtnClass).first(),
      pagination:       this.element.select(this.options.paginationClass).first()
    };
    
    this.setup();
  },
  
  setup: function() {
    $$('.displayPod').each(function(pod) {
      if(pod.select("img").first().complete) pod.setStyle({ visibility: 'visible' });
      pod.select("img").first().observe('load', function(event) {
        pod.setStyle({ visibility: 'visible' });
      }.bindAsEventListener(this));
    });
    var viewport = new Element("div");
    var contentWidth = 0;
    this.element.setStyle({ position: 'relative' });
    viewport.setStyle({
      width:    this.elements.container.getStyle('width'),
      height:   this.elements.container.getStyle('height'),
      overflow: 'hidden',
      position: 'relative',
      left:     (parseInt(this.elements.container.getStyle('padding-left')) + parseInt(this.elements.container.getStyle('margin-left'))) + 'px'
    });
    this.elements.container.insert({ after: viewport });
    viewport.insert(this.elements.container);
    this.elements.container.childElements().each(function(child) {
      contentWidth += 30 + child.getWidth();
    });
    this.elements.container.setStyle({
      width: contentWidth + 'px',
      position: 'absolute',
      margin: 0,
      padding: 0
    });
        
    this.elements.rightBtn.observe('click', this.next.bind(this));
    this.elements.leftBtn.observe('click', this.previous.bind(this));
    for(var i = 0; i < this.pages(); i++) {
      var button = new Element('a', {
        title:      'View page ' + (i + 1),
        href:       'javascript:void(0)',
        showPage:   i
      });
      if(!i) button.addClassName("current");
      this.elements.pagination.insert(button);
      button.observe('click', function(event) {
        this.openPage(parseInt(Event.element(event).readAttribute('showPage')) - this.page);
      }.bindAsEventListener(this));
      this.pageButtons.push(button);
    }
  },
  
  pages: function() {
    return Math.ceil(this.elements.container.childElements().length / this.options.childrenPerPage);
  },
  
  next: function() {
    this.openPage(1);
  },
  
  previous: function() {
    this.openPage(-1);
  },
  
  openPage: function(direction) {
    this.pageButtons[this.page].removeClassName('current');
    this.page = (this.page + direction) % this.pages();
    if(this.page < 0) this.page = this.pages() - 1;
    this.pageButtons[this.page].addClassName('current');
    
    var first = this.elements.container.childElements()[this.page * this.options.childrenPerPage];
    var left = first.positionedOffset().left * -1;
    left += parseInt(first.getStyle('margin-left'));
    
    new Effect.Move(this.elements.container, {
      x: left, y: 0, mode: 'absolute',
      transition: Effect.Transitions.sinoidal
    });
  }
};

var Popup = Class.create();
Popup.prototype = {
  
  initialize: function(element, options) {
    this.activePopup = null;
    
    this.options = $H({
      relationAttribute:    'rel',
      descriptionSelector:  'textarea',
      titleSelector:        'h1 a',
      priceSelector:        'h2',
      trigger:              'mouseover'
    }).merge(options || {}).toObject();
    
    this.element = $(element);
    this.element.observe(this.options.trigger, this.popup.bindAsEventListener(this));
  },
  
  popup: function(event) {
    var div = new Element('div', { className: 'detailContent' });
    div.insert(new Element('h1').update('Testing'));
    this.element.insert({ after: div });
  }
}

document.observe("dom:loaded", function() {
  $$(".scrollPod").each(function(pod) {
    new ScrollingPod(pod);
  });
  $$(".displayPod").each(function(pod) {
    // console.log(new Popup(pod, null));
  }); 
});