From c79720b9236c53024b51d1acd1de2c90134abb1d Mon Sep 17 00:00:00 2001
From: Trevor Squillario <tsquillario@gmail.com>
Date: Tue, 27 Mar 2012 13:51:16 -0400
Subject: [PATCH] 1.8 display changes, folder picker

---
 images/download_gd_9x12.png                   |  Bin 0 -> 210 bytes
 images/download_gl_9x12.png                   |  Bin 0 -> 201 bytes
 images/hash_gd_14x16.png                      |  Bin 0 -> 224 bytes
 ...ones_16x14.png => headphones_gd_16x14.png} |  Bin
 images/layers_alt_gd_12x12.png                |  Bin 0 -> 159 bytes
 images/layers_alt_gl_12x12.png                |  Bin 0 -> 159 bytes
 images/list_gd_16x14.png                      |  Bin 0 -> 137 bytes
 images/play_alt_16x16.png                     |  Bin 298 -> 0 bytes
 images/play_alt_gd_16x16.png                  |  Bin 0 -> 300 bytes
 images/star_lgo_12x12.png                     |  Bin 0 -> 393 bytes
 index.html                                    |  586 +--------
 js/app.js                                     |  118 +-
 js/audiojs/audio.js                           | 1116 +++++++++--------
 js/contextMenu/jquery.contextMenu.css         |   59 +
 js/contextMenu/jquery.contextMenu.js          |  209 +++
 js/ui-load.js                                 |   67 +
 js/ui-ready.js                                |  488 +++++++
 style/Style.css                               |  149 ++-
 18 files changed, 1627 insertions(+), 1165 deletions(-)
 create mode 100644 images/download_gd_9x12.png
 create mode 100644 images/download_gl_9x12.png
 create mode 100644 images/hash_gd_14x16.png
 rename images/{headphones_16x14.png => headphones_gd_16x14.png} (100%)
 create mode 100644 images/layers_alt_gd_12x12.png
 create mode 100644 images/layers_alt_gl_12x12.png
 create mode 100644 images/list_gd_16x14.png
 delete mode 100644 images/play_alt_16x16.png
 create mode 100644 images/play_alt_gd_16x16.png
 create mode 100644 images/star_lgo_12x12.png
 create mode 100644 js/contextMenu/jquery.contextMenu.css
 create mode 100644 js/contextMenu/jquery.contextMenu.js
 create mode 100644 js/ui-load.js
 create mode 100644 js/ui-ready.js

diff --git a/images/download_gd_9x12.png b/images/download_gd_9x12.png
new file mode 100644
index 0000000000000000000000000000000000000000..622857b9353a86e9bd4d2bbcfcd8aa074c7182bb
GIT binary patch
literal 210
zcmeAS@N?(olHy`uVBq!ia0vp^oIuRO!3HEZ#7tidq$EpRBT9nv(@M${i&7aJQ}UBi
z6+Ckj(^G>|6H_V+Po~-c6_t3pIEGZ*N=k8H+PClD|HL<EXPX-xy5Ym)(r|D^hu|x1
zRt45Wzb8JCY5c)>VLE?;8YjcYDih{w&PNrmF^0x71a)R~aV>nrbH-p|^!B`a0pZsx
zI8xXeOc+FU8g_HOnD;kBO@iSgYYL;7LfL^wiXw&$49pBJuVkC|f0X(Ow4cG#)z4*}
HQ$iB})38Z}

literal 0
HcmV?d00001

