// used to display/hide form input hints (ie. Search Names) and set its styling
function setFormHints() {
	// loop through all form input elements where class="form-hint"
	$$('input.form-hint').each(function(elm) {
		// watch for any focus events on the form input
		elm.observe('focus', function() {
			removeFormHint(elm);
		});
		// watch for any blur events on the form input
		elm.observe('blur', function() {
			displayFormHint(elm);
		});
		displayFormHint(elm);
	});
}
function removeFormHint(elm) {
	// if the value of the field is equal to the title, then we need to clear it and set the styling.
	if(elm.value == elm.title) {
		elm.value = "";
		elm.style.color = "#000";
	}
}
function displayFormHint(elm) {
	// if the value of the filed is empty then set it to the form hint (the title).
	if(elm.value == "") {
		elm.value = elm.title;
		elm.style.color = "#999";
	}
}

// when the dom has loaded, apply all form hint observers
document.observe('dom:loaded', setFormHints);


var hover = 0;
// handler for the main feature slide show
function mainFeatureSlideShow() {
	// Time between rotations
	wait = 3000;
	// determine the number of slideshow items and begin looping
	var feature_slides = new getSlides('#feature_slides_wrapper .feature_slide');
	feature_slides.divs.each(function(elm) {
		elm.observe('click', function() {stopSlideshow(feature_timer);});
	});
	// get thumbnails
	var feature_thumbs = $$('.feature_thumbs .thumbs');
	
	thumbHover(feature_thumbs);
	
	feature_thumbs.each(function(elm) {
		elm.observe('click', function(e) {goToSlide(elm, feature_thumbs, feature_slides, feature_timer); e.stop();});
	});
	
	setInitialSlideState(feature_slides);
	
	var feature_timer = startSlideshow(feature_slides, feature_thumbs, wait);
}

// handler for the sidebar feature slide show
function sideSlideShow() {
	// Time between rotations
	wait = 3000;
	// determine the number of slideshow items and begin looping
	var side_slides = new getSlides('#sidebar_feature_wrapper .sidebar_feature');
	side_slides.divs.each(function(elm) {
		elm.observe('click', function() {stopSlideshow(side_timer);});
	});

	setInitialSlideState(side_slides);
	
	var side_timer = startSlideshow(side_slides, null, wait);
	
	$('arrow_l').observe('click', function(e) {
		stopSlideshow(side_timer);
		swapFade(side_slides, 'prev');
		e.stop();
		
	});
	$('arrow_r').observe('click', function(e) {
		stopSlideshow(side_timer);
		swapFade(side_slides, 'next');		
		e.stop();
	});
}

// handler for the sidebar feature slide show
// NOT CURRENTLY BEING USED...
function filmSlideShow() {
	// Time between rotations
	wait = 10000;
	// determine the number of slideshow items and begin looping
	var slideshow_slides = new getSlides('#slide_content_block .slide-content');
	slideshow_slides.divs.each(function(elm) {
		elm.observe('click', function() {stopSlideshow(slideshow_timer); $('toggle').removeClassName("selected");});
	});
	
	// get thumbnails
	var slideshow_thumbs = $$('.filmstrip .slides a');
	
	slideshow_thumbs.each(function(elm) {
		elm.observe('click', function(e) {goToSlide(elm, slideshow_thumbs, slideshow_slides, slideshow_timer); e.stop();});
	});


	setInitialSlideState(slideshow_slides);
	
	var slideshow_timer = "";
	
	$('toggle').observe('click', function(e) {
		if(this.hasClassName("selected")) {
			stopSlideshow(slideshow_timer);
		} else {
			slideshow_timer = startSlideshow(slideshow_slides, slideshow_thumbs, wait);
		}
		this.toggleClassName("selected");
		e.stop();
	});
	//var slideshow_timer = startSlideshow(slideshow_slides, slideshow_thumbs, wait);
}

// gets all the slides with a specific class name and returns an object.
function getSlides(slide_class) {
	this.divs = $$(slide_class);
	this.i = 0;
}

// set only the first slide visible and hide all others
function setInitialSlideState(slides) {
	slides.divs.each(function(elm, key) {
		if(key != 0) {
			elm.hide();
		}
	});
}

// the function that performs the fade
function swapFade(slides, direction) {
	if(direction == 'prev') {
		Effect.Fade(slides.divs[slides.i], {duration:1, from:1.0, to:0.0});
		slides.i--;
		if(slides.i < 0 ) {	
			slides.i = slides.divs.length - 1;
		}
		Effect.Appear(slides.divs[slides.i], {duration:1, from:0.0, to:1.0});
	} else {
		Effect.Fade(slides.divs[slides.i], {duration:1, from:1.0, to:0.0});
		slides.i++;
		if(slides.i == slides.divs.length) {	
			slides.i = 0;
		}
		Effect.Appear(slides.divs[slides.i], {duration:1, from:0.0, to:1.0});
	}
	
}

// shows the current thumb as selected when that slide is showing
function setThumbSelected(slides, thumbs) {
	if(slides.i == 0) {
		thumbs[slides.divs.length - 1].removeClassName("selected");
	} else {
		thumbs[slides.i - 1].removeClassName("selected");
	}
	thumbs[slides.i].addClassName("selected");
}

// sets a slide when it's thumbnail is clicked
function goToSlide(elm, thumbs, slides, timer) {
	slides.divs.invoke('hide');
	thumbs.each(function(e, key) {
		if(elm == e) {
			slides.divs[key].show();
			slides.i = key;
		}
	});
	thumbs.invoke('removeClassName', 'selected');
	elm.addClassName("selected");
	stopSlideshow(timer);
	hover = 0;
}

function stopSlideshow(timer) {
	clearTimeout(timer);
}

function startSlideshow(slides, thumbs, delay) {
	return setInterval(function() {
		swapFade(slides);
		if(thumbs != null) {
			setThumbSelected(slides, thumbs);
		}
	}, delay);
}

// helper function for hovering the thumbs since this needs to happen on the div
// can't wrap an anchor around multiple items block-level elements in IE
function thumbHover(thumbs) {
	thumbs.each(function(elm) {
		elm.onmouseover = function() {
			if(!this.hasClassName("selected")) {
				this.addClassName("selected");
				hover = 1;
			}
		}
		// if this is IE
		if(document.all){
			elm.onmouseleave = function() {
				if(hover == 1) {
					this.removeClassName("selected");
					hover = 0;
				}
			}
		} else {
			elm.onmouseout = function() {
				if(hover == 1) {
					this.removeClassName("selected");
					hover = 0;
				}
			}
		}
	});
}

// when the dom has loaded, begin the slideshows
document.observe('dom:loaded', mainFeatureSlideShow);
document.observe('dom:loaded', sideSlideShow);
/* currently not using this. Used for main slideshow and not fully implemented. 
document.observe('dom:loaded', filmSlideShow);
*/