/**
 * Features Display - Events Display:
 *   link id should follow - element_link_0, element_link_1
 *   content div id should follow = element_0, element_1
 */
var currentElement = 0;
var elementsArr = [];
var element, previous_element_btn, next_element_btn, previous_element_btn_class, next_element_btn_class, elements_parent;
var currentColor="", defaultColor="";
function divSwapping(el,content,tag) {
  elements_parent = content;
  element = $(el); 
  element.removeClass('hide');
  var elementsLinks = element.getElementsByTagName(tag);
  $( 'element_link_0' ).addClass("currentElement");

  previous_element_btn = $('previous_element');
  previous_element_btn.onclick = previousElement.bindAsEventListener(previous_element_btn);

  next_element_btn = $('next_element');
  next_element_btn.onclick = nextElement.bindAsEventListener(next_element_btn);
  
  for(var c=0; c<elementsLinks.length; c++) {
    var elNum = String(elementsLinks[c].id).split("_")[2];
    if(elNum != undefined) {
      var elementDiv = $( "element_"+elNum );
      var elementLink = $( "element_link_"+elNum );
      if( elementsArr.length>0 ) {
        elementDiv.addClass("hide");
        elementDiv.removeClass("block");
      }
      elementsArr.push( elementDiv );
      elementLink.onclick = function(){
        showElement( this.id.split("_")[2] );
        $( "element_link_"+currentElement ).removeClass('currentElement');
        this.addClass('currentElement');
      };
      if( !elementLink.hasClass('currentElement') ) {
        if( defaultColor=="" ) defaultColor = elementLink.getStyle('color');
        elementLink.addEvent('mouseover', elementEvents);
        elementLink.addEvent('mouseout', elementEvents);
      }else {
        if( currentColor=="" ) currentColor = elementLink.getStyle('color');
      }
    }
  }
};
function showElement(num) {
  var myFx = new Fx.Style( elements_parent, 'opacity', {duration:250});
  num = Number(num);
  if( num != currentElement ) {
    setCurrentStyle(num);
    myFx.start(0).chain( function() {
      toggleElement(num);
      myFx.start(1);
    } );
  }
};
function nextElement() {
  if( currentElement!=elementsArr.length-1 ) showElement(Number(currentElement)+1);
  else showElement(0);
};
function previousElement() {
  if( currentElement!=0 ) showElement(Number(currentElement)-1);
  else showElement(Number(elementsArr.length-1));
};
function elementEvents(e) {
  switch(e.type) {
    case "mouseover" : this.setStyle('color', currentColor);
    break;
    case "mouseout" : this.setStyle('color', defaultColor);
  }
}
function setCurrentStyle(num) {
  var oldCurrent = $( "element_link_"+currentElement );
  oldCurrent.setStyle('color', defaultColor);
  oldCurrent.addEvent('mouseover', elementEvents);
  oldCurrent.addEvent('mouseout', elementEvents);
  
  var newCurrent = $( "element_link_"+num );
  newCurrent.removeEvent('mouseover', elementEvents);
  newCurrent.removeEvent('mouseout', elementEvents);
  newCurrent.addClass('currentElement');
}
function toggleElement(num) {
  $( "element_"+num ).addClass("block");
  $( "element_"+num ).removeClass("hide");
  elementsArr[currentElement].addClass("hide");
  elementsArr[currentElement].removeClass("block");

  currentElement = num;
};