diff --git a/images/download_gl_9x12.png b/images/download_gl_9x12.png
new file mode 100644
index 0000000000000000000000000000000000000000..95d4e396d433dc03a4d28903734aba91bd97222a
GIT binary patch
literal 201
zcmeAS@N?(olHy`uVBq!ia0vp^oIuRO!3HEZ#7tidq$EpRBT9nv(@M${i&7aJQ}UBi
z6+Ckj(^G>|6H_V+Po~-c6=i$6IEGZ*N=k8HT77NJfBxk5Ru-c}H+*<p8V;`L5PYT0
zs=#{a_rxbMjXxMKOy^Hf<7D_)Wx{;T`KaPG#?W|%pw5ggu7!^{%o$nD6f}KUK8YW=
x%TjW_&P14};Rn+u25tfCgpUGU5)KWF4ALeNUQ=8CiU6%;@O1TaS?83{1OV*BK-2&L

literal 0
HcmV?d00001

diff --git a/images/hash_gd_14x16.png b/images/hash_gd_14x16.png
new file mode 100644
index 0000000000000000000000000000000000000000..a57d3ed807a72b5dd35b17d515ffafef6e3decaf
GIT binary patch
literal 224
zcmeAS@N?(olHy`uVBq!ia0vp^d_XL~!3HGNrubO_DajJoh?3y^w370~qErUQl>DSr
z1<%~X^wgl##FWaylc_d9MNOVAjv*Ddl2RO)_U-$}=a6OJvA6QGn_JBzAD$Hs4UE<Y
z1l+G@Ff8R45OTkMqW`cPPodj_-~Wv#FwT%T!P1klkZbc@L5V8%51qz}o=LocF^_yA
zocb7Vn#DXi@<VWSFSEodhuMyqf>YF_8|yL^RQ$HdPc*d>nC-`Tt3#X5kwM`A!}Ybg
V!tYYP2?AZi;OXk;vd$@?2>@61ORxX{

literal 0
HcmV?d00001

diff --git a/images/headphones_16x14.png b/images/headphones_gd_16x14.png
similarity index 100%
rename from images/headphones_16x14.png
rename to images/headphones_gd_16x14.png
diff --git a/images/layers_alt_gd_12x12.png b/images/layers_alt_gd_12x12.png
new file mode 100644
index 0000000000000000000000000000000000000000..597f0944c384b670c4339ee92fef59a06134eb68
GIT binary patch
literal 159
zcmeAS@N?(olHy`uVBq!ia0vp^JRr=$1|-8uW1a&k$r9IylHmNblJdl&R0hYC{G?O`
z&)mfH)S%SFl*+=BsWw1Gj-D=#Ar-fhzI^@q|NMai1q>bhO)t*QHgCF7z%ZqpAxI&I
zf01M()9-~$Cm5D-I?oZD?&%>Fn3E<`dg(%mkV69_!?E*zzUB$uT|mPaJYD@<);T3K
F0RW#^G;RO@

literal 0
HcmV?d00001

diff --git a/images/layers_alt_gl_12x12.png b/images/layers_alt_gl_12x12.png
new file mode 100644
index 0000000000000000000000000000000000000000..ce8a6356830d2a37d0d3ad52fb86284fa80083b0
GIT binary patch
literal 159
zcmeAS@N?(olHy`uVBq!ia0vp^JRr=$1|-8uW1a&k$r9IylHmNblJdl&R0hYC{G?O`
z&)mfH)S%SFl*+=BsWw1Gj-D=#Ar-fhVz#FJt!HCvV|J(!aA|L4X}VFsFr}O!NFj%R
zkz^y&?}bb!7?yE5&k>yN=^+)ElO|Jo=|YK+LjxnjgVW)<pF^)r02;>N>FVdQ&MBb@
E0BQX(8vp<R

literal 0
HcmV?d00001

diff --git a/images/list_gd_16x14.png b/images/list_gd_16x14.png
new file mode 100644
index 0000000000000000000000000000000000000000..5d46c8489920df17f80d886ba4697f4c71cbbf96
GIT binary patch
literal 137
zcmeAS@N?(olHy`uVBq!ia0vp^0zk~i!3HGN^yhQ|DajJoh?3y^w370~qErUQl>DSr
z1<%~X^wgl##FWaylc_d9McSS&jv*Ddl0JU@T7RB_Wwv>~2+Ku>fAwra48n&eu<I;N
iG>~FzR^nk`;$bj8F1~YBQS}?3HU>{uKbLh*2~7Y|!6!5T

literal 0
HcmV?d00001

diff --git a/images/play_alt_16x16.png b/images/play_alt_16x16.png
deleted file mode 100644
index dc975d2d97016c283d83a461c1a93dd8dd2a5d93..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 298
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`k|nMYCBgY=CFO}lsSJ)O`AMk?
zp1FzXsX?iUDV2pMQ*D5X&Um^whE&{2N^xM`x9{Ia2Q9`9*$Yef7(O<goo%k?B9`KE
zNrQih8N)_K=DGsL4(0|n+ZJhtt2~ng5)}Aq7$RAWS~#^fG_suK3D~M&%X22cK7E0v
zM?)3s{DnfVUP<xKSkM*7ps}DKLQv~FL%$-YPlVHKk!G109Ul$snrBF8u;?7oXksg2
z7SK*Ge!#G<;J|XhX;zMGIu7Oy9K8k`7^VrG7oON+ILX8yfj6;Hg28tlkBZ7uh6)`A
r<2FVUdjo-qGkF4xgjH`!DjZ<oyX84k)8r=$&|eImu6{1-oD!M<E~;I%

diff --git a/images/play_alt_gd_16x16.png b/images/play_alt_gd_16x16.png
new file mode 100644
index 0000000000000000000000000000000000000000..c76370935f7b30fc080873fe4e5b4d496447ee36
GIT binary patch
literal 300
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`k|nMYCBgY=CFO}lsSJ)O`AMk?
zp1FzXsX?iUDV2pMQ*D5X&Uv~xhE&{2N^xM`x9=aPgO*%}?1d$K3?C1joo%k?AeQ2C
zX$8ZQYs?!Nnd=G|JD3~UY#XE*uGYwPuu60=%QxH*NZ}9;NwDRdCAlEWu}Wgb!n$(~
z!4o*Xa@jenUb$*2XXMDt!`i^a)gii&&GtaDhmG*G3u;Fd*wvD3dd@4Tv2ihS8+I*V
zjO9PVb%V#EL0jfSX3J8)35?tqc@><Ld30Kq9{KE|lGvld%M;-op}^)eS)G~F(^5c=
t`$A75$5{;?mlQSUDQ8?f%h)&!82G1o&T)VDdL7Vb44$rjF6*2UngE5{UF-k=

literal 0
HcmV?d00001

diff --git a/images/star_lgo_12x12.png b/images/star_lgo_12x12.png
new file mode 100644
index 0000000000000000000000000000000000000000..82ec22abefbbd9d6d7a87847f168e6fbe1c37776
GIT binary patch
literal 393
zcmV;40e1e0P)<h;3K|Lk000e1NJLTq000aC000aK1^@s6R&`wG0000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBUzD@jB_RCwBiP`ysWFc|b-eug&ffK*X}
z2q1QNgEAvfC}QLN7=Wtq1dMEe7@=(nDHU5QAvI~_1Yf`sI0Kd}pYQJbeEw)r6vSM;
z{>=zyH$2)jHD(eQSN(txx`O?U|0z%_^y)PW8`u;nBB@SP6P&Z*y5BB4zs2v7l=+s{
zPEW!@T=uRP3cH%Lgf(*=N8_fHX|6TpO$1}?&UNfPe{HovY57o78-fkL#7GfOrt>6S
z-m`9axW7o!^OxcHQ%YI+5IAV?z)SU5F%i!B)6RBK`&}>?z0R{N>!|z>=9G3-w8|5<
zCCYS_v8w5ud0xGN2+=s6p))WzXqAFIFAgjr$nzi~Ntzxb1~52ie+pFoj$_-&Wcu-_
nt}T`K_9t@-95i^~{SsgR`QVG=_Pta<00000NkvXXu0mjf`Om3r

literal 0
HcmV?d00001

diff --git a/index.html b/index.html
index 92c5a81..e90586c 100644
--- a/index.html
+++ b/index.html
@@ -7,6 +7,7 @@
     <link rel="icon" href="images/subsonic_32x32.png" sizes="32x32"/>
     <link href="style/Style.css" rel="stylesheet" type="text/css" />
     <link href="js/fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" />
+    <link href="js/contextMenu/jquery.contextMenu.css" rel="stylesheet" type="text/css" />
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
     <script src="js/audiojs/audio.min.js" type="text/javascript"></script>
     <script src="js/jquery.scrollTo-1.4.2-min.js" type="text/javascript"></script>
@@ -19,542 +20,9 @@
     <script src="js/fancybox/jquery.fancybox-1.3.4.pack.js" type="text/javascript"></script>
     <script src="js/jquery.linkify-1.0-min.js" type="text/javascript"></script>
     <script src="js/app.js" type="text/javascript"></script>
+    <script src="js/ui-load.js" type="text/javascript"></script>
+    <script src="js/ui-ready.js" type="text/javascript"></script>
     <script type="text/javascript">
-        $(document).ready(function () {
-            // Tabs
-            $(".tabcontent").hide(); //Hide all content
-            if ($.cookie('username') == null) {
-                $('ul.tabs li a').each(function () {
-                    if ($(this).attr("href") == '#tabPreferences') {
-                        $(this).addClass("active"); //Add "active" class to selected tab
-                    }
-                });
-                $("#tabPreferences").show(); //Show first tab content
-                loadTabContent('#tabPreferences');
-            } else {
-                if (window.location.hash) {
-                    var hash = window.location.hash;
-                    $('ul.tabs li a').each(function () {
-                        if ($(this).attr("href") == hash) {
-                            $(this).addClass("active"); //Add "active" class to selected tab
-                        }
-                    });
-                    $(hash).show(); //Fade in the active ID content
-                    loadTabContent(hash);
-                } else {
-                    $("ul.tabs li:first a").addClass("active").show(); //Activate first tab
-                    $(".tabcontent:first").show(); //Show first tab content
-                    var firstTab = $("ul.tabs li:first a").attr("href");
-                    loadTabContent(firstTab);
-                }
-            }
-
-            // Tabs - Click Event
-            $("ul.tabs li a").click(function () {
-                $("ul.tabs li a").removeClass("active"); //Remove any "active" class
-                $(this).addClass("active"); //Add "active" class to selected tab
-                $(".tabcontent").hide(); //Hide all tab content
-
-                var activeTab = $(this).attr("href"); //Find the href attribute value to identify the active tab + content
-                $(activeTab).show(); //Fade in the active ID content
-                loadTabContent(activeTab);
-            });
-
-            // Ajax Loading Screen
-            $(".toploading").ajaxStart(function () {
-                $(this).show();
-            });
-            $(".toploading").ajaxStop(function () {
-                $(this).hide();
-            });
-
-            // Keyboard shortcuts
-            $(document).keydown(function (e) {
-                var source = e.target.id;
-                if (source != 'Search' && source != 'ChatMsg') {
-                    var unicode = e.charCode ? e.charCode : e.keyCode;
-                    // a-z
-                    if (unicode >= 65 && unicode <= 90) {
-                        var key = findKeyForCode(unicode);
-                        var el = '#index_' + key.toUpperCase();
-                        $('#Artists').stop().scrollTo(el, 400);
-                        // right arrow
-                    } else if (unicode == 39 || unicode == 176) {
-                        var next = $('ul.songlist li.playing').next();
-                        if (!next.length) next = $('ul.songlist li').first();
-                        changeTrack(next);
-                        // back arrow
-                    } else if (unicode == 37 || unicode == 177) {
-                        var prev = $('ul.songlist li.playing').prev();
-                        if (!prev.length) prev = $('ul.songlist li').last();
-                        changeTrack(prev);
-                        // spacebar
-                    } else if (unicode == 32 || unicode == 179 || unicode == 0179) {
-                        playPauseSong();
-                    } else if (unicode == 36) {
-                        $('#Artists').stop().scrollTo('#auto', 400);
-                    }
-                }
-            });
-
-            // Main Click Events
-            // Albums Click Event
-            $('#ArtistContainer li.item').live('click', function () {
-                $('#AutoAlbumContainer li').removeClass('selected');
-                $('#ArtistContainer li').removeClass('selected');
-                $(this).addClass('selected');
-                getAlbums($(this).attr("id"), '', '#AlbumRows');
-            });
-            $('#BottomIndex li a').live('click', function () {
-                var el = '#index_' + $(this).text();
-                $('#Artists').stop().scrollTo(el, 400);
-                return false;
-            });
-            $('#AutoAlbumContainer li.item').live('click', function () {
-                $('#AutoAlbumContainer li').removeClass('selected');
-                $('#ArtistContainer li').removeClass('selected');
-                $(this).addClass('selected');
-                getAlbumListBy($(this).attr("id"));
-            });
-            $('tr.album a.play').live('click', function (e) {
-                var albumid = $(this).parent().parent().attr('childid');
-                var artistid = $(this).parent().parent().attr('parentid');
-                getAlbums(albumid, 'autoplay', '#CurrentPlaylistContainer');
-                return false;
-            });
-            $('tr.album a.add').live('click', function (e) {
-                var albumid = $(this).parent().parent().attr('childid');
-                var artistid = $(this).parent().parent().attr('parentid');
-                getAlbums(albumid, 'add', '#CurrentPlaylistContainer');
-                return false;
-            });
-            $('tr.album a.rate').live('click', function (event) {
-                var itemid = $(this).parent().parent().attr('childid');
-                rateSong(itemid, 5);
-                return false;
-            });
-            $('tr.album a.favorite').live('click', function (event) {
-                var itemid = $(this).parent().parent().attr('childid');
-                rateSong(itemid, 0);
-                return false;
-            });
-            $('tr.album').live('click', function (e) {
-                var albumid = $(this).attr('childid');
-                var artistid = $(this).attr('parentid');
-                getAlbums(albumid, '', '#AlbumRows');
-                return false;
-            });
-            // Track - Click Events
-            // Multiple Select
-            $('.noselect').disableTextSelect();
-            var lastChecked = null;
-            $('table.songlist tr.song').live('click', function (event) {
-                var checkboxclass = 'table.songlist tr.song';
-                var songid = $(this).attr('childid');
-                var albumid = $(this).attr('parentid');
-                if (!event.ctrlKey) {
-                    $(checkboxclass).removeClass('selected');
-                }
-                if ($(this).hasClass('selected')) {
-                    $(this).removeClass('selected');
-                } else {
-                    $(this).addClass('selected');
-                }
-                if (!lastChecked) {
-                    lastChecked = this;
-                    return;
-                }
-                if (event.shiftKey) {
-                    var start = $(checkboxclass).index(this);
-                    var end = $(checkboxclass).index(lastChecked);
-                    for (i = Math.min(start, end); i <= Math.max(start, end); i++) {
-                        $(checkboxclass).eq(i).addClass('selected');
-                    }
-                }
-                lastChecked = this;
-            });
-            // Double Click
-            $('table.songlist tr.song').live('dblclick', function (e) {
-                e.preventDefault();
-                //$(this).addClass('playing').siblings().removeClass('playing');
-                var songid = $(this).attr('childid');
-                var albumid = $(this).attr('parentid');
-                playSong('', this, songid, albumid);
-            });
-            $('table.songlist tr.song a.play').live('click', function (event) {
-                var songid = $(this).parent().parent().attr('childid');
-                var albumid = $(this).parent().parent().attr('parentid');
-                playSong($(this).parent().parent(), songid, albumid);
-                return false;
-            });
-            $('table.songlist tr.song a.add').live('click', function (event) {
-                var track = $(this).parent().parent();
-                $(track).clone().appendTo('#CurrentPlaylistContainer');
-                return false;
-            });
-            $('table.songlist tr.song a.remove').live('click', function (event) {
-                var track = $(this).parent().parent();
-                $(track).remove();
-                refreshRowColor();
-                return false;
-            });
-            $('table.songlist tr.song a.rate').live('click', function (event) {
-                var songid = $(this).parent().parent().attr('childid');
-                rateSong(songid, 5);
-                return false;
-            });
-            $('table.songlist tr.song a.favorite').live('click', function (event) {
-                var songid = $(this).parent().parent().attr('childid');
-                rateSong(songid, 0);
-                return false;
-            });
-            $('li.index').live('click', function (e) {
-                $('#Artists').stop().scrollTo('#auto', 400);
-                return false;
-            });
-
-            // Music Library Click Events
-            $('a#action_AddToPlaylist').click(function () {
-                var submenu = $('div#submenu_AddToPlaylist');
-                if (submenu.is(":visible")) {
-                    submenu.fadeOut();
-                } else {
-                    loadPlaylistsForMenu('submenu_AddToPlaylist');
-                    //get the position of the placeholder element
-                    pos = $(this).offset();
-                    width = $(this).width();
-                    height = $(this).height();
-                    //show the menu directly over the placeholder
-                    submenu.css({ "left": (pos.left) + "px", "top": (pos.top + height + 14) + "px" }).fadeIn(400);
-                }
-            });
-            var submenu_active = false;
-            $('div.submenu').mouseenter(function () {
-                submenu_active = true;
-            });
-            $('div.submenu').mouseleave(function () {
-                submenu_active = false;
-                setTimeout(function () { if (submenu_active == false) $('div.submenu').fadeOut(); }, 400);
-            });
-            $('a#action_AddToCurrent').click(function () {
-                addToCurrent();
-            });
-            $('#action_RefreshArtists').click(function () {
-                loadArtists(true);
-                return false;
-            });
-            $('#action_IncreaseWidth').click(function () {
-                resizeSMSection(50);
-                return false;
-            });
-            $('#action_DecreaseWidth').click(function () {
-                resizeSMSection(-50);
-                return false;
-            });
-            $('#action_SelectAll').click(function () {
-                $('#Albums tr.song').each(function () {
-                    $(this).addClass('selected');
-                });
-                return false;
-            });
-            $('#action_SelectNone').click(function () {
-                $('#Albums tr.song').each(function () {
-                    $(this).removeClass('selected');
-                });
-                return false;
-            });
-            $('input#Search').keydown(function (e) {
-                var unicode = e.charCode ? e.charCode : e.keyCode;
-                if (unicode == 13) {
-                    $('#action_Search').click();
-                }
-            });
-            $('#action_Search').click(function () {
-                var query = $('#Search').val();
-                search('song', query);
-                $('#Search').val("");
-                return false;
-            });
-            // Current Playlist Click Events
-            $('#action_Shuffle').live('click', function () {
-                $('#CurrentPlaylistContainer tr.song').shuffle();
-                refreshRowColor();
-                return false;
-            });
-            $('#action_Empty').live('click', function () {
-                $('#CurrentPlaylistContainer tbody').empty();
-                return false;
-            });
-            $('a#action_AddCurrentToPlaylist').click(function () {
-                var submenu = $('div#submenu_AddCurrentToPlaylist');
-                if (submenu.is(":visible")) {
-                    submenu.fadeOut();
-                } else {
-                    loadPlaylistsForMenu('submenu_AddCurrentToPlaylist');
-                    //get the position of the placeholder element
-                    pos = $(this).offset();
-                    width = $(this).width();
-                    height = $(this).height();
-                    //show the menu directly over the placeholder
-                    submenu.css({ "left": (pos.left) + "px", "top": (pos.top + height + 14) + "px" }).fadeIn(400);
-                }
-            });
-            $('#action_CurrentSelectAll').click(function () {
-                $('#CurrentPlaylist tr.song').each(function () {
-                    $(this).addClass('selected');
-                });
-                return false;
-            });
-            $('#action_CurrentSelectNone').click(function () {
-                $('#CurrentPlaylist tr.song').each(function () {
-                    $(this).removeClass('selected');
-                });
-                return false;
-            });
-            // Playlist Click Events
-            $('#AutoPlaylistContainer li.item').live('click', function () {
-                $('#AutoPlaylistContainer li').removeClass('selected');
-                $('#PlaylistContainer li').removeClass('selected');
-                $(this).addClass('selected');
-                getRandomSongList('', '#TrackContainer');
-            });
-            $('#AutoPlaylistContainer li.item a.play').live('click', function () {
-                getRandomSongList('autoplay', '#CurrentPlaylistContainer');
-                return false;
-            });
-            $('#AutoPlaylistContainer li.item a.add').live('click', function () {
-                getRandomSongList('', '#CurrentPlaylistContainer');
-                return false;
-            });
-            $('#PlaylistContainer li.item').live('click', function () {
-                $('#AutoPlaylistContainer li').removeClass('selected');
-                $('#PlaylistContainer li').removeClass('selected');
-                $(this).addClass('selected');
-                getPlaylist($(this).attr("id"), '', '#TrackContainer tbody');
-            });
-            $('#PlaylistContainer li.item a.play').live('click', function () {
-                getPlaylist($(this).parent().parent().attr("id"), 'autoplay', '#CurrentPlaylistContainer tbody');
-                return false;
-            });
-            $('#PlaylistContainer li.item a.add').live('click', function () {
-                getPlaylist($(this).parent().parent().attr("id"), '', '#CurrentPlaylistContainer tbody');
-                return false;
-            });
-            $('#action_DeletePlaylist').click(function () {
-                if ($('#PlaylistContainer li.selected').length > 0) {
-                    if (confirmDelete()) {
-                        $('#PlaylistContainer li.selected').each(function () {
-                            deletePlaylist($(this).attr("id"));
-                        });
-                    }
-                }
-                return false;
-            });
-            $('#action_SavePlaylist').click(function () {
-                if ($('#PlaylistContainer li.selected').length > 0) {
-                    $('#PlaylistContainer li.selected').each(function () {
-                        savePlaylist($(this).attr("id"));
-                    });
-                }
-                return false;
-            });
-            $('#action_RemoveSongs').click(function () {
-                if ($('#TrackContainer tr.selected').length > 0) {
-                    $('#TrackContainer tr.selected').each(function () {
-                        $(this).remove();
-                    });
-                }
-                return false;
-            });
-            $('#action_ShufflePlaylist').live('click', function () {
-                $('#TrackContainer tr.song').shuffle();
-                refreshRowColor();
-                return false;
-            });
-
-            // Player Click Events
-            $('#PlayTrack').live('click', function () {
-                playPauseSong();
-                return false;
-            });
-            $('#NextTrack').live('click', function () {
-                var next = $('#CurrentPlaylistContainer tr.playing').next();
-                changeTrack(next);
-                return false;
-            });
-            $('#PreviousTrack').live('click', function () {
-                var prev = $('#CurrentPlaylistContainer tr.playing').prev();
-                changeTrack(prev);
-                return false;
-            });
-            $("a#coverartimage").fancybox({
-                'hideOnContentClick': true,
-                'type': 'image'
-            });
-
-            // Side Bar Click Events
-            $('#action_ToggleSideBar').live('click', function () {
-                if ($.cookie('sidebar')) {
-                    $.cookie('sidebar', null);
-                    $('#SideBar').hide();
-                    stopUpdateChatMessages();
-                    stopUpdateNowPlaying();
-                } else {
-                    $.cookie('sidebar', true, { expires: 365 });
-                    $('#SideBar').show();
-                    updateChatMessages();
-                    updateNowPlaying();
-                }
-                resizeContent();
-                return false;
-            });
-            $('input#ChatMsg').keydown(function (e) {
-                var unicode = e.charCode ? e.charCode : e.keyCode;
-                if (unicode == 13) {
-                    var msg = $('#ChatMsg').val();
-                    if (msg != '') {
-                        addChatMessage(msg);
-                    }
-                    $('#ChatMsg').val("");
-                }
-            });
-
-            // Preferences Click Events
-            $('#SavePreferences').live('click', function () {
-                var username = $('#Username').val();
-                var password = $('#Password').val();
-                $.cookie('username', username, { expires: 365 });
-                $.cookie('password', password, { expires: 365 });
-                var AutoAlbumSize = $('#AutoAlbumSize').val();
-                var AutoPlaylistSize = $('#AutoPlaylistSize').val();
-                $.cookie('AutoAlbumSize', AutoAlbumSize, { expires: 365 });
-                $.cookie('AutoPlaylistSize', AutoPlaylistSize, { expires: 365 });
-                var server = $('#Server').val();
-                if (server != "") {
-                    $.cookie('Server', server, { expires: 365 });
-                }
-                var applicationname = $('#ApplicationName').val();
-                if (applicationname != "") {
-                    $.cookie('ApplicationName', applicationname, { expires: 365 });
-                }
-                location.reload(true);
-            });
-            $('#HideAZ').live('click', function () {
-                if ($('#HideAZ').is(':checked')) {
-                    $.cookie('HideAZ', '1', { expires: 365 });
-                    $('#BottomContainer').hide();
-                }
-            });
-            $('#EnableNotifications').live('click', function () {
-                if ($('#EnableNotifications').is(':checked')) {
-                    requestPermissionIfRequired();
-                    if (hasNotificationPermission()) {
-                        $.cookie('EnableNotifications', '1', { expires: 365 });
-                    }
-                } else {
-                    $.cookie('EnableNotifications', null);
-                }
-            });
-            $('#ScrollTitle').live('click', function () {
-                if ($('#ScrollTitle').is(':checked')) {
-                    $.cookie('ScrollTitle', '1', { expires: 365 });
-                }
-            });
-            $('input#Password').keydown(function (e) {
-                var unicode = e.charCode ? e.charCode : e.keyCode;
-                if (unicode == 13) {
-                    $('#SavePreferences').click();
-                }
-            });
-            $('#ResetPreferences').live('click', function () {
-                $.cookie('username', null);
-                $.cookie('password', null);
-                $.cookie('AutoAlbumSize', null);
-                $.cookie('AutoPlaylistSize', null);
-                $.cookie('Server', null);
-                $.cookie('ApplicationName', null);
-                $.cookie('HideAZ', null);
-                location.reload(true);
-            });
-            $('#ChangeLogShowMore').live('click', function () {
-                $('ul#ChangeLog li.log').each(function (i, el) {
-                    $(el).show();
-                });
-                return false;
-            });
-
-        });                   // End document.ready
-
-        $(window).load(function () {
-            if ($.cookie('defaultsmwidth')) {
-                var width = $.cookie('defaultsmwidth');
-                $('.smsection').css({ 'width': width + 'px' });
-                $('#MainActions').css({ 'width': (width - 5) + 'px' });
-                $('#BottomContainer').css({ 'width': (width - 16) + 'px' });
-                var ulwidth = parseInt(width) + 6;
-                $('#AlbumContainer').css({ 'margin-left': ulwidth + 'px' });
-                $('#TrackContainer').css({ 'margin-left': ulwidth + 'px' });
-            }
-            if ($.cookie('sidebar') && $.cookie('username') && $.cookie('password')) {
-                $('#SideBar').show();
-                updateChatMessages();
-                updateNowPlaying();
-            }
-            if ($.cookie('HideAZ')) {
-                $('#BottomContainer').hide();
-            }
-            $('ul#ChangeLog li.log').each(function (i, el) {
-                if (i > 3) {
-                    $(el).hide();
-                }
-            });
-            resizeContent();
-        });
-        window.onbeforeunload = function() {
-            closeAllNotifications();
-        };
-        $(window).resize(function () {
-            resizeContent();
-        });
-        function resizeContent() {
-            var screenwidth = $(window).width();
-            $('.tabcontent').css({ 'height': (($(window).height() - 152)) + 'px' });
-            $('.smsection').css({ 'height': (($(window).height() - 192)) + 'px' });
-            var smheight = $('.smsection').height();
-            var smwidth = $('.smsection').width();
-            $('#BottomContainer').css({ 'top': smheight + 75 + 'px' });
-            if ($.cookie('sidebar')) {
-                var tabwidth = $(window).width() - 218;
-                if (tabwidth >= 700) {
-                    $('.tabcontent').css({ 'width': tabwidth + 'px' });
-                }
-                var sbheight = $(window).height() - 152;
-                $('#SideBar').css({ 'height': sbheight + 'px' });
-                $('#ChatMsgs').css({ 'height': (sbheight - 270) + 'px' });
-            } else {
-                var tabwidth = $(window).width() - 11;
-                if (tabwidth >= 700) {
-                    $('.tabcontent').css({ 'width': tabwidth + 'px' });
-                }
-            }
-            var tabwidth = $('.tabcontent').width();
-            $('#AlbumContainer, #TrackContainer, #CurrentPlaylistContainer').css({ 'width': (tabwidth - smwidth - 30) + 'px' });
-            $('#CurrentPlaylistContainer').css({ 'width': (tabwidth - 30) + 'px' });
-        }
-        function resizeSMSection(x) {
-            var smwidth = $('.smsection').width();
-            var newsmwidth = smwidth + x;
-            if (newsmwidth > 150 && newsmwidth < 500) {
-                $('.smsection').css({ 'width': (newsmwidth) + 'px' });
-                $('#MainActions').css({ 'width': (newsmwidth - 5) + 'px' });
-                $('#BottomContainer').css({ 'width': (newsmwidth - 16) + 'px' });
-                $.cookie('defaultsmwidth', newsmwidth, { expires: 365, path: '/' });
-                var ulwidth = newsmwidth + 6;
-                $('#AlbumContainer').css({ 'margin-left': ulwidth + 'px' });
-                $('#TrackContainer').css({ 'margin-left': ulwidth + 'px' });
-            }
-        }
-
         var a;
         var audio;
         audiojs.events.ready(function () {
@@ -598,24 +66,24 @@
 <body>
 
 <div id="container">
+    <div id="messages">This is a test!</div>    
     <div id="nav">
         <ul class="tabs">
-        <li><a href="#tabLibrary">Music Library</a></li>
-        <li><a href="#tabCurrent">Current Playlist</a></li>
-        <li><a href="#tabPlaylists">Playlists</a></li>
+        <li><a href="#tabLibrary" class="first" title="Library"><img src="images/headphones_gd_16x14.png" /></a></li>
+        <li><a href="#tabCurrent" title="Current Playlist"><img src="images/play_alt_gd_16x16.png" /></a></li>
+        <li><a href="#tabPlaylists" title="Playlists"><img src="images/list_gd_16x14.png" /></a></li>
         <li><a href="#tabPreferences" class="last" title="Preferences"><img src="images/cog_16x16.png" /></a></li>
         </ul>
         <div class="toploading"></div>
-        <div id="messages"></div>
     </div>
     <div id="content">
         <div id="tabLibrary" class="tabcontent">
-            <div id="MainActions" class="actions floatleft">
+            <div class="actions floatleft">
                 <a href="#" class="button" id="action_RefreshArtists" title="Refresh Artist List"><img src="images/reload_9x11.png" /></a>
                 <a href="#" class="button" id="action_DecreaseWidth" title="Decrease Width"><img src="images/minus_8x2.png" /></a>
                 <a href="#" class="button" id="action_IncreaseWidth" title="Increase Width"><img src="images/plus_8x8.png" /></a>
             </div>
-            <div class="actions floatleft">
+            <div class="subactions floatleft">
                 <a href="#" class="button" id="action_AddToPlaylist" title="Add Selected To Playlist">+ Playlist</a>
                 <div id="submenu_AddToPlaylist" class="submenu shadow" style="display: none;"></div>
                 <a href="#" class="button" id="action_AddToCurrent" title="Add Selected To Current Playlist">+ Current</a>
@@ -623,11 +91,14 @@
                 <a href="#" class="button" id="action_SelectNone" title="Select None">None</a>
                 <input type="text" id="Search" class="medium" /><a href="#" class="button" id="action_Search" title="Search"><img src="images/magnifying_glass_alt_12x12.png" /></a>
             </div>
-            <div id="Albums" class="lgsection floatleft noselect">
+            <div id="Albums" class="lgsection floatleft">
                 <div class="loading"></div>
-                <div id="Artists" class="smsection floatleft noselect" tabindex="0">
+                <div id="Artists" class="smsection floatleft" tabindex="0">
                     <div class="padder">
-                    <ul id="AutoAlbumContainer" class="simplelist mainlist">
+                    <select id="MusicFolders">
+                      <option value="All Folders">All Folders</option>
+                    </select>
+                    <ul id="AutoAlbumContainer" class="simplelist mainlist noselect">
                     <li class="index" id="auto">Auto Albums</li>
                     <li class="item" id="newest"><span>Recently Added</span></li>
                     <li class="item" id="random"><span>Random</span></li>
@@ -635,20 +106,23 @@
                     <li class="item" id="recent"><span>Recently Played</span></li>
                     <li class="item" id="frequent"><span>Most Played</span></li>
                     </ul>
-                    <ul id="ArtistContainer" class="simplelist mainlist"></ul>
+                    <ul id="ArtistContainer" class="simplelist mainlist noselect"></ul>
                     </div>
                 <div id="BottomContainer"><ul id="BottomIndex"></ul></div>
                 </div>
-                <table id="AlbumContainer" class="simplelist songlist" cellspacing="1">
+                <table id="AlbumContainer" class="simplelist songlist noselect" cellspacing="1">
                 <thead id="AlbumHeader"></thead>
                 <tbody id="AlbumRows"></tbody>
                 </table>
             </div>
+            
         </div>
         <div id="tabCurrent" class="tabcontent">
             <div class="actions floatleft">
                 <a href="#" class="button" id="action_Shuffle" title="Shuffle"><img src="images/fork_11x12.png" /></a>
                 <a href="#" class="button" id="action_Empty" title="Remove All">Empty</a>
+            </div>
+            <div class="subactions floatleft">
                 <a href="#" class="button" id="action_CurrentSelectAll" title="Select All">All</a>
                 <a href="#" class="button" id="action_CurrentSelectNone" title="Select None">None</a>
                 <a href="#" class="button" id="action_AddCurrentToPlaylist" title="Add Selected To Playlist">+ Playlist</a>
@@ -666,6 +140,8 @@
                 <a href="#" class="button" id="action_NewPlaylist" onclick="newPlaylist(); return false;" title="New Playlist">+ New</a>
                 <a href="#" class="button" id="action_DeletePlaylist" title="Delete Playlist">Delete</a>
                 <a href="#" class="button" id="action_SavePlaylist" title="Save Playlist">Save</a>
+            </div>
+            <div class="subactions floatleft">
                 <a href="#" class="button" id="action_ShufflePlaylist" title="Shuffle Playlist"><img src="images/fork_11x12.png" /></a>
                 <a href="#" class="button" id="action_RemoveSongs" title="Remove selected song(s) from playlist">Remove Song(s)</a>
             </div>
@@ -766,11 +242,21 @@
                 <div class="subsection floatleft">
                     <h3 class="title">Change Log</h3>
                     <ul id="ChangeLog" class="preferences">
-                    <!--<li class="log">- </li>-->
+                    <!--
+                    <li class="log"><span class="version"></span>
+                        <span class="changes"></span>
+                    </li>
+                    -->
+                    <li class="log"><span class="version">Current - 1.8</span>
+                        <span class="changes">Added Download link to Albums</span>
+                        <span class="changes">Fixed bug with Next/Previous keyboard shortcuts</span>
+                        <span class="changes">Moved navigation since most displays are widescreen</span>
+                        <span class="changes">Added folder picker, choice will be saved in cookie</span>
+                    </li>
                     <li class="log"><span class="version">3/9/2012 - 1.7</span>
-                    <span class="changes">- Ability to hide A-Z bar on Artists list</span>
-                    <span class="changes">- Desktop Notifications on browsers that support <span class="code">webkitNotifications</span></span>
-                    <span class="changes">- Redesigned player to utilize entire width of screen</span>
+                        <span class="changes">- Ability to hide A-Z bar on Artists list</span>
+                        <span class="changes">- Desktop Notifications on browsers that support <span class="code">webkitNotifications</span></span>
+                        <span class="changes">- Redesigned player to utilize entire width of screen</span>
                     </li>
                     <li class="log"><span class="version">3/6/2012</span><span class="changes">.022 can be installed anywhere, Chrome App support, JSONP implementation</li>
                     <li class="log"><span class="version">2/22/2012</span><span class="changes">.021 added sidebar for chat and now playing, bug fixes</li>
diff --git a/js/app.js b/js/app.js
index ab73006..0091dc3 100644
--- a/js/app.js
+++ b/js/app.js
@@ -19,7 +19,12 @@ var version = '1.7.0';
 function loadTabContent(tab) {
     switch (tab) {
         case '#tabLibrary':
-            loadArtists();
+            if ($.cookie('MusicFolders')) {
+                loadArtists($.cookie('MusicFolders'), false);
+            } else {
+                loadArtists();
+            }
+            getMusicFolders();
             break;
         case '#tabCurrent':
             var header = generateSongHeaderHTML();
@@ -35,22 +40,39 @@ function loadTabContent(tab) {
     }
 }
 
-function loadArtists(refresh) {
+function loadArtists(id, refresh) {
     if (refresh) {
         $('#ArtistContainer').empty();
     }
+    var url;
+    if (id == "all") {
+        url = baseURL + '/getIndexes.view?u=' + username + '&p=' + passwordenc + '&v=' + version + '&c=' + applicationName + '&f=jsonp';
+    } else if (id) {
+        url = baseURL + '/getIndexes.view?u=' + username + '&p=' + passwordenc + '&v=' + version + '&c=' + applicationName + '&f=jsonp&musicFolderId=' + id;    
+    } else {
+        url = baseURL + '/getIndexes.view?u=' + username + '&p=' + passwordenc + '&v=' + version + '&c=' + applicationName + '&f=jsonp';
+    }
     var content = $('#ArtistContainer').html();
     if (content === "") {
         // Load Artist List
         $.ajax({
-            url: baseURL + '/getIndexes.view?u=' + username + '&p=' + passwordenc + '&v=' + version + '&c=' + applicationName + '&f=jsonp',
+            url: url,
             method: 'GET',
             dataType: 'jsonp',
             timeout: 10000,
             success: function (data) {
                 if (data["subsonic-response"].status === 'ok') {
                     var indexlist, indexname;
-                    $.each(data["subsonic-response"].indexes.index, function (i, index) {
+
+                    // There is a bug in the API that doesn't return a JSON array for one artist
+                    var indexes = [];
+                    if (data["subsonic-response"].indexes.index.length > 0) {
+                        indexes = data["subsonic-response"].indexes.index;
+                    } else {
+                        indexes[0] = data["subsonic-response"].indexes.index;
+                    }
+
+                    $.each(indexes, function (i, index) {
                         if (index.name === '#') {
                             indexname = '0-9';
                         } else {
@@ -89,6 +111,41 @@ function loadArtists(refresh) {
         });
     }
 }
+function getMusicFolders() {
+    $.ajax({
+        url: baseURL + '/getMusicFolders.view?u=' + username + '&p=' + passwordenc + '&v=' + version + '&c=' + applicationName + '&f=jsonp',
+        method: 'GET',
+        dataType: 'jsonp',
+        timeout: 10000,
+        beforeSend: function (req) {
+            req.setRequestHeader('Authorization', auth);
+        },
+        success: function (data) {
+            if (data["subsonic-response"].musicFolders.musicFolder !== undefined) {
+                // There is a bug in the API that doesn't return a JSON array for one artist
+                var folders = [];
+                if (data["subsonic-response"].musicFolders.musicFolder.length > 0) {
+                    folders = data["subsonic-response"].musicFolders.musicFolder;
+                } else {
+                    folders[0] = data["subsonic-response"].musicFolders.musicFolder;
+                }
+
+                var savedMusicFolder = $.cookie('MusicFolders');
+                var options = [];
+                options.push('<option value="all">All Folders</option>');
+                $.each(folders, function (i, folder) {
+                    if (savedMusicFolder == folder.id) {
+                        options.push('<option value="' + folder.id + '" selected>' + folder.name + '</option>');
+                    } else {
+                        options.push('<option value="' + folder.id + '">' + folder.name + '</option>');
+                    }
+                });
+                $('#MusicFolders').html(options.join(''));
+            } else {
+            }
+        }
+    });
+}
 function getAlbums(id, action, appendto) {
     $.ajax({
         url: baseURL + '/getMusicDirectory.view?u=' + username + '&p=' + passwordenc + '&v=' + version + '&c=' + applicationName + '&f=jsonp&id=' + id,
@@ -135,6 +192,9 @@ function getAlbums(id, action, appendto) {
                     }
                     $(albumhtml).appendTo(appendto);
                 });
+                if (appendto === '#CurrentPlaylistContainer') {
+                    updateMessage(children.length + ' Song(s) Added');
+                }
                 if (appendto === '#AlbumRows' && isDir === true) {
                     header = generateAlbumHeaderHTML();
                 }
@@ -243,6 +303,9 @@ function getRandomSongList(action, appendto) {
                     html = generateSongHTML(rowcolor, item.id, item.parent, track, item.title, item.artist, item.album, item.coverArt, item.userRating, time['m'], time['s']);
                     $(html).appendTo(appendto);
                 });
+                if (appendto === '#CurrentPlaylistContainer') {
+                    updateMessage(items.length + ' Song(s) Added');
+                }
                 if (action === 'autoplay') {
                     autoPlay();
                 }
@@ -262,6 +325,7 @@ function generateAlbumHTML(rowcolor, childid, parentid, coverart, title, artist,
     html = '<tr class=\"album ' + rowcolor + '\" childid=\"' + childid + '\" parentid=\"' + parentid + '\" userrating=\"' + rating + '\">';
     html += '<td class=\"itemactions\"><a class=\"add\" href=\"\" title=\"Add To Current Playlist\"></a>';
     html += '<a class=\"play\" href=\"\" title=\"Play\"></a>';
+    html += '<a class=\"download\" href=\"\" title=\"Download\"></a>';
     if (rating === 5) {
         html += '<a class=\"favorite\" href=\"\" title=\"Favorite\"></a>';
     } else {
@@ -358,9 +422,9 @@ function playSong(el, songid, albumid) {
             }
             if ($.cookie('ScrollTitle')) {
                 //clearTimeout(timer);
-                scrollTitle(artist + ' - ' + title);
+                scrollTitle(toHTML.un(artist) + ' - ' + toHTML.un(title));
             } else {
-                setTitle(artist + ' - ' + title);
+                setTitle(toHTML.un(artist) + ' - ' + toHTML.un(title));
             }
         }
     });
@@ -781,11 +845,29 @@ function addToPlaylist(playlistid, from) {
     }
 }
 function addToCurrent() {
-    var count = $('table.songlist tr.selected').length;
+    var count = $('#AlbumContainer tr.selected').length;
+    if (count > 0) {
+        $('#AlbumContainer tr.selected').each(function (index) {
+            $(this).clone().appendTo('#CurrentPlaylistContainer tbody');
+            updateMessage(count + ' Song(s) Added');
+        });
+    }
+}
+function downloadItem(id) {
+    var url;
+    if (id) {
+        url = baseURL + '/download.view?u=' + username + '&p=' + passwordenc + '&v=' + version + '&c=' + applicationName + '&f=jsonp&id=' + id;
+        window.location = url;
+    }
+    /*
     $('table.songlist tr.selected').each(function (index) {
-        $(this).clone().appendTo('#CurrentPlaylistContainer tbody');
-        updateMessage(count + ' Song(s) Added');
+        id = $(this).attr('childid');
+        if (id) {
+            url = baseURL + '/download.view?u=' + username + '&p=' + passwordenc + '&v=' + version + '&c=' + applicationName + '&f=jsonp&id=' + id;
+            window.location = url;
+        }
     });
+    */
 }
 function savePlaylist(playlistid) {
     var songs = [];
@@ -851,6 +933,9 @@ function getPlaylist(id, action, appendto) {
                     html = generateSongHTML(rowcolor, child.id, child.parent, track, child.title, child.artist, child.album, child.coverArt, child.userRating, time['m'], time['s']);
                     $(html).appendTo(appendto);
                 });
+                if (appendto === '#CurrentPlaylistContainer tbody') {
+                    updateMessage(children.length + ' Song(s) Added');
+                }
                 if (action === 'autoplay') {
                     autoPlay();
                 }
@@ -951,6 +1036,21 @@ function updateMessage(msg) {
     $('#messages').fadeIn();
     setTimeout(function () { $('#messages').fadeOut(); }, 5000);
 }
+// Convert to unicode support
+var toHTML = {
+        on: function(str) {
+        var a = [],
+        i = 0;
+        for (; i < str.length;) a[i] = str.charCodeAt(i++);
+        return "&#" + a.join(";&#") + ";"
+        },
+        un: function(str) {
+        return str.replace(/&#(x)?([^&]{1,5});?/g,
+        function(a, b, c) {
+        return String.fromCharCode(parseInt(c, b ? 16 : 10))
+        })
+    }
+};
 function setTitle(text) {
     if (text != "") {
         document.title = text;
diff --git a/js/audiojs/audio.js b/js/audiojs/audio.js
index 7202075..0e8ad4e 100644
--- a/js/audiojs/audio.js
+++ b/js/audiojs/audio.js
@@ -1,62 +1,62 @@
 // A cross-browser javascript shim for html5 audio
-(function(audiojs, audiojsInstance, container) {
-  // Use the path to the audio.js file to create relative paths to the swf and player graphics
-  // Remember that some systems (e.g. ruby on rails) append strings like '?1301478336' to asset paths
-  var path = (function() {
-    var re = new RegExp('audio(\.min)?\.js.*'),
+(function (audiojs, audiojsInstance, container) {
+    // Use the path to the audio.js file to create relative paths to the swf and player graphics
+    // Remember that some systems (e.g. ruby on rails) append strings like '?1301478336' to asset paths
+    var path = (function () {
+        var re = new RegExp('audio(\.min)?\.js.*'),
         scripts = document.getElementsByTagName('script');
-    for (var i = 0, ii = scripts.length; i < ii; i++) {
-      var path = scripts[i].getAttribute('src');
-      if(re.test(path)) return path.replace(re, '');
-    }
-  })();
-  
-  // ##The audiojs interface
-  // This is the global object which provides an interface for creating new `audiojs` instances.
-  // It also stores all of the construction helper methods and variables.
-  container[audiojs] = {
-    instanceCount: 0,
-    instances: {},
-    // The markup for the swf. It is injected into the page if there is not support for the `<audio>` element. The `$n`s are placeholders.  
-    // `$1` The name of the flash movie  
-    // `$2` The path to the swf  
-    // `$3` Cache invalidation  
-    flashSource: '\
+        for (var i = 0, ii = scripts.length; i < ii; i++) {
+            var path = scripts[i].getAttribute('src');
+            if (re.test(path)) return path.replace(re, '');
+        }
+    })();
+
+    // ##The audiojs interface
+    // This is the global object which provides an interface for creating new `audiojs` instances.
+    // It also stores all of the construction helper methods and variables.
+    container[audiojs] = {
+        instanceCount: 0,
+        instances: {},
+        // The markup for the swf. It is injected into the page if there is not support for the `<audio>` element. The `$n`s are placeholders.  
+        // `$1` The name of the flash movie  
+        // `$2` The path to the swf  
+        // `$3` Cache invalidation  
+        flashSource: '\
       <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="$1" width="1" height="1" name="$1" style="position: absolute; left: -1px;"> \
-        <param name="movie" value="$2?playerInstance='+audiojs+'.instances[\'$1\']&datetime=$3"> \
+        <param name="movie" value="$2?playerInstance=' + audiojs + '.instances[\'$1\']&datetime=$3"> \
         <param name="allowscriptaccess" value="always"> \
-        <embed name="$1" src="$2?playerInstance='+audiojs+'.instances[\'$1\']&datetime=$3" width="1" height="1" allowscriptaccess="always"> \
+        <embed name="$1" src="$2?playerInstance=' + audiojs + '.instances[\'$1\']&datetime=$3" width="1" height="1" allowscriptaccess="always"> \
       </object>',
 
-    // ### The main settings object
-    // Where all the default settings are stored. Each of these variables and methods can be overwritten by the user-provided `options` object.
-    settings: {
-      autoplay: false,
-      loop: false,
-      preload: true,
-      imageLocation: path + 'player-graphics.gif',
-      swfLocation: path + 'audiojs.swf',
-      useFlash: (function() {
-        var a = document.createElement('audio');
-        return !(a.canPlayType && a.canPlayType('audio/mpeg;').replace(/no/, ''));
-      })(),
-      hasFlash: (function() {
-        if (navigator.plugins && navigator.plugins.length && navigator.plugins['Shockwave Flash']) {
-          return true;
-        } else if (navigator.mimeTypes && navigator.mimeTypes.length) {
-          var mimeType = navigator.mimeTypes['application/x-shockwave-flash'];
-          return mimeType && mimeType.enabledPlugin;
-        } else {
-          try {
-            var ax = new ActiveXObject('ShockwaveFlash.ShockwaveFlash');
-            return true;
-          } catch (e) {}
-        }
-        return false;
-      })(),
-      // The default markup and classes for creating the player:
-      createPlayer: {
-        markup: '\
+        // ### The main settings object
+        // Where all the default settings are stored. Each of these variables and methods can be overwritten by the user-provided `options` object.
+        settings: {
+            autoplay: false,
+            loop: false,
+            preload: true,
+            imageLocation: path + 'player-graphics.gif',
+            swfLocation: path + 'audiojs.swf',
+            useFlash: (function () {
+                var a = document.createElement('audio');
+                return !(a.canPlayType && a.canPlayType('audio/mpeg;').replace(/no/, ''));
+            })(),
+            hasFlash: (function () {
+                if (navigator.plugins && navigator.plugins.length && navigator.plugins['Shockwave Flash']) {
+                    return true;
+                } else if (navigator.mimeTypes && navigator.mimeTypes.length) {
+                    var mimeType = navigator.mimeTypes['application/x-shockwave-flash'];
+                    return mimeType && mimeType.enabledPlugin;
+                } else {
+                    try {
+                        var ax = new ActiveXObject('ShockwaveFlash.ShockwaveFlash');
+                        return true;
+                    } catch (e) { }
+                }
+                return false;
+            })(),
+            // The default markup and classes for creating the player:
+            createPlayer: {
+                markup: '\
           <div class="play-pause"> \
             <p class="play"></p> \
             <p class="pause"></p> \
@@ -71,20 +71,20 @@
             <em class="played">00:00</em>/<strong class="duration">00:00</strong> \
           </div> \
           <div class="error-message"></div>',
-        playPauseClass: 'play-pause',
-        scrubberClass: 'scrubber',
-        progressClass: 'progress',
-        loaderClass: 'loaded',
-        timeClass: 'time',
-        durationClass: 'duration',
-        playedClass: 'played',
-        errorMessageClass: 'error-message',
-        playingClass: 'playing',
-        loadingClass: 'loading',
-        errorClass: 'error'
-      },
-      // The css used by the default player. This is is dynamically injected into a `<style>` tag in the top of the head.
-      css: '\
+                playPauseClass: 'play-pause',
+                scrubberClass: 'scrubber',
+                progressClass: 'progress',
+                loaderClass: 'loaded',
+                timeClass: 'time',
+                durationClass: 'duration',
+                playedClass: 'played',
+                errorMessageClass: 'error-message',
+                playingClass: 'playing',
+                loadingClass: 'loading',
+                errorClass: 'error'
+            },
+            // The css used by the default player. This is is dynamically injected into a `<style>` tag in the top of the head.
+            css: '\
         .audiojs audio { position: absolute; left: -1px; } \
         .audiojs { width: 460px; height: 36px; background: #404040; overflow: hidden; font-family: monospace; font-size: 12px; \
           background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #444), color-stop(0.5, #555), color-stop(0.51, #444), color-stop(1, #444)); \
@@ -123,580 +123,582 @@
         .error .error { display: block; } \
         .error .play-pause p { cursor: auto; } \
         .error .error-message { display: block; }',
-      // The default event callbacks:
-      trackEnded: function(e) {},
-      flashError: function() {
-        var player = this.settings.createPlayer,
+            // The default event callbacks:
+            trackEnded: function (e) { },
+            flashError: function () {
+                var player = this.settings.createPlayer,
             errorMessage = getByClass(player.errorMessageClass, this.wrapper),
             html = 'Missing <a href="http://get.adobe.com/flashplayer/">flash player</a> plugin.';
-        if (this.mp3) html += ' <a href="'+this.mp3+'">Download audio file</a>.';
-        container[audiojs].helpers.removeClass(this.wrapper, player.loadingClass);
-        container[audiojs].helpers.addClass(this.wrapper, player.errorClass);
-        errorMessage.innerHTML = html;
-      },
-      loadError: function(e) {
-        var player = this.settings.createPlayer,
+                if (this.mp3) html += ' <a href="' + this.mp3 + '">Download audio file</a>.';
+                container[audiojs].helpers.removeClass(this.wrapper, player.loadingClass);
+                container[audiojs].helpers.addClass(this.wrapper, player.errorClass);
+                errorMessage.innerHTML = html;
+            },
+            loadError: function (e) {
+                var player = this.settings.createPlayer,
             errorMessage = getByClass(player.errorMessageClass, this.wrapper);
-        container[audiojs].helpers.removeClass(this.wrapper, player.loadingClass);
-        container[audiojs].helpers.addClass(this.wrapper, player.errorClass);
-        errorMessage.innerHTML = 'Error loading: "'+this.mp3+'"';
-      },
-      init: function() {
-        var player = this.settings.createPlayer;
-        container[audiojs].helpers.addClass(this.wrapper, player.loadingClass);
-      },
-      loadStarted: function() {
-        var player = this.settings.createPlayer,
+                container[audiojs].helpers.removeClass(this.wrapper, player.loadingClass);
+                container[audiojs].helpers.addClass(this.wrapper, player.errorClass);
+                errorMessage.innerHTML = 'Error loading: "' + this.mp3 + '"';
+            },
+            init: function () {
+                var player = this.settings.createPlayer;
+                container[audiojs].helpers.addClass(this.wrapper, player.loadingClass);
+            },
+            loadStarted: function () {
+                var player = this.settings.createPlayer,
             duration = getByClass(player.durationClass, this.wrapper),
             m = Math.floor(this.duration / 60),
             s = Math.floor(this.duration % 60);
-        container[audiojs].helpers.removeClass(this.wrapper, player.loadingClass);
-        duration.innerHTML = ((m<10?'0':'')+m+':'+(s<10?'0':'')+s);
-      },
-      loadProgress: function(percent) {
-        var player = this.settings.createPlayer,
+                container[audiojs].helpers.removeClass(this.wrapper, player.loadingClass);
+                duration.innerHTML = ((m < 10 ? '0' : '') + m + ':' + (s < 10 ? '0' : '') + s);
+            },
+            loadProgress: function (percent) {
+                var player = this.settings.createPlayer,
             scrubber = getByClass(player.scrubberClass, this.wrapper),
             loaded = getByClass(player.loaderClass, this.wrapper);
-        loaded.style.width = (scrubber.offsetWidth * percent) + 'px';
-      },
-      playPause: function() {
-        if (this.playing) this.settings.play();
-        else this.settings.pause();
-      },
-      play: function() {
-        var player = this.settings.createPlayer;
-        container[audiojs].helpers.addClass(this.wrapper, player.playingClass);
-      },
-      pause: function() {
-        var player = this.settings.createPlayer;
-        container[audiojs].helpers.removeClass(this.wrapper, player.playingClass);
-      },
-      updatePlayhead: function(percent) {
-        var player = this.settings.createPlayer,
+                loaded.style.width = (scrubber.offsetWidth * percent) + 'px';
+
+            },
+            playPause: function () {
+                if (this.playing) this.settings.play();
+                else this.settings.pause();
+            },
+            play: function () {
+                var player = this.settings.createPlayer;
+                container[audiojs].helpers.addClass(this.wrapper, player.playingClass);
+            },
+            pause: function () {
+                var player = this.settings.createPlayer;
+                container[audiojs].helpers.removeClass(this.wrapper, player.playingClass);
+            },
+            updatePlayhead: function (percent) {
+                var player = this.settings.createPlayer,
             scrubber = getByClass(player.scrubberClass, this.wrapper),
             progress = getByClass(player.progressClass, this.wrapper);
-        progress.style.width = (scrubber.offsetWidth * percent) + 'px';
+                progress.style.width = (scrubber.offsetWidth * percent) + 'px';
 
-        var played = getByClass(player.playedClass, this.wrapper),
+                var played = getByClass(player.playedClass, this.wrapper),
             p = this.duration * percent,
             m = Math.floor(p / 60),
             s = Math.floor(p % 60);
-        played.innerHTML = ((m<10?'0':'')+m+':'+(s<10?'0':'')+s);
-      }
-    },
+                played.innerHTML = ((m < 10 ? '0' : '') + m + ':' + (s < 10 ? '0' : '') + s);
+            }
+        },
 
-    // ### Contructor functions
+        // ### Contructor functions
 
-    // `create()`  
-    // Used to create a single `audiojs` instance.  
-    // If an array is passed then it calls back to `createAll()`.  
-    // Otherwise, it creates a single instance and returns it.  
-    create: function(element, options) {
-      var options = options || {}
-      if (element.length) {
-        return this.createAll(options, element);
-      } else {
-        return this.newInstance(element, options);
-      }
-    },
+        // `create()`  
+        // Used to create a single `audiojs` instance.  
+        // If an array is passed then it calls back to `createAll()`.  
+        // Otherwise, it creates a single instance and returns it.  
+        create: function (element, options) {
+            var options = options || {}
+            if (element.length) {
+                return this.createAll(options, element);
+            } else {
+                return this.newInstance(element, options);
+            }
+        },
 
-    // `createAll()`  
-    // Creates multiple `audiojs` instances.  
-    // If `elements` is `null`, then automatically find any `<audio>` tags on the page and create `audiojs` instances for them.
-    createAll: function(options, elements) {
-      var audioElements = elements || document.getElementsByTagName('audio'),
+        // `createAll()`  
+        // Creates multiple `audiojs` instances.  
+        // If `elements` is `null`, then automatically find any `<audio>` tags on the page and create `audiojs` instances for them.
+        createAll: function (options, elements) {
+            var audioElements = elements || document.getElementsByTagName('audio'),
           instances = []
-          options = options || {};
-      for (var i = 0, ii = audioElements.length; i < ii; i++) {
-        instances.push(this.newInstance(audioElements[i], options));
-      }
-      return instances;
-    },
+            options = options || {};
+            for (var i = 0, ii = audioElements.length; i < ii; i++) {
+                instances.push(this.newInstance(audioElements[i], options));
+            }
+            return instances;
+        },
 
-    // ### Creating and returning a new instance
-    // This goes through all the steps required to build out a usable `audiojs` instance.
-    newInstance: function(element, options) {
-      var element = element,
+        // ### Creating and returning a new instance
+        // This goes through all the steps required to build out a usable `audiojs` instance.
+        newInstance: function (element, options) {
+            var element = element,
           s = this.helpers.clone(this.settings),
-          id = 'audiojs'+this.instanceCount,
-          wrapperId = 'audiojs_wrapper'+this.instanceCount,
+          id = 'audiojs' + this.instanceCount,
+          wrapperId = 'audiojs_wrapper' + this.instanceCount,
           instanceCount = this.instanceCount++;
 
-      // Check for `autoplay`, `loop` and `preload` attributes and write them into the settings.
-      if (element.getAttribute('autoplay') != null) s.autoplay = true;
-      if (element.getAttribute('loop') != null) s.loop = true;
-      if (element.getAttribute('preload') == 'none') s.preload = false;
-      // Merge the default settings with the user-defined `options`.
-      if (options) this.helpers.merge(s, options);
+            // Check for `autoplay`, `loop` and `preload` attributes and write them into the settings.
+            if (element.getAttribute('autoplay') != null) s.autoplay = true;
+            if (element.getAttribute('loop') != null) s.loop = true;
+            if (element.getAttribute('preload') == 'none') s.preload = false;
+            // Merge the default settings with the user-defined `options`.
+            if (options) this.helpers.merge(s, options);
 
-      // Inject the player html if required.
-      if (s.createPlayer.markup) element = this.createPlayer(element, s.createPlayer, wrapperId);
-      else element.parentNode.setAttribute('id', wrapperId);
+            // Inject the player html if required.
+            if (s.createPlayer.markup) element = this.createPlayer(element, s.createPlayer, wrapperId);
+            else element.parentNode.setAttribute('id', wrapperId);
 
-      // Return a new `audiojs` instance.
-      var audio = new container[audiojsInstance](element, s);
+            // Return a new `audiojs` instance.
+            var audio = new container[audiojsInstance](element, s);
 
-      // If css has been passed in, dynamically inject it into the `<head>`.
-      if (s.css) this.helpers.injectCss(audio, s.css);
+            // If css has been passed in, dynamically inject it into the `<head>`.
+            if (s.css) this.helpers.injectCss(audio, s.css);
 
-      // If `<audio>` or mp3 playback isn't supported, insert the swf & attach the required events for it.
-      if (s.useFlash && s.hasFlash) {
-        this.injectFlash(audio, id);
-        this.attachFlashEvents(audio.wrapper, audio);
-      } else if (s.useFlash && !s.hasFlash) {
-        this.settings.flashError.apply(audio);
-      }
+            // If `<audio>` or mp3 playback isn't supported, insert the swf & attach the required events for it.
+            if (s.useFlash && s.hasFlash) {
+                this.injectFlash(audio, id);
+                this.attachFlashEvents(audio.wrapper, audio);
+            } else if (s.useFlash && !s.hasFlash) {
+                this.settings.flashError.apply(audio);
+            }
 
-      // Attach event callbacks to the new audiojs instance.
-      if (!s.useFlash || (s.useFlash && s.hasFlash)) this.attachEvents(audio.wrapper, audio);
+            // Attach event callbacks to the new audiojs instance.
+            if (!s.useFlash || (s.useFlash && s.hasFlash)) this.attachEvents(audio.wrapper, audio);
 
-      // Store the newly-created `audiojs` instance.
-      this.instances[id] = audio;
-      return audio;
-    },
+            // Store the newly-created `audiojs` instance.
+            this.instances[id] = audio;
+            return audio;
+        },
 
-    // ### Helper methods for constructing a working player
-    // Inject a wrapping div and the markup for the html player.
-    createPlayer: function(element, player, id) {
-      var wrapper = document.createElement('div'),
+        // ### Helper methods for constructing a working player
+        // Inject a wrapping div and the markup for the html player.
+        createPlayer: function (element, player, id) {
+            var wrapper = document.createElement('div'),
           newElement = element.cloneNode(true);
-      wrapper.setAttribute('class', 'audiojs');
-      wrapper.setAttribute('className', 'audiojs');
-      wrapper.setAttribute('id', id);
+            wrapper.setAttribute('class', 'audiojs');
+            wrapper.setAttribute('className', 'audiojs');
+            wrapper.setAttribute('id', id);
 
-      // Fix IE's broken implementation of `innerHTML` & `cloneNode` for HTML5 elements.
-      if (newElement.outerHTML && !document.createElement('audio').canPlayType) {
-        newElement = this.helpers.cloneHtml5Node(element);
-        wrapper.innerHTML = player.markup;
-        wrapper.appendChild(newElement);
-        element.outerHTML = wrapper.outerHTML;
-        wrapper = document.getElementById(id);
-      } else {
-        wrapper.appendChild(newElement);
-        wrapper.innerHTML = wrapper.innerHTML + player.markup;
-        element.parentNode.replaceChild(wrapper, element);
-      }
-      return wrapper.getElementsByTagName('audio')[0];
-    },
+            // Fix IE's broken implementation of `innerHTML` & `cloneNode` for HTML5 elements.
+            if (newElement.outerHTML && !document.createElement('audio').canPlayType) {
+                newElement = this.helpers.cloneHtml5Node(element);
+                wrapper.innerHTML = player.markup;
+                wrapper.appendChild(newElement);
+                element.outerHTML = wrapper.outerHTML;
+                wrapper = document.getElementById(id);
+            } else {
+                wrapper.appendChild(newElement);
+                wrapper.innerHTML = wrapper.innerHTML + player.markup;
+                element.parentNode.replaceChild(wrapper, element);
+            }
+            return wrapper.getElementsByTagName('audio')[0];
+        },
 
-    // Attaches useful event callbacks to an `audiojs` instance.
-    attachEvents: function(wrapper, audio) {
-      if (!audio.settings.createPlayer) return;
-      var player = audio.settings.createPlayer,
+        // Attaches useful event callbacks to an `audiojs` instance.
+        attachEvents: function (wrapper, audio) {
+            if (!audio.settings.createPlayer) return;
+            var player = audio.settings.createPlayer,
           playPause = getByClass(player.playPauseClass, wrapper),
           scrubber = getByClass(player.scrubberClass, wrapper),
-          leftPos = function(elem) {
-            var curleft = 0;
-            if (elem.offsetParent) {
-              do { curleft += elem.offsetLeft; } while (elem = elem.offsetParent);
-            }
-            return curleft;
+          leftPos = function (elem) {
+              var curleft = 0;
+              if (elem.offsetParent) {
+                  do { curleft += elem.offsetLeft; } while (elem = elem.offsetParent);
+              }
+              return curleft;
           };
 
-      container[audiojs].events.addListener(playPause, 'click', function(e) {
-        audio.playPause.apply(audio);
-      });
+            container[audiojs].events.addListener(playPause, 'click', function (e) {
+                audio.playPause.apply(audio);
+            });
 
-      container[audiojs].events.addListener(scrubber, 'click', function(e) {
-        var relativeLeft = e.clientX - leftPos(this);
-        audio.skipTo(relativeLeft / scrubber.offsetWidth);
-      });
+            container[audiojs].events.addListener(scrubber, 'click', function (e) {
+                var relativeLeft = e.clientX - leftPos(this);
+                audio.skipTo(relativeLeft / scrubber.offsetWidth);
+            });
 
-      // _If flash is being used, then the following handlers don't need to be registered._
-      if (audio.settings.useFlash) return;
+            // _If flash is being used, then the following handlers don't need to be registered._
+            if (audio.settings.useFlash) return;
 
-      // Start tracking the load progress of the track.
-      container[audiojs].events.trackLoadProgress(audio);
+            // Start tracking the load progress of the track.
+            container[audiojs].events.trackLoadProgress(audio);
 
-      container[audiojs].events.addListener(audio.element, 'timeupdate', function(e) {
-        audio.updatePlayhead.apply(audio);
-      });
+            container[audiojs].events.addListener(audio.element, 'timeupdate', function (e) {
+                audio.updatePlayhead.apply(audio);
+            });
 
-      container[audiojs].events.addListener(audio.element, 'ended', function(e) {
-        audio.trackEnded.apply(audio);
-      });
+            container[audiojs].events.addListener(audio.element, 'ended', function (e) {
+                audio.trackEnded.apply(audio);
+            });
 
-      container[audiojs].events.addListener(audio.source, 'error', function(e) {
-        // on error, cancel any load timers that are running.
-        clearInterval(audio.readyTimer);
-        clearInterval(audio.loadTimer);
-        audio.settings.loadError.apply(audio);
-      });
+            container[audiojs].events.addListener(audio.source, 'error', function (e) {
+                // on error, cancel any load timers that are running.
+                clearInterval(audio.readyTimer);
+                clearInterval(audio.loadTimer);
+                audio.settings.loadError.apply(audio);
+            });
 
-    },
+        },
 
-    // Flash requires a slightly different API to the `<audio>` element, so this method is used to overwrite the standard event handlers.
-    attachFlashEvents: function(element, audio) {
-      audio['swfReady'] = false;
-      audio['load'] = function(mp3) {
-        // If the swf isn't ready yet then just set `audio.mp3`. `init()` will load it in once the swf is ready.
-        audio.mp3 = mp3;
-        if (audio.swfReady) audio.element.load(mp3);
-      }
-      audio['loadProgress'] = function(percent, duration) {
-        audio.loadedPercent = percent;
-        audio.duration = duration;
-        audio.settings.loadStarted.apply(audio);
-        audio.settings.loadProgress.apply(audio, [percent]);
-      }
-      audio['skipTo'] = function(percent) {
-        if (percent > audio.loadedPercent) return;
-        audio.updatePlayhead.call(audio, [percent])
-        audio.element.skipTo(percent);
-      }
-      audio['updatePlayhead'] = function(percent) {
-        audio.settings.updatePlayhead.apply(audio, [percent]);
-      }
-      audio['play'] = function() {
-        // If the audio hasn't started preloading, then start it now.  
-        // Then set `preload` to `true`, so that any tracks loaded in subsequently are loaded straight away.
-        if (!audio.settings.preload) {
-          audio.settings.preload = true;
-          audio.element.init(audio.mp3);
-        }
-        audio.playing = true;
-        // IE doesn't allow a method named `play()` to be exposed through `ExternalInterface`, so lets go with `pplay()`.  
-        // <http://dev.nuclearrooster.com/2008/07/27/externalinterfaceaddcallback-can-cause-ie-js-errors-with-certain-keyworkds/>
-        audio.element.pplay();
-        audio.settings.play.apply(audio);
-      }
-      audio['pause'] = function() {
-        audio.playing = false;
-        // Use `ppause()` for consistency with `pplay()`, even though it isn't really required.
-        audio.element.ppause();
-        audio.settings.pause.apply(audio);
-      }
-      audio['setVolume'] = function(v) {
-        audio.element.setVolume(v);
-      }
-      audio['loadStarted'] = function() {
-        // Load the mp3 specified by the audio element into the swf.
-        audio.swfReady = true;
-        if (audio.settings.preload) audio.element.init(audio.mp3);
-        if (audio.settings.autoplay) audio.play.apply(audio);
-      }
-    },
+        // Flash requires a slightly different API to the `<audio>` element, so this method is used to overwrite the standard event handlers.
+        attachFlashEvents: function (element, audio) {
+            audio['swfReady'] = false;
+            audio['load'] = function (mp3) {
+                // If the swf isn't ready yet then just set `audio.mp3`. `init()` will load it in once the swf is ready.
+                audio.mp3 = mp3;
+                if (audio.swfReady) audio.element.load(mp3);
+            }
+            audio['loadProgress'] = function (percent, duration) {
+                audio.loadedPercent = percent;
+                audio.duration = duration;
+                audio.settings.loadStarted.apply(audio);
+                audio.settings.loadProgress.apply(audio, [percent]);
+            }
+            audio['skipTo'] = function (percent) {
+                if (percent > audio.loadedPercent) return;
+                audio.updatePlayhead.call(audio, [percent])
+                audio.element.skipTo(percent);
+            }
+            audio['updatePlayhead'] = function (percent) {
+                audio.settings.updatePlayhead.apply(audio, [percent]);
+            }
+            audio['play'] = function () {
+                // If the audio hasn't started preloading, then start it now.  
+                // Then set `preload` to `true`, so that any tracks loaded in subsequently are loaded straight away.
+                if (!audio.settings.preload) {
+                    audio.settings.preload = true;
+                    audio.element.init(audio.mp3);
+                }
+                audio.playing = true;
+                // IE doesn't allow a method named `play()` to be exposed through `ExternalInterface`, so lets go with `pplay()`.  
+                // <http://dev.nuclearrooster.com/2008/07/27/externalinterfaceaddcallback-can-cause-ie-js-errors-with-certain-keyworkds/>
+                audio.element.pplay();
+                audio.settings.play.apply(audio);
+            }
+            audio['pause'] = function () {
+                audio.playing = false;
+                // Use `ppause()` for consistency with `pplay()`, even though it isn't really required.
+                audio.element.ppause();
+                audio.settings.pause.apply(audio);
+            }
+            audio['setVolume'] = function (v) {
+                audio.element.setVolume(v);
+            }
+            audio['loadStarted'] = function () {
+                // Load the mp3 specified by the audio element into the swf.
+                audio.swfReady = true;
+                if (audio.settings.preload) audio.element.init(audio.mp3);
+                if (audio.settings.autoplay) audio.play.apply(audio);
+            }
+        },
 
-    // ### Injecting an swf from a string
-    // Build up the swf source by replacing the `$keys` and then inject the markup into the page.
-    injectFlash: function(audio, id) {
-      var flashSource = this.flashSource.replace(/\$1/g, id);
-      flashSource = flashSource.replace(/\$2/g, audio.settings.swfLocation);
-      // `(+new Date)` ensures the swf is not pulled out of cache. The fixes an issue with Firefox running multiple players on the same page.
-      flashSource = flashSource.replace(/\$3/g, (+new Date + Math.random()));
-      // Inject the player markup using a more verbose `innerHTML` insertion technique that works with IE.
-      var html = audio.wrapper.innerHTML,
+        // ### Injecting an swf from a string
+        // Build up the swf source by replacing the `$keys` and then inject the markup into the page.
+        injectFlash: function (audio, id) {
+            var flashSource = this.flashSource.replace(/\$1/g, id);
+            flashSource = flashSource.replace(/\$2/g, audio.settings.swfLocation);
+            // `(+new Date)` ensures the swf is not pulled out of cache. The fixes an issue with Firefox running multiple players on the same page.
+            flashSource = flashSource.replace(/\$3/g, (+new Date + Math.random()));
+            // Inject the player markup using a more verbose `innerHTML` insertion technique that works with IE.
+            var html = audio.wrapper.innerHTML,
           div = document.createElement('div');
-      div.innerHTML = flashSource + html;
-      audio.wrapper.innerHTML = div.innerHTML;
-      audio.element = this.helpers.getSwf(id);
-    },
+            div.innerHTML = flashSource + html;
+            audio.wrapper.innerHTML = div.innerHTML;
+            audio.element = this.helpers.getSwf(id);
+        },
 
-    // ## Helper functions
-    helpers: {
-      // **Merge two objects, with `obj2` overwriting `obj1`**  
-      // The merge is shallow, but that's all that is required for our purposes.
-      merge: function(obj1, obj2) {
-        for (attr in obj2) {
-          if (obj1.hasOwnProperty(attr) || obj2.hasOwnProperty(attr)) {
-            obj1[attr] = obj2[attr];
-          }
-        }
-      },
-      // **Clone a javascript object (recursively)**
-      clone: function(obj){
-        if (obj == null || typeof(obj) !== 'object') return obj;
-        var temp = new obj.constructor();
-        for (var key in obj) temp[key] = arguments.callee(obj[key]);
-        return temp;
-      },
-      // **Adding/removing classnames from elements**
-      addClass: function(element, className) {
-        var re = new RegExp('(\\s|^)'+className+'(\\s|$)');
-        if (re.test(element.className)) return;
-        element.className += ' ' + className;
-      },
-      removeClass: function(element, className) {
-        var re = new RegExp('(\\s|^)'+className+'(\\s|$)');
-        element.className = element.className.replace(re,' ');
-      },
-      // **Dynamic CSS injection**  
-      // Takes a string of css, inserts it into a `<style>`, then injects it in at the very top of the `<head>`. This ensures any user-defined styles will take precedence.
-      injectCss: function(audio, string) {
+        // ## Helper functions
+        helpers: {
+            // **Merge two objects, with `obj2` overwriting `obj1`**  
+            // The merge is shallow, but that's all that is required for our purposes.
+            merge: function (obj1, obj2) {
+                for (attr in obj2) {
+                    if (obj1.hasOwnProperty(attr) || obj2.hasOwnProperty(attr)) {
+                        obj1[attr] = obj2[attr];
+                    }
+                }
+            },
+            // **Clone a javascript object (recursively)**
+            clone: function (obj) {
+                if (obj == null || typeof (obj) !== 'object') return obj;
+                var temp = new obj.constructor();
+                for (var key in obj) temp[key] = arguments.callee(obj[key]);
+                return temp;
+            },
+            // **Adding/removing classnames from elements**
+            addClass: function (element, className) {
+                var re = new RegExp('(\\s|^)' + className + '(\\s|$)');
+                if (re.test(element.className)) return;
+                element.className += ' ' + className;
+            },
+            removeClass: function (element, className) {
+                var re = new RegExp('(\\s|^)' + className + '(\\s|$)');
+                element.className = element.className.replace(re, ' ');
+            },
+            // **Dynamic CSS injection**  
+            // Takes a string of css, inserts it into a `<style>`, then injects it in at the very top of the `<head>`. This ensures any user-defined styles will take precedence.
+            injectCss: function (audio, string) {
 
-        // If an `audiojs` `<style>` tag already exists, then append to it rather than creating a whole new `<style>`.
-        var prepend = '',
+                // If an `audiojs` `<style>` tag already exists, then append to it rather than creating a whole new `<style>`.
+                var prepend = '',
             styles = document.getElementsByTagName('style'),
             css = string.replace(/\$1/g, audio.settings.imageLocation);
 
-        for (var i = 0, ii = styles.length; i < ii; i++) {
-          var title = styles[i].getAttribute('title');
-          if (title && ~title.indexOf('audiojs')) {
-            style = styles[i];
-            if (style.innerHTML === css) return;
-            prepend = style.innerHTML;
-            break;
-          }
-        };
+                for (var i = 0, ii = styles.length; i < ii; i++) {
+                    var title = styles[i].getAttribute('title');
+                    if (title && ~title.indexOf('audiojs')) {
+                        style = styles[i];
+                        if (style.innerHTML === css) return;
+                        prepend = style.innerHTML;
+                        break;
+                    }
+                };
 
-        var head = document.getElementsByTagName('head')[0],
+                var head = document.getElementsByTagName('head')[0],
             firstchild = head.firstChild,
             style = document.createElement('style');
 
-        if (!head) return;
+                if (!head) return;
 
-        style.setAttribute('type', 'text/css');
-        style.setAttribute('title', 'audiojs');
+                style.setAttribute('type', 'text/css');
+                style.setAttribute('title', 'audiojs');
 
-        if (style.styleSheet) style.styleSheet.cssText = prepend + css;
-        else style.appendChild(document.createTextNode(prepend + css));
+                if (style.styleSheet) style.styleSheet.cssText = prepend + css;
+                else style.appendChild(document.createTextNode(prepend + css));
 
-        if (firstchild) head.insertBefore(style, firstchild);
-        else head.appendChild(styleElement);
-      },
-      // **Handle all the IE6+7 requirements for cloning `<audio>` nodes**  
-      // Create a html5-safe document fragment by injecting an `<audio>` element into the document fragment.
-      cloneHtml5Node: function(audioTag) {
-        var fragment = document.createDocumentFragment();
-        fragment.createElement('audio');
-        var div = fragment.createElement('div');
-        fragment.appendChild(div);
-        div.innerHTML = audioTag.outerHTML;
-        return div.firstChild;
-      },
-      // **Cross-browser `<object>` / `<embed>` element selection**
-      getSwf: function(name) {
-        var swf = document[name] || window[name];
-        return swf.length > 1 ? swf[swf.length - 1] : swf;
-      }
-    },
-    // ## Event-handling
-    events: {
-      memoryLeaking: false,
-      listeners: [],
-      // **A simple cross-browser event handler abstraction**
-      addListener: function(element, eventName, func) {
-        // For modern browsers use the standard DOM-compliant `addEventListener`.
-        if (element.addEventListener) {
-          element.addEventListener(eventName, func, false);
-          // For older versions of Internet Explorer, use `attachEvent`.  
-          // Also provide a fix for scoping `this` to the calling element and register each listener so the containing elements can be purged on page unload.
-        } else if (element.attachEvent) {
-          this.listeners.push(element);
-          if (!this.memoryLeaking) {
-            window.attachEvent('onunload', function() {
-              if(this.listeners) {
-                for (var i = 0, ii = this.listeners.length; i < ii; i++) {
-                  container[audiojs].events.purge(this.listeners[i]);
+                if (firstchild) head.insertBefore(style, firstchild);
+                else head.appendChild(styleElement);
+            },
+            // **Handle all the IE6+7 requirements for cloning `<audio>` nodes**  
+            // Create a html5-safe document fragment by injecting an `<audio>` element into the document fragment.
+            cloneHtml5Node: function (audioTag) {
+                var fragment = document.createDocumentFragment();
+                fragment.createElement('audio');
+                var div = fragment.createElement('div');
+                fragment.appendChild(div);
+                div.innerHTML = audioTag.outerHTML;
+                return div.firstChild;
+            },
+            // **Cross-browser `<object>` / `<embed>` element selection**
+            getSwf: function (name) {
+                var swf = document[name] || window[name];
+                return swf.length > 1 ? swf[swf.length - 1] : swf;
+            }
+        },
+        // ## Event-handling
+        events: {
+            memoryLeaking: false,
+            listeners: [],
+            // **A simple cross-browser event handler abstraction**
+            addListener: function (element, eventName, func) {
+                // For modern browsers use the standard DOM-compliant `addEventListener`.
+                if (element.addEventListener) {
+                    element.addEventListener(eventName, func, false);
+                    // For older versions of Internet Explorer, use `attachEvent`.  
+                    // Also provide a fix for scoping `this` to the calling element and register each listener so the containing elements can be purged on page unload.
+                } else if (element.attachEvent) {
+                    this.listeners.push(element);
+                    if (!this.memoryLeaking) {
+                        window.attachEvent('onunload', function () {
+                            if (this.listeners) {
+                                for (var i = 0, ii = this.listeners.length; i < ii; i++) {
+                                    container[audiojs].events.purge(this.listeners[i]);
+                                }
+                            }
+                        });
+                        this.memoryLeaking = true;
+                    }
+                    element.attachEvent('on' + eventName, function () {
+                        func.call(element, window.event);
+                    });
                 }
-              }
-            });
-            this.memoryLeaking = true;
-          }
-          element.attachEvent('on' + eventName, function() {
-            func.call(element, window.event);
-          });
-        }
-      },
+            },
 
-      trackLoadProgress: function(audio) {
-        // If `preload` has been set to `none`, then we don't want to start loading the track yet.
-        if (!audio.settings.preload) return;
+            trackLoadProgress: function (audio) {
+                // If `preload` has been set to `none`, then we don't want to start loading the track yet.
+                if (!audio.settings.preload) return;
 
-        var readyTimer,
+                var readyTimer,
             loadTimer,
             audio = audio,
             ios = (/(ipod|iphone|ipad)/i).test(navigator.userAgent);
 
-        // Use timers here rather than the official `progress` event, as Chrome has issues calling `progress` when loading mp3 files from cache.
-        readyTimer = setInterval(function() {
-          if (audio.element.readyState > -1) {
-            // iOS doesn't start preloading the mp3 until the user interacts manually, so this stops the loader being displayed prematurely.
-            if (!ios) audio.init.apply(audio);
-          }
-          if (audio.element.readyState > 1) {
-            if (audio.settings.autoplay) audio.play.apply(audio);
-            clearInterval(readyTimer);
-            // Once we have data, start tracking the load progress.
-            loadTimer = setInterval(function() {
-              audio.loadProgress.apply(audio);
-              if (audio.loadedPercent >= 1) clearInterval(loadTimer);
-            });
-          }
-        }, 10);
-        audio.readyTimer = readyTimer;
-        audio.loadTimer = loadTimer;
-      },
+                // Use timers here rather than the official `progress` event, as Chrome has issues calling `progress` when loading mp3 files from cache.
+                readyTimer = setInterval(function () {
+                    if (audio.element.readyState > -1) {
+                        // iOS doesn't start preloading the mp3 until the user interacts manually, so this stops the loader being displayed prematurely.
+                        if (!ios) audio.init.apply(audio);
+                    }
+                    if (audio.element.readyState > 1) {
+                        if (audio.settings.autoplay) audio.play.apply(audio);
+                        clearInterval(readyTimer);
+                        // Once we have data, start tracking the load progress.
+                        loadTimer = setInterval(function () {
+                            audio.loadProgress.apply(audio);
+                            if (audio.loadedPercent >= 1) clearInterval(loadTimer);
+                        });
+                    }
+                }, 10);
+                audio.readyTimer = readyTimer;
+                audio.loadTimer = loadTimer;
+            },
 
-      // **Douglas Crockford's IE6 memory leak fix**  
-      // <http://javascript.crockford.com/memory/leak.html>  
-      // This is used to release the memory leak created by the circular references created when fixing `this` scoping for IE. It is called on page unload.
-      purge: function(d) {
-        var a = d.attributes, i;
-        if (a) {
-          for (i = 0; i < a.length; i += 1) {
-            if (typeof d[a[i].name] === 'function') d[a[i].name] = null;
-          }
-        }
-        a = d.childNodes;
-        if (a) {
-          for (i = 0; i < a.length; i += 1) purge(d.childNodes[i]);
-        }
-      },
+            // **Douglas Crockford's IE6 memory leak fix**  
+            // <http://javascript.crockford.com/memory/leak.html>  
+            // This is used to release the memory leak created by the circular references created when fixing `this` scoping for IE. It is called on page unload.
+            purge: function (d) {
+                var a = d.attributes, i;
+                if (a) {
+                    for (i = 0; i < a.length; i += 1) {
+                        if (typeof d[a[i].name] === 'function') d[a[i].name] = null;
+                    }
+                }
+                a = d.childNodes;
+                if (a) {
+                    for (i = 0; i < a.length; i += 1) purge(d.childNodes[i]);
+                }
+            },
 
-      // **DOMready function**  
-      // As seen here: <https://github.com/dperini/ContentLoaded/>.
-      ready: (function() { return function(fn) {
-        var win = window, done = false, top = true,
+            // **DOMready function**  
+            // As seen here: <https://github.com/dperini/ContentLoaded/>.
+            ready: (function () {
+                return function (fn) {
+                    var win = window, done = false, top = true,
         doc = win.document, root = doc.documentElement,
         add = doc.addEventListener ? 'addEventListener' : 'attachEvent',
         rem = doc.addEventListener ? 'removeEventListener' : 'detachEvent',
         pre = doc.addEventListener ? '' : 'on',
-        init = function(e) {
-          if (e.type == 'readystatechange' && doc.readyState != 'complete') return;
-          (e.type == 'load' ? win : doc)[rem](pre + e.type, init, false);
-          if (!done && (done = true)) fn.call(win, e.type || e);
+        init = function (e) {
+            if (e.type == 'readystatechange' && doc.readyState != 'complete') return;
+            (e.type == 'load' ? win : doc)[rem](pre + e.type, init, false);
+            if (!done && (done = true)) fn.call(win, e.type || e);
         },
-        poll = function() {
-          try { root.doScroll('left'); } catch(e) { setTimeout(poll, 50); return; }
-          init('poll');
+        poll = function () {
+            try { root.doScroll('left'); } catch (e) { setTimeout(poll, 50); return; }
+            init('poll');
         };
-        if (doc.readyState == 'complete') fn.call(win, 'lazy');
-        else {
-          if (doc.createEventObject && root.doScroll) {
-            try { top = !win.frameElement; } catch(e) { }
-            if (top) poll();
-          }
-          doc[add](pre + 'DOMContentLoaded', init, false);
-          doc[add](pre + 'readystatechange', init, false);
-          win[add](pre + 'load', init, false);
+                    if (doc.readyState == 'complete') fn.call(win, 'lazy');
+                    else {
+                        if (doc.createEventObject && root.doScroll) {
+                            try { top = !win.frameElement; } catch (e) { }
+                            if (top) poll();
+                        }
+                        doc[add](pre + 'DOMContentLoaded', init, false);
+                        doc[add](pre + 'readystatechange', init, false);
+                        win[add](pre + 'load', init, false);
+                    }
+                }
+            })()
+
         }
-      }
-      })()
-
     }
-  }
 
-  // ## The audiojs class
-  // We create one of these per `<audio>` and then push them into `audiojs['instances']`.
-  container[audiojsInstance] = function(element, settings) {
-    // Each audio instance returns an object which contains an API back into the `<audio>` element.
-    this.element = element;
-    this.wrapper = element.parentNode;
-    this.source = element.getElementsByTagName('source')[0] || element;
-    // First check the `<audio>` element directly for a src and if one is not found, look for a `<source>` element.
-    this.mp3 = (function(element) {
-      var source = element.getElementsByTagName('source')[0];
-      return element.getAttribute('src') || (source ? source.getAttribute('src') : null);
-    })(element);
-    this.settings = settings;
-    this.loadStartedCalled = false;
-    this.loadedPercent = 0;
-    this.duration = 1;
-    this.playing = false;
-  }
+    // ## The audiojs class
+    // We create one of these per `<audio>` and then push them into `audiojs['instances']`.
+    container[audiojsInstance] = function (element, settings) {
+        // Each audio instance returns an object which contains an API back into the `<audio>` element.
+        this.element = element;
+        this.wrapper = element.parentNode;
+        this.source = element.getElementsByTagName('source')[0] || element;
+        // First check the `<audio>` element directly for a src and if one is not found, look for a `<source>` element.
+        this.mp3 = (function (element) {
+            var source = element.getElementsByTagName('source')[0];
+            return element.getAttribute('src') || (source ? source.getAttribute('src') : null);
+        })(element);
+        this.settings = settings;
+        this.loadStartedCalled = false;
+        this.loadedPercent = 0;
+        this.duration = 1;
+        this.playing = false;
+    }
 
-  container[audiojsInstance].prototype = {
-    // API access events:
-    // Each of these do what they need do and then call the matching methods defined in the settings object.
-    updatePlayhead: function() {
-      var percent = this.element.currentTime / this.duration;
-      this.settings.updatePlayhead.apply(this, [percent]);
-    },
-    skipTo: function(percent) {
-      if (percent > this.loadedPercent) return;
-      this.element.currentTime = this.duration * percent;
-      this.updatePlayhead();
-    },
-    load: function(mp3) {
-      this.loadStartedCalled = false;
-      this.source.setAttribute('src', mp3);
-      // The now outdated `load()` method is required for Safari 4
-      this.element.load();
-      this.mp3 = mp3;
-      container[audiojs].events.trackLoadProgress(this);
-    },
-    loadError: function() {
-      this.settings.loadError.apply(this);
-    },
-    init: function() {
-      this.settings.init.apply(this);
-    },
-    loadStarted: function() {
-      // Wait until `element.duration` exists before setting up the audio player.
-      if (!this.element.duration) return false;
+    container[audiojsInstance].prototype = {
+        // API access events:
+        // Each of these do what they need do and then call the matching methods defined in the settings object.
+        updatePlayhead: function () {
+            var percent = this.element.currentTime / this.duration;
+            this.settings.updatePlayhead.apply(this, [percent]);
+        },
+        skipTo: function (percent) {
+            if (percent > this.loadedPercent) return;
+            this.element.currentTime = this.duration * percent;
+            this.updatePlayhead();
+        },
+        load: function (mp3) {
+            this.loadStartedCalled = false;
+            this.source.setAttribute('src', mp3);
+            // The now outdated `load()` method is required for Safari 4
+            this.element.load();
+            this.mp3 = mp3;
+            container[audiojs].events.trackLoadProgress(this);
+        },
+        loadError: function () {
+            this.settings.loadError.apply(this);
+        },
+        init: function () {
+            this.settings.init.apply(this);
+        },
+        loadStarted: function () {
+            // Wait until `element.duration` exists before setting up the audio player.
+            if (!this.element.duration) return false;
 
-      this.duration = this.element.duration;
-      this.updatePlayhead();
-      this.settings.loadStarted.apply(this);
-    },
-    loadProgress: function() {
-      if (this.element.buffered != null && this.element.buffered.length) {
-        // Ensure `loadStarted()` is only called once.
-        if (!this.loadStartedCalled) {
-          this.loadStartedCalled = this.loadStarted();
+            this.duration = this.element.duration;
+            this.updatePlayhead();
+            this.settings.loadStarted.apply(this);
+        },
+        loadProgress: function () {
+            if (this.element.buffered != null && this.element.buffered.length) {
+                // Ensure `loadStarted()` is only called once.
+                if (!this.loadStartedCalled) {
+                    this.loadStartedCalled = this.loadStarted();
+                }
+                var durationLoaded = this.element.buffered.end(this.element.buffered.length - 1);
+                this.loadedPercent = durationLoaded / this.duration;
+
+                this.settings.loadProgress.apply(this, [this.loadedPercent]);
+            }
+        },
+        playPause: function () {
+            if (this.playing) this.pause();
+            else this.play();
+        },
+        play: function () {
+            var ios = (/(ipod|iphone|ipad)/i).test(navigator.userAgent);
+            // On iOS this interaction will trigger loading the mp3, so run `init()`.
+            if (ios && this.element.readyState == 0) this.init.apply(this);
+            // If the audio hasn't started preloading, then start it now.  
+            // Then set `preload` to `true`, so that any tracks loaded in subsequently are loaded straight away.
+            if (!this.settings.preload) {
+                this.settings.preload = true;
+                this.element.setAttribute('preload', 'auto');
+                container[audiojs].events.trackLoadProgress(this);
+            }
+            this.playing = true;
+            this.element.play();
+            this.settings.play.apply(this);
+        },
+        pause: function () {
+            this.playing = false;
+            this.element.pause();
+            this.settings.pause.apply(this);
+        },
+        setVolume: function (v) {
+            this.element.volume = v;
+        },
+        trackEnded: function (e) {
+            this.skipTo.apply(this, [0]);
+            if (!this.settings.loop) this.pause.apply(this);
+            this.settings.trackEnded.apply(this);
         }
-        var durationLoaded = this.element.buffered.end(this.element.buffered.length - 1);
-        this.loadedPercent = durationLoaded / this.duration;
-
-        this.settings.loadProgress.apply(this, [this.loadedPercent]);
-      }
-    },
-    playPause: function() {
-      if (this.playing) this.pause();
-      else this.play();
-    },
-    play: function() {
-      var ios = (/(ipod|iphone|ipad)/i).test(navigator.userAgent);
-      // On iOS this interaction will trigger loading the mp3, so run `init()`.
-      if (ios && this.element.readyState == 0) this.init.apply(this);
-      // If the audio hasn't started preloading, then start it now.  
-      // Then set `preload` to `true`, so that any tracks loaded in subsequently are loaded straight away.
-      if (!this.settings.preload) {
-        this.settings.preload = true;
-        this.element.setAttribute('preload', 'auto');
-        container[audiojs].events.trackLoadProgress(this);
-      }
-      this.playing = true;
-      this.element.play();
-      this.settings.play.apply(this);
-    },
-    pause: function() {
-      this.playing = false;
-      this.element.pause();
-      this.settings.pause.apply(this);
-    },
-    setVolume: function(v) {
-      this.element.volume = v;
-    },
-    trackEnded: function(e) {
-      this.skipTo.apply(this, [0]);
-      if (!this.settings.loop) this.pause.apply(this);
-      this.settings.trackEnded.apply(this);
     }
-  }
 
-  // **getElementsByClassName**  
-  // Having to rely on `getElementsByTagName` is pretty inflexible internally, so a modified version of Dustin Diaz's `getElementsByClassName` has been included.
-  // This version cleans things up and prefers the native DOM method if it's available.
-  var getByClass = function(searchClass, node, tag) {
-    var matches = [];
-    if (document.getElementsByClassName) {
-      matches = node.getElementsByClassName(searchClass);
-    } else {
-      var node = node || document,
+    // **getElementsByClassName**  
+    // Having to rely on `getElementsByTagName` is pretty inflexible internally, so a modified version of Dustin Diaz's `getElementsByClassName` has been included.
+    // This version cleans things up and prefers the native DOM method if it's available.
+    var getByClass = function (searchClass, node, tag) {
+        var matches = [];
+        if (document.getElementsByClassName) {
+            matches = node.getElementsByClassName(searchClass);
+        } else {
+            var node = node || document,
           tag = tag || '*',
           els = node.getElementsByTagName(tag),
-          pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
+          pattern = new RegExp("(^|\\s)" + searchClass + "(\\s|$)");
 
-      for (i = 0, j = 0, l = els.length; i < l; i++) {
-        if (pattern.test(els[i].className)) {
-          matches[j] = els[i];
-          j++;
+            for (i = 0, j = 0, l = els.length; i < l; i++) {
+                if (pattern.test(els[i].className)) {
+                    matches[j] = els[i];
+                    j++;
+                }
+            }
         }
-      }
+        return matches.length > 1 ? matches : matches[0];
     }
-    return matches.length > 1 ? matches : matches[0];
-  }
-// The global variable names are passed in here and can be changed if they conflict with anything else.
+    // The global variable names are passed in here and can be changed if they conflict with anything else.
 })('audiojs', 'audiojsInstance', this);
\ No newline at end of file
diff --git a/js/contextMenu/jquery.contextMenu.css b/js/contextMenu/jquery.contextMenu.css
new file mode 100644
index 0000000..e53ddc6
--- /dev/null
+++ b/js/contextMenu/jquery.contextMenu.css
@@ -0,0 +1,59 @@
+/* Generic context menu styles */
+.contextMenu {
+	position: absolute;
+	width: 115px;
+	z-index: 99999;
+	border: solid 1px #DEDEDE;
+	background: #fff;
+	padding: 0px;
+	margin: 0px;
+	display: none;
+}
+
+.contextMenu LI {
+	list-style: none;
+	padding: 0px;
+	margin: 0px;
+}
+
+.contextMenu A {
+	color: #333;
+	text-decoration: none;
+	display: block;
+	line-height: 20px;
+	height: 20px;
+	background-position: 9px center;
+	background-repeat: no-repeat;
+	outline: none;
+	padding: 3px 5px;
+    padding-left: 32px;
+    font-size: 16px;
+    font-variant: small-caps;
+}
+
+.contextMenu LI.hover A {
+	color: #FFF;
+	background-color: #3399FF;
+}
+
+.contextMenu LI.disabled A {
+	color: #AAA;
+	cursor: default;
+}
+
+.contextMenu LI.hover.disabled A {
+	background-color: transparent;
+}
+
+.contextMenu LI.separator {
+	border-top: solid 1px #CCC;
+}
+
+/*
+	Adding Icons
+	
+	You can add icons to the context menu by adding
+	classes to the respective LI element(s)
+*/
+
+.contextMenu LI.download A { background-image: url(../../images/download_gd_12x16.png); }
\ No newline at end of file
diff --git a/js/contextMenu/jquery.contextMenu.js b/js/contextMenu/jquery.contextMenu.js
new file mode 100644
index 0000000..f73a99e
--- /dev/null
+++ b/js/contextMenu/jquery.contextMenu.js
@@ -0,0 +1,209 @@
+// jQuery Context Menu Plugin
+//
+// Version 1.01
+//
+// Cory S.N. LaViska
+// A Beautiful Site (http://abeautifulsite.net/)
+//
+// More info: http://abeautifulsite.net/2008/09/jquery-context-menu-plugin/
+//
+// Terms of Use
+//
+// This plugin is dual-licensed under the GNU General Public License
+//   and the MIT License and is copyright A Beautiful Site, LLC.
+//
+if (jQuery) (function () {
+    $.extend($.fn, {
+
+        contextMenu: function (o, callback) {
+            // Defaults
+            if (o.menu == undefined) return false;
+            if (o.inSpeed == undefined) o.inSpeed = 150;
+            if (o.outSpeed == undefined) o.outSpeed = 75;
+            // 0 needs to be -1 for expected results (no fade)
+            if (o.inSpeed == 0) o.inSpeed = -1;
+            if (o.outSpeed == 0) o.outSpeed = -1;
+            // Loop each context menu
+            $(this).live("mousedown", function (e) {
+                var el = $(this);
+                var offset = $(el).offset();
+                // Add contextMenu class
+                $('#' + o.menu).addClass('contextMenu');
+
+                var evt = e;
+                evt.stopPropagation();
+                $(this).mouseup(function (e) {
+                    e.stopPropagation();
+                    var srcElement = $(this);
+                    $(this).unbind('mouseup');
+                    if (evt.button == 2) {
+                        // Hide context menus that may be showing
+                        $(".contextMenu").hide();
+                        // Get this context menu
+                        var menu = $('#' + o.menu);
+
+                        if ($(el).hasClass('disabled')) return false;
+
+                        // Detect mouse position
+                        var d = {}, x, y;
+                        if (self.innerHeight) {
+                            d.pageYOffset = self.pageYOffset;
+                            d.pageXOffset = self.pageXOffset;
+                            d.innerHeight = self.innerHeight;
+                            d.innerWidth = self.innerWidth;
+                        } else if (document.documentElement &&
+							document.documentElement.clientHeight) {
+                            d.pageYOffset = document.documentElement.scrollTop;
+                            d.pageXOffset = document.documentElement.scrollLeft;
+                            d.innerHeight = document.documentElement.clientHeight;
+                            d.innerWidth = document.documentElement.clientWidth;
+                        } else if (document.body) {
+                            d.pageYOffset = document.body.scrollTop;
+                            d.pageXOffset = document.body.scrollLeft;
+                            d.innerHeight = document.body.clientHeight;
+                            d.innerWidth = document.body.clientWidth;
+                        }
+                        (e.pageX) ? x = e.pageX : x = e.clientX + d.scrollLeft;
+                        (e.pageY) ? y = e.pageY : y = e.clientY + d.scrollTop;
+
+                        // Show the menu
+                        //$(document).unbind('click');
+                        $(menu).css({ top: y, left: x }).fadeIn(o.inSpeed);
+                        // Hover events
+                        $(menu).find('A').mouseover(function () {
+                            $(menu).find('LI.hover').removeClass('hover');
+                            $(this).parent().addClass('hover');
+                        }).mouseout(function () {
+                            $(menu).find('LI.hover').removeClass('hover');
+                        });
+
+                        // Keyboard
+                        $(document).keypress(function (e) {
+                            switch (e.keyCode) {
+                                case 38: // up
+                                    if ($(menu).find('LI.hover').size() == 0) {
+                                        $(menu).find('LI:last').addClass('hover');
+                                    } else {
+                                        $(menu).find('LI.hover').removeClass('hover').prevAll('LI:not(.disabled)').eq(0).addClass('hover');
+                                        if ($(menu).find('LI.hover').size() == 0) $(menu).find('LI:last').addClass('hover');
+                                    }
+                                    break;
+                                case 40: // down
+                                    if ($(menu).find('LI.hover').size() == 0) {
+                                        $(menu).find('LI:first').addClass('hover');
+                                    } else {
+                                        $(menu).find('LI.hover').removeClass('hover').nextAll('LI:not(.disabled)').eq(0).addClass('hover');
+                                        if ($(menu).find('LI.hover').size() == 0) $(menu).find('LI:first').addClass('hover');
+                                    }
+                                    break;
+                                case 13: // enter
+                                    $(menu).find('LI.hover A').trigger('click');
+                                    break;
+                                case 27: // esc
+                                    $(document).trigger('click');
+                                    break
+                            }
+                        });
+
+                        // When items are selected
+                        $('#' + o.menu).find('A').unbind('click');
+                        $('#' + o.menu).find('LI:not(.disabled) A').click(function () {
+                            //$(document).unbind('click').unbind('keypress');
+                            $(".contextMenu").hide();
+                            // Callback
+                            if (callback) callback($(this).attr('href').substr(1), $(srcElement), { x: x - offset.left, y: y - offset.top, docX: x, docY: y });
+                            return false;
+                        });
+
+                        // Hide bindings
+                        setTimeout(function () { // Delay for Mozilla
+                            $(document).click(function () {
+                                //$(document).unbind('click').unbind('keypress');
+                                $(menu).fadeOut(o.outSpeed);
+                                return false;
+                            });
+                        }, 0);
+                    }
+                });
+
+                // Disable text selection
+                if ($.browser.mozilla) {
+                    $('#' + o.menu).each(function () { $(this).css({ 'MozUserSelect': 'none' }); });
+                } else if ($.browser.msie) {
+                    $('#' + o.menu).each(function () { $(this).bind('selectstart.disableTextSelect', function () { return false; }); });
+                } else {
+                    $('#' + o.menu).each(function () { $(this).bind('mousedown.disableTextSelect', function () { return false; }); });
+                }
+                // Disable browser context menu (requires both selectors to work in IE/Safari + FF/Chrome)
+                $(el).add($('UL.contextMenu')).bind('contextmenu', function () { return false; });
+
+            });
+            return $(this);
+        },
+
+        // Disable context menu items on the fly
+        disableContextMenuItems: function (o) {
+            if (o == undefined) {
+                // Disable all
+                $(this).find('LI').addClass('disabled');
+                return ($(this));
+            }
+            $(this).each(function () {
+                if (o != undefined) {
+                    var d = o.split(',');
+                    for (var i = 0; i < d.length; i++) {
+                        $(this).find('A[href="' + d[i] + '"]').parent().addClass('disabled');
+
+                    }
+                }
+            });
+            return ($(this));
+        },
+
+        // Enable context menu items on the fly
+        enableContextMenuItems: function (o) {
+            if (o == undefined) {
+                // Enable all
+                $(this).find('LI.disabled').removeClass('disabled');
+                return ($(this));
+            }
+            $(this).each(function () {
+                if (o != undefined) {
+                    var d = o.split(',');
+                    for (var i = 0; i < d.length; i++) {
+                        $(this).find('A[href="' + d[i] + '"]').parent().removeClass('disabled');
+
+                    }
+                }
+            });
+            return ($(this));
+        },
+
+        // Disable context menu(s)
+        disableContextMenu: function () {
+            $(this).each(function () {
+                $(this).addClass('disabled');
+            });
+            return ($(this));
+        },
+
+        // Enable context menu(s)
+        enableContextMenu: function () {
+            $(this).each(function () {
+                $(this).removeClass('disabled');
+            });
+            return ($(this));
+        },
+
+        // Destroy context menu(s)
+        destroyContextMenu: function () {
+            // Destroy specified context menus
+            $(this).each(function () {
+                // Disable action
+                $(this).unbind('mousedown').unbind('mouseup');
+            });
+            return ($(this));
+        }
+
+    });
+})(jQuery);
\ No newline at end of file
diff --git a/js/ui-load.js b/js/ui-load.js
new file mode 100644
index 0000000..74f8fa9
--- /dev/null
+++ b/js/ui-load.js
@@ -0,0 +1,67 @@
+$(window).load(function () {
+    if ($.cookie('defaultsmwidth')) {
+        var width = $.cookie('defaultsmwidth');
+        resizeSMSection(width);
+    }
+    if ($.cookie('sidebar') && $.cookie('username') && $.cookie('password')) {
+        $('#SideBar').show();
+        updateChatMessages();
+        updateNowPlaying();
+    }
+    if ($.cookie('HideAZ')) {
+        $('#BottomContainer').hide();
+    }
+    $('ul#ChangeLog li.log').each(function (i, el) {
+        if (i > 3) {
+            $(el).hide();
+        }
+    });
+    resizeContent();
+});
+window.onbeforeunload = function () {
+    closeAllNotifications();
+};
+$(window).resize(function () {
+    resizeContent();
+});
+function resizeContent() {
+    var screenwidth = $(window).width();
+    $('.tabcontent').css({ 'height': (($(window).height() - 112)) + 'px' });
+    $('.smsection').css({ 'height': (($(window).height() - 152)) + 'px' });
+    var smheight = $('.smsection').height();
+    var smwidth = $('.smsection').width();
+    $('#BottomContainer').css({ 'top': smheight + 34 + 'px' });
+    if ($.cookie('sidebar')) {
+        var tabwidth = $(window).width() - 268;
+        if (tabwidth >= 700) {
+            $('.tabcontent').css({ 'width': tabwidth + 'px' });
+        }
+        var sbheight = $(window).height() - 152;
+        $('#SideBar').css({ 'height': (sbheight + 108) + 'px' });
+        $('#ChatMsgs').css({ 'height': (sbheight - 166) + 'px' });
+    } else {
+        var tabwidth = $(window).width() - 61;
+        if (tabwidth >= 700) {
+            $('.tabcontent').css({ 'width': tabwidth + 'px' });
+        }
+    }
+    var tabwidth = $('.tabcontent').width();
+    $('#AlbumContainer, #TrackContainer, #CurrentPlaylistContainer').css({ 'width': (tabwidth - smwidth - 30) + 'px' });
+    $('#CurrentPlaylistContainer').css({ 'width': (tabwidth - 30) + 'px' });
+    $('#player').css({ 'width': tabwidth + 'px' });
+}
+function resizeSMSection(x) {
+    var defwidth = 200;
+    var smwidth = $('.smsection').width();
+    var newsmwidth = smwidth + parseInt(x);
+    var newwidth = newsmwidth - defwidth;
+    if (smwidth != newsmwidth && newsmwidth > 150 && newsmwidth < 500) {
+        $('.smsection').css({ 'width': (newsmwidth) + 'px' });
+        $('.actions').css({ 'width': (newsmwidth - 5) + 'px' });
+        $('#BottomContainer').css({ 'width': (newsmwidth - 16) + 'px' });
+        $.cookie('defaultsmwidth', newwidth, { expires: 365, path: '/' });
+        var ulwidth = newsmwidth + 6;
+        $('#AlbumContainer').css({ 'margin-left': ulwidth + 'px' });
+        $('#TrackContainer').css({ 'margin-left': ulwidth + 'px' });
+    }
+}
\ No newline at end of file
diff --git a/js/ui-ready.js b/js/ui-ready.js
new file mode 100644
index 0000000..e5a38d4
--- /dev/null
+++ b/js/ui-ready.js
@@ -0,0 +1,488 @@
+$(document).ready(function () {
+    // Tabs
+    $(".tabcontent").hide(); //Hide all content
+    if ($.cookie('username') == null) {
+        $('ul.tabs li a').each(function () {
+            if ($(this).attr("href") == '#tabPreferences') {
+                $(this).addClass("active"); //Add "active" class to selected tab
+            }
+        });
+        $("#tabPreferences").show(); //Show first tab content
+        loadTabContent('#tabPreferences');
+    } else {
+        if (window.location.hash) {
+            var hash = window.location.hash;
+            $('ul.tabs li a').each(function () {
+                if ($(this).attr("href") == hash) {
+                    $(this).addClass("active"); //Add "active" class to selected tab
+                }
+            });
+            $(hash).show(); //Fade in the active ID content
+            loadTabContent(hash);
+        } else {
+            $("ul.tabs li:first a").addClass("active").show(); //Activate first tab
+            $(".tabcontent:first").show(); //Show first tab content
+            var firstTab = $("ul.tabs li:first a").attr("href");
+            loadTabContent(firstTab);
+        }
+    }
+
+    // Tabs - Click Event
+    $("ul.tabs li a").click(function () {
+        $("ul.tabs li a").removeClass("active"); //Remove any "active" class
+        $(this).addClass("active"); //Add "active" class to selected tab
+        $(".tabcontent").hide(); //Hide all tab content
+
+        var activeTab = $(this).attr("href"); //Find the href attribute value to identify the active tab + content
+        $(activeTab).show(); //Fade in the active ID content
+        loadTabContent(activeTab);
+    });
+
+    // Ajax Loading Screen
+    $(".toploading").ajaxStart(function () {
+        $(this).show();
+    });
+    $(".toploading").ajaxStop(function () {
+        $(this).hide();
+    });
+
+    // Keyboard shortcuts
+    $(document).keydown(function (e) {
+        var source = e.target.id;
+        if (source != 'Search' && source != 'ChatMsg') {
+            var unicode = e.charCode ? e.charCode : e.keyCode;
+            // a-z
+            if (unicode >= 65 && unicode <= 90) {
+                var key = findKeyForCode(unicode);
+                var el = '#index_' + key.toUpperCase();
+                $('#Artists').stop().scrollTo(el, 400);
+                // right arrow
+            } else if (unicode == 39 || unicode == 176) {
+                var next = $('#CurrentPlaylistContainer tr.playing').next();
+                if (!next.length) next = $('#CurrentPlaylistContainer li').first();
+                changeTrack(next);
+                // back arrow
+            } else if (unicode == 37 || unicode == 177) {
+                var prev = $('#CurrentPlaylistContainer tr.playing').prev();
+                if (!prev.length) prev = $('#CurrentPlaylistContainer tr').last();
+                changeTrack(prev);
+                // spacebar
+            } else if (unicode == 32 || unicode == 179 || unicode == 0179) {
+                playPauseSong();
+            } else if (unicode == 36) {
+                $('#Artists').stop().scrollTo('#auto', 400);
+            }
+        }
+    });
+
+    // Main Click Events
+    // Albums Click Event
+    $('#MusicFolders').live('change', function () {
+        var folder = $(this).val();
+        loadArtists(folder, true);
+        $.cookie('MusicFolders', folder, { expires: 365 });
+    });
+    $('#ArtistContainer li.item').live('click', function () {
+        $('#AutoAlbumContainer li').removeClass('selected');
+        $('#ArtistContainer li').removeClass('selected');
+        $(this).addClass('selected');
+        getAlbums($(this).attr("id"), '', '#AlbumRows');
+    });
+    $('#BottomIndex li a').live('click', function () {
+        var el = '#index_' + $(this).text();
+        $('#Artists').stop().scrollTo(el, 400);
+        return false;
+    });
+    $('#AutoAlbumContainer li.item').live('click', function () {
+        $('#AutoAlbumContainer li').removeClass('selected');
+        $('#ArtistContainer li').removeClass('selected');
+        $(this).addClass('selected');
+        getAlbumListBy($(this).attr("id"));
+    });
+    $('tr.album a.play').live('click', function (e) {
+        var albumid = $(this).parent().parent().attr('childid');
+        var artistid = $(this).parent().parent().attr('parentid');
+        getAlbums(albumid, 'autoplay', '#CurrentPlaylistContainer');
+        return false;
+    });
+    $('tr.album a.add').live('click', function (e) {
+        var albumid = $(this).parent().parent().attr('childid');
+        var artistid = $(this).parent().parent().attr('parentid');
+        getAlbums(albumid, 'add', '#CurrentPlaylistContainer');
+        return false;
+    });
+    $('tr.album a.download').live('click', function (event) {
+        var itemid = $(this).parent().parent().attr('childid');
+        downloadItem(itemid);
+        return false;
+    });
+    $('tr.album a.rate').live('click', function (event) {
+        var itemid = $(this).parent().parent().attr('childid');
+        rateSong(itemid, 5);
+        $(this).removeClass('rate');
+        $(this).addClass('favorite');
+        return false;
+    });
+    $('tr.album a.favorite').live('click', function (event) {
+        var itemid = $(this).parent().parent().attr('childid');
+        rateSong(itemid, 0);
+        $(this).removeClass('favorite');
+        $(this).addClass('rate');
+        return false;
+    });
+    $('tr.album').live('click', function (e) {
+        var albumid = $(this).attr('childid');
+        var artistid = $(this).attr('parentid');
+        getAlbums(albumid, '', '#AlbumRows');
+        return false;
+    });
+
+    // Track - Click Events
+    // Multiple Select
+    $('.noselect').disableTextSelect();
+    var lastChecked = null;
+    $('table.songlist tr.song').live('click', function (event) {
+        var checkboxclass = 'table.songlist tr.song';
+        var songid = $(this).attr('childid');
+        var albumid = $(this).attr('parentid');
+        if (!event.ctrlKey) {
+            $(checkboxclass).removeClass('selected');
+        }
+        if ($(this).hasClass('selected')) {
+            $(this).removeClass('selected');
+        } else {
+            $(this).addClass('selected');
+        }
+        if (!lastChecked) {
+            lastChecked = this;
+            return;
+        }
+        if (event.shiftKey) {
+            var start = $(checkboxclass).index(this);
+            var end = $(checkboxclass).index(lastChecked);
+            for (i = Math.min(start, end); i <= Math.max(start, end); i++) {
+                $(checkboxclass).eq(i).addClass('selected');
+            }
+        }
+        lastChecked = this;
+    });
+    // Double Click
+    $('table.songlist tr.song').live('dblclick', function (e) {
+        e.preventDefault();
+        //$(this).addClass('playing').siblings().removeClass('playing');
+        var songid = $(this).attr('childid');
+        var albumid = $(this).attr('parentid');
+        playSong('', this, songid, albumid);
+    });
+    $('table.songlist tr.song a.play').live('click', function (event) {
+        var songid = $(this).parent().parent().attr('childid');
+        var albumid = $(this).parent().parent().attr('parentid');
+        playSong($(this).parent().parent(), songid, albumid);
+        return false;
+    });
+    $('table.songlist tr.song a.add').live('click', function (event) {
+        var track = $(this).parent().parent();
+        $(track).clone().appendTo('#CurrentPlaylistContainer');
+        return false;
+    });
+    $('table.songlist tr.song a.remove').live('click', function (event) {
+        var track = $(this).parent().parent();
+        $(track).remove();
+        refreshRowColor();
+        return false;
+    });
+    $('table.songlist tr.song a.rate').live('click', function (event) {
+        var songid = $(this).parent().parent().attr('childid');
+        rateSong(songid, 5);
+        $(this).removeClass('rate');
+        $(this).addClass('favorite');
+        return false;
+    });
+    $('table.songlist tr.song a.favorite').live('click', function (event) {
+        var songid = $(this).parent().parent().attr('childid');
+        rateSong(songid, 0);
+        $(this).removeClass('favorite');
+        $(this).addClass('rate');
+        return false;
+    });
+    $('li.index').live('click', function (e) {
+        $('#Artists').stop().scrollTo('#auto', 400);
+        return false;
+    });
+
+    // Music Library Click Events
+    $('a#action_AddToPlaylist').click(function () {
+        var submenu = $('div#submenu_AddToPlaylist');
+        if (submenu.is(":visible")) {
+            submenu.fadeOut();
+        } else {
+            loadPlaylistsForMenu('submenu_AddToPlaylist');
+            //get the position of the placeholder element
+            pos = $(this).offset();
+            width = $(this).width();
+            height = $(this).height();
+            //show the menu directly over the placeholder
+            submenu.css({ "left": (pos.left) + "px", "top": (pos.top + height + 14) + "px" }).fadeIn(400);
+        }
+        return false;
+    });
+    var submenu_active = false;
+    $('div.submenu').mouseenter(function () {
+        submenu_active = true;
+    });
+    $('div.submenu').mouseleave(function () {
+        submenu_active = false;
+        setTimeout(function () { if (submenu_active == false) $('div.submenu').fadeOut(); }, 400);
+    });
+    $('a#action_AddToCurrent').click(function () {
+        addToCurrent();
+        return false;
+    });
+    $('#action_RefreshArtists').click(function () {
+        loadArtists("", true);
+        return false;
+    });
+    $('#action_IncreaseWidth').click(function () {
+        resizeSMSection(50);
+        return false;
+    });
+    $('#action_DecreaseWidth').click(function () {
+        resizeSMSection(-50);
+        return false;
+    });
+    $('#action_SelectAll').click(function () {
+        $('#Albums tr.song').each(function () {
+            $(this).addClass('selected');
+        });
+        return false;
+    });
+    $('#action_SelectNone').click(function () {
+        $('#Albums tr.song').each(function () {
+            $(this).removeClass('selected');
+        });
+        return false;
+    });
+    $('input#Search').keydown(function (e) {
+        var unicode = e.charCode ? e.charCode : e.keyCode;
+        if (unicode == 13) {
+            $('#action_Search').click();
+        }
+    });
+    $('#action_Search').click(function () {
+        var query = $('#Search').val();
+        search('song', query);
+        $('#Search').val("");
+        return false;
+    });
+    // Current Playlist Click Events
+    $('#action_Shuffle').live('click', function () {
+        $('#CurrentPlaylistContainer tr.song').shuffle();
+        refreshRowColor();
+        return false;
+    });
+    $('#action_Empty').live('click', function () {
+        $('#CurrentPlaylistContainer tbody').empty();
+        return false;
+    });
+    $('a#action_AddCurrentToPlaylist').click(function () {
+        var submenu = $('div#submenu_AddCurrentToPlaylist');
+        if (submenu.is(":visible")) {
+            submenu.fadeOut();
+        } else {
+            loadPlaylistsForMenu('submenu_AddCurrentToPlaylist');
+            //get the position of the placeholder element
+            pos = $(this).offset();
+            width = $(this).width();
+            height = $(this).height();
+            //show the menu directly over the placeholder
+            submenu.css({ "left": (pos.left) + "px", "top": (pos.top + height + 14) + "px" }).fadeIn(400);
+        }
+    });
+    $('#action_CurrentSelectAll').click(function () {
+        $('#CurrentPlaylist tr.song').each(function () {
+            $(this).addClass('selected');
+        });
+        return false;
+    });
+    $('#action_CurrentSelectNone').click(function () {
+        $('#CurrentPlaylist tr.song').each(function () {
+            $(this).removeClass('selected');
+        });
+        return false;
+    });
+    // Playlist Click Events
+    $('#AutoPlaylistContainer li.item').live('click', function () {
+        $('#AutoPlaylistContainer li').removeClass('selected');
+        $('#PlaylistContainer li').removeClass('selected');
+        $(this).addClass('selected');
+        getRandomSongList('', '#TrackContainer');
+    });
+    $('#AutoPlaylistContainer li.item a.play').live('click', function () {
+        getRandomSongList('autoplay', '#CurrentPlaylistContainer');
+        return false;
+    });
+    $('#AutoPlaylistContainer li.item a.add').live('click', function () {
+        getRandomSongList('', '#CurrentPlaylistContainer');
+        return false;
+    });
+    $('#PlaylistContainer li.item').live('click', function () {
+        $('#AutoPlaylistContainer li').removeClass('selected');
+        $('#PlaylistContainer li').removeClass('selected');
+        $(this).addClass('selected');
+        getPlaylist($(this).attr("id"), '', '#TrackContainer tbody');
+    });
+    $('#PlaylistContainer li.item a.play').live('click', function () {
+        getPlaylist($(this).parent().parent().attr("id"), 'autoplay', '#CurrentPlaylistContainer tbody');
+        return false;
+    });
+    $('#PlaylistContainer li.item a.add').live('click', function () {
+        getPlaylist($(this).parent().parent().attr("id"), '', '#CurrentPlaylistContainer tbody');
+        return false;
+    });
+    $('#action_DeletePlaylist').click(function () {
+        if ($('#PlaylistContainer li.selected').length > 0) {
+            if (confirmDelete()) {
+                $('#PlaylistContainer li.selected').each(function () {
+                    deletePlaylist($(this).attr("id"));
+                });
+            }
+        }
+        return false;
+    });
+    $('#action_SavePlaylist').click(function () {
+        if ($('#PlaylistContainer li.selected').length > 0) {
+            $('#PlaylistContainer li.selected').each(function () {
+                savePlaylist($(this).attr("id"));
+            });
+        }
+        return false;
+    });
+    $('#action_RemoveSongs').click(function () {
+        if ($('#TrackContainer tr.selected').length > 0) {
+            $('#TrackContainer tr.selected').each(function () {
+                $(this).remove();
+            });
+        }
+        return false;
+    });
+    $('#action_ShufflePlaylist').live('click', function () {
+        $('#TrackContainer tr.song').shuffle();
+        refreshRowColor();
+        return false;
+    });
+
+    // Player Click Events
+    $('#PlayTrack').live('click', function () {
+        playPauseSong();
+        return false;
+    });
+    $('#NextTrack').live('click', function () {
+        var next = $('#CurrentPlaylistContainer tr.playing').next();
+        changeTrack(next);
+        return false;
+    });
+    $('#PreviousTrack').live('click', function () {
+        var prev = $('#CurrentPlaylistContainer tr.playing').prev();
+        changeTrack(prev);
+        return false;
+    });
+    $("a#coverartimage").fancybox({
+        'hideOnContentClick': true,
+        'type': 'image'
+    });
+
+    // Side Bar Click Events
+    $('#action_ToggleSideBar').live('click', function () {
+        if ($.cookie('sidebar')) {
+            $.cookie('sidebar', null);
+            $('#SideBar').hide();
+            stopUpdateChatMessages();
+            stopUpdateNowPlaying();
+        } else {
+            $.cookie('sidebar', true, { expires: 365 });
+            $('#SideBar').show();
+            updateChatMessages();
+            updateNowPlaying();
+        }
+        resizeContent();
+        return false;
+    });
+    $('input#ChatMsg').keydown(function (e) {
+        var unicode = e.charCode ? e.charCode : e.keyCode;
+        if (unicode == 13) {
+            var msg = $('#ChatMsg').val();
+            if (msg != '') {
+                addChatMessage(msg);
+            }
+            $('#ChatMsg').val("");
+        }
+    });
+
+    // Preferences Click Events
+    $('#SavePreferences').live('click', function () {
+        var username = $('#Username').val();
+        var password = $('#Password').val();
+        $.cookie('username', username, { expires: 365 });
+        $.cookie('password', password, { expires: 365 });
+        var AutoAlbumSize = $('#AutoAlbumSize').val();
+        var AutoPlaylistSize = $('#AutoPlaylistSize').val();
+        $.cookie('AutoAlbumSize', AutoAlbumSize, { expires: 365 });
+        $.cookie('AutoPlaylistSize', AutoPlaylistSize, { expires: 365 });
+        var server = $('#Server').val();
+        if (server != "") {
+            $.cookie('Server', server, { expires: 365 });
+        }
+        var applicationname = $('#ApplicationName').val();
+        if (applicationname != "") {
+            $.cookie('ApplicationName', applicationname, { expires: 365 });
+        }
+        location.reload(true);
+    });
+    $('#HideAZ').live('click', function () {
+        if ($('#HideAZ').is(':checked')) {
+            $.cookie('HideAZ', '1', { expires: 365 });
+            $('#BottomContainer').hide();
+        } else {
+            $.cookie('HideAZ', null);
+            $('#BottomContainer').show();
+        }
+    });
+    $('#EnableNotifications').live('click', function () {
+        if ($('#EnableNotifications').is(':checked')) {
+            requestPermissionIfRequired();
+            if (hasNotificationPermission()) {
+                $.cookie('EnableNotifications', '1', { expires: 365 });
+            }
+        } else {
+            $.cookie('EnableNotifications', null);
+        }
+    });
+    $('#ScrollTitle').live('click', function () {
+        if ($('#ScrollTitle').is(':checked')) {
+            $.cookie('ScrollTitle', '1', { expires: 365 });
+        }
+    });
+    $('input#Password').keydown(function (e) {
+        var unicode = e.charCode ? e.charCode : e.keyCode;
+        if (unicode == 13) {
+            $('#SavePreferences').click();
+        }
+    });
+    $('#ResetPreferences').live('click', function () {
+        $.cookie('username', null);
+        $.cookie('password', null);
+        $.cookie('AutoAlbumSize', null);
+        $.cookie('AutoPlaylistSize', null);
+        $.cookie('Server', null);
+        $.cookie('ApplicationName', null);
+        $.cookie('HideAZ', null);
+        location.reload(true);
+    });
+    $('#ChangeLogShowMore').live('click', function () {
+        $('ul#ChangeLog li.log').each(function (i, el) {
+            $(el).show();
+        });
+        return false;
+    });
+
+});                            // End document.ready
\ No newline at end of file
diff --git a/style/Style.css b/style/Style.css
index b0e683c..bef49ea 100644
--- a/style/Style.css
+++ b/style/Style.css
@@ -43,69 +43,91 @@ h3.title
 }
 #nav 
 {
-    height: 36px;
-	padding: 4px 0 0 52px;
-	background: url('../images/subsonic-36.png') no-repeat 6px 2px;
+    height: 127px;
+    padding: 44px 0 0 0;
+    background: url('../images/subsonic-36.png') no-repeat 6px 4px;
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    z-index: 99;
 }
 #nav ul 
 {
 	list-style-type: none;
     padding: 0;
-    margin: 0 0 0 5px;
+    margin: 0 0 0 4px;
 }
 #nav li 
 {
+    width: 50px;
 }
 #nav a 
 {
     display: block;
-	padding: 6px 15px 5px 15px;
-	margin: 0 2px -1px 0;
-	float: left;
+	padding: 13px 9px 13px 15px;
     color: #7C7C7C;
     letter-spacing: -1px;
     font-weight: bold;
     font-size: 17px;
 	text-decoration: none;
 	background: #f4f4f4;
-    border-top: 1px solid #E4E4E4;
-    border-left: 1px solid #E4E4E4;
-    border-right: 1px solid #E4E4E4;
-}
-#nav a.active  
-{
-    color: #545454; 
-    background: #EDEDED; 
-	padding: 6px 15px 6px 15px;
-	border-top: 1px solid #CBCBCB;
-    border-left: 1px solid #CBCBCB;
-    border-right: 1px solid #CBCBCB;
+    border: 1px solid #E4E4E4;
+    border-right: 1px solid #D5D5D5;
+    border-bottom: none;
 }
 #nav a:hover  
 {
     color: #545454; 
-    border-top: 1px solid #CBCBCB;
-    border-left: 1px solid #CBCBCB;
-    border-right: 1px solid #CBCBCB;
+    border: 1px solid #D5D5D5;
+    border-bottom: none;
+}
+#nav a.first
+{
+    border-top: 1px solid #E4E4E4;
+}
+#nav a.first:hover  
+{
+    color: #545454; 
+    border: 1px solid #D5D5D5;
+    border-bottom: none;
+}
+#nav a.last
+{
+    border-bottom: 1px solid #E4E4E4;
+}
+#nav a.last:hover  
+{
+    color: #545454; 
+    border: 1px solid #D5D5D5;
+}
+#nav a.active  
+{
+    color: #545454; 
+    background: #ffffff; 
+	border: 1px solid #CBCBCB;
+	border-right: none;
+}
+#nav a.active:hover  
+{
+    color: #545454; 
+    border: 1px solid #CBCBCB;
+	border-right: none;
 }
 #nav a img 
 {
     display: block;
-    margin: 3px 0 4px 0;
+    margin: 3px 0 4px 1px;
 }
 #nav a.active img 
 {
     display: block;
-    margin: 3px 0 4px 0;
+    margin: 3px 0 4px 1px;
 }
 
 #content 
 {
-    border-top: 1px solid #cbcbcb;
     background: #EDEDED;
 	overflow: hidden;
-	margin-top: -1px;
-	padding: 0 5px;
 }
 #content h2
 {
@@ -117,6 +139,7 @@ h3.title
 {
     min-height: 400px;
     min-width: 700px;
+    margin-left: 53px;
 }
 .smsection
 {
@@ -129,8 +152,8 @@ h3.title
     background: #fff;
     border-right: 1px solid #cbcbcb;
     position: absolute;
-    top: 79px;
-    left: 6px;
+    top: 39px;
+    left: 60px;
 }
 .lgsection
 {
@@ -178,17 +201,24 @@ h3.title
     display: none;
     height: 35px;
     width: 40px;
-    margin: 0 0 0 10px;
+    margin: 0 0 0 7px;
     background: url('../images/ajax-loader.gif') no-repeat center center;
     float: left;
 }
 #messages
 {
     display: none;
-    color: #A6CBF3;
-    float: left;
+    color: #4B95E5;
+    float: right;
     font-size: 12px;
-    padding: 9px 0 0 10px;
+    padding: 5px;
+    position: absolute;
+    z-index: 99;
+    top: 0;
+    right: 58px;
+    background: #fff;
+    border: 1px solid #A6CBF3;
+    border-top: none;
 }
 /* Library Style */
 ul.simplelist
@@ -313,7 +343,7 @@ table.songlist tr.album
 }
 table.songlist tr.album td
 {
-    padding: 4px;
+    padding: 4px 0 0 2px;
 }
 table.songlist tr.album td.title
 {
@@ -323,7 +353,8 @@ table.songlist tr.album td.artist
 }
 table.songlist tr.album td.itemactions
 {
-    width: 80px;
+    width: 85px;
+    padding-left: 10px;
 }
 table.songlist tr.album td.albumart
 {
@@ -342,12 +373,11 @@ table.songlist tr.album a.play
     width: 20px;
     height: 50px;
     display: block;
-    margin: 0 5px 0 0;
-    background: url('../images/play_gl_6x8.png') no-repeat 6px center;
+    background: url('../images/play_gl_6x8.png') no-repeat 7px center;
 }
 table.songlist tr.album a.play:hover
 {
-    background: url('../images/play_6x8.png') no-repeat 6px center #DEECFB;
+    background: url('../images/play_6x8.png') no-repeat 7px center #DEECFB;
 }
 table.songlist tr.album a.add
 {
@@ -355,13 +385,24 @@ table.songlist tr.album a.add
     width: 20px;
     height: 50px;
     display: block;
-    margin: 0 5px 0 0;
     background: url('../images/plus_gl_8x8.png') no-repeat 6px center;
 }
 table.songlist tr.album a.add:hover
 {
     background: url('../images/plus_8x8.png') no-repeat 6px center #DEECFB;
 }
+table.songlist tr.album a.download
+{
+    float: left;
+    width: 20px;
+    height: 50px;
+    display: block;
+    background: url('../images/download_gl_9x12.png') no-repeat 5px center;
+}
+table.songlist tr.album a.download:hover
+{
+    background: url('../images/download_gd_9x12.png') no-repeat 5px center #DEECFB;
+}
 table.songlist tr.album a.remove
 {
     display: none;
@@ -371,13 +412,12 @@ table.songlist tr.album a.rate
     float: left;
 	height: 50px;
     width: 20px;
-    margin: 0 5px 0 0;
     display: block;
-	background: url('../images/star_w_12x12.png') 2px center no-repeat;	
+	background: url('../images/star_wo_12x12.png') 2px center no-repeat;	
 }
 table.songlist tr.album a.rate:hover
 {
-    background: url('../images/star_wo_12x12.png') 2px center no-repeat;
+    background: url('../images/star_lgo_12x12.png') 2px center no-repeat;
 }
 table.songlist tr.album a.favorite
 {
@@ -401,7 +441,7 @@ table.songlist tr.song td
 table.songlist tr.song td.itemactions
 {
     width: 80px;
-    padding-left: 25px;
+    padding-left: 22px;
 }
 table.songlist tr.song td.track
 {
@@ -438,11 +478,11 @@ table.songlist tr.song a.play
     height: 20px;
     display: block;
     margin: 0;
-    background: url('../images/play_gl_6x8.png') no-repeat 6px center;
+    background: url('../images/play_gl_6x8.png') no-repeat 7px center;
 }
 table.songlist tr.song a.play:hover
 {
-    background: url('../images/play_6x8.png') no-repeat 6px center #DEECFB;
+    background: url('../images/play_6x8.png') no-repeat 7px center #DEECFB;
 }
 table.songlist tr.song a.add
 {
@@ -464,11 +504,11 @@ table.songlist tr.song a.rate
     width: 20px;
     margin: 0;
     display: block;
-	background: url('../images/star_w_12x12.png') center 3px no-repeat;	
+	background: url('../images/star_wo_12x12.png') center 3px no-repeat;	
 }
 table.songlist tr.song a.rate:hover
 {
-    background: url('../images/star_wo_12x12.png') center 3px no-repeat;
+    background: url('../images/star_lgo_12x12.png') center 3px no-repeat;
 }
 table.songlist tr.song a.favorite
 {
@@ -572,6 +612,13 @@ background-color: #8dbdd8;
     text-decoration: underline;
 }
 .actions
+{
+    width: 195px;
+    height: 29px;
+    margin: 4px 0 0 0;
+    padding: 0 0 0 5px;
+}
+.subactions
 {
     height: 29px;
     margin: 4px 0 0 0;
@@ -612,7 +659,7 @@ background-color: #8dbdd8;
     display: none;
     width: 200px;
     position: fixed;
-    top: 78px;
+    top: 38px;
     right: 4px;
     background: none repeat scroll 0 0 #FFFFFF;
     border: 1px solid #CBCBCB;
@@ -700,10 +747,10 @@ background-color: #8dbdd8;
 /* Player Style */
 #player
 {
-    width: 100%;
     background: #fff;
     border: 1px solid #cbcbcb;
     margin: 5px 0;
+    margin-left: 55px;
 }
 #audiocontainer
 {
@@ -948,6 +995,10 @@ select
     margin: 5px;
     border: 1px solid #d6d6d6;
 }
+select#MusicFolders
+{
+    width: 94%;
+}
 .submit
 {
     margin: 0 5px;