PBS Script Generator: Interdependent dropdown/select menus in Javascript

Recently, I made my foray onto Javascript. I wanted to write a script in javascript to generate a pbs script generator for users based on their selection criteria for running batch jobs on compute nodes on clusters. To make it possible I needed to understand how to create interdependent drop-down/select menus. They contain options for selecting number of nodes, memory per each node, processor per node, and walltime, etc. Overall, I loved learning little bit of javascript. Hopefully, I should make more progress and use it for making some good stuff in the future.

This code contains small styling in css, major block of javascript and a block of HTML. I'll explain the code in my next post. By the way, if you scroll all the way down on this page you can see this PBS Script Generator in action as a widget.

For NetID: Start with an alphabet and then end with some number. Eg. xx2000
Job Name: Start with an alphabet. You can end either with an alphabet or number. It can contain either dash or underscore in the middle. Eg. pbs_job

<style type="text/css">
  .div_style
  {
    margin-left:auto;
    margin-right:auto;
    margin-top:1em;
    text-align:left;
    width:290px;
  }
  table {table-collapse:collapse; border-spacing:0; width:450px; margin:auto; margin-top:20px;}
  td {border:2px groove black;padding:7px;background-color:#ccffcc;font-size:small;font-style:italic;}
  th {border:2px groove black; padding:7px; background-color:#ffffcc; text-align:center;}
</style>

<script type="text/javascript">
  // Table data -- an array of objects
  var jsData = new Array();
 
  function setStyle(x) {
   document.getElementById(x).style.background = "yellow";
   document.getElementById(x).select();
   if (document.getElementById(x).value.split(":")[0] == "SRE NetID" 
|| document.getElementById(x).value.split(":")[0] == "Job Name") {
    document.getElementById(x).value = document.getElementById(x).value.split(" ")[2];
    document.getElementById(x).select();
   }
  }
 
  function grab_netid() {
   netid = document.getElementById('netid_input').value;
   if (netid.match(/^[a-z]{1,9}[0-9]{1,4}$/) != netid) {
    alert("Invalid SRE NetID!");
    return false;
   }
   document.getElementById('netid_input').style.color = "black";
   document.getElementById('netid_input').style.fontWeight = "bold";
   document.getElementById('netid_input').value = "SRE NetID: " + netid;
  }
 
  function grab_jobname() {
   jobname = document.getElementById('jobname_input').value;
   //jobname=document.forms["myForm"]["jobname"].value;
   if (jobname.match(/^[a-zA-Z]{1}[a-zA-Z0-9-_.]{0,13}[a-zA-Z0-9]{1}$/) != jobname) {
    alert("Invalid job name! The name specified may be up to and including" + "\n" 
+ "    15 characters in length. First and last characters should be" + "\n" 
+ "         alphabetic and others can be alphanumeric,.,- and _.");
    return false;
   }
   document.getElementById('jobname_input').style.color = "black";
   document.getElementById('jobname_input').style.fontWeight = "bold";
   document.getElementById('jobname_input').value = "Job Name: " + jobname;
  }
 
  function select_shell() {
   if (document.getElementById('sh_shell').checked == true) {
    pbs_shell_top = "#!/bin/bash";
    pbs_shell_bottom = "#PBS -S /bin/bash";
    pbs_module = "source /etc/profile.d/env-modules.sh"
   } else { // if (document.getElementById('csh_shell').checked == true)
    pbs_shell_top = "#!/bin/csh -f";
    pbs_shell_bottom = "#PBS -S /bin/tcsh";
    pbs_module = "source /etc/profile.d/env-modules.csh"
   }
  }
 
  function select_email() {
   pbs_email = "<br>" + "#PBS -M " + netid + "@SRE.edu" 
+ "<br>" + "#PBS -m ";
   var selectedEmail = document.forms["myForm"].elements["email"];
   for (var i = 0; i < selectedEmail.length; i++) {
    if (selectedEmail[i].checked && i == 0) pbs_email += "b";
    else if (selectedEmail[i].checked && i == 1) pbs_email += "e";
    else if (selectedEmail[i].checked && i == 2) pbs_email += "a";
   }
   if (pbs_email == "<br>" + "#PBS -M " + netid + "@SRE.edu" 
+ "<br>" + "#PBS -m ") 
       pbs_email = "";
  }
 
  function loadSelectElement(selObjId, options) {
   var selObj = document.getElementById(selObjId);
   selObj.style.width = "290px";
 
   // clear the target select element apart from the "select your..." option
   selObj.options.length = 1;
 
   // copy options from array of [value, pair] arrays to select box
   // IE doesn't work if you use the DOM-standard method, however...
   if (typeof(window.clientInformation) != 'undefined') {
    // IE doesn't take the second "before" parameter...
    for (var loop = 0; loop < options.length; loop++)
        selObj.add(new Option(options[loop][1], options[loop][0]));
   } else {
    for (var loop = 0; loop < options.length; loop++)
        selObj.add(new Option(options[loop][1], options[loop][0]), null);
   }
  }
 
  function madeSelection(selObj) {
   if (selObj.name != 'selectedshell' && selObj.name != 'email') {
    var selectedValue = selObj.options[selObj.selectedIndex].value;
    var selectedText = selObj.options[selObj.selectedIndex].text;
    if (selectedValue == '--') return;
   }
   select_shell();
   if (selObj.name != 'selectedshell') {
    netid = document.getElementById('netid_input').value;
 
    if (netid.split(":")[0] == "SRE NetID")
        netid = netid.split(" ")[2];
 
    if (netid.match(/^[a-z]{1,9}[0-9]{1,4}$/) != netid) {
     alert("Invalid SRE NetID!");
     return false;
    }
    jobname = document.getElementById('jobname_input').value;
 
    if (jobname.split(":")[0] == "Job Name")
        jobname = jobname.split(" ")[2];
    if (jobname.match(/^[a-zA-Z]{1}[a-zA-Z0-9-_.]{0,13}[a-zA-Z0-9]{1}$/) != jobname) {
     alert("Invalid job name! The name specified may be up to and including" + "\n" 
+ "    15 characters in length. First and last characters should be" + "\n" 
+ "         alphabetic and others can be alphanumeric,.,- and _.");
     return false;
    }
   }
 
   select_email();
 
   if (selObj.name == 'select01') {
    selObj.onclick = toggle_display(document.getElementById('select03Container'));
    selObj.onclick = toggle_display(document.getElementById('select04Container'));
    selObj.onclick = toggle_display(document.getElementById('select05Container'));
    toggle_display(document.getElementById('pbsscript'));
    toggle_display(document.getElementById('pbs_table'));
    document.getElementById('select02Container').style.display = 'block';
    document.getElementById('select02').options[0].text = 'Select Memory';
    selectedJobType = selectedValue;
 
    switch (selectedValue) {
    case 'type_parallel':
     loadSelectElement('select02', [
      ['type_1gb', '1 GB'],
      ['type_2gb', '2 GB'],
      ['type_3gb', '3 GB'],
      ['type_4gb', '4 GB'],
      ['type_5gb', '5 GB'],
      ['type_6gb', '6 GB'],
      ['type_7gb', '7 GB'],
      ['type_8gb', '8 GB'],
      ['type_9gb', '9 GB'],
      ['type_10gb', '10 GB'],
      ['type_11gb', '11 GB'],
      ['type_12gb', '12 GB'],
      ['type_13gb', '13 GB'],
      ['type_14gb', '14 GB'],
      ['type_15gb', '15 GB'],
      ['type_16gb', '16 GB'],
      ['type_17gb', '17 GB'],
      ['type_18gb', '18 GB'],
      ['type_19gb', '19 GB'],
      ['type_20gb', '20 GB'],
      ['type_21gb', '21 GB'],
      ['type_22gb', '22 GB'],
      ['type_23gb', '23 GB'],
      ['type_24gb', '24 GB'],
      ['type_25gb', '25 GB'],
      ['type_26gb', '26 GB'],
      ['type_27gb', '27 GB'],
      ['type_28gb', '28 GB'],
      ['type_29gb', '29 GB'],
      ['type_30gb', '30 GB'],
      ['type_31gb', '31 GB'],
      ['type_32gb', '32 GB'],
      ['type_33gb', '33 GB'],
      ['type_34gb', '34 GB'],
      ['type_35gb', '35 GB'],
      ['type_36gb', '36 GB'],
      ['type_37gb', '37 GB'],
      ['type_38gb', '38 GB'],
      ['type_39gb', '39 GB'],
      ['type_40gb', '40 GB'],
      ['type_41gb', '41 GB'],
      ['type_42gb', '42 GB'],
      ['type_43gb', '43 GB'],
      ['type_44gb', '44 GB'],
      ['type_45gb', '45 GB'],
      ['type_46gb', '46 GB'],
      ['type_47gb', '47 GB'],
      ['type_48gb', '48 GB'],
      ['type_49gb', '49 GB'],
      ['type_50gb', '50 GB'],
      ['type_51gb', '51 GB'],
      ['type_52gb', '52 GB'],
      ['type_53gb', '53 GB'],
      ['type_54gb', '54 GB'],
      ['type_55gb', '55 GB'],
      ['type_56gb', '56 GB'],
      ['type_57gb', '57 GB'],
      ['type_58gb', '58 GB'],
      ['type_59gb', '59 GB'],
      ['type_60gb', '60 GB'],
      ['type_61gb', '61 GB'],
      ['type_62gb', '62 GB'],
      ['type_63gb', '63 GB'],
      ['type_64gb', '64 GB'],
      ['type_65gb', '65 GB'],
      ['type_66gb', '66 GB'],
      ['type_67gb', '67 GB'],
      ['type_68gb', '68 GB'],
      ['type_69gb', '69 GB'],
      ['type_70gb', '70 GB'],
      ['type_71gb', '71 GB'],
      ['type_72gb', '72 GB'],
      ['type_73gb', '73 GB'],
      ['type_74gb', '74 GB'],
      ['type_75gb', '75 GB'],
      ['type_76gb', '76 GB'],
      ['type_77gb', '77 GB'],
      ['type_78gb', '78 GB'],
      ['type_79gb', '79 GB'],
      ['type_80gb', '80 GB'],
      ['type_81gb', '81 GB'],
      ['type_82gb', '82 GB'],
      ['type_83gb', '83 GB'],
      ['type_84gb', '84 GB'],
      ['type_85gb', '85 GB'],
      ['type_86gb', '86 GB'],
      ['type_87gb', '87 GB'],
      ['type_88gb', '88 GB'],
      ['type_89gb', '89 GB'],
      ['type_90gb', '90 GB']
     ]);
     return;
 
    case 'type_serial':
     loadSelectElement('select02', [
      ['type_20gb', '20 GB'],
      ['type_21gb', '21 GB'],
      ['type_22gb', '22 GB'],
      ['type_23gb', '23 GB'],
      ['type_24gb', '24 GB'],
      ['type_25gb', '25 GB'],
      ['type_26gb', '26 GB'],
      ['type_27gb', '27 GB'],
      ['type_28gb', '28 GB'],
      ['type_29gb', '29 GB'],
      ['type_30gb', '30 GB'],
      ['type_31gb', '31 GB'],
      ['type_32gb', '32 GB'],
      ['type_33gb', '33 GB'],
      ['type_34gb', '34 GB'],
      ['type_35gb', '35 GB'],
      ['type_36gb', '36 GB'],
      ['type_37gb', '37 GB'],
      ['type_38gb', '38 GB'],
      ['type_39gb', '39 GB'],
      ['type_40gb', '40 GB'],
      ['type_41gb', '41 GB'],
      ['type_42gb', '42 GB'],
      ['type_43gb', '43 GB'],
      ['type_44gb', '44 GB'],
      ['type_45gb', '45 GB'],
      ['type_46gb', '46 GB'],
      ['type_47gb', '47 GB'],
      ['type_48gb', '48 GB'],
      ['type_49gb', '49 GB'],
      ['type_50gb', '50 GB'],
      ['type_51gb', '51 GB'],
      ['type_52gb', '52 GB'],
      ['type_53gb', '53 GB'],
      ['type_54gb', '54 GB'],
      ['type_55gb', '55 GB'],
      ['type_56gb', '56 GB'],
      ['type_57gb', '57 GB'],
      ['type_58gb', '58 GB'],
      ['type_59gb', '59 GB'],
      ['type_60gb', '60 GB'],
      ['type_61gb', '61 GB'],
      ['type_62gb', '62 GB'],
      ['type_63gb', '63 GB'],
      ['type_64gb', '64 GB'],
      ['type_65gb', '65 GB'],
      ['type_66gb', '66 GB'],
      ['type_67gb', '67 GB'],
      ['type_68gb', '68 GB'],
      ['type_69gb', '69 GB'],
      ['type_70gb', '70 GB'],
      ['type_71gb', '71 GB'],
      ['type_72gb', '72 GB'],
      ['type_73gb', '73 GB'],
      ['type_74gb', '74 GB'],
      ['type_75gb', '75 GB'],
      ['type_76gb', '76 GB'],
      ['type_77gb', '77 GB'],
      ['type_78gb', '78 GB'],
      ['type_79gb', '79 GB'],
      ['type_80gb', '80 GB'],
      ['type_81gb', '81 GB'],
      ['type_82gb', '82 GB'],
      ['type_83gb', '83 GB'],
      ['type_84gb', '84 GB'],
      ['type_85gb', '85 GB'],
      ['type_86gb', '86 GB'],
      ['type_87gb', '87 GB'],
      ['type_88gb', '88 GB'],
      ['type_89gb', '89 GB'],
      ['type_90gb', '90 GB'],
      ['type_91gb', '91 GB'],
      ['type_92gb', '92 GB'],
      ['type_93gb', '93 GB'],
      ['type_94gb', '94 GB'],
      ['type_95gb', '95 GB'],
      ['type_96gb', '96 GB'],
      ['type_97gb', '97 GB'],
      ['type_98gb', '98 GB'],
      ['type_99gb', '99 GB'],
      ['type_100gb', '100 GB'],
      ['type_101gb', '101 GB'],
      ['type_102gb', '102 GB'],
      ['type_103gb', '103 GB'],
      ['type_104gb', '104 GB'],
      ['type_105gb', '105 GB'],
      ['type_106gb', '106 GB'],
      ['type_107gb', '107 GB'],
      ['type_108gb', '108 GB'],
      ['type_109gb', '109 GB'],
      ['type_110gb', '110 GB'],
      ['type_111gb', '111 GB'],
      ['type_112gb', '112 GB'],
      ['type_113gb', '113 GB'],
      ['type_114gb', '114 GB'],
      ['type_115gb', '115 GB'],
      ['type_116gb', '116 GB'],
      ['type_117gb', '117 GB'],
      ['type_118gb', '118 GB'],
      ['type_119gb', '119 GB'],
      ['type_120gb', '120 GB'],
      ['type_121gb', '121 GB'],
      ['type_122gb', '122 GB'],
      ['type_123gb', '123 GB'],
      ['type_124gb', '124 GB'],
      ['type_125gb', '125 GB'],
      ['type_126gb', '126 GB'],
      ['type_127gb', '127 GB'],
      ['type_128gb', '128 GB'],
      ['type_129gb', '129 GB'],
      ['type_130gb', '130 GB'],
      ['type_131gb', '131 GB'],
      ['type_132gb', '132 GB'],
      ['type_133gb', '133 GB'],
      ['type_134gb', '134 GB'],
      ['type_135gb', '135 GB'],
      ['type_136gb', '136 GB'],
      ['type_137gb', '137 GB'],
      ['type_138gb', '138 GB'],
      ['type_139gb', '139 GB'],
      ['type_140gb', '140 GB'],
      ['type_141gb', '141 GB'],
      ['type_142gb', '142 GB'],
      ['type_143gb', '143 GB'],
      ['type_144gb', '144 GB'],
      ['type_145gb', '145 GB'],
      ['type_146gb', '146 GB'],
      ['type_147gb', '147 GB'],
      ['type_148gb', '148 GB'],
      ['type_149gb', '149 GB'],
      ['type_150gb', '150 GB'],
      ['type_151gb', '151 GB'],
      ['type_152gb', '152 GB'],
      ['type_153gb', '153 GB'],
      ['type_154gb', '154 GB'],
      ['type_155gb', '155 GB'],
      ['type_156gb', '156 GB'],
      ['type_157gb', '157 GB'],
      ['type_158gb', '158 GB'],
      ['type_159gb', '159 GB'],
      ['type_160gb', '160 GB'],
      ['type_161gb', '161 GB'],
      ['type_162gb', '162 GB'],
      ['type_163gb', '163 GB'],
      ['type_164gb', '164 GB'],
      ['type_165gb', '165 GB'],
      ['type_166gb', '166 GB'],
      ['type_167gb', '167 GB'],
      ['type_168gb', '168 GB'],
      ['type_169gb', '169 GB'],
      ['type_170gb', '170 GB'],
      ['type_171gb', '171 GB'],
      ['type_172gb', '172 GB'],
      ['type_173gb', '173 GB'],
      ['type_174gb', '174 GB'],
      ['type_175gb', '175 GB'],
      ['type_176gb', '176 GB'],
      ['type_177gb', '177 GB'],
      ['type_178gb', '178 GB'],
      ['type_179gb', '179 GB'],
      ['type_180gb', '180 GB'],
      ['type_181gb', '181 GB'],
      ['type_182gb', '182 GB'],
      ['type_183gb', '183 GB'],
      ['type_184gb', '184 GB'],
      ['type_185gb', '185 GB'],
      ['type_186gb', '186 GB'],
      ['type_187gb', '187 GB'],
      ['type_188gb', '188 GB'],
      ['type_189gb', '189 GB'],
      ['type_190gb', '190 GB'],
      ['type_191gb', '191 GB'],
      ['type_192gb', '192 GB'],
      ['type_193gb', '193 GB'],
      ['type_194gb', '194 GB'],
      ['type_195gb', '195 GB'],
      ['type_196gb', '196 GB'],
      ['type_197gb', '197 GB'],
      ['type_198gb', '198 GB'],
      ['type_199gb', '199 GB'],
      ['type_200gb', '200 GB'],
      ['type_201gb', '201 GB'],
      ['type_202gb', '202 GB'],
      ['type_203gb', '203 GB'],
      ['type_204gb', '204 GB'],
      ['type_205gb', '205 GB'],
      ['type_206gb', '206 GB'],
      ['type_207gb', '207 GB'],
      ['type_208gb', '208 GB'],
      ['type_209gb', '209 GB'],
      ['type_210gb', '210 GB'],
      ['type_211gb', '211 GB'],
      ['type_212gb', '212 GB'],
      ['type_213gb', '213 GB'],
      ['type_214gb', '214 GB'],
      ['type_215gb', '215 GB'],
      ['type_216gb', '216 GB'],
      ['type_217gb', '217 GB'],
      ['type_218gb', '218 GB'],
      ['type_219gb', '219 GB'],
      ['type_220gb', '220 GB'],
      ['type_221gb', '221 GB'],
      ['type_222gb', '222 GB'],
      ['type_223gb', '223 GB'],
      ['type_224gb', '224 GB'],
      ['type_225gb', '225 GB'],
      ['type_226gb', '226 GB'],
      ['type_227gb', '227 GB'],
      ['type_228gb', '228 GB'],
      ['type_229gb', '229 GB'],
      ['type_230gb', '230 GB'],
      ['type_231gb', '231 GB'],
      ['type_232gb', '232 GB'],
      ['type_233gb', '233 GB'],
      ['type_234gb', '234 GB'],
      ['type_235gb', '235 GB'],
      ['type_236gb', '236 GB'],
      ['type_237gb', '237 GB'],
      ['type_238gb', '238 GB'],
      ['type_239gb', '239 GB'],
      ['type_240gb', '240 GB'],
      ['type_241gb', '241 GB'],
      ['type_242gb', '242 GB'],
      ['type_243gb', '243 GB'],
      ['type_244gb', '244 GB']
     ]);
     return;
    }
   } // select01
   if (selObj.name == 'select02') {
    selObj.onclick = toggle_display(document.getElementById('select04Container'));
    selObj.onclick = toggle_display(document.getElementById('select05Container'));
    toggle_display(document.getElementById('pbsscript'));
    toggle_display(document.getElementById('pbs_table'));
    document.getElementById('select03Container').style.display = 'block';
    document.getElementById('select03').options[0].text = 'Select No. of Nodes';
    selectedMemory = selectedText;
 
    if (selectedJobType == 'type_parallel') {
     if (selectedText.split(" ")[0] <= 22) {
      loadSelectElement('select03', [
       ['type_2nodes', '2'],
       ['type_3nodes', '3'],
       ['type_4nodes', '4'],
       ['type_5nodes', '5'],
       ['type_6nodes', '6'],
       ['type_7nodes', '7'],
       ['type_8nodes', '8'],
       ['type_9nodes', '9'],
       ['type_10nodes', '10'],
       ['type_11nodes', '11'],
       ['type_12nodes', '12'],
       ['type_13nodes', '13'],
       ['type_14nodes', '14'],
       ['type_15nodes', '15'],
       ['type_16nodes', '16'],
       ['type_17nodes', '17'],
       ['type_18nodes', '18'],
       ['type_19nodes', '19'],
       ['type_20nodes', '20'],
       ['type_21nodes', '21'],
       ['type_22nodes', '22'],
       ['type_23nodes', '23'],
       ['type_24nodes', '24'],
       ['type_25nodes', '25'],
       ['type_26nodes', '26'],
       ['type_27nodes', '27'],
       ['type_28nodes', '28'],
       ['type_29nodes', '29'],
       ['type_30nodes', '30'],
       ['type_31nodes', '31'],
       ['type_32nodes', '32'],
       ['type_33nodes', '33'],
       ['type_34nodes', '34'],
       ['type_35nodes', '35'],
       ['type_36nodes', '36'],
       ['type_37nodes', '37'],
       ['type_38nodes', '38'],
       ['type_39nodes', '39'],
       ['type_40nodes', '40'],
       ['type_41nodes', '41'],
       ['type_42nodes', '42'],
       ['type_43nodes', '43'],
       ['type_44nodes', '44'],
       ['type_45nodes', '45'],
       ['type_46nodes', '46'],
       ['type_47nodes', '47'],
       ['type_48nodes', '48'],
       ['type_49nodes', '49'],
       ['type_50nodes', '50'],
       ['type_51nodes', '51'],
       ['type_52nodes', '52'],
       ['type_53nodes', '53'],
       ['type_54nodes', '54'],
       ['type_55nodes', '55'],
       ['type_56nodes', '56'],
       ['type_57nodes', '57'],
       ['type_58nodes', '58'],
       ['type_59nodes', '59'],
       ['type_60nodes', '60'],
       ['type_61nodes', '61'],
       ['type_62nodes', '62'],
       ['type_63nodes', '63'],
       ['type_64nodes', '64'],
       ['type_65nodes', '65'],
       ['type_66nodes', '66'],
       ['type_67nodes', '67'],
       ['type_68nodes', '68'],
       ['type_69nodes', '69'],
       ['type_70nodes', '70'],
       ['type_71nodes', '71'],
       ['type_72nodes', '72']
      ]);
      return;
     } else if (selectedText.split(" ")[0] >= 23 && selectedText.split(" ")[0] <= 42) {
      loadSelectElement('select03', [
       ['type_2nodes', '2'],
       ['type_3nodes', '3'],
       ['type_4nodes', '4'],
       ['type_5nodes', '5'],
       ['type_6nodes', '6'],
       ['type_7nodes', '7'],
       ['type_8nodes', '8'],
       ['type_9nodes', '9'],
       ['type_10nodes', '10'],
       ['type_11nodes', '11'],
       ['type_12nodes', '12'],
       ['type_13nodes', '13'],
       ['type_14nodes', '14'],
       ['type_15nodes', '15'],
       ['type_16nodes', '16'],
       ['type_17nodes', '17'],
       ['type_18nodes', '18'],
       ['type_19nodes', '19'],
       ['type_20nodes', '20'],
       ['type_21nodes', '21'],
       ['type_22nodes', '22'],
       ['type_23nodes', '23'],
       ['type_24nodes', '24'],
       ['type_25nodes', '25'],
       ['type_26nodes', '26']
      ]);
      return;
     } else {
      loadSelectElement('select03', [
       ['type_2nodes', '2'],
       ['type_3nodes', '3'],
       ['type_4nodes', '4'],
       ['type_5nodes', '5'],
       ['type_6nodes', '6'],
       ['type_7nodes', '7'],
       ['type_8nodes', '8'],
       ['type_9nodes', '9'],
       ['type_10nodes', '10'],
       ['type_11nodes', '11'],
       ['type_12nodes', '12'],
       ['type_13nodes', '13'],
       ['type_14nodes', '14'],
       ['type_15nodes', '15'],
       ['type_16nodes', '16'],
       ['type_17nodes', '17']
      ]);
      return;
     }
    } else {
     document.getElementById('select03').options[0].text = 'Select No. of Processors Per Node (ppn)';
     loadSelectElement('select03', [
      ['type_1ppn', '1'],
      ['type_2ppn', '2'],
      ['type_3ppn', '3'],
      ['type_4ppn', '4'],
      ['type_5ppn', '5'],
      ['type_6ppn', '6'],
      ['type_7ppn', '7'],
      ['type_8ppn', '8'],
      ['type_9ppn', '9'],
      ['type_10ppn', '10'],
      ['type_11ppn', '11'],
      ['type_12ppn', '12'],
      ['type_13ppn', '13'],
      ['type_14ppn', '14'],
      ['type_15ppn', '15'],
      ['type_16ppn', '16']
     ]);
     return;
    }
   } // select02
   if (selObj.name == 'select03') {
    selObj.onclick = toggle_display(document.getElementById('select05Container'));
    toggle_display(document.getElementById('pbsscript'));
    toggle_display(document.getElementById('pbs_table'));
    document.getElementById('select04Container').style.display = 'block';
    document.getElementById('select04').options[0].text = 'Select Walltime (Hr)';
 
    if (selectedJobType == 'type_parallel') {
     selectedNodes = selectedText;
    } else {
     selectedPPN = selectedText;
    }
 
    if (selectedJobType == 'type_serial' 
|| (selectedJobType == 'type_parallel' && (selectedMemory.split(" ")[0] < 23 
|| selectedMemory.split(" ")[0] > 42))) {
     loadSelectElement('select04', [
      ['type_walltime1', '1:00:00'],
      ['type_walltime2', '2:00:00'],
      ['type_walltime3', '3:00:00'],
      ['type_walltime4', '4:00:00'],
      ['type_walltime5', '5:00:00'],
      ['type_walltime6', '6:00:00'],
      ['type_walltime7', '7:00:00'],
      ['type_walltime8', '8:00:00'],
      ['type_walltime9', '9:00:00'],
      ['type_walltime10', '10:00:00'],
      ['type_walltime11', '11:00:00'],
      ['type_walltime12', '12:00:00'],
      ['type_walltime13', '13:00:00'],
      ['type_walltime14', '14:00:00'],
      ['type_walltime15', '15:00:00'],
      ['type_walltime16', '16:00:00'],
      ['type_walltime17', '17:00:00'],
      ['type_walltime18', '18:00:00'],
      ['type_walltime19', '19:00:00'],
      ['type_walltime20', '20:00:00'],
      ['type_walltime21', '21:00:00'],
      ['type_walltime22', '22:00:00'],
      ['type_walltime23', '23:00:00'],
      ['type_walltime24', '24:00:00'],
      ['type_walltime25', '25:00:00'],
      ['type_walltime26', '26:00:00'],
      ['type_walltime27', '27:00:00'],
      ['type_walltime28', '28:00:00'],
      ['type_walltime29', '29:00:00'],
      ['type_walltime30', '30:00:00'],
      ['type_walltime31', '31:00:00'],
      ['type_walltime32', '32:00:00'],
      ['type_walltime33', '33:00:00'],
      ['type_walltime34', '34:00:00'],
      ['type_walltime35', '35:00:00'],
      ['type_walltime36', '36:00:00'],
      ['type_walltime37', '37:00:00'],
      ['type_walltime38', '38:00:00'],
      ['type_walltime39', '39:00:00'],
      ['type_walltime40', '40:00:00'],
      ['type_walltime41', '41:00:00'],
      ['type_walltime42', '42:00:00'],
      ['type_walltime43', '43:00:00'],
      ['type_walltime44', '44:00:00'],
      ['type_walltime45', '45:00:00'],
      ['type_walltime46', '46:00:00'],
      ['type_walltime47', '47:00:00'],
      ['type_walltime48', '48:00:00']
     ]);
     return;
    } else {
     loadSelectElement('select04', [
      ['type_walltime1', '1:00:00'],
      ['type_walltime2', '2:00:00'],
      ['type_walltime3', '3:00:00'],
      ['type_walltime4', '4:00:00'],
      ['type_walltime5', '5:00:00'],
      ['type_walltime6', '6:00:00'],
      ['type_walltime7', '7:00:00'],
      ['type_walltime8', '8:00:00'],
      ['type_walltime9', '9:00:00'],
      ['type_walltime10', '10:00:00'],
      ['type_walltime11', '11:00:00'],
      ['type_walltime12', '12:00:00']
     ]);
     return;
    }
   } // select03
   if (selObj.name == 'select04') {
    selectedWalltime = selectedText;
    toggle_display(document.getElementById('pbsscript'));
    toggle_display(document.getElementById('pbs_table'));
 
    if (selectedJobType == 'type_parallel') {
     document.getElementById('select05Container').style.display = 'block';
     document.getElementById('select05').options[0].text = 'Select No. of Processors Per Node (ppn)';
 
     if (selectedText.split(":")[0] <= 12 
|| selectedMemory.split(" ")[0] > 42) {
      loadSelectElement('select05', [
       ['type_1ppn', '1'],
       ['type_2ppn', '2'],
       ['type_3ppn', '3'],
       ['type_4ppn', '4'],
       ['type_5ppn', '5'],
       ['type_6ppn', '6'],
       ['type_7ppn', '7'],
       ['type_8ppn', '8'],
       ['type_9ppn', '9'],
       ['type_10ppn', '10'],
       ['type_11ppn', '11'],
       ['type_12ppn', '12']
      ]);
      return;
     } else {
      loadSelectElement('select05', [
       ['type_1ppn', '1'],
       ['type_2ppn', '2'],
       ['type_3ppn', '3'],
       ['type_4ppn', '4'],
       ['type_5ppn', '5'],
       ['type_6ppn', '6'],
       ['type_7ppn', '7'],
       ['type_8ppn', '8']
      ]);
      return;
     }
    }
   } //select04
   if (selObj.name == 'select05') {
    selectedPPN = selectedText;
   } //select05
   document.getElementById('pbsscript').style.display = 'none';
 
   if (selectedJobType == 'type_serial') {
    document.getElementById('pbsscript').innerHTML = pbs_shell_top + "<br><br>" 
+ "#PBS -V" + "<br>" + pbs_shell_bottom + "<br>" 
+ "#PBS -N " + jobname + "<br>" + "#PBS -l nodes=1:ppn=" + selectedPPN 
+ ",walltime=" + selectedWalltime + "<br>" + "#PBS -l mem=" 
+ selectedMemory.split(" ")[0] + "GB" + "<br>" 
+ "#PBS -q bigmem" + pbs_email + "<br>" + "#PBS -e localhost:/scratch/" 
+ netid + "/${PBS_JOBNAME}.e${PBS_JOBID}" + "<br>" 
+ "#PBS -o localhost:/scratch/" + netid + "/${PBS_JOBNAME}.o${PBS_JOBID}" 
+ "<br><br>" + pbs_module + "<br><br>" + "exit 0;";
   } else {
    document.getElementById('pbsscript').innerHTML = pbs_shell_top + "<br><br>" 
+ "#PBS -V" + "<br>" + pbs_shell_bottom + "<br>" 
+ "#PBS -N " + jobname + "<br>" + "#PBS -l nodes=" + selectedNodes 
+ ":ppn=" + selectedPPN + ",walltime=" + selectedWalltime;
    document.getElementById('pbsscript').innerHTML += "<br>" + "#PBS -l mem=" 
+ selectedMemory.split(" ")[0] + "GB";
    if (selectedMemory.split(" ")[0] <= 22) {
     if (selectedWalltime.split(":")[0] <= 12) {
      if (selectedPPN <= 8) {
       document.getElementById('pbsscript').innerHTML += "<br>" + "#PBS -q p48" 
+ pbs_email + "<br>" + "#PBS -e localhost:/scratch/" + netid 
+ "/${PBS_JOBNAME}.e${PBS_JOBID}" + "<br>" + "#PBS -o localhost:/scratch/" 
+ netid + "/${PBS_JOBNAME}.o${PBS_JOBID}" + "<br><br>" + pbs_module 
+ "<br><br>" + "exit 0;";
 
      } else {
       document.getElementById('pbsscript').innerHTML += "<br>" + "#PBS -q p12" 
+ pbs_email + "<br>" + "#PBS -e localhost:/scratch/" + netid 
+ "/${PBS_JOBNAME}.e${PBS_JOBID}" + "<br>" + "#PBS -o localhost:/scratch/" 
+ netid + "/${PBS_JOBNAME}.o${PBS_JOBID}" + "<br><br>" + pbs_module 
+ "<br><br>" + "exit 0;";
      }
     } else {
      document.getElementById('pbsscript').innerHTML += "<br>" + "#PBS -q p48" 
+ pbs_email + "<br>" + "#PBS -e localhost:/scratch/" + netid 
+ "/${PBS_JOBNAME}.e${PBS_JOBID}" + "<br>" + "#PBS -o localhost:/scratch/" 
+ netid + "/${PBS_JOBNAME}.o${PBS_JOBID}" + "<br><br>" + pbs_module 
+ "<br><br>" + "exit 0;";
     }
    } else if (selectedMemory.split(" ")[0] > 22 && selectedMemory.split(" ")[0] <= 42) {
     document.getElementById('pbsscript').innerHTML += "<br>" + "#PBS -q p12" 
+ pbs_email + "<br>" + "#PBS -e localhost:/scratch/" + netid 
+ "/${PBS_JOBNAME}.e${PBS_JOBID}" + "<br>" + "#PBS -o localhost:/scratch/" 
+ netid + "/${PBS_JOBNAME}.o${PBS_JOBID}" + "<br><br>" + pbs_module 
+ "<br><br>" + "exit 0;";
    } else {
     document.getElementById('pbsscript').innerHTML += "<br>" + "#PBS -q bigmem" 
+ pbs_email + "<br>" + "#PBS -e localhost:/scratch/" + netid 
+ "/${PBS_JOBNAME}.e${PBS_JOBID}" + "<br>" + "#PBS -o localhost:/scratch/" 
+ netid + "/${PBS_JOBNAME}.o${PBS_JOBID}" + "<br><br>" + pbs_module 
+ "<br><br>" + "exit 0;";
    }
 
   }
   var pbs_code = document.getElementById('pbsscript').innerHTML;
   jsData[0] = {
    location: pbs_code
   };
   document.getElementById('pbs_table').style.display = '';
   drawTable('matchData');
  }
 
  // Draw table from 'jsData' array of objects
  function drawTable(tbody) {
   var tr, td;
   tbody = document.getElementById(tbody);
   // remove existing rows, if any
   clearTable(tbody);
   // loop through data source
   for (var i = 0; i < jsData.length; i++) {
    tr = tbody.insertRow(tbody.rows.length);
    td = tr.insertCell(tr.cells.length);
    //td.setAttribute("align", "center");
    td.innerHTML = jsData[i].location;
   }
  }
 
  // Remove existing table rows
  function clearTable(tbody) {
   while (tbody.rows.length > 0) {
    tbody.deleteRow(0);
   }
  }
 
  function toggle_display(obj) {
   if (obj.style.display != 'none') {
    obj.style.display = 'none';
   }
   return;
  }
 </script>    

<FORM name="myForm">
  <TABLE style="width: 300px;">
    <THEAD>
      <TR>
        <TH style="font-size:120%; padding:12px;">PBS SCRIPT GENERATOR</TH>
      </TR>
    </THEAD>
  </TABLE>
  <DIV class="div_style" id="shell_container" style="margin-top:20px">
    <LABEL>Select a Shell</LABEL>
    <INPUT checked="checked" id="sh_shell" name="selectedshell" onclick="madeSelection(this)" type="radio" value="sh">
    </INPUT>
    SH/BASH
    <INPUT id="csh_shell" name="selectedshell" onclick="madeSelection(this)" type="radio" value="csh">
    </INPUT>
    TCSH/CSH </DIV>
  <DIV class="div_style" id="netid_container" style="margin-top:20px">
    <INPUT id="netid_input" name="netid" onfocus="setStyle(this.id)" style="width:217px" type="text" value="Enter your SRE NetID!">
    </INPUT>
    <INPUT onclick="grab_netid();" type="button" value="Submit">
    </INPUT>
  </DIV>
  <DIV class="div_style" id="jobname_container" style="margin-top:20px">
    <INPUT id="jobname_input" name="jobname" onfocus="setStyle(this.id)" style="width:217px" type="text" value="Enter your job name!">
    </INPUT>
    <INPUT onclick="grab_jobname();" type="button" value="Submit">
    </INPUT>
  </DIV>
  <DIV class="div_style" id="email_container" style="margin-top:20px; margin-bottom:20px;">
    <LABEL>Receive Email: </LABEL>
    <INPUT checked="checked" name="email" onclick="madeSelection(this)" type="checkbox" value="begin">
    </INPUT>
    Begin
    <INPUT checked="checked" name="email" onclick="madeSelection(this)" type="checkbox" valueSRE="end">
    </INPUT>
    End
    <INPUT checked="checked" name="email" onclick="madeSelection(this)" type="checkbox" value="abort">
    </INPUT>
    Abort </DIV>
  <DIV class="div_style" id="select01Container" style="display:block;">
    <SELECT id="select01" name="select01" onchange="madeSelection(this);" style="width:290px;">
      <OPTION value="--">Select Job Type</OPTION>
      <OPTION value="type_parallel">Parallel (No. of Nodes >= 2)</OPTION>
      <OPTION value="type_serial">Serial (No. of Nodes = 1)</OPTION>
    </SELECT>
  </DIV>
  <DIV class="div_style" id="select02Container" style="display:none;">
    <SELECT id="select02" name="select02" onchange="madeSelection(this);">
      <OPTION value="--">Select Memory</OPTION>
    </SELECT>
  </DIV>
  <DIV class="div_style" id="select03Container" style="display:none;">
    <SELECT id="select03" name="select03" onchange="madeSelection(this);">
      <OPTION value="--">Select No. of Nodes</OPTION>
    </SELECT>
  </DIV>
  <DIV class="div_style" id="select04Container" style="display:none;">
    <SELECT id="select04" name="select04" onchange="madeSelection(this);">
      <OPTION value="--">Select Processors Per Node (ppn) </OPTION>
    </SELECT>
  </DIV>
  <DIV class="div_style" id="select05Container" style="display:none;">
    <SELECT id="select05" name="select05" onchange="madeSelection(this);">
      <OPTION value="--">Select Walltime (Hr) </OPTION>
    </SELECT>
  </DIV>
  <DIV class="div_style" id="pbsscript"> </DIV>
  <TABLE id="pbs_table" style="display: none;">
    <THEAD>
      <TR>
        <TH>PBS SCRIPT</TH>
      </TR>
    </THEAD>
    <TBODY id="matchData">
    </TBODY>
  </TABLE>
</FORM>

Including mathematics on blog using LaTeX notation: MathJax

If you want to display mathematical equations on your blog you can do that using MathJax Content Delivery Network (CDN). Here is the link: MathJax.

The default math delimiters are \(\$\$...\$\$\), \\([...\)\] for displayed mathematics, and \\((...\)\\()\) for inline mathematics. What it means is you need to keep either \(\$\$\) at the beginning and end of LaTeX notation or \\([\) at the beginning and \] at the end of the same LaTeX notation to display the equation on the page. If I do this with this text, \sqrt{3x-1}+(1+x)^2:

\(\$\$\sqrt{3x-1}+(1+x)^2\$\$\)                         on the page shows up as
$$\sqrt{3x-1}+(1+x)^2$$

\\([\)\sqrt{3x-1}+(1+x)^2\]                         also shows up as
\[\sqrt{3x-1}+(1+x)^2\]

As an example of inline equation, \\((\)\sqrt{3x-1}+(1+x)^2\) shows up as an inline equation, \(\sqrt{3x-1}+(1+x)^2\).

To make it possible, you need to link MathJax by including the below lines in your design html code on your blog. After logging onto your blog, click on Design, Edit HTML and then add the lines either in the head section or before head tag. If you want to keep in side the head tag, use browser search for </head> and insert these lines right before that. Or you can simply place them right before <head>.

<script type="text/javascript"
  src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

Finally, I'd like to say one more great feature of MathJax. If you right click on the equation on the page, you can see the LaTeX source code for the eqation, which is quite useful in case you are looking at some complicated equation on some other page which was in fact put on the page using MathJax. This way you can see the TeX code. Anyway, hope this helps someone.

Highlighting codes on your blog: Syntax Highlighter

Did you ever want to post some code on your blog and highlight it from the plain text? I did. The simple solution I found is Syntax Highlighter developed by Mr. Alex Gorbatchev. Here is the link to his webpage: Syntax Highlighter.

What you need to do is log on to your blog and click on Design, then Edit HTML. Once you see the html code on the page, just paste the code below above head tag.

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushAppleScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'/>
<script language='javascript' type='text/javascript'>
 SyntaxHighlighter.config.bloggerMode = true;
 SyntaxHighlighter.all();
</script>

Now your design html code should look like below. For reference, I have grayed the pasted code out below:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushAppleScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'/>
<script language='javascript' type='text/javascript'>
 SyntaxHighlighter.config.bloggerMode = true;
 SyntaxHighlighter.all();
</script>

  <head>
    <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
    <b:if cond='data:blog.isMobile'>
      <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>

Now it's time to post some html code on our blog. Whatever we did until now lays behind pages and helps load our posts highlighting code, for example in html. In fact, I used Syntax Highlighter to highlight above html codes. Let me show you here how I did it.

We need to use pre tag like shown below. The problem with the syntax highlighter is that all right angle brackets must be HTML escaped, eg all < must be replaced with &lt; This will ensure correct rendering of our code.

<pre class="brush:xml; toolbar:false;">&lt;link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/&gt;
&lt;script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/&gt;
&lt;link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/&gt;
&lt;script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/&gt;
&lt;script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/&gt; 
&lt;script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/&gt; 
&lt;script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/&gt; 
&lt;script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/&gt; 
&lt;script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/&gt; 
&lt;script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/&gt; 
&lt;script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/&gt; 
&lt;script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/&gt;
&lt;script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushAppleScript.js' type='text/javascript'/&gt;
&lt;script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'/&gt;
&lt;script language='javascript' type='text/javascript'&gt;
 SyntaxHighlighter.config.bloggerMode = true;
 SyntaxHighlighter.all();
&lt;/script&gt;
</pre>

<pre class="brush:xml; toolbar:false;  highlight:[5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22]">
&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; ?&gt;
&lt;!DOCTYPE html&gt;
&lt;html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'&gt;

&lt;link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/&gt;
&lt;script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/&gt;
&lt;link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/&gt;
&lt;script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/&gt;
&lt;script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/&gt; 
&lt;script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/&gt; 
&lt;script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/&gt; 
&lt;script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/&gt; 
&lt;script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/&gt; 
&lt;script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/&gt; 
&lt;script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/&gt; 
&lt;script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/&gt;
&lt;script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushAppleScript.js' type='text/javascript'/&gt;
&lt;script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'/&gt;
&lt;script language='javascript' type='text/javascript'&gt;
 SyntaxHighlighter.config.bloggerMode = true;
 SyntaxHighlighter.all();
&lt;/script&gt;

  &lt;head&gt;
    &lt;meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/&gt;
    &lt;b:if cond='data:blog.isMobile'&gt;
      &lt;meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/&gt;
</pre>

After editing html code on your design page if you paste the above two blocks of code on your new post Edit HTML window you can see how your page comes up with the first two blocks on this page. To do this you need to use pre tag like I used above. If you observe I used class attribute with a feature "brush:xml". If you want to post code in C language you need to write "brush:c" or for C++ it should be "brush:cpp", etc. For more languages and language aliases see this page: More Brushes.

Finally, like I mentioned above, you need to escape right angle brackets with &lt;. If you have tonnes of lines in your code, let's say you have big html code, with right chevron, then it's better to look for some tool that automates this job. Otherwise, you might end up hurting your fingers trying to escape all the right chevrons. Just search online for "html encoder" or "html escape", etc. I use this web page: HTML Encoder. Check Alex Gorbatchev web page for more details.

Oho, I forgot to mention one more thing. In my design html page I put javascript pages for Bash, CPP, CSS, Javascript, Perl, PHP, Python, SQL and XML. CPP works for both C++ and C languages. XML works for xml, xhtml, xslt, html, xhtml. If you need more languages check the link I gave above and add the appropriate javascript file link to be loaded. The advantage with these links is that whenever there is new version of syntax highlighter, this page gets that one as the links are always pointed to current version. Hope this helps someone.

Testing Latex code on blog

This morning I was trying to find out how to write newsletter with html in gmail. Some how I stumbled onto this. Did you ever wonder how you can produce nice mathematical equations in documents without using MS Word. In fact, MS Word is a pain when it comes to creating mathematical equations. Latex is a typesetting language used to produce nice documents. You can write anything and everything, including complex mathematical equations, with Latex.

But then the problem is how to produce it on the blogs. There are blog spaces just for this. But it's not that easy though. Some of the people came up with nice idea of using javascript for this purpose. If you google for mathjax you will know how to write blogs with math equations. Of course, you need to know Latex in the first place.

I did simple test here to write mathematical solution to quadratic equation. As you can see it works beautifully. I am so excited ... In the next few days I will write another post about it in detail.

\[
\frac{-b\pm\sqrt{b^2-4ac}}{2a}
\]

www.timeanddate.com

I have always liked this website. It has good apps and free clocks, in both html and flash, in case you are interested to put them on your personal page. Here is the one I took from there to show here:

Flash Based Clock:



Text based clocks (HTML/Javascript):


It has different styled clocks in both text and flash formats. The best part is you can customize to your liking. Give it a try.

Copying all the songs from iTunes Music folder: I love Unix

Very often I need to start working on new computers for whatever reasons. Long time back I used to listen to music all the time while I was working in front of the computer. Some how over the years I completely stopped listening to music while working. Still, my iTunes library on my personal computer has tons of songs.

Recently, all of sudden I do feel like listening to music. At least now and then if not all the time. So, I thought of copying songs from my personal computer to office computer. The problem with the iTunes is that it doesn't play music from the folders you keep songs in. It does maintain its own library, which means it copies all the songs. So, I don't like to maintain songs separately from iTunes. If I did then it would be like wasting lot of space.

Anyway, coming to the problem how do I copy the songs from my computer that's there at home to the computer that's there at my work place. The one thing you could do is by copying the entire music into hard-drive and copy it back to your office computer. But, the problem with this method is it takes a while if you have huge collection. I don't care about tagging at all. I just want to listen to music. So I'd just like to copy the entire music files. At the same time I don't want to copy all the folders from iTunes Music folder. iTunes has weird way of naming folders, which I absolutely hate it.

Being a Linux guy, I wanted to linux way. Or you could say Unix way. First, what I wanted to do was to avoid copying music to hard-drive or taking my laptop to work place. Hence, I went for rsyncing. I've used rsync to sync the data from my personal computer to office computer. rsync is amazing in the sense if you are backing up data constantly from the same computer or at least from the same location on your computer. rsync doesn't copy the files that have been already copied before, unlike scp. For example, there are 100 files in one of the folder. You rsynced it today. In a week time from now you made another 50 files. After a week time, you want to back up those 50 files too. When you do rsync it just checks the files on both sides and immediately knows that it doesn't have to copy first 100 files but just 50 files. Where as scp tries to copy all the files.

I know what you are thinking now. What's the big deal, you might be thinking. Right? Yeah, it's no big deal if you are dealing with data in mb. If you are dealing with data in GBs and TBs it takes days. So I prefer rsync over scp for backing up data.

It's pretty simple. The command goes like this from the terminal.

rsync -e ssh -az <path_to_itunes_music_folder>/ <user>@<ip-destination>:~/Desktop/<directory_of_your_choice>

This command would prompt for password and when you enter the password it hangs there until it finishes copying. Once you are done, you can log on to the the office computer remotely using ssh to check for the music.

ssh <user>@<ip-destination>

Once you are there on the remote computer you can check whether copying is in progress by doing ls.

ls
du -sh ~/Desktop/<path_to_directory_of_music>

The second command above gives the size in human readable format, like in mb and gb. So once rsync is done what I wanted to do was to get the all the mp3 files into one folder on my office computer. So from the remote shell I ran this command.

find . \( -name "*.m4a" -o -name "*.m4p" -o -name "*.mp3" \) -exec mv {} <path_to_desired_folder> \;
du -sh <path_to_the_desired_folder>
ls -l | wc -l

The first line finds all the .mp3, .m4a and .m4p songs and moves them to the desired folder. The next command tells you the size of the folder containing copied songs. Now you should see all the songs copied into that folder. It's just one folder. That's it. The third command tells you the number of songs you have by subtracting one from the number you see on the terminal.

The last thing you do is to add the songs from this folder to iTunes library. So now I have all my songs in iTunes on my office computer. I did it all this with two commands sitting at home. You can ask me how I added the songs to iTunes library sitting at home. I have used remote desktop to do that. I use chicken of vnc. Try it out. In the end I did everything in short time with out any hassles. Simple and effective. The lesson is learn Unix. I love Unix.

Cash from Google

Yep. I made little bit money through my videos on youtube. Isn't it awesome? I never made these videos with an intention of making money at all. For that matter I did't even expect good viewership. Surprisingly, lot of people liked my videos as not only they were helpful in replacing factory installed radios in Honda civic cars with aftermarket cd/blutooth receivers but also saved money for people. It costs at least $100 to $200 just for installation.

Anyway, over the time they got good number of views and Google offered me revenue through ads. Why not? After an year, last month Google paid me $112 as my earnings.

Now, these videos are making $20 a month. Which is pretty cool because I never expected money. I guess when you help people without expecting anything back it gets paid off. Dividends are always there for helping.

It's not that much money, but like someone said each penny helps. More over, I am it's an impetus for me to make some more helpful videos for people. It's worth it. Not because of the money but because of the appreciative comments you get from people. Soon I'll start making videos on maths, programming and unix. There is lot of stuff we can help withto people. I guess everyone needs help from everyone. I will post the links here right after making them. I guess this is the right time to invest in good video camera.

Sent from my phone.