title: js get the window.location.hash and split it into an array and replace certain array element
body: <p>Hey extremely smart people!</p>
  
  <p>I have been boggled with this and have tried for a week and can't find a logical solution.</p>
  
  <p>Basically whenever a user clicks on either two different sets of links I want a prepared url to be appended.</p>
  
  <p>So far in my code this happens</p>
  
  <pre><code>$(selecter a.1).live('click', function(){
     window.location.hash = '!/' + usr + '/' + $(this).attr('href').replace('.php', '/');
  }
  </code></pre>
  
  <p>this will make the url look like: <a href="http://www.site.com/!#/username/page1/" rel="nofollow">http://www.site.com/!#/username/page1/</a></p>
  
  <p>then I call a function to detect hash change in the url and return the url back to what it should be:</p>
  
  <pre><code>$(window).bind('hashchange', function(){
              hash = window.location.hash;
              //if( hash.indexOf( "/files/" ) == 6 )
                  //newHash = window.location.hash.substring(3).replace(usr + '/files', '').replace('/', '.php');
              //else
                  newHash = window.location.hash.substring(3).replace(usr + '/', '').replace('/', '.php');
              //newHash = window.location.hash.replace(dump, origHash, 'g');
              console.log(newHash);
              if (newHash) {
                  $wrap.find("#main-content").fadeOut(200, function() {
                      $wrap.load(newHash + " #main-content", function() {
                          $content.fadeIn(function() {
                              $wrap.animate({
                                  height: baseHeight + $content.height() + "px"
                              }, 500);
                          });
                      });
                  });
              }
      });
  </code></pre>
  
  <p>no problems there, the problem  is when the user click on the second set of links that i want to append a little differently to the url.</p>
  
  <pre><code>$(selecter a.2).live('click', function(){
         window.location.hash = '!/' + usr + '/' + $(this).attr('href').replace('.php', '/');
  }
  </code></pre>
  
  <p>will look like this: <a href="http://www.site.com/!#/username/files/sub-page/" rel="nofollow">http://www.site.com/!#/username/files/sub-page/</a></p>
  
  <p>the href of the links look like this href="files/sub-page.php"</p>
  
  <p>the problem I have is that with binding the window to a hashchange it will attempt to prepare the url back to its original 'state' which is only applicable to the first set of links.</p>
  
  <p>I had the idea of why not just replace the orginal href value to the window.location.hash but then realized that well... what if the user reloads the page?? Well duh! the original hash will be lost! and the url is dependant in the detection of the hash change so that it can load the proper php page.</p>
  
  <p>Ok, so next I thought maybe I can somehow slice out everything except the last word in the in the url and do a replace('/', '.php') to get the extension tacked on...</p>
  
  <p>Ok, well the other issue with that is that in the url its pointing to files/sub-page.php which is located in a files/ directory.</p>
  
  <p>I originally had everything in one directory and wanted to manually append the files/ to the url but was running in problems with the same logic, so I thought I move them into a folder called files/ and figure out how to trick the js into leaving that dir path in there...</p>
  
  <p>Ok, thats my story...</p>
  
  <p>can I please get some help?</p>