window.addEvent( 'domready', function( ) {
	$$( '#frequently_asked_questions a.toggle_link' ).each( function( el ) {
    	
        // Remove the hidden class 
        var answer = el.getParent( ).getNext( );
        answer.removeClass( 'faq_answer_hiden' );
        answer.addClass( 'faq_answer_visible' );
        
        // Put the div in a toggle slide thing
        var fx = new Fx.Slide( answer );
        fx.hide( );
        
        // CLicking the link should toggle it
        el.addEvent( 'click', function( e ) {
        
            e.stop( );
            fx.toggle( );
        
        }.bindWithEvent( ) );
    
    } );
	
	   // Additional images
    var images = $$( '#additional_images .additional_image a' ).each( function( el ) {

        var large_image = new Asset.image( el.getProperty( 'href' ) );

        el.addEvent( 'click', function( e ) {
            e = new Event( e );
            e.stop( );

            // Get the main image div
            var main_image = $( 'main_image' );
            var existing_image = main_image.getElement( 'img' );
            var target = $( e.target );

            if ( ( ( target.get('tag') == 'a' ) &&
                   ( target.getProperty( 'href' ) != existing_image.getProperty( 'src' ) ) ) ||
                 ( ( target.getParent().get('tag') == 'a' ) &&
                   ( target.getParent().getProperty( 'href' ) != existing_image.getProperty( 'src' ) ) ) )
           {

                // Get the main image div
                var main_image = $( 'main_image' );

                // Set position: relative on the parent so we can position the new
                // image properly
                main_image.getParent( ).setStyle( 'position', 'relative' );

                // Clone main image
                var replacement = main_image.clone(true, true);
                
                large_image.replaces(replacement.getElement( 'img' ));
                
                // Get image
                var new_image = replacement.getElement( 'img' );

                // Insert replacement div off the page so we can get the size of
                // the new image
                replacement.setStyles( {
                    'position': 'absolute',
                    'left': -2000
                } );
                replacement.injectBefore( main_image );
                var large_image_size = large_image.getSize( );
                var existing_height = existing_image.getSize( ).y;
                var new_height = new_image.getSize( ).y;

                // position it absolutely over the top of the existing image, but
                // invisible
                replacement.setStyles( {
                    'height': existing_height,
                    'left': 4,
                    'opacity': 0,
                    'overflow': 'hidden',
                    'position': 'absolute',
                    'right': 0,
                    'top': 4,
                    'width': 400
                } );

                // Get the size it would like to be

                // Transition to this size while making the div visible
                replacement_fx = new Fx.Morph( replacement, {
                    duration: 1000,
                    onComplete: function( ) {
                        replacement.setStyles( {
                            'position': 'static'
                        } );
                        replacement.replaces(main_image);
                    }
                } );
                replacement_fx.start( {
                    'height': new_height,
                    'opacity': 1
                } );

                main_image_fx = new Fx.Morph( main_image, {
                    duration: 1000
                } );
                main_image_fx.start( {
                    'height': new_height,
                    'opacity': 0
                } );

            }

        } );

    } );	
	
	
	var autoValues = { 
		'newsletter': {
			'element': 'register_email_address',
			'text': 'Your e-mail address'
		},
		'search': {
			'element': 'mini_search_field',
			'text': 'Keyword Search'
		}
	};
	
	$each( autoValues, function( values ) { 
		
		var input = $( values.element );
		
		if ( $defined( input ) )
		{
			
			input.value = values.text;
		
			input.addEvents( {
				'blur': function( e ) {
				
					if ( input.value == '' )
					{
						
						input.value = values.text;
						
					}
				
				},
				'focus': function( e ) {
					
					if ( input.value == values.text )
					{
					
						input.value = '';
						
					}
				
				}				
			} );
			
		}
		
	} );
	//homepage
	$$('#content_boxes div').setStyle('cursor','pointer');
	$$('#content_layers').addEvent('click', function(){
    window.location = '/base_layers';
});
	$$('#content_supports').addEvent('click', function(){
    window.location = '/sports_supports';
});
		$$('#content_insoles').addEvent('click', function(){
    window.location = '/insoles-45_category';
});
		$$('#content_armour').addEvent('click', function(){
    window.location = '/body_armour-46_category';
});
	//Product tables, shopping cart
	
	
	$$('#shopping_basket td:not(.total_label)', '#pricing_panel td').addEvents({
		mouseenter: function(){
			this.getParent().getChildren('td:not(.total_label)').morph({
				'background-color': '#2a2a2a'
			});
			
		},
		mouseleave: function(){
			this.getParent().getChildren('td:not(.total_label)').morph({
				'background-color': '#202020',
				'opacity': '100'
			});
		}
	});
	$$('#shopping_basket td.remove').addEvents({
		mouseenter: function(){
			this.getParent().getChildren().morph({
				'background-color': '#202020',
				'opacity': '0.5'
			});

		},
		mouseleave: function(){
			this.getParent().getChildren().morph({
				'background-color': '#202020',
				'opacity': '100'
			});
		}
	});
	
	$$('#pricing_panel td.favourites').addEvents({
		mouseenter: function(){
			this.getParent().getChildren().morph({
				'background-color': '#2C2C1D'
			});

		},
		mouseleave: function(){
			$('pricing_panel').getElements('td').morph({
				'background-color': '#202020'
			});
		}
	});
	
} );

function toggle_navigation(mode)
{
	if (mode == 'BRAND') {
		$('brand_slider').removeClass('hidden');
		$('category_slider').addClass('hidden');
		$('feature_nav_option').setStyle('background-position','0 -26px');
	} else{
		$('brand_slider').addClass('hidden');
		$('category_slider').removeClass('hidden');
		$('feature_nav_option').setStyle('background-position','0 0');
	}
}