var animation_duration = 450; // animation time in miliseconds
$(document).ready(function() {
    var $general = $('#addons_general').data('original-height', $('#addons_general').height() );
	//hide slidy stuff
	$(".addon-detail")
		.each(function() {
			var $this = $(this);
            // the height of a detail may not be shorter than general
			$this
				.data( 'original-height',
                    Math.max( $general.data('original-height'), $this.height() )
                )
				.hide()
				.css({
					position: "absolute",
					height: 0,
					bottom: 20
				})
				;
        });

    var hash = document.location.hash; // with the # symbol
    if ( hash ) {
        var $details = $(hash + '_details');
        if ( $details.size() ) {
            $('.prod-subsubnav a').removeClass('active')
                .filter('[href=' + hash + ']').addClass('active');
            show_section($details);
        }
    }

    $('.addon-detail-link').click(function(event) {
        var $this = $(this);
        $('.prod-subsubnav a').removeClass('active');
        $('.prod-subsubnav a[href=' + $this.attr('href') + ']').addClass('active');
        var $details = $( $this.attr('href') + '_details');
        show_section( $details );
    });

    $('.addon-general-link').click(function(event) {
        $('.prod-subsubnav a').removeClass('active');
        $('.prod-subsubnav .addon-general-link').addClass('active');
        show_general();
        event.preventDefault();
    });
});
// hide all detail sections and show the general overview/addons list
function show_general() {
    var $general = $('#addons_general').show();
    var $old_details = $('.addon-detail').filter('.ontop').stop(); // details to be hidden
    if ( ! $old_details.size() ) {
        return; // nothing to do, no details are currently shown
    }
    $('#prod-content').stop().animate(
        { height : $general.data('original-height') + 161 },
        animation_duration,
        function() {
            $old_details
                // stick to bottom but don't cover the subsubnav
                .css({ height : $general.data('original-height'), top : '', bottom : 20 })
                .animate({ height: 0 }, animation_duration, // shrink down
                    function() {
                        $('.addon-detail')
                            .removeClass('ontop')
                            .hide()
                            .css({ height: 0, bottom : 0, top : '' })
                            ;
                    }
                )
                ;
        }
    );

}
// animate-in the given details section, and hide the others
function show_section( $new_details ) {
    if ( $new_details.is('.ontop') ) {
        return; // nothing to do, the desired details are already shown
    }
    // currently visible details are different from $new_details.
    var $old_details = $('.addon-detail').filter('.ontop')
        .removeClass('ontop')
        .stop() // cancel animations
        ;
    $new_details.addClass('ontop');
    // 161 = 80 for .prod-subsubhead.height and 1 for its bottom border,
    //    plus 60 for padding on .addon-detail, plus 20 px bottom margin
    $('#prod-content').stop().animate(
        { height : $new_details.data('original-height') + 161 },
        animation_duration,
        function() {
            $new_details.show().animate(
                { height : $new_details.data('original-height') },
                animation_duration,
                function() { // when the animation completes
                    $new_details.css({ top : 81, bottom : '' });
                    $('.addon-detail').not($new_details)
                        .hide()
                        .css({ height : 0, bottom : 0, top : '' })
                        ;
                    // at low font sizes the general list leaks out the bottom
                    $('#addons_general').hide();
                }
            );
        }
    );
    
}