var SlideNav = new Class({
  defaultOptions: function() {
		return {
		  page:     1,
			per_page: 4,
			total:    4,
			
			type: 'popular'
		};
	},
  initialize: function(options) {
    this.setOptions(this.defaultOptions(), options);
    
    this.parent      = $(this.options.type);
    this.container   = $$('#' + this.options.type + ' .items')[0];
    this.pages       = $$('#' + this.options.type + ' .pages')[0];
    this.left_arrow  = $$('#' + this.options.type + ' .arrow_left')[0];
    this.right_arrow = $$('#' + this.options.type + ' .arrow_right')[0];
    this.description_copy = $$('#' + this.options.type + ' .description_copy')[0];
    this.indi        = $$('#' + this.options.type + ' .indicator')[0];
    
    this.fx = new Fx.Slide(this.container, { mode: 'horizontal' });
    this.options.total = Math.ceil(this.options.total / this.options.per_page);
    this.showPage();
    
    this.left_arrow.addEvent('click', function() {
      this.showPage('previous');
    }.bind(this));
    
    this.right_arrow.addEvent('click', function() {
      this.showPage('next');
    }.bind(this));
    
    this.left_arrow.addEvent('mouseover', function() {
      var children = this.left_arrow.getChildren();
      children[0].hide();
      children[1].show();
    }.bind(this));
    
    this.right_arrow.addEvent('mouseover', function() {
      var children = this.right_arrow.getChildren();
      children[0].hide();
      children[1].show();
    }.bind(this));
    
    this.left_arrow.addEvent('mouseout', function() {
      var children = this.left_arrow.getChildren();
      children[1].hide();
      children[0].show();
    }.bind(this));
    
    this.right_arrow.addEvent('mouseout', function() {
      var children = this.right_arrow.getChildren();
      children[1].hide();
      children[0].show();
    }.bind(this));
  },
  showPage: function(direction) {
    if (this.description_copy.visible())
      this.description_copy.fadeOut();
    
    if (this.indi.visible())
      return;
    
    switch(direction) {
      case 'previous': this.options.page -= 1; break;
      case 'next':     this.options.page += 1;
    }

	if($('charity_category_id')) {
		this.options.charity_category_id = $('charity_category_id').value
	}
    
    this.options.page = this.realPage(this.options.page);
    var pages_request = this.pagesForRequest();
    var page_cached = !pages_request.contains(this.options.page);
    
    if (page_cached)
      this.copyPage(this.options.page);
    
    if (pages_request.length > 0) {      
      if (!page_cached) {
        this.container.innerHTML = '';
        this.indicator(true);
      }
      new Ajax('/redeem/page' + (this.options.id ? '/' + this.options.id : '') + (this.options.charity_category_id ? '?charity_category_id=' + this.options.charity_category_id : ''), {
  			onComplete: function(response) {
          this.pages.innerHTML += response;
          if (!page_cached) {
            this.indicator();
            this.copyPage(this.options.page);
          }
  			}.bind(this),
  			postBody: {
  			  type:  this.options.type,
  			  pages: Json.toString(pages_request),
  			  sort:  this.options.sort
  			}
  		}).request();
  	}
  },
  moveArrows: function() {
    var height = this.parent.getSize().size.y;
    var l = this.left_arrow, r = this.right_arrow;
    l.hide();
    r.hide();
    l.setStyle('top', (height/2) - 20);
    r.setStyle('top', (height/2) - 20);
    l.fadeIn();
    r.fadeIn();
  },
  realPage: function(page) {
    if (page < 1)
      page = this.options.total == 0 ? 1 : this.options.total;
    else if (page > this.options.total)
      page = 1;
    return page;
  },
  pagesForRequest: function() {
    var p   = this.options.page;
    var arr = [ this.realPage(p-1), this.realPage(p), this.realPage(p+1) ];
    arr.copy().each(function(page) {
      if ($ES('.page' + page, this.pages).length != 0)
        arr.remove(page);
    }, this);
    return arr;
  },
  copyPage: function(page) {
    var el = $ES('.page' + page, this.pages);
    if (el.length == 1) {
      var html = el[0].innerHTML;
      this.fx.slideOut().chain(function() {
        this.container.innerHTML = html;
        this.addEvents();
        this.fx.show();
        this.container.fadeIn();
        this.moveArrows();
      }.bind(this));
      return true;
    }
    return false;
  },
  indicator: function(show) {
    this.indi[show ? 'fadeIn' : 'fadeOut']();
  },
  addEvents: function() {
    $ES('.item', this.container).each(function(item) {
      item.addEvent('click', function(e) {
        var url = $ES('.url', item);
        if (url.length > 0) {
          window.location = url[0].innerHTML;
          return;
        }
        this.description_copy.innerHTML = $ES('.description', item)[0].innerHTML;
        $ES('.x a', this.description_copy)[0].addEvent('click', function(e) {
          this.description_copy.fadeOut();
          e.stop();
        }.bindWithEvent(this));
        var a = $ES('.add_to_cart a', this.description_copy);
        if (a.length > 0)
          a[0].addEvent('click', function(e) {
            Global.Redeem.addToCart(item.id.substring(2));
            e.stop();
          }.bindWithEvent(this));
        this.description_copy.setStyle('top', item.getPosition().y - this.parent.getPosition().y - 3);
        this.description_copy.fadeIn(400);
        
      }.bindWithEvent(this));
    }, this);
  }
});

SlideNav.implement(new Options);