window.addEvent('domready', function() {
new SlideList($('topnavmenu').getElement('ul'));
});

// Showcase script

var number = 0;
window.addEvent('domready', function(){
	$('showcase').getElements('.bigimage').each(function(i,x) {
		i.setStyles({'opacity':'0'});
	});
	$('showcase-nav').getElements('li').each(function(i,x) {
		i.addEvent('click', function(event){
			event.stop();
			showshowcase(x);
			number = x;
		});
	});
});
window.addEvent('load', function(){
	animation();
});
function animation() {
	var nav = $('showcase-nav');
	if (number > nav.getElements('li').length-1) {number = 0;}
	var fx = nav.effects({duration: 2400, transition: Fx.Transitions.Quart.easeOut});
	fx.start().chain(
		function(){this.start(showshowcase(number));},
		function(){this.start(number = number + 1);},
		function(){this.start(animation());}
	);
}
function showshowcase(number) {
	activatethumbnail(number);
	var big = 'showcase-' + number + '-big';
	$('showcase-loader').setStyles({'display':'none'});
	$('showcase').getElements('.bigimage').each(function(i) {
		var fx = $(i).effects({duration: 1000, transition: Fx.Transitions.Quart.easeOut});
		if (i.get('id') !== big) {
			fx.start({'opacity':'0'});
		}
		else {
			fx.start({'opacity':'1'});
		}
	});
}
function activatethumbnail(number) {
	$('showcase-nav').getElements('li').each(function(i,x) {
		if (x == number) {
			i.addClass('active');
		}
		else {
			i.removeClass('active');
		}
	});
}

//Control Slider Script

window.addEvent('domready', function() {
	
	/* ----------Config Vars----------- */
	var slideTimer = 10000;  //time between slides (1 second = 1000), a.k.a. the interval duration
	var transitionTime = 1250; //transition time (1 second = 1000)
	var items = $$('.slide_item');  //Get array of elements for sliding
	var prevBtn = $('prevbtn');
	var playBtn = $('playbtn');
	var nextBtn = $('nextbtn');
	var itemNum = 0;  //initialize a variable to hold the current slide index
	var isPaused = 0;
	
	/* --------end config vars-------- */
	
	//Setup positions
	items.each(function(element, index) {
		
		//since the viewer obviously has javascript on, we can remove the 'first_item' class
		if(index == 0){
			element.removeClass('first_item');
			element.setStyle('left', "0");
		}
		else{
			element.setStyle('left', "725px");
		}
	
	});
	
	var numItems = items.length;  //get number of slider items
	//end setup
	
	
	
	//Slider Stuff
	var slideForward = function(){ 
	
		//get item to slide out
		var curItem = items[itemNum];  
		
		//change index
		if(itemNum < (numItems - 1)){
			itemNum++; 
		}
		else{
			itemNum = 0;
		}
		
		//now get item to slide in using new index
		var newItem = items[itemNum];
		
		
		//set up our animation stylings for out and in motions (note:  Fx.Styles does NOT exist in moo 1.2, so we must use Fx.Morph or Fx.Tween)
		var item_in = new Fx.Morph(newItem, {
			     duration: transitionTime, 
			     transition: Fx.Transitions.Quad.easeInOut, 
			     wait:false
		});
		
		var item_out = new Fx.Morph(curItem, {
			     duration: transitionTime, 
			     transition: Fx.Transitions.Quad.easeInOut, 
			     wait:false
		});
		
		//we will set a beginning value here
		//this is so that it gives the illusion of continuous motion from one direction, even after the first cycle of items
		item_in.start({
		'left': [725, 0]
		});
		
		//no beginning values needed, since we always want to push the old item out to the left
		item_out.start({
		'left': '-725'
		});
		
	};
		
//Top Navigation Menu
		
	var slideBackward = function(){ 
	
		//get item to slide out
		var curItem = items[itemNum];  
		
		//change index for reverse movement
		if(itemNum > 0){
			itemNum--; 
		}
		else{
			itemNum = (numItems - 1);
		}
		
		//now get item to slide in using new index
		var newItem = items[itemNum];
		
		
		var item_in = new Fx.Morph(newItem, {
			     duration: transitionTime, 
			     transition: Fx.Transitions.Quad.easeInOut, 
			     wait:false
		});
		
		var item_out = new Fx.Morph(curItem, {
			     duration: transitionTime, 
			     transition: Fx.Transitions.Quad.easeInOut, 
			     wait:false
		});

		
		
		//we will set a beginning value here too, but this time to make it come from left to right
		item_in.start({
		'left': [-725, 0]
		});
		
		//no beginning values needed
		item_out.start({
		'left': '725'
		});
		
	};
	//end slideBackward
		
		
	//call the slider function periodically
	var theTimer = slideForward.periodical(slideTimer, this); 
	
	nextBtn.addEvent('click', function(){
		if(isPaused == 0){
			$clear(theTimer);
			theTimer = slideForward.periodical(slideTimer);
		}
		slideForward();
	});
	
	prevBtn.addEvent('click', function(){
		if(isPaused == 0){
			$clear(theTimer);
			theTimer = slideForward.periodical(slideTimer);
		}				     
		slideBackward();
	});
	
	playBtn.addEvent('click', function(){
		if(isPaused == 0){
			isPaused = 1;
			$clear(theTimer);
			this.set('html', 'play');
		}
		else{
			isPaused = 0;
			slideForward();
			theTimer = slideForward.periodical(slideTimer); 
			this.set('html', 'pause');
		}
	 });

	
});



