var ss_speed=6000, ss_start_delay_init=2000, ss_start_delay=600, ss_time_pause=10000, i_group_active=-1, navPrev, navNext;
var strdebug = '';
var ss_nav_outer = '<div class="btn_nav"><div class="btn_nav_inner"></div></div>';
var ss_nav_btn = '<span class="btn_card">nr</span>';

var day_nav_passer = { go: function(event, day) { day_nav(day) } };

document.observe("dom:loaded", function() {
  initSlideShows();
});


function initSlideShows() {
  if ( $('daily_recs') ) {
    slideshow1  = new Slideshow('slideshow1', 'card1', 'slide', 'btn_nav_inner', ss_speed, ss_time_pause);
    slideshow2  = new Slideshow('slideshow2', 'card2', 'slide', 'btn_nav_inner', ss_speed, ss_time_pause);
    slideshow3  = new Slideshow('slideshow3', 'card3', 'slide', 'btn_nav_inner', ss_speed, ss_time_pause);
    setTimeout("slideshow1.startShow()", ss_start_delay_init);
    setTimeout("slideshow2.startShow()", ss_start_delay_init + ss_start_delay);
    setTimeout("slideshow3.startShow()", ss_start_delay_init + (ss_start_delay*2));
    addDayNavButtons();
  }
}

Slideshow = Class.create();
Slideshow.prototype = {

  initialize: function(name,elem,slideclass,navClass,timeout,timepause) {

    this.name = name;
    this.playing = false;
    this.timeout = timeout;
    this.timepause = timepause;
    this.currentTimeout = null;

    this.container = $(elem);
    var slides = $$('#' + elem + ' .slide');
    this.slides = slides;
    this.slideCurrent = 0;
    this.slideCount = this.slides.length-1;

    this.container.insert({bottom: ss_nav_outer});
    var nav_btn_holder = $$('#' + elem + ' .' + navClass);

    for (var i = 0; i < slides.length; i++) {
      nav_btn_holder[0].insert({bottom: ss_nav_btn.replace('nr', i+1)});
      if (i>0) { this.slides[i].hide() }
    }

    var navbtns = $$('#' + elem + ' .' + navClass + ' .btn_card');
    this.navbtns = navbtns;
    this.navbtns[0].addClassName('btn_card_selected');

    for (var i = 0; i < navbtns.length; i++) {
      $(navbtns[i]).observe('click', this.clickNav.bindAsEventListener(this,i) );
    };

  },

  startShow: function(event) {
    this.playing = true;
    this.showSlide(this,1);
  },

  stopShow: function(event) {
    this.playing = false;
    clearTimeout(this.currentTimeout, 0);
  },

  resetShow: function(wait) {
    clearTimeout(this.currentTimeout, 0);
    this.playing = false;
    this.slideCurrent = 1;
    this.showSlide(this,0,1);
    setTimeout(this.name + ".startShow(this)", wait);
  },

  clickNav: function(event,nr) {
    this.playing = false;
    clearTimeout(this.currentTimeout, 0);
    this.showSlide(event,nr,1);
    var slideNext = this.slideCurrent+1;
    if ( slideNext > this.slideCount ) { slideNext = 0 }
    this.currentTimeout = setTimeout(this.name + ".playing = true;" + this.name + ".showSlide(this," + slideNext + ");", this.timepause);
  },

  showSlide: function(event,nr,flip) {

    var slidePrev = this.slideCurrent;
    if ( slidePrev != nr ) {
      var slideCurrent = nr;
      var slideNext = nr+1;
      if ( slideNext > this.slideCount ) { slideNext = 0 }

      if ( flip == 1 ) {
        this.slides[slidePrev].hide();
        this.slides[slideCurrent].show();
      }
      else {
        Effect.Fade(this.slides[slidePrev], {duration:1, from:1.0, to:0.0});
        Effect.Appear(this.slides[slideCurrent], {duration:1, from:0.0, to:1.0});
      }

      this.slideCurrent = slideCurrent;
      this.navbtns[slidePrev].removeClassName('btn_card_selected');
      this.navbtns[slideCurrent].addClassName('btn_card_selected');
      if (this.playing==true) {
        this.currentTimeout = setTimeout(this.name + ".showSlide(this," + slideNext + ");", this.timeout);
      };
    }
  }

};


