var divs = new Array();
var current_pos = null;
var fader_box_class = 'tgl'; // class to collect content divs. all should start with "display: none;" set as their inline style.
var fader_nav_class = 'button'; // the class name for elements to apply the onclick observers to
var current_fader_nav_class = 'current-fader';
var effect_duration = 1; // how long the effect lasts
var fade_interval = 8; // time in seconds before loading another content block
var fade_executer = null;
var fader_debug = false;

// create an array of all possible fader divs
function gather_fader_divs() {
  var elements = document.getElementsByClassName(fader_box_class);
  if (elements) {
    for(i=0;i<elements.length;i++) {
      divs.push(elements[i].id);
      if (fader_debug) {
        console.log('Added id to divs: '+elements[i].id);
      }
      try {
        if ($(elements[i].id).style.display == 'block') {
          current_pos = i;
        }
      } catch (err) {}
    }
  }
}

function add_click_observers_to_nav() {
  var elements = document.getElementsByClassName(fader_nav_class);
  if (elements) {
    for(i=0;i<elements.length;i++) {
      if (fader_debug) {
        console.log('element: '+elements[i]);
      }
      Event.observe(elements[i], 'click', function(event) {var ele = event.element(); toggle_content(ele.id);});
      try {
        if (null == current_pos && $('fade-'+elements[i].id).style.display == 'block') {
          current_pos = i;
        }
      } catch (err) {}
    }
  }
}

function init_content_fader() {
  gather_fader_divs();
  add_click_observers_to_nav();
  if (divs.length == 0) {
    return;
  }
  // track the currently visible item, assume this item is actually already visible (will be set in the future)
  if (current_pos == null) {
    current_pos=Math.floor(Math.random()*divs.length+1)-1;
  }
  
  if (fader_debug) {
    console.log('Will set div to: '+divs[current_pos]);
  }
  $(divs[current_pos]).style.display='block';
  add_current_class_to_nav(divs[current_pos].replace(/fade\-/,'')); // doesn't matter if it fails
  if (divs.length > 1) {
    start_fader();
  }
  
  if (fader_debug) {
    console.log("Current position set to: "+current_pos);
  }
}

function start_fader() {
  fade_executer = new PeriodicalExecuter(
    function(pe) {
      next_fader();
    }, fade_interval
  );
}

function stop_fader() {
  fade_executer.stop();
}

function toggle_content(element){
  var visible_element_id = divs[current_pos];
  // console.log('On Enter: Current Position: '+ current_pos+' ; currently_visible_element_id: '+visible_element_id);  
  if (
    (
      typeof(element) == 'object' && 
      ( 'fade-'+element.id == visible_element_id || $(visible_element_id).visible() )
    ) 
      || 
    (
      typeof(element) == 'string' && element == visible_element_id
    )
  ) {
    if (fader_debug) {
      console.log('returning - already visible');
      console.log('Display: '+$(visible_element_id).style.display);
    }
    return;
  } else {
    if (element.indexOf('fade-') != -1) {
      element = element.replace(/fade\-/,'');
    }
    for (i=0; i<divs.length; i++) {
      if (divs[i] == 'fade-'+element) {
        current_pos = i;
        remove_current_class_from_nav($(visible_element_id.replace(/fade\-/,'')));
        fade_out_and_in(visible_element_id, divs[current_pos])
        if (fader_debug) {
          console.log('after fading current_pos: '+current_pos);
        }
        break;
      }
    }
  }
};

function fade_out_and_in(visible_element_id, appearing_element_id) {
  $(visible_element_id).fade({
    duration: effect_duration,
    afterFinish: function() {
      Effect.Appear($(appearing_element_id), { duration: effect_duration });
      // attach the class, if the indicator is available
      add_current_class_to_nav(appearing_element_id.replace(/fade\-/,''));
    }
  });
}

function next_fader() {
  var next_index = current_pos + 1;
  if (next_index >= divs.length) {
    next_index = 0;
  }
  toggle_content(divs[next_index]);
}

function add_current_class_to_nav(id) {
  var ele = $(id);
  if (ele) { ele.addClassName(current_fader_nav_class); }
}

function remove_current_class_from_nav(id) {
  var ele = $(id);
  if (ele) { ele.removeClassName(current_fader_nav_class); }
}

Event.observe(window, 'load', function() { init_content_fader(); });