/*-----------------------------------------------------------------------*/
/* sm_features.js
/* By Joseph A LaConte (jlaconte@gmail.com, jlaconte@uccs.edu)
/* May 28, 2010
/*
/* DOM Driven JS Feature 
/* Requires a JS library for Visual Effects (current using scriptaculous)
/*
/* A filmstrip of thumbnails control the currently highlighted feature.  The 
/* Application will automatically scroll through the thumbs/features until
/* the user clicks one.  Each thumb corresponds to fully detailed feature
/* that get populated into a larger container upon selection or auto-scroll.
/*-----------------------------------------------------------------------*/
var displayedFeature = 'feature_displayed';
var displayContainer ='UCCSFeatureHighlight';
var activeFeatureClass = 'activeFeature';
var activeFeatureName = 'feature1';
var featureThumbContainer = 'UCCSFeatureThumbs';
var thumbTagName = 'A';
var usingFeatureLoop = false;
var thumbLabel = '_thumb';
var effectDuration = .5;

function displayFeature(feature) {
  if (! usingFeatureLoop) { clearInterval(featureLoop);  }

  var featureElement = $(feature);
  var displayElement = $(displayedFeature);
  
  var effect_options = {duration: effectDuration}
  effect_options.afterFinish = function(effect) {showFeature(featureElement);};
  
  hideFeature(displayElement, effect_options, activeFeatureName+thumbLabel);
  activeFeatureName = feature;
}

function hideFeature(feature, effect_options, thumb) {
  //Effect.DropOut(feature, effect_options);
  Effect.Fade(feature, effect_options);
}

function showFeature(feature) {
  var containerElement = $(displayContainer);
  
  var html = '';
  html += '<div id="'+displayedFeature+'" class="'+displayedFeature+'" style="display:none">'; 
  html += feature.innerHTML;
  html += '</div>';
  
  //alert(html);
  
  containerElement.innerHTML = html;

  var displayElement = containerElement.childNodes[0];
  var effect_options = {duration: 1};
  Effect.Appear(displayElement.id, effect_options);
  
  clearFeatureThumbs();
  var featureThumb = $(feature.id+thumbLabel);
  addClass(featureThumb, activeFeatureClass);
}

function clearFeatureThumbs() {
  var thumbContainer = $(featureThumbContainer);
  var thumbNode = thumbContainer.firstChild;
  while (thumbNode) {
    if (thumbNode.tagName == thumbTagName) {
	  replaceClass(thumbNode,activeFeatureClass,'');
	}
	thumbNode = thumbNode.nextSibling;
  }
}

function nextFeatureThumb() {
  //alert('Automated loop');
  var thumbContainer = $(featureThumbContainer);
  var thumbNode = thumbContainer.firstChild;
  while (thumbNode) {
    if (thumbNode.tagName == thumbTagName) {
	  if ( containsClass(thumbNode,activeFeatureClass) ) {
	    thumbNode=thumbNode.nextSibling;
		if ( clickNextThumb(thumbNode) ) { return; }
		//otherwise
		thumbNode=thumbContainer.firstChild; // start from the beginning
		clickNextThumb(thumbNode);
		return;
	  }
	}
	thumbNode = thumbNode.nextSibling;
  } 
}

function clickNextThumb(startThumb) {
  var thumbNode = startThumb;
  while (thumbNode) {
    if (thumbNode.tagName == thumbTagName) {
	  var thumbName = new String(thumbNode.id);
	  //alert(thumbName.length);
	  usingFeatureLoop = true;
      //thumbNode.click();
	  //alert( thumbName.substring(0, thumbName.length - thumbLabel.length) );
	  displayFeature( thumbName.substring(0, thumbName.length - thumbLabel.length) );
	  usingFeatureLoop = false;
      return true;
    }
    thumbNode=thumbNode.nextSibling;
  }
  return false;
}

function containsClass(element, myClass) {
  /* check for class name between anchors or spaces
   - anchors: first class, last class, only class 
   - spaces: adjacent to another class */
  return new RegExp("(^|\\s)" + myClass + "(\\s|$)").test(element.className);
}

function replaceClass(element, findClass, replaceClass) {
  // explicit
  //element.setAttribute( 'className', element.className.replace(findClass, replaceClass) );
  element.className = element.className.replace(findClass, replaceClass);
}

function addClass(element, newClass) {
  // check to see if has any class assigned
  if (element.className != '') {
    // only add if does not already have
    if (! containsClass(element, newClass) ) {
      //element.setAttribute('className', element.className + ' ' + newClass);
      element.className = element.className + ' ' + newClass;
    }
  }
  else {
    //element.setAttribute('className', newClass);
    element.className = newClass;
  }
}
if ( typeof(featureLoopDuration) == 'undefined') { featureLoopDuration = 10000; }
var featureLoop = window.setInterval(nextFeatureThumb,featureLoopDuration);