/* Scriptmodule voor fancy feature
   
   (C) 2008 vizi
   
   Plaats:  /scripts/class_feature.js
   Revisie: v1, juli 2008

 */

/*  GLOBALE VARIABELEN EN CONSTANTEN
 *
 */
var currentSlide = 0;
var currentZindex = 50;
var totalSlides = 0;
var slideshowInterval = null;


/*  FEATURE INIT
 *
 */
function feature_init()
{
	var ftBox = document.getElementById('feature');
	if (!ftBox) return;
	
	// Zet slides in goede volgorde.
	var ftSlides = ftBox.getElementsByTagName("div");
	for (var i = 0; i < ftSlides.length; i++)
	{
		if (ftSlides[i].className != "ft-container") continue;
		
		// Zet z-index.
		ftSlides[i].style.zIndex = currentZindex - totalSlides;
		ftSlides[i].id = "ft-slide-" + totalSlides;

		totalSlides++;
	}

	if (totalSlides > 1)
	{
		// Haal tick balkje op.
		var ftHead = document.getElementById('ft-heading');
		
		// Bouw controls op en hang ze in het DOM.
		var ftPrevButton = document.createElement("strong");
		ftPrevButton.id = 'ft-nav-prev';
		ftPrevButton.targetMouseoverHandler = ftOver;
		ftPrevButton.targetMouseoutHandler = ftOut;
		ftPrevButton.targetClickHandler = ftPrev;
		dispatch(ftPrevButton, "mouseover", "targetMouseoverHandler");
		dispatch(ftPrevButton, "mouseout", "targetMouseoutHandler");
		dispatch(ftPrevButton, "click", "targetClickHandler");
		
		var ftNextButton = document.createElement("strong");
		ftNextButton.id = 'ft-nav-next';
		ftNextButton.targetMouseoverHandler = ftOver;
		ftNextButton.targetMouseoutHandler = ftOut;
		ftNextButton.targetClickHandler = ftNext;
		dispatch(ftNextButton, "mouseover", "targetMouseoverHandler");
		dispatch(ftNextButton, "mouseout", "targetMouseoutHandler");
		dispatch(ftNextButton, "click", "targetClickHandler");
		
		var ftSlideshowButton = document.createElement("strong");
		ftSlideshowButton.id = 'ft-slideshow';
		ftSlideshowButton.className = "pause";
		ftSlideshowButton.targetMouseoverHandler = ftOver;
		ftSlideshowButton.targetMouseoutHandler = ftOut;
		ftSlideshowButton.targetClickHandler = ftSlideshow;
		dispatch(ftSlideshowButton, "mouseover", "targetMouseoverHandler");
		dispatch(ftSlideshowButton, "mouseout", "targetMouseoutHandler");
		dispatch(ftSlideshowButton, "click", "targetClickHandler");
		
		// En hang de controls in de pagina.
		ftHead.appendChild(ftPrevButton);
		ftHead.appendChild(ftNextButton);
		ftHead.appendChild(ftSlideshowButton);
	}
}



/*  FEATURE SLIDESHOW & NAVIGATION HELPERS
 *
 */
function ftOver()
{
	var currentClass = this.className || '';
	this.className = currentClass + "over";
}

function ftOut()
{
	var currentClass = this.className;
	this.className = currentClass.substring(0, currentClass.indexOf("over"));
}


function ftPrev()
{
	if (currentSlide == 0) currentSlide = totalSlides;
	currentSlide--;
	currentZindex++;
	
	$('ft-slide-' + currentSlide).setStyles(
  {
    'opacity': 0,
    'z-index': currentZindex
  });
  $('ft-slide-' + currentSlide).tween('opacity', 1);
}

function ftNext()
{
	currentSlide++;
	if (currentSlide == totalSlides) currentSlide = 0;
	currentZindex++;
	
	$('ft-slide-' + currentSlide).setStyles(
  {
    'opacity': 0,
    'z-index': currentZindex
  });
  $('ft-slide-' + currentSlide).tween('opacity', 1);
}


function ftSlideshow()
{
	var slideshowButton = document.getElementById('ft-slideshow');
	if (slideshowInterval)
	{
		clearInterval(slideshowInterval);
		slideshowInterval = null;
		slideshowButton.className = "pauseover";
	}
	else
	{
		slideshowInterval = setInterval(ftNext, 5000);
		slideshowButton.className = "playover";
	}
}


// Hang script in window.onload ketting.
window.targetFeatureHandler = feature_init;
dispatch(window, "load", "targetFeatureHandler");