Annotated jQuery, or pass me the crack pipe

Here's some code. This is what is on my mind today.

view plainprint?

1. $( '<div/>' )                         // We create a DIV tag  
2.     .attr( 'id' , 'e_solid' )         // give it a unique identifier  
3.     .text( 'solid' )                  // put text into it  
4.     .appendTo('#head')                // give it a unique identifier  
5.     .click( function() {              // and set what happens when you click it  
6.         var ajax = a_dir + '2g_slide_formats.cgi' + '?e=solid' ; // which is, set a URL  
7.         $( '#e_454'   ).css( 'color' , '#abc' ) ;                // do some CSS stuff  
8.         $( '#e_solid' ).css( 'color' , '#000' ) ;                // that won't work by  
9.                                                                  // setting it in the CSS file  
10.         $( '#run'   ).empty() ;                                  // clear some other  
11.         $( '#slide' ).empty() ;                                  // subordinate tags  
12.         $( '<div/>')                                             // We create a new DIV tag  
13.             .text('Slide Type')                                  // fill it  
14.             .appendTo('#run')                                    // put it into another tag  
15.             ;  
16.         $( '<select/>')                                          // we create a select box  
17.             .attr('id','holder')                                 // give it an id  
18.             .appendTo('#run')                                    // put it in the same tag  
19.             .wrap(document.createElement("div"))                 // put a DIV tag around it  
20.             .change( function() {                             // and an action for when   
21.                                                               // the select changes  
22.                 var value = $(this).val() ;                     
23.                 $( '#slide' ).empty() ;                       // empty '#slide' again  
24.                 for ( var i = 1 ; i <= value ; i++ ) {        // and figure the number of   
25.                                                               // regions from the select value  
26.                     var div_name = 'region_' + i ;            // and make a name  
27.                     $( '<div/>' )  
28.                         .attr( 'id' , div_name )       // which we use to name a new DIV  
29.                         .text( 'Region ' + i )         // which we fill  
30.                         .addClass( 'region' )          // class  
31.                         .appendTo( '#slide' )          // and append to the emptied #slide  
32.                         ;  
33.                     $( '<span/>')                      // then add a SPAN  
34.                         .appendTo( '#' + div_name )    // which we append to that new DIV  
35.                         .text( 'Add barcode' )  
36.                         .click( function() {           // and when you click it ...  
37.                             var accession = prompt(       // you're prompted for one field  
38.                                 'Set Accession Number'  
39.                                 ) ;  
40.                             var barcode = prompt(         // and then another  
41.                                 'Set Barcode, or Make Blank' , 'MID'  
42.                                 ) ;  
43.                             var strID = 'div_' + div_count ++ ;  
44.                             alert( div_name ) ;           // this is a bit of debugging.  
45.                             $( '<div/>' )                 // yet another DIV  
46.                                 .attr( 'id' , strID )       
47.                                 .appendTo( '#' + div_name + ' .body' )  
48.                                 ;                    // which should go to the .body  
49.                                                      // but doesn't, which is why I'm writing  
50.                             $( '<span/>' )  
51.                                 .appendTo( '#' + strID)  
52.                                 .text( accession )  
53.                                 .addClass( 'accession' ) // and we add SPANs to that DIV  
54.                                 ;  
55.                             $( '<span/>' )  
56.                                 .appendTo( '#' + strID)  
57.                                 .text( barcode )  
58.                                 .addClass( 'barcode' )   // which are the data we are   
59.                                 ;                        // prompted for  
60.                             $( '<span/>' )  
61.                                 .appendTo( '#' + strID)  
62.                                 .text( 'delete' )  
63.                                 .addClass( 'delete')  
64.                                 .click(function(){       // and another SPAN  
65.                                     $( '#' + strID ).remove() ;  
66.                                     }) ;                 // that you click to remove  
67.                                 }) ;                     // this whole DIV and all in it  
68.                         }  
69.                     }) ;   // It looks like we're done but that's just the end  
70.                            // of the definition of the SELECT  
71.                            // which we fill with AJAX and JSON  
72.                 $.getJSON( ajax , function(data){ // we get a data chunk from JSON  
73.                     var objD = eval( data ) ;      // convert it to an object  
74.                     for ( var i = 0 ; i < 100 ; i++ ) {  // The shotgun approach saves me  
75.                         if ( objD[i] != undefined ) {    // from having to be clever  
76.                         $( '<option/>')                  // and we add all the OPTIONS  
77.                             .attr('value', objD[i].max_regions )   
78.                             .text( objD[i].format )      // to the previously mentioned SELECT  
79.                             .appendTo('#holder')         // Remember the SELECT?  
80.                             ;  
81.                             }  
82.                         }  
83.                     }) ;  
84.                 }) // And here we end it. That was all one "line"  
85.              ;     // and it isn't quite correct.  

    $( '<div/>' )                         // We create a DIV tag
        .attr( 'id' , 'e_solid' )         // give it a unique identifier
        .text( 'solid' )                  // put text into it
        .appendTo('#head')                // give it a unique identifier
        .click( function() {              // and set what happens when you click it
            var ajax = a_dir + '2g_slide_formats.cgi' + '?e=solid' ; // which is, set a URL
            $( '#e_454'   ).css( 'color' , '#abc' ) ;                // do some CSS stuff
            $( '#e_solid' ).css( 'color' , '#000' ) ;                // that won't work by
                                                                     // setting it in the CSS file
            $( '#run'   ).empty() ;                                  // clear some other
            $( '#slide' ).empty() ;                                  // subordinate tags
            $( '<div/>')                                             // We create a new DIV tag
                .text('Slide Type')                                  // fill it
                .appendTo('#run')                                    // put it into another tag
                ;
            $( '<select/>')                                          // we create a select box
                .attr('id','holder')                                 // give it an id
                .appendTo('#run')                                    // put it in the same tag
                .wrap(document.createElement("div"))                 // put a DIV tag around it
                .change( function() {                             // and an action for when 
                                                                  // the select changes
                    var value = $(this).val() ;                   
                    $( '#slide' ).empty() ;                       // empty '#slide' again
                    for ( var i = 1 ; i <= value ; i++ ) {        // and figure the number of 
                                                                  // regions from the select value
                        var div_name = 'region_' + i ;            // and make a name
                        $( '<div/>' )
                            .attr( 'id' , div_name )       // which we use to name a new DIV
                            .text( 'Region ' + i )         // which we fill
                            .addClass( 'region' )          // class
                            .appendTo( '#slide' )          // and append to the emptied #slide
                            ;
                        $( '<span/>')                      // then add a SPAN
                            .appendTo( '#' + div_name )    // which we append to that new DIV
                            .text( 'Add barcode' )
                            .click( function() {           // and when you click it ...
                                var accession = prompt(       // you're prompted for one field
                                    'Set Accession Number'
                                    ) ;
                                var barcode = prompt(         // and then another
                                    'Set Barcode, or Make Blank' , 'MID'
                                    ) ;
                                var strID = 'div_' + div_count ++ ;
                                alert( div_name ) ;           // this is a bit of debugging.
                                $( '<div/>' )                 // yet another DIV
                                    .attr( 'id' , strID )     
                                    .appendTo( '#' + div_name + ' .body' )
                                    ;                    // which should go to the .body
                                                         // but doesn't, which is why I'm writing
                                $( '<span/>' )
                                    .appendTo( '#' + strID)
                                    .text( accession )
                                    .addClass( 'accession' ) // and we add SPANs to that DIV
                                    ;
                                $( '<span/>' )
                                    .appendTo( '#' + strID)
                                    .text( barcode )
                                    .addClass( 'barcode' )   // which are the data we are 
                                    ;                        // prompted for
                                $( '<span/>' )
                                    .appendTo( '#' + strID)
                                    .text( 'delete' )
                                    .addClass( 'delete')
                                    .click(function(){       // and another SPAN
                                        $( '#' + strID ).remove() ;
                                        }) ;                 // that you click to remove
                                    }) ;                     // this whole DIV and all in it
                            }
                        }) ;   // It looks like we're done but that's just the end
                               // of the definition of the SELECT
                               // which we fill with AJAX and JSON
                    $.getJSON( ajax , function(data){ // we get a data chunk from JSON
                        var objD = eval( data ) ;      // convert it to an object
                        for ( var i = 0 ; i < 100 ; i++ ) {  // The shotgun approach saves me
                            if ( objD[i] != undefined ) {    // from having to be clever
                            $( '<option/>')                  // and we add all the OPTIONS
                                .attr('value', objD[i].max_regions ) 
                                .text( objD[i].format )      // to the previously mentioned SELECT
                                .appendTo('#holder')         // Remember the SELECT?
                                ;
                                }
                            }
                        }) ;
                    }) // And here we end it. That was all one "line"
                 ;     // and it isn't quite correct.

My brain hurts.