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

    if ( window.ie6 )
    {

        var view_button = $( 'view' );
        fix_ie6_background_png_transparancy( view_button );

        var checkout_button = $( 'checkout' );
        fix_ie6_background_png_transparancy( checkout_button );
        
        $$( '#content #slideshow .slide a' ).each( function( el ) {
        
            fix_ie6_background_png_transparancy( el );
        
        } ) ;
        
    }

	   // 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.getTag( ) == 'a' ) &&
                   ( target.getProperty( 'href' ) != existing_image.getProperty( 'src' ) ) ) ||
                 ( ( target.getParent( ).getTag( ) == '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);
                replacement.getElement( 'img' ).replaceWith( large_image );

                // 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': 0,
                    'opacity': 0,
                    'overflow': 'hidden',
                    'position': 'absolute',
                    'right': 0,
                    'top': 0,
                    'width': main_image.getStyle( 'width' )
                } );

                // 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'
                        } );
                        main_image.replaceWith( replacement );
                    }
                } );
                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
                } );

            }

        } );

    } );	

    
    $$( '#frequently_asked_questions h3' ).each( function( el ) {
    
        // Remove the hidden class 
        var answer = el.getNext( );
        answer.setStyle( 'display', 'block' );
        
        // Put the div in a toggle slide thing
        var fx = new Fx.Slide( answer );
        fx.hide( );
        
        
        var link = new Element( 'a', {
            'href': '#'
        } );
        link.set('text', el.get('text') );
        el.empty( );
        link.inject( el );
        
        // CLicking the link should toggle it
        link.addEvent( 'click', function( e ) {
        
            e.stop( );
            fx.toggle( );
        
        }.bindWithEvent( ) );
    
    } );

} );