--- a/playlist.php	Sun Mar 23 14:59:33 2008 -0400
+++ b/playlist.php	Sun Mar 23 15:24:06 2008 -0400
@@ -17,6 +17,9 @@
   $smarty->assign('theme', $theme);
   $smarty->assign('playlist', $playlist);
   $smarty->assign('active', $active);
+  $smarty->assign('scripts', array(
+      'ajax.js',
+    ));
   $smarty->display('playlist.tpl');
 }
 

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/scripts/domutils.js	Sun Mar 23 15:24:06 2008 -0400
@@ -0,0 +1,209 @@
+// The "Dynano" Javascript framework. Similar in syntax to JQuery but only has what Enano needs.
+// License = GPLv2
+
+var $ = function(id)
+{
+  return new DNobj(id);
+}
+var $dynano = $;
+function DNobj(id)
+{
+  this.object = ( typeof(id) == 'object' ) ? id : document.getElementById(id);
+  if ( !this.object )
+  {
+    console.warn('Dynano: requested object is bad. id parameter follows.');
+    console.debug(id);
+    console.debug(tinyMCE.getInstanceById(id));
+    this.object = false;
+    return this;
+  }
+  this.height = __DNObjGetHeight(this.object);
+  this.width = __DNObjGetWidth(this.object);
+  
+  if ( this.object.tagName == 'TEXTAREA' && typeof(tinyMCE) == 'object' )
+  {
+    this.object.dnIsMCE = 'no';
+    this.switchToMCE = DN_switchToMCE;
+    this.destroyMCE = DN_destroyMCE;
+    this.getContent = DN_mceFetchContent;
+    this.setContent = DN_mceSetContent;
+  }
+}
+function __DNObjGetHeight(o) {
+  return o.offsetHeight;
+}
+
+function __DNObjGetWidth(o) {
+  return o.offsetWidth;
+}
+
+function addClass(obj, clsname)
+{
+  var cnt = obj.className;
+  var space = ( (cnt + '').length > 0 ) ? ' ' : '';
+  var cls = cnt + space + clsname;
+  obj.className = cls;
+}
+
+function rmClass(obj, clsname)
+{
+  var cnt = obj.className;
+  if ( cnt == clsname )
+  {
+    obj.className = '';
+  }
+  else
+  {
+    cnt = cnt.replace(clsname, '');
+    cnt = trim(cnt);
+    obj.className = cnt;
+  }
+}
+
+function hasClass(obj, clsname)
+{
+  var cnt = obj.className;
+  if ( !cnt )
+    return false;
+  if ( cnt == clsname )
+    return true;
+  cnt = cnt.split(' ');
+  
+  for ( var i in cnt )
+    if ( cnt[i] == clsname )
+      return true;
+    
+  return false;
+}
+function __DNObjGetLeft(obj) {
+  var left_offset = obj.offsetLeft;
+  while ((obj = obj.offsetParent) != null) {
+    left_offset += obj.offsetLeft;
+  }
+  return left_offset;
+}
+
+function __DNObjGetTop(obj) {
+  var left_offset = obj.offsetTop;
+  while ((obj = obj.offsetParent) != null) {
+    left_offset += obj.offsetTop;
+  }
+  return left_offset;
+}
+
+function DN_switchToMCE(performWikiTransform)
+{
+  if ( !this.object.id )
+    this.object.id = 'textarea_' + Math.floor(Math.random() * 1000000);
+  if ( !this.object.name )
+    this.object.name = 'textarea_' + Math.floor(Math.random() * 1000000);
+  // Updated for TinyMCE 3.x
+  if ( performWikiTransform )
+  {
+    this.object.value = DN_WikitextToXHTML(this.object.value);
+  }
+  // If tinyMCE init hasn't been called yet, do it now.
+  if ( !tinymce_initted )
+  {
+    enano_tinymce_options.mode = 'exact';
+    enano_tinymce_options.elements = this.object.id;
+    initTinyMCE();
+    this.object.dnIsMCE = 'yes';
+    return true;
+  }
+  else
+  {
+    tinyMCE.execCommand("mceAddControl", true, this.object.id);
+    this.object.dnIsMCE = 'yes';
+  }
+  return this;
+}
+
+function DN_destroyMCE(performWikiTransform)
+{
+  //if ( !this.object.dn_is_mce )
+  //  return this;
+  if ( this.object.id )
+  {
+    // TinyMCE 2.x
+    // tinyMCE.removeMCEControl(this.object.name);
+    // TinyMCE 3.x
+    var ed = tinyMCE.getInstanceById(this.object.id);
+    if ( ed )
+    {
+      if ( !tinyMCE.execCommand("mceRemoveEditor", false, this.object.id) )
+        alert('could not destroy editor');
+      if ( performWikiTransform )
+      {
+        this.object.value = DN_XHTMLToWikitext(this.object.value);
+      }
+    }
+  }
+  this.object.dnIsMCE = 'no';
+  return this;
+}
+
+function DN_mceFetchContent()
+{
+  if ( this.object.name )
+  {
+    var text = this.object.value;
+    if ( tinyMCE.get(this.object.id) )
+    {
+      var editor = tinyMCE.get(this.object.id);
+      text = editor.getContent();
+    }
+    return text;
+  }
+  else
+  {
+    return this.object.value;
+  }
+}
+
+function DN_mceSetContent(text)
+{
+  if ( this.object.name )
+  {
+    this.object.value = text;
+    if ( tinyMCE.get(this.object.id) )
+    {
+      var editor = tinyMCE.get(this.object.id);
+      editor.setContent(text);
+    }
+  }
+  else
+  {
+    this.object.value = text;
+  }
+}
+
+// A basic Wikitext to XHTML converter
+function DN_WikitextToXHTML(text)
+{
+  text = text.replace(/^===[\s]*(.+?)[\s]*===$/g, '<h3>$1</h3>');
+  text = text.replace(/'''(.+?)'''/g, '<b>$1</b>');
+  text = text.replace(/''(.+?)''/g, '<i>$1</i>');
+  text = text.replace(/\[(http|ftp|irc|mailto):([^ \]])+ ([^\]]+?)\]/g, '<a href="$1:$2">$4</a>');
+  return text;
+}
+
+// Inverse of the previous function
+function DN_XHTMLToWikitext(text)
+{
+  text = text.replace(/<h3>(.+?)<\/h3>/g, '=== $1 ===');
+  text = text.replace(/<(b|strong)>(.+?)<\/(b|strong)>/g, "'''$2'''");
+  text = text.replace(/<(i|em)>(.+?)<\/(i|em)>/g, "''$2''");
+  text = text.replace(/<a href="([^" ]+)">(.+?)<\/a>/g, '[$1 $2]');
+  text = text.replace(/<\/?p>/g, '');
+  return text;
+}
+
+DNobj.prototype.addClass = function(clsname) { addClass(this.object, clsname); return this; };
+DNobj.prototype.rmClass  = function(clsname) { rmClass( this.object, clsname); return this; };
+DNobj.prototype.hasClass = function(clsname) { return hasClass(this.object, clsname); };
+DNobj.prototype.Height   = function()        { return __DNObjGetHeight(this.object); }
+DNobj.prototype.Width    = function()        { return __DNObjGetWidth( this.object); }
+DNobj.prototype.Left     = function()        { /* return this.object.offsetLeft; */ return __DNObjGetLeft(this.object); }
+DNobj.prototype.Top      = function()        { /* return this.object.offsetTop;  */ return __DNObjGetTop( this.object); }
+