var SlideList = new Class({
	Implements:[Options,Events],
	
	options:{
		transition:Fx.Transitions.Sine.easeInOut,
		duration: 500,
		wait: false,
		onClick: $empty
	},

	initialize: function(menu, options) {
		this.setOptions(options);
		
		this.menu = $(menu), this.current = this.menu.getElement('li.current');
		
		$$(this.menu.getElements('li')).addEvents({
			'mouseover':this.moveBg.bind(this),
			'mouseout':this.moveBg.bind(this,false),
			'click':this.clickItem.bind(this)
		});
				
		this.back = new Element('li',{
			'class':'background',
			morph:this.options
		}).adopt(new Element('div',{'class':'left'})).inject(this.menu);
		if(this.current) this.setCurrent(this.current);
	},
	
	setCurrent: function(el, effect){
		this.back.setStyles({left: (el.offsetLeft), width: (el.offsetWidth)});
		(effect) ? this.back.get('morph').start({'opacity':[0,1]}) : this.back.setStyle('opacity',1);
		this.current = el;
	},

	clickItem: function(event) {
		var item = $(event.target);
		this.setCurrent(item, true);
		this.fireEvent('onClick',[new Event(event), item]);
	},

	moveBg: function(to){
		if(!this.current) return;
		if(to){
			to = $(to.target);
		}else{
			to = this.current;
		}
		this.back.get('morph').start({
			left: to.offsetLeft,
			width: to.offsetWidth
		});
	}
});

//Thumb Slider

window.addEvent('domready', function() {
	
	/* ----------Config Vars----------- */
	var slideTimer = 5000;  //time between slides (1 second = 1000), a.k.a. the interval duration
	var transitionTime = 1250; //transition time (1 second = 1000)
	var items = $$('.thumb_slide');  //Get array of elements for sliding
	var prevBtn = $('prevbtn');
	var playBtn = $('playbtn');
	var nextBtn = $('nextbtn');
	var itemNum = 0;  //initialize a variable to hold the current slide index
	var isPaused = 0;
	
	/* --------end config vars-------- */
	
	//Setup positions
	items.each(function(element, index) {
		
		//since the viewer obviously has javascript on, we can remove the 'first_item' class
		if(index == 0){
			element.removeClass('main_item');
			element.setStyle('left', "0");
		}
		else{
			element.setStyle('left', "200px");
		}
	
	});
	
	var numItems = items.length;  //get number of slider items
	//end setup
	
	
	
	//Slider Stuff
	var slideForward = function(){ 
	
		//get item to slide out
		var curItem = items[itemNum];  
		
		//change index
		if(itemNum < (numItems - 1)){
			itemNum++; 
		}
		else{
			itemNum = 0;
		}
		
		//now get item to slide in using new index
		var newItem = items[itemNum];
		
		
		//set up our animation stylings for out and in motions (note:  Fx.Styles does NOT exist in moo 1.2, so we must use Fx.Morph or Fx.Tween)
		var item_in = new Fx.Morph(newItem, {
			     duration: transitionTime, 
			     transition: Fx.Transitions.Quad.easeInOut, 
			     wait:false
		});
		
		var item_out = new Fx.Morph(curItem, {
			     duration: transitionTime, 
			     transition: Fx.Transitions.Quad.easeInOut, 
			     wait:false
		});
		
		//we will set a beginning value here
		//this is so that it gives the illusion of continuous motion from one direction, even after the first cycle of items
		item_in.start({
		'left': [200, 0]
		});
		
		//no beginning values needed, since we always want to push the old item out to the left
		item_out.start({
		'left': '-725'
		});
		
	};
		
		
	var slideBackward = function(){ 
	
		//get item to slide out
		var curItem = items[itemNum];  
		
		//change index for reverse movement
		if(itemNum > 0){
			itemNum--; 
		}
		else{
			itemNum = (numItems - 1);
		}
		
		//now get item to slide in using new index
		var newItem = items[itemNum];
		
		
		var item_in = new Fx.Morph(newItem, {
			     duration: transitionTime, 
			     transition: Fx.Transitions.Quad.easeInOut, 
			     wait:false
		});
		
		var item_out = new Fx.Morph(curItem, {
			     duration: transitionTime, 
			     transition: Fx.Transitions.Quad.easeInOut, 
			     wait:false
		});
		
		
		//we will set a beginning value here too, but this time to make it come from left to right
		item_in.start({
		'left': [-200, 0]
		});
		
		//no beginning values needed
		item_out.start({
		'left': '200'
		});
		
	};
	//end slideBackward
		
		
	//call the slider function periodically
	var theTimer = slideForward.periodical(slideTimer, this); 
	
	nextBtn.addEvent('click', function(){
		if(isPaused == 0){
			$clear(theTimer);
			theTimer = slideForward.periodical(slideTimer);
		}
		slideForward();
	});
	
	prevBtn.addEvent('click', function(){
		if(isPaused == 0){
			$clear(theTimer);
			theTimer = slideForward.periodical(slideTimer);
		}				     
		slideBackward();
	});
	
	playBtn.addEvent('click', function(){
		if(isPaused == 0){
			isPaused = 1;
			$clear(theTimer);
			this.set('html', 'play');
		}
		else{
			isPaused = 0;
			slideForward();
			theTimer = slideForward.periodical(slideTimer); 
			this.set('html', 'pause');
		}
	 });

	
});