function addDayNavButtons() {

  var day_nav = '<div id="day_nav"><div id="day_prev"></div><div id="day_next"></div></div>';
  var today = $('daily_recs').className;

  $('daily_recs').setStyle({ height: '304px' });
  $('daily_recs').wrap('div', {'id': 'carrousel'}).insert({bottom: day_nav});

  var day_nav_btns = $$('#day_nav div');
  day_nav_btns[1].addClassName('day_disabled');

  navPrev = day_nav_passer.go.bindAsEventListener(day_nav_passer, today);
  Event.observe(day_nav_btns[0], 'click', navPrev);

}


function day_nav( day ) {

  var day_nav_btns = $$('#day_nav div');

  Event.stopObserving(day_nav_btns[0], 'click', navPrev);
  Event.stopObserving(day_nav_btns[1], 'click', navNext);
  slideshow1.stopShow();
  slideshow2.stopShow();
  slideshow3.stopShow();

  new Ajax.Request ( '/includes/ajax/ajax_daily_recipes.asp', { method: 'get', parameters: 'day=' + day, onComplete: processDailyRecipes } );

}


function processDailyRecipes(request) {

  var items = request.responseXML.getElementsByTagName("recipe");
  if ( items.length != 0 ) {

    var r, r_date, r_card, r_pos, r_id, r_url, r_title, r_visual, r_course, r_type, r_kitchen, r_time, r_partner, r_source_id, r_publisher;
    var card1 = slideshow1.container, card2 = slideshow2.container, card3 = slideshow3.container;

    var slides = new Array();
    slides[1] = $$('#' + card1.id + ' .slide');
    slides[2] = $$('#' + card2.id + ' .slide');
    slides[3] = $$('#' + card3.id + ' .slide');

    var str_code;

    for (var i = 0; i < items.length; i++) {

      r = items[i].childNodes;
      r_date          = r[0].childNodes[0].nodeValue;
      r_card          = r[1].childNodes[0].nodeValue;
      r_pos           = r[2].childNodes[0].nodeValue;
      r_id            = r[3].childNodes[0].nodeValue;
  		r_url           = r[4].childNodes[0].data;
  		r_title         = r[5].childNodes[0].data;
  		r_visual        = r[6].childNodes[0].data;
  		r_course        = r[7].childNodes[0].data;
  		r_type          = r[8].childNodes[0].data;
  		r_kitchen       = r[9].childNodes[0].data;
  		r_time          = r[10].childNodes[0].data;
  		r_partner       = r[11].childNodes[0].data;
  		r_source_id     = r[12].childNodes[0].data;
  		r_publisher     = r[13].childNodes[0].data;

      str_code =
        '<div class="dr_p">' + r_publisher + '</div>'
        + '<a href="' + r_url + '"><img src="' + r_visual + '" alt="' + r_title + '" /></a>'
        + '<div class="rest">'
        + '<h2><a href="' + r_url + '">' + r_title + '</a></h2>'
        + '<div>' + r_course + ' &bull; ' + r_type + '</div>'
        + '<div>' + r_kitchen + ' &bull; ' + r_time + '</div>'
        + '</div>';

      slides[r_card][r_pos-1].update(str_code);

    }

    $$('#daily_recs_inner .dr_date').each(function(el) { el.update(r_date); });

    var nav = request.responseXML.getElementsByTagName("nav");
    var nav_items = nav[0].childNodes;
    var nav_prev = nav_items[0].childNodes[0].nodeValue;
    var nav_next = nav_items[1].childNodes[0].nodeValue;

    var day_nav_btns = $$('#day_nav div');

    Event.stopObserving(day_nav_btns[0], 'click', navPrev);
    Event.stopObserving(day_nav_btns[1], 'click', navNext);

    if ( nav_prev != '-' ) {
      navPrev = day_nav_passer.go.bindAsEventListener(day_nav_passer, nav_prev);
      Event.observe(day_nav_btns[0], 'click', navPrev);
      day_nav_btns[0].removeClassName('day_disabled');
      }
    else {
      day_nav_btns[0].addClassName('day_disabled');
    }

    if ( nav_next != '-' ) {
      navNext = day_nav_passer.go.bindAsEventListener(day_nav_passer, nav_next);
      Event.observe(day_nav_btns[1], 'click', navNext);
      day_nav_btns[1].removeClassName('day_disabled');
    }
    else {
      day_nav_btns[1].addClassName('day_disabled');
    }

  }

  slideshow1.resetShow(ss_start_delay_init);
  slideshow2.resetShow(ss_start_delay_init + ss_start_delay);
  slideshow3.resetShow(ss_start_delay_init + (ss_start_delay*2));

}