/***********************/
/****** THE MAGIC ******/
/***********************/
$( function () {

//The home page main slideshow
     $( '#slideshow' ).slideshow({
         slide: '.slide',
         next: '.next',
         previous: '.previous',
         navigation: '.slideshow-navigation a',
         navigationSelectedClass: 'selected',
         slideshow: false,
         slideshowSpeed: 5000,
         startFromIndex: 1,
         transition: 'fade',
         transitionSpeed: 400,
         mouseOverFreeze: true,
         resizeMode: 'none'
	});
	
//The Mega Menu
	$( '.megaMenu' ).megaMenu({
        megaMenuContainer: '.megaMenuContainer',
        effect: 'fade',
        delay: 0,
        speed: 0
    });

//The featured products and solutions slideshows
	$( '.featured-slideshow' ).slideshow({
        slide: '.slide',
        next: '.next',
        previous: '.previous',
        navigation: '',
        navigationSelectedClass: '',
        slideshow: false,
        slideshowSpeed: 3000,
        startFromIndex: 1,
        transition: 'fade',
        transitionSpeed: 200,
        mouseOverFreeze: true,
        resizeMode: 'maxSlide'
    });

//Equal featured products and solutions slideshows height
	var elements = $( '.featured-content' );       
    makeEqualHeight ( elements );


//Login form expand and collapse
	var loginOpen = false;
    $( '#open-login' ).
            click( function () {
                if ( !loginOpen ){
                    loginOpen = true;
                    $( '#login-wrapper' ).
                        addClass( 'open' ).
                        animate(
                            { width: '233px'},
                            150,
                            'linear'
                            ).
                        animate( 
                            { height: '200px' }, 
                            200,
                            'swing'
                        );
                    } 
    $( '#login-wrapper' ).
            mouseleave( function() {                
                loginOpen = false;
                $( '#login-wrapper' ).
                    addClass( 'closed' ).
                    animate( 
                        { height: '31px' }, 
                        200,
                        'swing'
                    ).
                    animate( 
                        { width: '65px' }, 
                        150,
                        'swing'
                    );
                })   
    });

//Make product tabs navigation (rearranges the h2 elements into a list of anchors)
    $_tab_titles = $( '.product-tabs .tab-navigation' );
    
    var s = '<div class = "tab-navigation">';
    
    for ( var k = 0; k < $_tab_titles.size(); k++ ) {
        var title = $( $_tab_titles.get( k ) ).html();
        $( $_tab_titles.get( k ) ).remove();
        s += '<a href = "#" class = "tab-title"><span>' + title + '</span></a>';
    }
    
    s += '</div>';
    
    $( '.product-tabs' ).prepend( s );

//Product tabs slideshow
    $( '.product-tabs' ).slideshow({
        slide: '.tab',
        next: '.next',
        previous: '.previous',
        navigation: '.tab-navigation a',
        navigationSelectedClass: 'selected',
        slideshow: false,
        slideshowSpeed: 5000,
        startFromIndex: 1,
        transition: 'fade',
        transitionSpeed: 0,
        mouseOverFreeze: true,
        resizeMode: 'maxSlide'
    });

//The related products slideshow
	//Make their heights equal first
    var elements = $( '#related-products .product-preview-title' );       
    makeEqualHeight ( elements );

	//Make the slides
    $( '#related-products' ).slideshow({
        slide: '.product-slide',
        next: '.next',
        previous: '.previous',
        navigation: '.slideshow-controls a',
        navigationSelectedClass: 'selected',
        slideshow: false,
        slideshowSpeed: 3000,
        startFromIndex: 1,
        transition: 'fade',
        transitionSpeed: 200,
        mouseOverFreeze: true,
        resizeMode: 'maxSlide'
    });

// Form validation hack that removes the errorInput class from a required element when it gains focus
	$( '.form-field .non-empty' ).focus( function() 
		{ $(this).removeClass('errorInput') });

// Newsletter subscribe validation and AJAX submission
$( '#newsletter-subscription' ).formValidation({ 

    	callback: function ( $_error_elements ) {

            $( '#newsletter-subscription .messages' ).html( '<img src = "' + TEMPLATE_URL + '/images/ajax-loader.gif" alt = "" /> Please wait... ' );

            if ( $_error_elements ) {
                $( '#newsletter-subscription .messages' ).text( 'You must provide a valid email address.' );
                return false;
            }

            $.ajax({
                url: BLOG_URL + '/wp-admin/admin-ajax.php',
                type: 'GET',
                data: 'action=subscription_form&' + $( '#newsletter-subscription' ).serialize(),
                dataType: 'text', 
                success: 
                    function ( results ) {
                        if ( results == 'success0' ) {
                            $( '#newsletter-subscription .submit' ).hide();
                            $( '#newsletter-subscription input' ).attr( 'value', '' );
                            $( '#newsletter-subscription .messages' ).html( '<span class = "success">You have successfully subscribed!</span>' );
		                } else {
                            $( '#newsletter-subscription .messages' ).text( 'There was a temporary problem with your subscription. Please try again.' );
                        }
                    },
                error: 
                    function () {
                        alert( 'We be finding dem errors.' );
                    }
            });

            return false;
        }
    });
});