--- a/scripts/test2/ajax.js	Sun Mar 23 14:59:33 2008 -0400
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,1 +0,0 @@
-// another test.

--- a/scripts/test2/ajax.js.save	Sun Mar 23 14:59:33 2008 -0400
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,2 +0,0 @@
-// Other Hello world
-

Binary file themes/funkymonkey/images/next.png has changed

Binary file themes/funkymonkey/images/pause.png has changed

Binary file themes/funkymonkey/images/play.png has changed

Binary file themes/funkymonkey/images/playbar-shadow.gif has changed

Binary file themes/funkymonkey/images/playbar.gif has changed

Binary file themes/funkymonkey/images/prev.png has changed

Binary file themes/funkymonkey/images/src/playbar-shadow.xcf has changed

Binary file themes/funkymonkey/images/src/playbar.xcf has changed

Binary file themes/funkymonkey/images/stop.png has changed

--- a/themes/funkymonkey/playlist.tpl	Sun Mar 23 14:59:33 2008 -0400
+++ b/themes/funkymonkey/playlist.tpl	Sun Mar 23 15:24:06 2008 -0400
@@ -12,8 +12,20 @@
     <title>AmaroK playlist</title>
     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
     <link rel="stylesheet" type="text/css" href="/themes/{$theme|escape}/style.css" />
