/*
	@Class:		Featured
	@Author:		Brandon Gray for O3 World LLC 2010
	@Brief:		Controls the display of content in the "featured" section on the home page.
	@Requirements:	Mootools 1.3
*/
var Featured = new Class ({
	
	initialize: function()  {		
		
		this.featLinks 	= $$( '#slider-controls a' );
		this.contentDivs	= $$( '#slider .slide' );
		this.pos			= 0;
		this.total		= this.featLinks.length;
		this.isPaused 		= false;
		this.timer		= this.updateCount.bind( this ).periodical( 15000 );
		
		for ( var i = 0; i < this.total; i++ ) {
			// Due to the fact that the nav buttons are floating right they are in reverse order. So i must be calculated backwards basically
			this.featLinks[ i ].addEvent( 'click', this.setMenu.bindWithEvent( this, [ ( this.total - 1 ) - i ] ) );
		};
				
	},
	
	updateCount: function() {
		
		( this.pos != ( this.total - 1 ) ) ? this.pos++ : this.pos = 0;
		
		this.setMenu( null, this.pos );
		this.setContent( this.pos );
		
	},
	
	setMenu: function( event, i ) {
		
		// If event is passed it means the user clicked a link, so put a stop to the auto rotating from here on out
		if( event ) {
			
			$clear( this.timer );
			this.timer 	= null;
			this.isPaused 	= true;
			
			event.stop();
			
		};
		
		this.pos = i;
		
		// Remove the active state from all links
		for ( var j = 0; j < this.total; j++ ) {
			this.featLinks[ j ].removeClass( 'active' );
		};
		
		// Set the active display on the current link
		this.featLinks[ ( this.total - 1 ) - i ].addClass( 'active' );
		// Display the appropriate content
		this.setContent( i );
		
	},
	
	setContent: function( i ) {
		
		for ( var k = 0; k < this.total; k++ ) {
			
			this.contentDivs[ k ].setStyle( 'display', 'none' );
			this.contentDivs[ k ].setStyle( 'filter', 'alpha(opacity=0)' );
			this.contentDivs[ k ].setStyle( 'opacity', 0 );
			
		};
		
		this.contentDivs[ i ].setStyle( 'display', 'block' );
		this.contentDivs[ i ].tween( 'filter', 'alpha(opacity=1)' );
		this.contentDivs[ i ].tween( 'opacity', 1 );
		
	}
	
});

/*
	@Class:		ProductDetail
	@Author:		Brandon Gray for O3 World LLC 2011
	@Brief:		Controls toggling of the product information. Note: This is kind of some hack stuff cause I'm in a hurry...don't hate me.
	@Requirements:	Mootools 1.3
*/
var ProductDetail = new Class ({
	
	initialize: function()  {		
		
		this.tabsAbout = $$( 'a.tab-about' );
		this.tabsFacts = $$( 'a.tab-nutrition' );
		
		this.tabsAbout.each( function( tab ) {
			tab.addEvent( 'click', function( event ) {
				tab.getParent( 'ul' ).getPrevious( 'div.product-detail-content' ).getElement( '.brief' ).setStyle( 'display', 'block' );
				tab.getParent( 'ul' ).getPrevious( 'div.product-detail-content' ).getElement( '.facts' ).setStyle( 'display', 'none' );
				
				tab.addClass( 'active' );
				tab.getParent( 'li' ).getNext( 'li a' ).removeClass( 'active' );
				
				event.stop();
			});
		});
		
		this.tabsFacts.each( function( tab ) {
			tab.addEvent( 'click', function( event ) {
				tab.getParent( 'ul' ).getPrevious( 'div.product-detail-content' ).getElement( '.brief' ).setStyle( 'display', 'none' );
				tab.getParent( 'ul' ).getPrevious( 'div.product-detail-content' ).getElement( '.facts' ).setStyle( 'display', 'block' );
				
				tab.addClass( 'active' );
				tab.getParent( 'li' ).getPrevious( 'li a' ).removeClass( 'active' );
				
				event.stop();
			});
		});
				
	}
	
});

