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 = '';
						
					}
				
				}				
			} );
			
		}
		
	} );	
} );

function toggle_navigation(mode)
{
	if (mode == 'BRAND') {
		$('brand_slider').removeClass('hidden');
		$('category_slider').addClass('hidden');		
	} else{
		$('brand_slider').addClass('hidden');
		$('category_slider').removeClass('hidden');
	}
}