var ACTIVE_CSS_CLASS = "active";
var CENTER_CSS_CLASS = "center";
var MAX_NAVIGTION_ITEM_TEXT_LENGTH = 38;
var SLIDESHOW_WAIT_TIME = 5000;

var _preloadedImages;
var _slideshowTimer;
var _slideshowPlayCounter = 0, _maxSlides = 3;
var _offset = 0;
var _curIndex = 0;

/// Loading and HTML Construction Functions

// Preload the Slideshow Images
function preloadImages() {
    
    if( null == $E(".hiddenMaterial .ImageContent") ) return;

	var images = [];
		
	for(var i = 0 ; i < _maxSlides; i++) {
		
		if( null == $E(".hiddenMaterial .ImageContent #Image_" + i ) ) continue;
			
		images.push( $E(".hiddenMaterial .ImageContent #Image_" + i ).getValue());
	}
		
	_preloadedImages = new Asset.images(images, {
		onProgress: function(){ this.setStyle("opacity", 0); }
	});
}

// Based on the 'HiddenMaterial' Elements, create and display the Slideshow Navigation
function createNavigation() {
  
    if( null == $E(".hiddenMaterial .ImageContent") ) return;

    var ul = new Element("ul");
	var navContainer = $E(".slideshowNavigation");
	
	var setCenterSlide = (_maxSlides % 2) != 0; // Odd number of slides, therefore there must be a middle element
	var centerSlideIndex = (setCenterSlide) ? Math.floor(_maxSlides / 2) : -1;
	
	var hiddenMaterialImageContent = $$(".hiddenMaterial .ImageContent");
	
	for(var i = 0; i < _maxSlides; i++) {
		
		if( null == hiddenMaterialImageContent[i] ) continue;
		
		var li = new Element("li");
		var a = new Element("a");
		
		var title = $E(".hiddenMaterial .ImageContent #Title_" + i).getValue();
		    
		if( title.length > MAX_NAVIGTION_ITEM_TEXT_LENGTH ) title = title.slice(0,MAX_NAVIGTION_ITEM_TEXT_LENGTH-2) + "&hellip;";
		
		a.setProperty("href","#");
		
		a.index = i;
		a.setHTML( title );
			
		if( i == _curIndex ) li.addClass(ACTIVE_CSS_CLASS);
		if( setCenterSlide && i == centerSlideIndex ) li.addClass(CENTER_CSS_CLASS);
			
		a.addEvent("click", function(e){ 
			new Event(e).stop();
			stopSlideshow();
			showImage(this.index); 
		});
				
		li.adopt(a);
		ul.adopt(li);
	}
	
	navContainer.adopt(ul);
    
    // Parse-out the Offset Value from the first item's input id
	_offset = Number($E(".hiddenMaterial .ImageContent input").id.split("_")[1]);
}


function playSlideshow() {
	
	showImage((_curIndex+1) % _preloadedImages.length);
	_slideshowPlayCounter++;
	if( _slideshowPlayCounter == _maxSlides ) stopSlideshow();
	
}
function stopSlideshow( action ) {

	$clear(_slideshowTimer);	

}

// Display the image at the index: index, this is the index within the _preloadedImages Array
function showImage(index) {

	if ( index < 0 || index >= _preloadedImages.length || index == _curIndex ) return;
	
	_curIndex = index;
		
	// Set the Active Navigation Item
	active = $E(".slideshowNavigation ul li.active");
		
	// Remove active class from old item
	if (active) active.removeClass(ACTIVE_CSS_CLASS);
		
	$$(".slideshowNavigation ul li")[_curIndex].addClass(ACTIVE_CSS_CLASS);
		
	// Fade the Current Image
	var appearEffect = new Fx.Style(_preloadedImages[_curIndex],'opacity',{duration:500});
	var fadeEffect = new Fx.Style($E(".slideshowImage img"),'opacity',{duration:500, wait:false, onComplete: function(){
		var inputNumber = Number(_curIndex + _offset);
		$E(".slideshowImage img").remove();
		var aTag = new Element("a");
		aTag.href = $E(".hiddenMaterial .ImageContent input#Link_"+inputNumber).getValue();
		aTag.adopt(_preloadedImages[_curIndex]);
		$E(".slideshowImage").adopt(aTag);
		$E(".copy_box h3").setHTML($E(".hiddenMaterial .ImageContent input#Title_"+inputNumber).getValue());
		$E(".copy_box p").setHTML($E(".hiddenMaterial .ImageContent input#Copy_"+inputNumber).getValue());
		$E(".copy_box a").href = $E(".hiddenMaterial .ImageContent input#Link_"+inputNumber).getValue();
		appearEffect.start(1);
	}});
		
	fadeEffect.start(0);
}

// HTML Page Load function
function pageLoadHandler() {
    
    if( $$(".hiddenMaterial .ImageContent").length <= 1 ) return;

	preloadImages();
	createNavigation();
	
	_curIndex = 0;
	
	_slideshowPlayCounter = 0;
	_slideshowTimer = playSlideshow.periodical(SLIDESHOW_WAIT_TIME);
}

window.addEvent("load", pageLoadHandler);