var CountDown = new Class({
	
	Implements: [ Options, Events ],
	
	options: {},
	
	initialize: function ( options ) {

		this.setOptions( options );
		
		this.date,
		this.timer,
		this.header3 	= document.id( 'home-content' ).getElement( '.info-box.last' ).getElement( 'h3' ),
		this.header4 	= document.id( 'home-content' ).getElement( '.info-box.last' ).getElement( 'h4' ),
		this.today 	= new Date(),
		this.holidays 	= [
						new Date( 'October 31, 2011 00:00:00' ),
						new Date( 'December 25, 2011 00:00:00' ),
						new Date( 'February 14, 2012 00:00:00' ),
						new Date( 'April 8, 2012 00:00:00' ),
						new Date( 'October 31, 2011 00:00:00' ),
						new Date( 'December 25, 2012 00:00:00' ),
						new Date( 'February 14, 2013 00:00:00' ),
						new Date( 'March 31, 2013 00:00:00' ),
						new Date( 'October 31, 2013 00:00:00' ),
						new Date( 'December 25, 2013 00:00:00' ),
						new Date( 'February 14, 2014 00:00:00' ),
						new Date( 'April 20, 2014 00:00:00' ),
						new Date( 'October 31, 2014 00:00:00' ),
						new Date( 'December 25, 2014 00:00:00' ),
						new Date( 'February 14, 2015 00:00:00' ),
						new Date( 'April 5, 2015 00:00:00' ),
						new Date( 'October 31, 2015 00:00:00' ),
						new Date( 'December 25, 2015 00:00:00' ),
						new Date( 'February 14, 2016 00:00:00' ),
						new Date( 'March 27, 2016 00:00:00' ),
						new Date( 'October 31, 2016 00:00:00' ),
						new Date( 'December 25, 2016 00:00:00' )
					];
		
		for ( var i = 0, len = this.holidays.length; i < len; i++ ) {
			if ( this.holidays[ i ] > this.today ) {
				this.date = this.holidays[ i ];
				break;
			};
		};
		
		this.timer = this.updateTime.bind( this ).periodical( 1000 );
		
		this.updateHeaders();
		
	},
	
	updateHeaders: function() {
		
		switch ( this.date.getMonth() ) {
			
			case 1: // February
			this.header3.set( 'text', 'Countdown to Valentines' );
			this.header4.set( 'text', 'Hurry and get your Valentines Candy Now!' );
			break;
			
			case 9: // October
			this.header3.set( 'text', 'Countdown to Halloween' );
			this.header4.set( 'text', 'Hurry and get your Halloween Candy Now!' );
			break;
			
			case 11: // December
			this.header3.set( 'text', 'Countdown to Christmas' );
			this.header4.set( 'text', 'Hurry and get your Christmas Candy Now!' );
			break;
			
			default:
			this.header3.set( 'text', 'Countdown to Easter' );
			this.header4.set( 'text', 'Hurry and get your Easter Candy Now!' );
			
		}
		
	},
	
	updateTime: function () {
		
		var millis 	= Math.max( 0, this.date.getTime() - new Date().getTime() ),
		time 		= Math.floor( millis / 1000 ),
		stop 		= time == 0,
		countdown 	= {
						days: 	Math.floor( time / ( 60 * 60 * 24 ) ), 
						time: 	time,
						millis: 	millis
					};
		
		time 			%= ( 60 * 60 * 24 );
		countdown.hours 	= Math.floor( time / ( 60 * 60 ) );
		
		time 			%= ( 60 * 60 );
		countdown.minutes 	= Math.floor( time / 60 );
		countdown.second 	= time % 60;
		
		this.display( countdown );
		
	},
	
	display: function ( counter ) {
		
		if ( counter.days > 0 ) {
			if ( counter.days < 100 && counter.days > 10 ) {
				$( 'days' ).set( 'text', '0' + counter.days );
			} else if ( counter.days < 10 ) {
				$( 'days' ).set( 'text', '00' + counter.days );
			} else {
				$( 'days' ).set( 'text', counter.days );
			}
		} else {
			$( 'days' ).set( 'text', '000' );
		};
		
		$( 'hours' ).set( 'text', ( counter.hours > 10 ? '' : '0' ) + counter.hours );
		$( 'mins' ).set( 'text', (counter.minutes > 10 ? '' : '0') + counter.minutes );
		
	}
	
});

/*

	@Class:		InputClearAndReplace
	@Author:		Brandon Gray for O3 World 2008
	@Brief:		Loops through all inputs/textareas with a class name of 'clear_replace' and clears the default text when focused
				when focus is lost it checks to see if the field is blank (no new data entered), if value is blank the default text is placed back in
	@Example: 	<input type="text" name="firstname" id="firstname" value="" class="clear_replace" />
	@Requirements:	Mootools 1.2
			
*/
var InputClearAndReplace = new Class ({
	options: {
		InputElement: '.clear_replace'
	},
	initialize: function()  {
		var inputElementList = $$( this.options.InputElement );
		var originalValue = new Array();
		inputElementList.each( function( element, i ) {
			originalValue.push( inputElementList[ i ].value );
			element.onfocus = function() {
				if( this.value == originalValue[ i ] ) this.value = '';
			},
			element.onblur = function() {
				if( this.value == '' ) this.value = originalValue[ i ];
			}
		});
	}
});


