// This uses Javascript, jQuery and jQuery-UI to allow for the addition of accession analysis stubs
// to new requests and accessions

var aa_stub = {

    // variables
    ajax : 'MY URL HERE' ,

    // data storage
    data : {} ,
    references      : {} ,
    reference_order : [] ,
    analysis        : {} ,
    analysis_order  : [] ,

    // functions

    // ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ----
    // dialog popped up when "Add AA Stub' button is pressed
    do_dialog  : function ( sample_num ) {
        $( '<div/>' )
            .attr( 'id' , 'add_new_stub' )
            .attr( 'title' , 'Add Stub' )
            .dialog()
        $('.ui-icon-closethick').text( 'X' )
        $('.ui-dialog-titlebar-close')
            .click( function () {
                $( '#add_new_stub' ).remove()
                } )
        $( '<div/>' )
            .appendTo( '#add_new_stub' )
            .attr( 'id' , 'instructions' )
            .text( 'Enter a reference, an analysis, any extra parameters, then click Go' )

        $( '<fieldset/>' )
            .appendTo( '#add_new_stub' )
            .attr( 'id' , 'ref_box' )
        $( '<legend/>' )
            .appendTo( '#ref_box' )
            .text( 'Reference Species' )
        $( '<select/>' )
            .appendTo( '#ref_box' )
            .attr('id' ,'reference')
        for ( i in aa_stub.reference_order ) {
            var j = aa_stub.reference_order[i]
            var ref = aa_stub.references[j]
            $( '<option/>' )
                .text( ref )
                .val( j )
                .appendTo( '#reference' )
            }

        $( '<fieldset/>' )
            .appendTo( '#add_new_stub' )
            .attr( 'id' , 'anal_box' )
        $( '<legend/>' )
            .appendTo( '#anal_box' )
            .text( 'Analysis Type' )
        $( '<select/>' )
            .appendTo( '#anal_box' )
            .attr('id' ,'analysis')
        for ( i in aa_stub.analysis_order ) {
            var j = aa_stub.analysis_order[i]
            var analysis = aa_stub.analysis[j]
            $( '<option/>' )
                .text( analysis )
                .val( j )
                .appendTo( '#analysis' )
            }

        $( '<fieldset/>' )
            .appendTo( '#add_new_stub' )
            .attr( 'id' , 'param_box' )
        $( '<legend/>' )
            .appendTo( '#param_box' )
            .text( 'Extra Parameters' )
        $( '<input type="text"/>' )
            .appendTo( '#param_box' )
            .attr('id' ,'extra_parameters')
        $( '<input type="hidden"/>' )
            .appendTo( '#param_box' )
            .attr('id' ,'sample')
            .val( sample_num )

        $( '<div/>' )
            .attr( 'id' , 'stub_go' )
            .text( 'Go' )
            .appendTo( '#add_new_stub' )
            .click( function () {
                var reference  = $( '#reference' ).val()
                var analysis   = $( '#analysis' ).val()
                var parameters = $( '#extra_parameters' ).val()
                var sample     = $( '#sample' ).val()
                $('.ui-icon-closethick').click( )
                if ( sample === '' ) {
                    $( '.stub_bucket' ).each( function () {
                        var sample = $( this ).attr( 'sample' )
                        aa_stub.add_to_bucket( sample , reference , analysis , parameters )
                        } )
                    }
                else {
                    aa_stub.add_to_bucket( sample , reference , analysis , parameters )
                    }
                } )
        } ,

    // ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ----
    // adding AA stubs to the form
    add_to_bucket : function ( sample , reference , analysis , parameters ) {
        var bucket = '#stub_bucket_' + sample
        var ref_text = aa_stub.references[ reference ]
        var a_text = aa_stub.analysis[ analysis ]

        var number = 1
        $( bucket ).children( 'span' ).each( function () {
            var num = parseInt( $( this ).attr( 'number' ) )
            if ( number <= num ) { number = 1 + num }
            } )
        var id =  [ 'span' , sample , number ].join('_')
        $( '<span/>' )
            .addClass( 'stub' )
            .attr( 'number' , number )
            .attr( 'id' , id )
            .appendTo( bucket )
            .text( [ ref_text , a_text ].join( ' - ' ) )
            .attr( 'title' , 'Click to delete' )
            .click( function () {
                $(this).remove()
                } )
        $( '<input type="hidden">' )
            .attr( 'name' ,  [ 'reference' , sample , number ].join('_') )
            .val( reference )
            .appendTo( '#' + id )
        $( '<input type="hidden">' )
            .attr( 'name' ,  [ 'analysis' , sample , number ].join('_') )
            .val( analysis )
            .appendTo( '#' + id )
        $( '<input type="hidden">' )
            .attr( 'name' ,  [ 'parameters' , sample , number ].join('_') )
            .val( parameters )
            .appendTo( '#' + id )
        } ,

    // ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ----
    // the startup part
    initialize : function ( ) {
        aa_stub.data.flag = 1
        // fill data
        var url = aa_stub.ajax
        $.post( url , function ( data ) {
            for ( i in data.references ) {
                var ref = data.references[ i ]
                aa_stub.references[ i ] = ref
                }
            for ( i in data.analysis ) {
                var ref = data.analysis[ i ]
                aa_stub.analysis[ i ] = ref
                }

            for ( i in data.references_order ) {
                var j = data.references_order[ i ]
                aa_stub.reference_order.push( j )
                }
            for ( i in data.analysis_order ) {
                var j = data.analysis_order[ i ]
                aa_stub.analysis_order.push( j )
                }
            } , 'json' )
        // get all
        $( '#add_stubs_to_all' )
            .click( function () {
                aa_stub.do_dialog( '' )
                } )
        // get one
        $( '.stub_add' )
            .click( function () {
                var sample = $( this ).attr('sample')
                aa_stub.do_dialog( sample )
                } )
        }

    }

$( function() {
    aa_stub.initialize()
    } )

$( '<div/>' )
    .attr( 'id' , 'add_new_stub' )
    .attr( 'title' , 'Add Stub' )
    .dialog()

$('<div id="add_new_stup" title="Add Stub"></div>').dialog();

$('<div />', { id: 'add_new_stub', title: 'Add Stub })
    .dialog()

$.each(array, function (i, el) {
    ... your code ...
});

var number = 1
    $( bucket ).children( 'span' ).each( function () {
        var num = parseInt( $( this ).attr( 'number' ) )
        if ( number <= num ) { number = 1 + num }
        } )
    var id =  [ 'span' , sample , number ].join('_')
    $( '<span/>' )
        .addClass( 'stub' )
        .attr( 'number' , number )