+    {foreach from=$scripts item=script}
+    <script type="text/javascript" src="/scripts/{$script}"></script>
+    {/foreach}
   </head>
   <body>
+    <div id="playbar">
+      <div class="playbar-inner">
+        <a href="#action:prev" onclick="return false;"><img alt="&laquo; PrevTrk" src="/themes/{$theme|escape}/images/prev.png" /></a>
+        <a href="#action:play" onclick="return false;"><img alt="Play" src="/themes/{$theme|escape}/images/play.png" /></a>
+        <a href="#action:pause" onclick="return false;"><img alt="Pause" src="/themes/{$theme|escape}/images/pause.png" /></a>
+        <a href="#action:stop" onclick="return false;"><img alt="Stop" src="/themes/{$theme|escape}/images/stop.png" /></a>
+        <a href="#action:next" onclick="return false;"><img alt="NextTrk &raquo;" src="/themes/{$theme|escape}/images/next.png" /></a>
+      </div>
+    </div>
     <div class="tblholder" id="playlist">
       <table border="0" cellspacing="1" cellpadding="4">
         <tr>
@@ -24,13 +36,19 @@
           <th>Length</th>
         </tr>
         {foreach key=tid item=track from=$playlist}
+        {strip}
         <tr class="{cycle values="row1,row2"}{if $active == $tid} current{/if}">
           <td style="text-align: center;">{$tid+1}</td>
-          <td>{$track.title|escape}</td>
+          <td>
+            {if $active != $tid}<a class="tracklink" href="#action:jump;tid:{$tid}" onclick="return false;">{/if}
+              {$track.title|escape}
+            {if $active != $tid}</a>{/if}
+          </td>
           <td>{$track.artist|escape}</td>
           <td>{$track.album|escape}</td>
           <td style="text-align: center;">{$track.length|escape}</td>
         </tr>
+        {/strip}
         {/foreach}
       </table>
     </div>

--- a/themes/funkymonkey/style.css	Sun Mar 23 14:59:33 2008 -0400
+++ b/themes/funkymonkey/style.css	Sun Mar 23 15:24:06 2008 -0400
@@ -10,6 +10,8 @@
   background-color: #9cb2cd;
   color: #ffffff;
   padding: 0 8px;
+  background-image: url(images/playbar-shadow.gif);
+  background-repeat: repeat-x;
 }
 
 div.tblholder {
@@ -39,6 +41,34 @@
   color: #ffff00;
 }
 
+div#playbar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 32px;
+  padding: 0;
+  margin: 0;
+  background-image: url(images/playbar.gif);
+  background-repeat: repeat-x;
+  background-color: #383f61;
+  border-bottom: 1px solid #000000;
+}
+
+div.playbar-inner {
+  padding: 5px;
+}
+
+a img {
+  border-width: 0;
+}
+
 div#playlist {
-  margin-top: 42px;
+  margin-top: 48px;
 }
+
+a.tracklink {
+  text-decoration: none;
+  color: white;
+}
+