function hexEncode( plainText ) {
	var hexDigits = "0123456789abcdef";
	var hexMap = new Array( );
	var hexIndex = 0;
	var hexText = "";
	for( var hexIndex = 0; hexIndex < 256; hexIndex++ ) {
		hexMap[ hexIndex ] = hexDigits.charAt( hexIndex >> 4 ) + hexDigits.charAt( hexIndex & 15 );
	}
	for( var hexIndex = 0; hexIndex < plainText.length; hexIndex++ ) {
		hexText = hexText + hexMap[ plainText.charCodeAt( hexIndex ) ];
	}
	return hexText;
}


function newsletterSubscribe( ) {
	
	new Request( {
		url:		$( 'newsletter_form' ).get( 'action' ) + "submit/email/" + hexEncode( $( 'newsletter_email' ).value ),
		method:		'get',
		link:		'ignore',
		onRequest:	function( ) {
			
			$( 'newsletter_form' ).setStyle( 'display', "none" );
			$( 'newsletter_wait' ).setStyle( 'display', "block" );
		},
		onFailure:	function( ) {
			$( 'newsletter_wait' ).setStyle( 'display', "none" );
			$( 'newsletter_signup' ).setStyle( 'display', "none" );
			$( 'newsletter_error' ).setStyle( 'display', "block" );
			$( 'newsletter_form' ).setStyle( 'display', "block" );
		},
		onSuccess:	function( newsletterResponse ) {
			$( 'newsletter_signup' ).setStyle( 'display', "none" );
			if( newsletterResponse.indexOf( "NewsletterSubscribe_SUCCESS" ) != -1 ) {
				$( 'newsletter_wait' ).setStyle( 'visibility', "hidden" );
				$( 'newsletter_error' ).setStyle( 'display', "none" );
				$( 'newsletter_form' ).setStyle( 'display', "none" );
				$( 'newsletter_thankyou' ).setStyle( 'display', "block" );
			} else {
				$( 'newsletter_wait' ).setStyle( 'display', "none" );
				$( 'newsletter_error' ).setStyle( 'display', "block" );
				$( 'newsletter_form' ).setStyle( 'display', "block" );
			}
		}
	} ).send( );
}


function contentFormSubmit( ) {
	new Request( {
		url:		$( 'content_form' ).get( 'action' ),
		method:		'post',
		link:		'ignore',
		onRequest:	function( ) {
			$( 'form_confirmation' ).setStyle( 'display', "none" );
			$( 'form_error' ).setStyle( 'display', "none" );
			$( 'form_submit' ).setStyle( 'display', "none" );
			$( 'form_wait' ).setStyle( 'display', "block" );
		},
		onFailure:	function( ) {
			$( 'form_wait' ).setStyle( 'display', "none" );
			$( 'form_submit' ).setStyle( 'display', "block" );
			$( 'form_error' ).setStyle( 'display', "block" );
		},
		onSuccess:	function( submitResponse ) {
			$( 'form_wait' ).setStyle( 'display', "none" );
			if( submitResponse.indexOf( "FormSubmit_SUCCESS" ) != -1 ) {
				$( 'form_error' ).setStyle( 'display', "none" );
				$( 'form_submit' ).setStyle( 'display', "none" );
				$( 'form_confirmation' ).setStyle( 'display', "block" );
			} else {
				$( 'form_error' ).setStyle( 'display', "block" );
				$( 'form_submit' ).setStyle( 'display', "block" );
			}
		}
	} ).send( $( 'content_form' ) );
}

window.addEvent( 'domready', function() {

	new InputClearAndReplace();
	
	if( $( 'newsletter_form' ) ) {
		new FormCheck( 'newsletter_form', { submit: false, onValidateSuccess: newsletterSubscribe });
	};

	if( $( 'content_form' ) ) {
		new FormCheck( 'content_form', { submit: false, onValidateSuccess: contentFormSubmit });
	};

	if ( $( 'home' ) ) {
		
		// Featured content
		var featured = new Featured();
		// Countdown
		var countdown = new CountDown();
		
	};
	
	if ( $( 'product-detail-list' ) ) var productDetail = new ProductDetail();
	
});