* rdisplay: transmit keywords as data

* skins/jason: recordings show cutpoints
* skins/jason: program list - allow programming multiple timer with 'one' click

16 files changed, 1129 insertions, 250 deletions

diff --git a/skins/deltab/rdisplay.tmpl b/skins/deltab/rdisplay.tmpl
index 21af151..f73e9ae 100644
--- a/skins/deltab/rdisplay.tmpl
+++ b/skins/deltab/rdisplay.tmpl
@@ -191,11 +191,11 @@
 								</td>
 						  </tr>
               <?% allowkeywords = allow('rk') %?>
-              <?% IF param.keywords.size > 0 %?>
+              <?% IF data.keywords && data.keywords.size > 0 %?>
 							<tr>
 								<td colspan="2">
                         <?% gettext('Keywords') %?>&nbsp;:&nbsp;
-		                    <?% FOREACH keyword = param.keywords %?>
+		                    <?% FOREACH keyword = data.keywords %?>
                             <?% IF allowkeywords %?>
                                     <a href="?cmd=rk&amp;data=<?% keyword.0 %?>">
                             <?% END %?>
diff --git a/skins/jason/common.js b/skins/jason/common.js
index 74a5e65..41d6602 100644
--- a/skins/jason/common.js
+++ b/skins/jason/common.js
@@ -339,208 +339,4 @@ Ext.xxv.checkboxes = Ext.extend(Ext.form.Field,  {
 });

 Ext.reg('xxv-checkboxes', Ext.xxv.checkboxes);
 
-/******************************************************************************/
-
-Ext.xxv.slide = function(config){

-    Ext.xxv.slide.superclass.constructor.call(this, config);

-    

-    Ext.apply(this, config);

-        

-};

-

-Ext.extend(Ext.xxv.slide, Ext.Component, {

-

-	baseCls : 'x-slide',

-

-    setSize : Ext.emptyFn,

-    setWidth : Ext.emptyFn,

-    setHeight : Ext.emptyFn,

-    setPosition : Ext.emptyFn,

-    setPagePosition : Ext.emptyFn,

-

-    initComponent : function(){

-        Ext.xxv.slide.superclass.initComponent.call(this);

-

-	    this.addEvents({'selected' : true});

-        if (typeof(this.imageGap)=='undefined') { this.imageGap = 10 }

-        this.tpl = new Ext.Template(
-            '<div class="preview-header">',
-            '<h3 class="preview-title">{title}</h3><div class="preview-channel">{period}</div>',
-            '<h4 class="preview-shorttitle">{subtitle}&nbsp;</h4>',
-            '<div class="preview-date">{day:date} {start} - {stop}</div>',
-            '</div>',

-            '<div class="{cls}-wrap">',

-                '<div id="images-inner" class="{cls}-inner">',

-	                '<div class="{cls}-images-wrap">',

-	                    '<div class="{cls}-images"></div>',

-	                '</div>',

-	            '</div>',

-            '</div>',
-            '<div class="preview-body">{content}</div>'

-        );
-        this.tpl.compile();  

-
-        this.tplimg = new Ext.Template('{day:date} - {start} ({period})');
-        this.tplimg.compile();  

-
-    },

-
-    setvalue : function(data){
-
-                      var Woerter = data.fulltitle.split("~");
-                      this.title = '';
-                      if(Woerter.length >1) {
-                        var i = 0;
-                        for(len = Woerter.length - 1; i < len; i++){
-                          if(this.title.length) {
-                            this.title += '~';
-                          }
-                          this.title += Woerter[i];
-                        }
-                        this.subtitle = Woerter[i];
-                      } else {
-                        this.title = data.fulltitle;
-                        this.subtitle = '';
-                      }
-
-                      this.content = data.description.replace(/\r\n/g, '<br />');
-
-                      this.day     = data.day;
-                      this.start   = data.day.dateFormat('H:i');
-                      this.stop    = new Date(data.day.getTime() + (data.duration * 1000)).dateFormat('H:i');
-                      this.tperiod = new Date(new Date().clearTime().getTime()+(data.duration * 1000));
-                      this.period  = this.tperiod.dateFormat('H:i:s');

-
-                      this.images = [];
-                      var frames = data.preview.split(",");
-                      Ext.each(frames, function(frame){ 
-                        var url = "?cmd=ri&data="+data.id+"_"+frame;
-                        var day = new Date(data.day.getTime() + (frame * 40));
-                        var tperiod = new Date(new Date().clearTime().getTime()+(frame * 40));
-                        this.images.push(
-                          {
-                               src:     url
-                              ,day:     day
-                              ,start:   day.dateFormat('H:i')
-                              ,tperiod: tperiod
-                              ,period:  tperiod.dateFormat('H:i:s')
-                          }
-                        );
-                      },this);
-                    },
-

-    render : function(ct, position){

-

-

-

-
-        var inner= Ext.get("images-inner");
-        if(!inner) {
-          var param = {
-            title: this.title,
-            subtitle: this.subtitle,
-            day: this.day,
-            start: this.start,
-            stop: this.stop,
-            period: this.period,
-            content: this.content,
-            cls: this.baseCls
-          };

-          if(position){

-              this.el = this.tpl.insertBefore(position, param, true);

-          }else{

-              this.el = this.tpl.append(ct, param, true);

-          }

-          if(this.id){

-              this.el.dom.id = this.id;

-          }

-          

-          inner= Ext.get("images-inner");
-        }

-        var imagesWrap = Ext.get(inner.dom.firstChild);
-        this.divImages = Ext.get(imagesWrap.dom.firstChild);

-
-        var size = inner.getSize();
-        this.width = size.width;
-        this.height = size.height;
-

-		inner.setStyle({

-			height:(this.imageHeight + (2*this.wrapMarginY)) + 'px',

-			width:this.width+'px'

-		});

-		

-		var totalImageWidth=this.imageWidth+this.imageGap;

-		var usableWidth=this.width-(this.wrapMarginX*2);

-		var maxPicsOnce=Math.floor(usableWidth/totalImageWidth);

-		var usedWidth=maxPicsOnce*totalImageWidth-this.imageGap;

-		var offsetLeft=Math.floor((usableWidth-usedWidth)/2);

-		this.pageSize=usedWidth+this.imageGap;

-		this.maxPages=Math.round(this.images.length/maxPicsOnce+.04999);

-		this.curPage=0;

-

-		if (!Ext.isIE){

-			offsetLeft+=this.wrapMarginX;

-		}

-		

-		imagesWrap.setStyle({

-			position: 'absolute',

-			clip:'rect(0,'+(usedWidth*1)+','+(this.imageHeight)+',0)',

-			'margin-top':this.wrapMarginY+'px',

-			width:this.width+'px',

-			height:this.imageHeight+'px',

-			'margin-left':offsetLeft+'px'

-		});

-

-		/*this.divImages.setStyle({

-			position: 'absolute'

-		});*/

-

-    Ext.each(this.images, function(image){            

-

-      if (typeof(image)=='string'){

-        image={src:image}

-      }

-      var qtip = this.tplimg.applyTemplate(image);

-

-      thisImage = this.divImages.createChild({tag:"img", src:image.src, 
-      'ext:qtip':qtip,
-       style:{

-       'margin-right': this.imageGap+'px',

-        width:  this.imageWidth+'px'

-//      height: this.imageHeight+'px'            	

-       }
-      });

-

-      thisImage.on("click", function(e, ele){

-        if (!image.onSelected || !(image.onSelected.call(this, image, e, ele )===false)){

-          this.fireEvent('selected', this, image, e, ele);                

-        }

-      },this);

-    },this);

-

-    },

-
-    CanShift: function(direction) {

-  		if (!this.curPage){

-  			this.offsetLeft=this.divImages.getLeft();

-  		}

-  		var newPage=(direction=='right' ? this.curPage+1 : this.curPage-1 );

-      if (newPage<0 || newPage >= this.maxPages){

-		  	return -1;

-		  }
-      return newPage;
-    },

-
-    Shift: function(direction) {
-      var newPage = this.CanShift(direction);
-      if (newPage<0 || newPage >= this.maxPages){

-		  	return;

-		  }

-		  this.curPage=newPage;

-		  var newLocation=(this.pageSize*this.curPage)*-1+this.offsetLeft;

-		  this.divImages.shift({ x:newLocation, duration: this.duration || .7 });

-    }

-});

-

-Ext.reg('slide', Ext.xxv.slide);
 
diff --git a/skins/jason/files.lst b/skins/jason/files.lst
index a4f76a9..595b821 100644
--- a/skins/jason/files.lst
+++ b/skins/jason/files.lst
@@ -5,6 +5,7 @@ ux/DDView.js \
 ux/multiselect.js \
 ux/tabclosemenu.js \
 ux/filter.js \
+ux/Ext.ux.SlideZone.js \
 common.js \
 reader.js \
 help.js \
diff --git a/skins/jason/index.tmpl b/skins/jason/index.tmpl
index 13be842..94b306f 100644
--- a/skins/jason/index.tmpl
+++ b/skins/jason/index.tmpl
@@ -30,9 +30,11 @@
 <body scroll="no">
 <?% IF verbose == 0 %?>
 <div id="loading-mask">
-<div class="ext-el-mask-msg x-mask-loading" id="loading">
+<div class="ext-el-mask-msg" id="loading">
 <div class="loading-indicator"><img src="extjs/resources/images/default/shared/blue-loading.gif" width="32" height="32" style="margin-right:8px;" align="absmiddle"/>
+<span id="loading-text">
 <?% gettext("Please wait ...") %?>
+</span>
 </div>
 </div>
 </div>
diff --git a/skins/jason/jason.css b/skins/jason/jason.css
index 2edeb6b..bdee381 100644
--- a/skins/jason/jason.css
+++ b/skins/jason/jason.css
@@ -323,11 +323,11 @@ margin:10px;
 .x-slide-inner {

 position:relative;

 overflow:hidden;

-margin:5px;
 }
 
 .x-slide-images-wrap {

-position:absolute;
+  position:absolute;
+  padding:10px;
 }
 
 .x-slide-images {

@@ -336,6 +336,43 @@ position:absolute;
 float:left;
 }
 
+#slider {
+  padding-left:16px;
+  padding-right:16px;
+}
+
+.x-slide-zone-horizontal {
+	height: 40px;
+	background-repeat: repeat-x;
+	background-image: url('pic/slider-bg.png');
+	z-index: 1;
+
+}
+
+.x-thumb-slider-horizontal {
+  width:16px;

+  height:24px;

+	top: 5px; 
+  background:transparent url('pic/thumb.png') no-repeat 0 0px;
+	z-index: 10;
+}
+
+.x-range-slider-horizontal {
+	top: 10px;
+	height: 4px;
+	background: url('pic/slider-range.png') repeat-x;
+}
+
+.x-slide-zone-top	{ 
+  position:relative;
+/*	top: 0px;*/
+}
+
+.x-slide-zone-bottom {
+  position:relative;
+	top: 16px
+}
+
 #loading-mask{
 position:absolute;
 left:0;
diff --git a/skins/jason/locale/lang-de.js b/skins/jason/locale/lang-de.js
index 0b5108e..611b700 100644
--- a/skins/jason/locale/lang-de.js
+++ b/skins/jason/locale/lang-de.js
@@ -156,8 +156,9 @@ Ext.xxv.recordingsDataView.prototype.szPlayBackSuccess = "Wiedergabe der Aufnahm
 Ext.xxv.recordingsDataView.prototype.szPlayBackFailure = "Konnte Wiedergabe der Aufnahme nicht starten!\r\n{0}";
 Ext.xxv.recordingsDataView.prototype.szUpgrade = "Aktualisiere Liste der Aufnahmen";
 Ext.xxv.recordingsDataView.prototype.szUpgradeWait = "Bitte warten...";
-Ext.xxv.recordingsDataView.prototype.szUpgradeSuccess = "Liste der Aufnahme erfolgreich aktualisieren!\r\n{0}";
-Ext.xxv.recordingsDataView.prototype.szUpgradeFailure = "Konnte Liste der Aufnahme nicht aktualisieren!\r\n{0}";
+Ext.xxv.recordingsDataView.prototype.szUpgradeSuccess = "Liste der Aufnahmen erfolgreich aktualisieren!\r\n{0}";
+Ext.xxv.recordingsDataView.prototype.szUpgradeFailure = "Konnte Liste der Aufnahmen nicht aktualisieren!\r\n{0}";
+Ext.xxv.recordingsDataView.prototype.szDetailsFailure = "Konnte Details der Aufnahme nicht aktualisieren!\r\n{0}";
 
 Ext.xxv.searchGrid.prototype.szTitle = "Suche";
 Ext.xxv.searchGrid.prototype.szFindReRun = "Suche Wiederholung";
diff --git a/skins/jason/main.js b/skins/jason/main.js
index 8e4a549..f111984 100644
--- a/skins/jason/main.js
+++ b/skins/jason/main.js
@@ -14,14 +14,13 @@ Ext.Component.prototype.stateful = false;
 

 Ext.onReady(function(){

 
-    Ext.BLANK_IMAGE_URL = 'extjs/resources/images/default/s.gif';

+    Ext.BLANK_IMAGE_URL = 'extjs/resources/images/default/s.gif';
     Ext.QuickTips.init();
     Ext.state.Manager.setProvider(new Ext.state.CookieProvider(
         {
            // state: Ext.appState,
            expires: new Date(new Date().getTime()+(1000*3600*24*365))
         }));

-
     Ext.History.init();
 

     var tpl = Ext.Template.from('preview-tpl', {

@@ -95,8 +94,14 @@ Ext.onReady(function(){
     XXV.viewport.doLayout();
 
 	  setTimeout(function(){
-          Ext.get('loading').remove();
-          Ext.get('loading-mask').fadeOut({remove:true});
+          var l = Ext.get('loading'); 
+          if(l) {
+            l.remove();
+          }
+          var m = Ext.get('loading-mask'); 
+          if(m) {
+            m.fadeOut({remove:true});
+          }
     }, 250);
 
 
diff --git a/skins/jason/pic/slider-bg.png b/skins/jason/pic/slider-bg.png
new file mode 100644
index 0000000..c5c71e4
--- /dev/null
+++ b/skins/jason/pic/slider-bg.png
diff --git a/skins/jason/pic/slider-range.png b/skins/jason/pic/slider-range.png
new file mode 100644
index 0000000..407932f
--- /dev/null
+++ b/skins/jason/pic/slider-range.png
diff --git a/skins/jason/pic/thumb.png b/skins/jason/pic/thumb.png
new file mode 100644
index 0000000..092012b
--- /dev/null
+++ b/skins/jason/pic/thumb.png
diff --git a/skins/jason/program.js b/skins/jason/program.js
index db9e670..9c16f62 100644
--- a/skins/jason/program.js
+++ b/skins/jason/program.js
@@ -89,7 +89,7 @@ Ext.xxv.programGrid = function(viewer, record) {
         ,autoExpandColumn:'expand'
         ,cm: cm

         ,sm: new Ext.grid.RowSelectionModel({

-            singleSelect:true

+            singleSelect:false

         })

         ,view: new Ext.grid.GroupingView({

              enableGroupingMenu:false
@@ -152,7 +152,7 @@ Ext.extend(Ext.xxv.programGrid, Ext.grid.GridPanel, {
                     text: this.szRecord,

                     iconCls: 'record-icon',

                     scope:this,

-                    handler: function(){ this.viewer.Record(this.ctxRecord); }
+                    handler: function(){ this.Record(null); }
                     }
                 ]

             });

@@ -193,6 +193,21 @@ Ext.extend(Ext.xxv.programGrid, Ext.grid.GridPanel, {
                 '<div class="topic"><b>{0}</b> <span class="subtitle">{1}</span></div>',

                 value, record.data.subtitle

                 );

+    }
+    ,Record : function( record ) {
+      var gsm = this.getSelectionModel();
+      var sel = gsm.getSelections()
+      if(sel.length <= 0) {
+       gsm.selectRecords([record]);
+       sel.push(record);
+      }
+      var ids = "";
+      for(var i = 0, len = sel.length; i < len; i++){
+        if(i != 0)
+   	      ids += ',';
+	      ids += sel[i].data.id;
+      }
+      this.viewer.RecordID(ids);

     }

 });
 
diff --git a/skins/jason/recordings.js b/skins/jason/recordings.js
index ba7c647..01ff8bc 100644
--- a/skins/jason/recordings.js
+++ b/skins/jason/recordings.js
@@ -6,6 +6,296 @@
  *
  * $Id$
  */
+/******************************************************************************/
+SecondsToHMS = function(t) {
+  return new Date(new Date().clearTime().getTime()+(t * 1000)).dateFormat('H:i:s')
+}
+
+/******************************************************************************/
+HMSToSeconds = function(s) {
+  var seconds;
+  var tt = s.replace(/\..*/g, '');
+  var x = tt.split(":");
+  seconds = parseInt(x.pop());
+  if(x.length > 0) {
+    seconds += ( 60 * parseInt(x.pop()));
+  }
+  if(x.length > 0) {
+    seconds += (3600 * parseInt(x.pop()));
+  }
+  return seconds;
+}
+
+/******************************************************************************/
+Ext.xxv.slide = function(config){

+    Ext.xxv.slide.superclass.constructor.call(this, config);

+    

+    Ext.apply(this, config);

+        

+};

+

+Ext.extend(Ext.xxv.slide, Ext.Component, {

+

+	baseCls : 'x-slide',

+

+    setSize : Ext.emptyFn,

+    setWidth : Ext.emptyFn,

+    setHeight : Ext.emptyFn,

+    setPosition : Ext.emptyFn,

+    setPagePosition : Ext.emptyFn,

+    slider: null,
+

+    initComponent : function(){

+        Ext.xxv.slide.superclass.initComponent.call(this);

+

+	    this.addEvents({'selected' : true});

+        if (typeof(this.imageGap)=='undefined') { this.imageGap = 10 }

+        this.tpl = new Ext.Template(
+            '<div class="preview-header">',
+            '<h3 class="preview-title">{title}</h3>',
+            '<div class="preview-channel">{channel}{period}{cutlength}</div>',
+            '<h4 class="preview-shorttitle">{subtitle}&nbsp;</h4>',
+            '<div class="preview-date">{day:date} {start} - {stop}</div>',
+            '</div>',

+            '<div class="{cls}-wrap">',

+                '<div id="images-inner" class="{cls}-inner">',

+	                '<div class="{cls}-images-wrap">',

+	                    '<div class="{cls}-images"></div>',

+	                '</div>',

+	            '</div>',

+            '</div>',
+            '<div id="slider"><div id="slider-inner"></div></div>',
+            '<div class="preview-body">{content}</div>',
+            '<div class="preview-body">{keywords}</div>'
+        );
+        this.tpl.compile();  

+
+        this.tplimg = new Ext.Template('{day:date} - {start} ({period})');
+        this.tplimg.compile();  

+
+    },

+
+    setvalue : function(data, first){
+
+      this.param = {
+         title:     data.fulltitle
+        ,subtitle:  ''
+        ,channel:   (!data.channel || data.channel.length <= 0) ? null : ( '<b>' + data.channel + '</b> - ' )
+        ,day:       data.day
+        ,duration:  data.duration
+        ,start:     data.day.dateFormat('H:i')
+        ,stop:      new Date(data.day.getTime() + (data.duration * 1000)).dateFormat('H:i')
+        ,content:   data.description.replace(/\r\n/g, '<br />')
+        ,cutlength: data.cutlength == data.duration ? null : (' (' + SecondsToHMS(data.cutlength) +')')
+        ,period:    SecondsToHMS(data.duration)
+        ,marks:     data.marks
+      };
+      if(data.keywords) {
+        var k = new Array();
+        for(var j = 0, len = data.keywords.length; j < len; j++){
+          k.push(data.keywords[j][0]);
+        }
+        this.param.keywords = k.join(', ');
+      }
+
+      var title = data.fulltitle.split("~");
+      if(title.length >1) {
+        this.param.subtitle = title.pop();
+        this.param.title = title.join("~");
+      }
+
+      if(first === true) {
+        var images = [];
+        if(!data.preview || data.preview == '') {
+          /*var day = new Date(data.day.getTime());
+          images.push(
+            {
+                 src:     (data.type == 'RADIO') ? 'pic/radio.png' : 'pic/movie.png'
+                ,day:     day
+                ,start:   day.dateFormat('H:i')
+                ,frame:   0
+                ,period:  SecondsToHMS(0)
+            }
+          );*/
+        } else {
+          var frames = data.preview.split(",");
+          Ext.each(frames, function(frame){ 
+            var url = "?cmd=ri&data="+data.id+"_"+frame;
+            var day = new Date(data.day.getTime() + (frame * 40));
+            images.push(
+              {
+                   src:     url
+                  ,day:     day
+                  ,start:   day.dateFormat('H:i')
+                  ,frame:   frame
+                  ,period:  SecondsToHMS((frame * 40)/1000)
+              }
+            );
+          },this);
+        }
+       this.images = images;
+      }
+    },
+

+    render : function(ct, position){

+
+        var inner= Ext.get("images-inner");
+        if(!inner) {
+          this.param.cls = this.baseCls;
+          if(position){

+              this.el = this.tpl.insertBefore(position, this.param, true);

+          }else{

+              this.el = this.tpl.append(ct, this.param, true);

+          }

+          if(this.id){

+              this.el.dom.id = this.id;

+          }

+          

+          inner= Ext.get("images-inner");
+		  if(this.slider) {
+			delete this.slider;
+			this.slider = null;
+		  }
+        }

+        var imagesWrap = Ext.get(inner.dom.firstChild);
+        this.divImages = Ext.get(imagesWrap.dom.firstChild);

+
+        var size = inner.getSize();
+        this.width = size.width;
+        this.height = size.height;
+

+    		inner.setStyle({

+		    	height:(this.imageHeight + (2*this.wrapMarginY)) + 'px',

+		    	width:(this.width-this.wrapMarginX)+'px'

+		    });

+		

+		    var totalImageWidth=this.imageWidth+this.imageGap;

+		    var usableWidth=this.width-(this.wrapMarginX*2);

+		    var maxPicsOnce=Math.floor(usableWidth/totalImageWidth);

+		    var usedWidth=maxPicsOnce*totalImageWidth-this.imageGap;

+		    var offsetLeft=Math.floor((usableWidth-usedWidth)/2);

+		    this.pageSize=usedWidth+this.imageGap;

+		    this.maxPages=Math.round(this.images.length/maxPicsOnce+.04999);

+		    this.curPage=0;

+

+		    if (!Ext.isIE){

+			    offsetLeft+=this.wrapMarginX;

+		    }

+		

+		    imagesWrap.setStyle({

+			    position: 'absolute',

+			    clip:'rect(0,'+(usedWidth*1)+','+(this.imageHeight)+',0)',

+			    'margin-top':this.wrapMarginY+'px',

+			    width:this.width+'px',

+			    height:this.imageHeight+'px',

+			    'margin-left':offsetLeft+'px'

+		    });

+

+		    /*this.divImages.setStyle({

+			    position: 'absolute'

+		    });*/

+

+        Ext.each(this.images, function(image){            

+

+          if (typeof(image)=='string'){

+            image={src:image}

+          }

+          var qtip = this.tplimg.applyTemplate(image);

+

+          thisImage = this.divImages.createChild({tag:"img", src:image.src, 
+          'ext:qtip':qtip,
+           style:{

+           'margin-right': this.imageGap+'px',

+            width:  this.imageWidth+'px'

+    //      height: this.imageHeight+'px'            	

+           }
+          });

+

+          thisImage.on("click", function(e, ele){

+            if (!image.onSelected || !(image.onSelected.call(this, image, e, ele )===false)){

+              this.fireEvent('selected', this, new Date(new Date().clearTime().getTime()+(image.frame * 40)), e, ele);
+
+              var slider = this.slider.getSlider('cutpoint_thumb');
+              slider.value = image.frame/25;
+              this.slider.initSliderPosition(slider);
+            }

+          },this);

+        },this);

+
+        if(this.slider) {
+          this.slider.sliders.clear();
+        } else {
+
+		    this.slider = new Ext.ux.SlideZone('slider-inner', {  
+			    type: 'horizontal',
+			    size: usableWidth-32,
+          sliderWidth: 16,
+			    sliderHeight: 24,
+			    maxValue: this.param.duration,
+			    minValue: 0,
+			    //sliderSnap: 1,
+			    allowSliderCrossing: true
+			});
+			this.ts = new Ext.ux.ThumbSlider({
+				 value: 0
+				,name: 'cutpoint_thumb'
+				,cls: 'x-slide-zone-bottom'
+				,allowMove: true
+			});
+			this.ts.on('drag',
+				function() {
+					var v = parseInt(this.ts.value * 1000);
+					this.fireEvent('selected', this, new Date((new Date().clearTime().getTime())+v), null, null);
+			},this);
+		}
+
+        if(this.param.marks && this.param.marks.length) {
+			var cutpoint = this.param.marks.split(",");
+			for(var i = 0, len = cutpoint.length; i < len; i += 2){
+				var first = HMSToSeconds(cutpoint[i]);
+				var second;
+				if(i+1 < cutpoint.length) {
+					second = HMSToSeconds(cutpoint[i+1]);
+				} else {
+					second = this.param.duration;
+				}
+				var rs = new Ext.ux.RangeSlider({
+					 value: [first,second]
+					,name: 'cutpoint_'+i
+					,cls: 'x-slide-zone-top'
+					,allowMove: false
+				});
+				this.slider.add(rs);	
+			}
+		}
+		this.slider.add(this.ts);
+    },

+
+    CanShift: function(direction) {

+  		if (!this.curPage){

+  			this.offsetLeft=this.divImages.getLeft();

+  		}

+  		var newPage=(direction=='right' ? this.curPage+1 : this.curPage-1 );

+      if (newPage<0 || newPage >= this.maxPages){

+		  	return -1;

+		  }
+      return newPage;
+    },

+
+    Shift: function(direction) {
+      var newPage = this.CanShift(direction);
+      if (newPage<0 || newPage >= this.maxPages){

+		  	return;

+		  }

+		  this.curPage=newPage;

+		  var newLocation=(this.pageSize*this.curPage)*-1+this.offsetLeft;

+		  this.divImages.shift({ x:newLocation, duration: this.duration || .7 });

+    }

+});

+

+Ext.reg('slide', Ext.xxv.slide);
+
+/******************************************************************************/
 
 Ext.DataView.LabelEditor = function(cfg, field){

     Ext.DataView.LabelEditor.superclass.constructor.call(this,

@@ -57,6 +347,8 @@ Ext.extend(Ext.DataView.LabelEditor, Ext.Editor, {
     }

 });
 
+/******************************************************************************/
+
 Ext.DataView.DragSelector = function(cfg){

     cfg = cfg || {};

     var view, regions, proxy, tracker;

@@ -141,7 +433,9 @@ Ext.DataView.DragSelector = function(cfg){
     }

 };
 
-RecordingsStore = function() {
+/******************************************************************************/
+
+Ext.xxv.recordingsStore = function() {
 
     // create the data store
     return new Ext.data.Store({
@@ -163,6 +457,12 @@ RecordingsStore = function() {
                       ,{name: 'description', type: 'string'}
                       ,{name: 'preview', type: 'string'}
                       ,{name: 'cutlength', type: 'int'}
+                      //*** filled later by rdisplay ***
+                      ,{name: 'channel', type: 'string'}
+                      ,{name: 'marks', type: 'string'}
+                      ,{name: 'lifetime', type: 'int'}
+                      ,{name: 'priority', type: 'int'}
+                      ,{name: 'keywords', type: 'string'}
                     ]
                 })
             ,proxy : new Ext.data.HttpProxy({

@@ -183,7 +483,7 @@ Ext.xxv.recordingsDataView = function(viewer, preview, store, config) {
         '<div class="thumb-wrap" id="{id}">',

 		    '<div class="thumb">',
         '<tpl if="isrecording == 0">',
-            '<img src="pic/folder.png" ext:qtitle="{shortTitle}" />',
+            '<img src="pic/folder.png"<tpl if="group != 0"> ext:qtitle="{shortTitle}" ext:qtip="{group} recordings ({period})"</tpl>/>',
         '</tpl>',
         '<tpl if="isrecording != 0">',
         '<tpl if="this.isRadio(type)">',
@@ -250,7 +550,7 @@ Ext.xxv.recordingsDataView = function(viewer, preview, store, config) {
                       data.shortDesc = Ext.util.Format.ellipsis(data.description, 50).replace(/\"/g,'\'');
                       data.start = data.day.dateFormat('H:i');
                       data.stop =  new Date(data.day.getTime() + (data.duration * 1000)).dateFormat('H:i');
-                      data.period =  new Date((new Date(2000,1,1,0,0,0).getTime())+(data.duration * 1000)).dateFormat('H:i:s');

+                      data.period =  SecondsToHMS(data.duration);

                       var frames = data.preview.split(",");
                       if(data.preview.length && frames.length) {
                         var item = (frames.length) / 2;

@@ -304,11 +604,14 @@ Ext.extend(Ext.xxv.recordingsDataView,  Ext.DataView, {
     ,szUpgradeWait    : "Please wait..."
     ,szUpgradeSuccess : "List of recordings update successful.\r\n{0}"
     ,szUpgradeFailure : "Couldn't update list of recordings!\r\n{0}"
+	,szDetailsFailure : "Couldn't update details of recording!\r\n{0}"
 
     ,onLoadException :  function( scope, o, arg, e) {
 	    new Ext.xxv.MessageBox().msgFailure(this.szLoadException, e);
     }
     ,onBeforeLoad :  function( scope, params ) {
+      if(this.DetailsTransaction) 
+        Ext.Ajax.abort(this.DetailsTransaction);
 	    this.preview.clear();
     }
     ,onLoad :  function( store, records, opt ) {
@@ -371,13 +674,8 @@ Ext.extend(Ext.xxv.recordingsDataView,  Ext.DataView, {
                     this.filter.field.setValue('');
                   }
                   var Woerter = this.store.lastOptions.params.data.split("~");
-                  var title = '';
-                  for(var i = 0, len = Woerter.length - 1; i < len; i++){
-                    if(title.length) {
-                      title += '~';
-                    }
-                    title += Woerter[i];
-                  }
+                  Woerter.pop();
+                  var title = Woerter.join('~');
                   if(title != '') {
                     this.store.title = title;

                     this.store.baseParams.data = title;

@@ -403,8 +701,87 @@ Ext.extend(Ext.xxv.recordingsDataView,  Ext.DataView, {
     },
 	  showDetails : function(record){

         this.preview.content(record);
+        this.DetailsItem(record);
 	  }, 
 /******************************************************************************/
+    onDetailsSuccess : function( response,options ) 
+    { 
+        var o = eval("("+response.responseText+")");

+
+        if(o && o.data && typeof(o.data) == 'object' 
+             && o.param) {
+
+            var RecordingsID = options.params.data.split(",");
+            for(var j = 0, len = RecordingsID.length; j < len; j++){
+              var iSel = this.store.indexOfId(RecordingsID[j]);
+              if(iSel === -1 
+                || this.store.data.items[iSel].id != o.data.RecordId)
+                continue;
+
+              this.store.data.items[iSel].data.channel  = o.data.Channel;
+              this.store.data.items[iSel].data.marks    = o.data.Marks;
+              this.store.data.items[iSel].data.lifetime = parseInt(o.data.lifetime);
+              this.store.data.items[iSel].data.priority = parseInt(o.data.priority);
+              this.store.data.items[iSel].data.keywords = o.data.keywords;
+
+              var record = this.store.getById(RecordingsID[j]);
+              this.preview.update(record);
+            }
+
+        } else {
+            var msg = '';
+            if(o && o.data && typeof(o.data) == 'string') {
+              msg = o.data;
+            }
+            new Ext.xxv.MessageBox().msgFailure(this.szDetailsFailure, msg);
+        }
+    },
+
+    onDetailsFailure : function( response,options ) 
+    { 
+        new Ext.xxv.MessageBox().msgFailure(this.szDetailsFailure, response.statusText);
+    },
+
+    DetailsItem : function(record) {
+      if(record.data.priority 
+      || record.data.id == 'up') {
+        return;
+      }
+      var toDetails = '';
+      if(record && record.data) {
+        toDetails = record.data.id;
+      } else {
+	      var selNode = this.getSelectedNodes();

+		    if(selNode && selNode.length > 0){

+          for(var i = 0, len = selNode.length; i < len; i++){
+            if(selNode[i].id == 'up')
+              continue;
+            if(toDetails.length) {
+              toDetails += ',';
+            }
+            var record = this.store.getById(selNode[i].id);
+            if(record.data.isrecording == 0) {
+              //toDetails += 'all:';
+              continue;
+            }
+            toDetails += record.data.id;
+          }
+        }
+      }
+      if(toDetails.length) {
+      if(this.DetailsTransaction) 
+        Ext.Ajax.abort(this.DetailsTransaction);
+      this.DetailsTransaction = Ext.Ajax.request({
+            scope: this
+           ,url: XXV.help.cmdAJAX('rd')
+           ,timeout: 15000
+           ,success: this.onDetailsSuccess
+           ,failure: this.onDetailsFailure
+           ,params:{ data: toDetails }
+        });
+      }
+    },  
+/******************************************************************************/
     onContextClick : function(grid, index, node, e){

         if(!this.menu){ // create context menu on first right click

             this.menu = new Ext.menu.Menu({

@@ -570,12 +947,12 @@ Ext.extend(Ext.xxv.recordingsDataView,  Ext.DataView, {
 
             new Ext.xxv.MessageBox().msgSuccess(this.szDeleteSuccess, o.data);
 
-            var Woerter = options.params.data.split(",");
+            var RecordingsID = options.params.data.split(",");
             var selRecord;
             var iSel = 0;
 
-            for(var j = 0, len = Woerter.length; j < len; j++){
-              var record = this.store.getById(Woerter[j].replace(/all:/g, ''));
+            for(var j = 0, len = RecordingsID.length; j < len; j++){
+              var record = this.store.getById(RecordingsID[j].replace(/all:/g, ''));
               if(!record)
                 continue;
               iSel = this.store.indexOf(record) - 1;
@@ -804,13 +1181,13 @@ function createRecordingsView(viewer,id) {
               id: 'preview-recordings-frame',

 	            xtype:'slide',
 	            wrapMarginY:0,

-	            wrapMarginX:3,

+	            wrapMarginX:0,

 	            imageHeight:120, 

 	            imageWidth:160, 
       		    autoWidth: true,
               listeners:{

-                selected: function(slide, image, e, ele){
-                  this.ownerCt.timefield.setValue(image.tperiod);
+                selected: function(slide, time, e, ele){
+                  this.ownerCt.timefield.setValue(time);
                 }             	

               },

 	            images:[]

@@ -888,8 +1265,8 @@ function createRecordingsView(viewer,id) {
               this.gridRecordings.preview.canshift();
             }

         }
-        ],
-	      canshift : function(){
+        ]
+	      ,canshift : function(){
               var items = this.topToolbar.items;

               if(items) { 
                 if(this.items.items[0].CanShift('right') != -1) {
@@ -903,15 +1280,15 @@ function createRecordingsView(viewer,id) {
                   items.get('recordings-shift-left').disable();
                 }
               }
-        },
-	      content : function(record){

+        }
+	      ,content : function(record){

 
             if(record && this.record != record
                 && record.data.isrecording 
                 && this.body 
                 && this.ownerCt.isVisible()) {
                   this.body.update('');
-                  this.items.items[0].setvalue(record.data);
+                  this.items.items[0].setvalue(record.data,true);
                   this.doLayout();
                   this.record = record;
 
@@ -927,9 +1304,19 @@ function createRecordingsView(viewer,id) {
                   }
                   this.canshift();
                 }
-
-	      }, 

-        clear: function(){
+	      } 
+        ,update : function(record) {
+            if(record
+                && record.data.isrecording 
+                && this.body 
+                && this.ownerCt.isVisible()) {
+                  this.body.update('');
+                  this.items.items[0].setvalue(record.data,false);
+                  this.doLayout();
+                  this.record = record;
+            }
+        }

+        ,clear: function(){
             if(this) {

               if(this.body)
                 this.body.update('');
@@ -947,7 +1334,7 @@ function createRecordingsView(viewer,id) {
     viewer.gridRecordings = new Ext.xxv.recordingsDataView(
                             viewer,
                             preview,
-                            new RecordingsStore(),
+                            new Ext.xxv.recordingsStore(),
                             { id: 'recording-view-grid' });
 
     var tab = new Ext.xxv.Panel({

diff --git a/skins/jason/search.js b/skins/jason/search.js
index d46b65e..cf355f7 100644
--- a/skins/jason/search.js
+++ b/skins/jason/search.js
@@ -190,8 +190,6 @@ Ext.extend(Ext.xxv.searchGrid, Ext.grid.GridPanel, {
                 );

     }
     ,Record : function( record ) {
-      this.stopEditing();

-
       var gsm = this.getSelectionModel();
       var sel = gsm.getSelections()
       if(sel.length <= 0) {
@@ -218,14 +216,14 @@ Ext.xxv.searchPreview = function(viewer) {
         stateful:true,
         tbar: [ {

             id:'s',

-            text: this.szFindReRun,

+            tooltip: this.szFindReRun,

             iconCls: 'find-icon',

             disabled:true,

             scope: viewer,

             handler: function(){ this.searchTab(this.gridSearch.getSelectionModel().getSelected()); }

         } ,{

             id:'tn',

-            text: this.szRecord,

+            tooltip: this.szRecord,

             iconCls: 'record-icon',

             disabled:true,

             scope: viewer,

diff --git a/skins/jason/ux/Ext.ux.SlideZone.js b/skins/jason/ux/Ext.ux.SlideZone.js
new file mode 100644
index 0000000..df657dc
--- /dev/null
+++ b/skins/jason/ux/Ext.ux.SlideZone.js
@@ -0,0 +1,637 @@
+/**
+ * Class Ext.ux.SlideZone
+ * @author Jared Gisin
+ * @version $Id: Ext.ux.SlideZone.js 93 2007-12-12 04:41:40Z jaredgisin $
+ * @license http://www.opensource.org/licenses/mit-license.php
+ * 
+ * TODO: make sure slider limits work when snap = 1 or snap < slider width/height
+ * TODO: API to dynamically modify the snap 
+ * TODO: zone with slider zone responds to click and keypress
+ * TODO: API to programatically set slider value with animation
+ *
+ */
+
+Ext.ux.SlideZone = function(id, config) {
+	if(id) {
+		Ext.apply(this, config); 
+		this.init(id, config || {}); 
+	} else {
+		return false;
+	}
+} 
+
+Ext.extend(Ext.ux.SlideZone, Ext.BoxComponent, {
+	size: 100,
+	sliderSnap: [0],
+	type: 'horizontal',
+	sliderWidth: 20,
+	sliderHeight: 20,
+	cls: null,
+	minValue: 0,
+	maxValue: 100,
+	allowSliderCrossing: true,
+	value: null,
+	  
+	init: function(id, config) { 
+		this.size = this.size instanceof Array ? this.size : [this.size];
+		this.minValue = this.minValue instanceof Array ? this.minValue : [this.minValue];
+		this.maxValue = this.maxValue instanceof Array ? this.maxValue : [this.maxValue];
+		this.sliderSnap = this.sliderSnap instanceof Array ? this.sliderSnap : [this.sliderSnap];
+
+		this.el = Ext.DomHelper.append(Ext.get(id),  { tag: 'div', 
+						id: Ext.id(), 
+						style: 'position: relative; '
+						 }, true);
+		this.el.addClass('x-slide-zone-' + this.type);
+		this.el.addClass(this.cls);
+		
+		switch(this.type) {
+			case 'horizontal':
+				this.sliderSize = [this.sliderWidth];
+				this.el.applyStyles({width:this.size[0] + 'px'});
+				this.el.lowLimit = [this.el.getX()];
+				this.el.highLimit = [this.el.getRight()];
+				break;
+							
+			case 'vertical':
+				this.sliderSize = [this.sliderHeight]
+				this.el.applyStyles({height:this.size[0] + 'px'});
+				this.el.lowLimit = [this.el.getY()];
+				this.el.highLimit = [this.el.getBottom()];
+				break;
+							
+			case 'area':
+				this.sliderSize = [this.sliderWidth, this.sliderHeight];
+				this.el.applyStyles({width:this.size[0] + 'px'});
+				this.el.applyStyles({height:this.size[1] + 'px'});
+				this.el.lowLimit = this.el.getXY();
+				this.el.highLimit = [this.el.getRight(), this.el.getBottom()];
+				break
+		}
+
+		//normalize width/height for slider centering calculations
+		var l = this.sliderSize.length;
+		for(var i = 0; i < l; i++) {
+			this.sliderSize[i] = this.sliderSize[i] % 2 ? this.sliderSize[i] + 1: this.sliderSize[i] 
+		}
+
+
+		var s = this.sliders;
+	    this.sliders = new Ext.util.MixedCollection();
+	    if(s){
+	        this.add.apply(this, s);
+	    }
+
+	},
+	
+	add: function(){
+		var a = arguments, l = a.length
+		for(var i = 0; i < l; i++){
+			var el = a[i];
+			if (el instanceof Ext.ux.Slider) {
+				this.initSlider(el);
+				this.sliders.add(el)
+			} else if (typeof el == 'object') {
+				//initalize new slider and add to the items list
+				var s = new Ext.ux.ThumbSlider(el);
+				this.initSlider(s);
+				this.sliders.add(s)
+			}
+		}
+		this.updateValues();
+		this.updateConstraints();
+ 	},
+	
+	enableCrossing: function() {
+		this.allowSliderCrossing = true;
+		this.updateConstraints();
+	},
+	
+	disableCrossing: function() {
+		this.allowSliderCrossing = false;
+		this.updateConstraints();		
+	},
+	
+	getSlider: function(selector) {
+		/* Given a slider index or name, returns a slider object
+		 * @selector   slider index|name
+		 */
+		switch (typeof selector)  {
+			case 'number':
+				return this.sliders.items[selector];
+				break;
+				
+			case 'string':
+				var l = this.sliders.length;
+				for(var i = 0; i < l; i++){
+					if(this.sliders.items[i].name ==  selector) return this.sliders.items[i];
+				}
+				break;
+		}
+	},
+
+
+	updateConstraints: function() {
+		if(!this.allowSliderCrossing && this.sliders.length > 1 && this.type != 'area') {
+			// multiple sliders exists and sliders can't cross,
+			// so we have to take into account the
+			// positions of all sliders
+			sortFN = function(a,b){
+				var v1 = a.value instanceof Array ? a.value[0] : a.value;
+				var v2 = b.value instanceof Array ? b.value[0] : b.value;
+	            return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);
+			}
+			this.sliders.sort('asc',sortFN);//put in order by their value
+			
+			var l = this.sliders.length; 
+			for (var i=0; i< l; i++) { //forloop required, as we have to get -1 and +1 slider positions
+				var leftTravel = 0, rightTravel = 0;
+				var sliderL = this.sliders.get(i-1);
+				var slider = this.sliders.get(i);
+				var sliderR = this.sliders.get(i+1);
+
+				
+				if (sliderL && sliderR) {
+					if (sliderL instanceof Ext.ux.ThumbSlider) {
+						var leftTravel = slider.getTL()[0] - sliderL.getTL()[0] - this.sliderSnap[0];
+					}
+					if (sliderL instanceof Ext.ux.RangeSlider) {
+						var leftTravel = slider.getTL()[0] - sliderL.getBR()[0] - this.sliderSnap[0];					
+					}
+					if (sliderR instanceof Ext.ux.ThumbSlider) {
+						var rightTravel = sliderR.getTL()[0] - slider.getTL()[0] - this.sliderSnap[0];	
+					}
+					if (sliderR instanceof Ext.ux.RangeSlider) {
+						var rightTravel = sliderR.getTL()[0] - slider.getBR()[0] - this.sliderSnap[0] ;							
+					}
+				} else if(sliderL) {
+					if (sliderL instanceof Ext.ux.ThumbSlider) {
+						var rightTravel = this.el.highLimit[0] - slider.getTL()[0] - ( 0.5 * this.sliderSize[0]) ;	
+						var leftTravel = slider.getTL()[0] - sliderL.getTL()[0] - this.sliderSnap[0];
+					}
+					if (sliderL instanceof Ext.ux.RangeSlider) {
+						var rightTravel = this.el.highLimit[0] - slider.getBR()[0];	
+						var leftTravel = slider.getTL()[0] - sliderL.getBR()[0] - this.sliderSnap[0];
+					}
+				} else if(sliderR) {
+					if (sliderR instanceof Ext.ux.ThumbSlider) {
+						var leftTravel = slider.getTL()[0] - this.el.lowLimit[0] + ( 0.5 * this.sliderSize[0]);
+						var rightTravel = sliderR.getTL()[0] - slider.getTL()[0] - this.sliderSnap[0] ;
+					}
+					if (sliderR instanceof Ext.ux.RangeSlider) {
+						var leftTravel = slider.getTL()[0] - this.el.lowLimit[0];
+						var rightTravel = sliderR.getTL()[0] - slider.getBR()[0] - this.sliderSnap[0] ;					
+					}
+				}
+				if(slider instanceof Ext.ux.RangeSlider) {
+					slider.resizable.leftTravel = [leftTravel];
+					slider.resizable.rightTravel = [rightTravel];
+				}
+				slider.setConstraint([leftTravel], [rightTravel], this.sliderSnap);
+			}
+		} else {
+			var l = this.sliders.length;
+			for (var i=0; i< l; i++) {
+				var slider = this.sliders.get(i);
+				if (slider instanceof Ext.ux.ThumbSlider ) {
+					slider.setConstraint([slider.getTL()[0]-this.el.lowLimit[0]  + ( 1/2 * this.sliderSize[0]),
+										  slider.getTL()[1]-this.el.lowLimit[1]  + ( 1/2 * this.sliderSize[1])], 
+								[this.el.highLimit[0]- (slider.getTL()[0] + this.sliderSize[0]) + ( 1/2 * this.sliderSize[0]),
+								 this.el.highLimit[1]- (slider.getTL()[1] + this.sliderSize[1]) + ( 1/2 * this.sliderSize[1]) ],
+								this.sliderSnap)
+				}
+				if (slider instanceof Ext.ux.RangeSlider) {
+					slider.setConstraint([slider.getTL()[0] - this.el.lowLimit[0],
+										  slider.getTL()[1] - this.el.lowLimit[1]], 
+								[this.el.highLimit[0] - slider.getBR()[0],
+								 this.el.highLimit[1] - slider.getBR()[1] ],
+								this.sliderSnap)				
+				}
+			}
+		}
+	},
+	
+	updateValues: function() {
+		var that = this;
+		var vals = {};
+		this.sliders.each(function(i) {
+
+			if(this.type == 'area') {
+				if (i instanceof Ext.ux.ThumbSlider) {
+					i.value = [(i.getTL()[0] + 1/2 * that.sliderSize[0] - that.el.lowLimit[0]) / (that.size[0]) * (that.maxValue[0] - that.minValue[0]) + that.minValue[0],
+							   (i.getTL()[1] + 1/2 * that.sliderSize[1] - that.el.lowLimit[1]) / (that.size[1]) * (that.maxValue[1] - that.minValue[1]) + that.minValue[1]];
+					i.percent = [parseFloat((i.getTL()[0]  + 1/2 * that.sliderSize[0] - that.el.lowLimit[0]) / (that.size[0]) * 100),
+								 parseFloat((i.getTL()[1]  + 1/2 * that.sliderSize[1] - that.el.lowLimit[1]) / (that.size[1]) * 100)];
+				} 
+				if (i instanceof Ext.ux.RangeSlider) {
+					i.value = [[
+								(i.getTL()[0] - that.el.lowLimit[0]) / (that.size[0]) * (that.maxValue[0] - that.minValue[0]) + that.minValue[0],
+							    (i.getBR()[0] - that.el.lowLimit[0]) / (that.size[0]) * (that.maxValue[0] - that.minValue[0]) + that.minValue[0]
+
+
+							   ],[
+								(i.getTL()[1]  - that.el.lowLimit[1]) / (that.size[1]) * (that.maxValue[1] - that.minValue[1]) + that.minValue[1],
+							    (i.getBR()[1]  - that.el.lowLimit[1]) / (that.size[1]) * (that.maxValue[1] - that.minValue[1]) + that.minValue[1]
+							   ]];
+					i.percent = [[
+								  parseFloat((i.getTL()[0] - that.el.lowLimit[0]) / (that.size[0]) * 100).toFixed(2),
+								  parseFloat((i.getBR()[0] - that.el.lowLimit[0]) / (that.size[0]) * 100).toFixed(2)
+								],[
+								  parseFloat((i.getTL()[1] - that.el.lowLimit[1]) / (that.size[1]) * 100).toFixed(2),
+								  parseFloat((i.getBR()[1] - that.el.lowLimit[1]) / (that.size[1]) * 100).toFixed(2)
+								 ]];
+				}
+			} else {
+				if (i instanceof Ext.ux.ThumbSlider) {
+					i.value = (i.getTL()[0] + 1/2 * that.sliderSize[0] - that.el.lowLimit[0]) / (that.size[0]) * (that.maxValue[0] - that.minValue[0]) + that.minValue[0];
+					i.percent = parseFloat((i.getTL()[0]  + 1/2 * that.sliderSize[0] - that.el.lowLimit[0]) / (that.size[0]) * 100);
+				} 
+				if (i instanceof Ext.ux.RangeSlider) {
+					i.value =  [(i.getTL()[0]  - that.el.lowLimit[0]) / (that.size[0]) * (that.maxValue[0] - that.minValue[0]) + that.minValue[0],
+							   (i.getBR()[0] - that.el.lowLimit[0]) / (that.size[0]) * (that.maxValue[0] - that.minValue[0]) + that.minValue[0]];
+					i.percent = [  parseFloat((i.getTL()[0]  - that.el.lowLimit[0]) / (that.size[0]) * 100),
+								   parseFloat((i.getBR()[0] - that.el.lowLimit[0]) / (that.size[0]) * 100)];	
+				}
+			}
+			vals[this.name] = this.value;
+		});
+
+		this.value = vals;
+	},
+	
+	initSliderPosition: function(slider) {
+		/* Sets a sliders's initial position within the slide zone.
+		 * If slideZone has a sliderSnap set, the slider 
+		 * is positioned at a multiple of the sliderSnap value that is
+		 * closest where the slider's value would otherwise position it.
+		 * After positioning, the slider's actual value will be modified
+		 * in Ext.ux.SlideZone.updateValues()
+		 * to jibe with the actual position in the slide zone given the 
+		 * sliderSnap constraint.
+		 */
+		var initialPosition = [0,0];
+		slider.repositionDelta = [0,0];
+		var l = this.type == 'area' ? 2 : 1;
+		for(var i=0; i < l; i++ ) {
+			/* Make sure initial value is in slider bar range, 
+			   if it's outside, set to closest limit.
+			   The slider value is modified if it's out of range. */
+			if(slider.value instanceof Array) {
+				if (slider instanceof Ext.ux.ThumbSlider) {
+
+					slider.value[i] = Number(slider.value[i]).constrain(this.minValue[i], this.maxValue[i]);
+					initialPosition[i] = parseInt((slider.value[i] - this.minValue[i]) / (this.maxValue[i] - this.minValue[i]) * this.size[i] + this.el.lowLimit[i]);
+				}
+				if (slider instanceof Ext.ux.RangeSlider) {
+					switch (this.type) {
+						case 'horizontal':
+						case 'vertical':
+							slider.value[i] = Number(slider.value[i]).constrain(this.minValue[i], this.maxValue[i]);
+							initialPosition[i] = parseInt((slider.value[i] - this.minValue[i]) / (this.maxValue[i] - this.minValue[i]) * this.size[i] + this.el.lowLimit[i]);
+							break;
+						
+						case 'area':
+							slider.value[i][0] = Number(slider.value[i][0]).constrain(this.minValue[i], this.maxValue[i]);
+							slider.value[i][1] = Number(slider.value[i][1]).constrain(this.minValue[i], this.maxValue[i]);
+							
+							initialPosition[i] = parseInt((slider.value[i][0] - this.minValue[i]) / (this.maxValue[i] - this.minValue[i]) * this.size[i] + this.el.lowLimit[i]);
+
+							break;
+					}
+				}
+			} else {
+				slider.value = Number(slider.value).constrain(this.minValue[i], this.maxValue[i]);
+				initialPosition[i] = parseInt((slider.value - this.minValue[i]) / (this.maxValue[i] - this.minValue[i]) * this.size[i] + this.el.lowLimit[i]);
+			}
+			
+			/* Calculate slider value versus closest snap-to location,
+			   and calculate an offset value to apply when positioning it. */
+			if (this.sliderSnap[i] > 1) {
+				var positionToSnapDiff = [0,0];
+				positionToSnapDiff[i] = (initialPosition[i] - this.el.lowLimit[i]) % this.sliderSnap[i];
+				if (positionToSnapDiff[i]) {
+					if(positionToSnapDiff[i] < 1/2 * this.sliderSnap[i]) {
+						slider.repositionDelta[i] = -positionToSnapDiff[i];
+					} else {
+						slider.repositionDelta[i] = this.sliderSnap[i] - positionToSnapDiff[i];
+					} 
+				}
+			} 
+		}
+
+		if (slider instanceof Ext.ux.ThumbSlider) {
+			slider.setPosition([initialPosition[0] + slider.repositionDelta[0] - (0.5 * this.sliderSize[0]),
+								initialPosition[1] + slider.repositionDelta[1] - (0.5 * this.sliderSize[1])]);
+		}
+		if (slider instanceof Ext.ux.RangeSlider) {
+
+			slider.setPosition([initialPosition[0] + slider.repositionDelta[0],
+								initialPosition[1] + slider.repositionDelta[1]]);
+		}
+	},
+	
+	initSlider: function(slider) {		
+		slider.init(this);
+		this.initSliderPosition(slider);
+	} 
+
+});  
+
+
+Ext.ux.Slider = function(config) {
+
+	Ext.apply(this, config);
+	
+	this.addEvents( {
+		"dragstart" : true,
+		"dragend" : true,
+		"drag" : true,
+		"mouseover":true, 
+		"mouseout":true
+	});	
+}
+
+Ext.extend(Ext.ux.Slider, Ext.BoxComponent, {
+	value: 0,
+	ddEl: null,
+	name: null,
+	cls: null,
+	allowMove:true,
+
+	init: function() {
+		//Do nothing
+	},
+
+	getTL: function() {
+		switch(this.type) {
+			case 'horizontal':
+				return [this.el.getX()];
+				break;
+				
+			case 'vertical':
+				return [this.el.getY()];
+				break;
+				
+			case 'area':
+				return this.el.getXY();
+				break;
+		}
+	},
+	
+	getBR: function() {
+		switch(this.type) {
+			case 'horizontal':
+				return [this.el.getRight()];
+				break;
+				
+			case 'vertical':
+				return [this.el.getBottom()];
+				break;
+				
+			case 'area':
+				return [this.el.getRight(), this.el.getBottom()];
+				break;
+		}
+		
+	},
+	
+	setPosition: function(position) {
+		var l = position.length;
+		for (i=0; i<l; i++) {
+			position[i] = parseInt(position[i]);
+		}
+
+		switch(this.type) {
+			case 'horizontal':
+				this.el.setX(position[0]);
+				break;
+				
+			case 'vertical':
+				this.el.setY(position[0]);
+				break;
+				
+			case 'area':
+				this.el.setX(position[0]);
+				this.el.setY(position[1]);
+				break;
+		}		
+	},
+	
+	setConstraint: function(low, high, snap) {
+    if(this.allowMove) {
+		  var l = low.length;
+		  for (i=0; i<l; i++) {
+			  low[i] = parseInt(low[i] = low[i] < 0 ? 0 : low[i]);
+			  high[i] = parseInt(high[i] = high[i] < 0 ? 0 : high[i]);				
+		  }
+
+
+		  switch(this.type) {
+			  case 'horizontal':
+				  this.ddEl.setXConstraint(low[0], high[0], snap[0]);
+				  this.ddEl.setYConstraint(0, 0);
+				  break;
+				
+			  case 'vertical':
+				  this.ddEl.clearConstraints();
+				  this.ddEl.setXConstraint(0, 0);
+				  this.ddEl.setYConstraint(low[0], high[0], snap[0]);
+				  break;
+				
+			  case 'area':
+				  this.ddEl.setXConstraint(low[0], high[0], snap[0]);
+				  this.ddEl.setYConstraint(low[1], high[1], snap[1]);
+				  break;
+		  }		
+		  this.ddEl.resetConstraints(true);
+    }
+	}
+	
+
+});
+
+Ext.ux.ThumbSlider = function(config) { 
+	Ext.ux.ThumbSlider.superclass.constructor.call(this, config);	
+};
+
+
+Ext.ux.RangeSlider = function(config) {
+	Ext.ux.RangeSlider.superclass.constructor.call(this, config);	
+};
+
+Ext.extend(Ext.ux.ThumbSlider, Ext.ux.Slider, {
+	//init must be passed an instance of a SliderZon e
+	init: function(parentSlideZone) {
+		this.type = parentSlideZone.type;
+
+		this.pointer = 'move';
+		
+		this.el = Ext.DomHelper.append(parentSlideZone.el,  { 
+						tag: 'div', 
+						id: Ext.id(),
+						style: 'position:absolute;'+
+								'overflow: hidden;'
+								}, true);
+		this.el.addClass('x-thumb-slider-' + this.type);
+		this.el.addClass(parentSlideZone.cls);
+    if(this.allowMove) {
+		  this.ddEl = new Ext.dd.DD(this.el); 
+
+		  var sliderInstance = this;
+		  var slideZoneInstance = parentSlideZone;
+
+		  this.el.on('mouseover', function() {
+			  sliderInstance.fireEvent('mouseover', sliderInstance);
+			  sliderInstance.el.setStyle('cursor', sliderInstance.pointer); 
+		  }); 
+		  this.el.on('mouseout', function() { 
+			  sliderInstance.fireEvent('mouseout', sliderInstance);
+			  sliderInstance.el.setStyle('cursor', 'default'); 
+		  }); 
+		  this.ddEl.onMouseDown = function(x, y) { 
+			  sliderInstance.fireEvent('dragstart', sliderInstance);
+		  }; 
+		  this.ddEl.onMouseUp = function(x, y) { 
+			  slideZoneInstance.updateConstraints();
+			  slideZoneInstance.updateValues();
+			  sliderInstance.fireEvent('dragend', sliderInstance)
+		  }; 
+		  this.ddEl.onDrag = function(e) { 
+			  slideZoneInstance.updateValues();
+			  sliderInstance.fireEvent('drag', sliderInstance);
+		  }; 
+    }
+		Ext.ux.ThumbSlider.superclass.init.call(parentSlideZone);
+	}
+});
+
+Ext.extend(Ext.ux.RangeSlider, Ext.ux.Slider, {
+	init: function(parentSlideZone) {
+		this.type = parentSlideZone.type;
+
+		this.pointer = this.type == 'horizontal' ? 'w-resize' : this.type == 'vertical' ? 'n-resize' : 'move';
+		
+		var el = Ext.DomHelper.append(parentSlideZone.el,  { 
+						tag: 'div', 
+						id: Ext.id(),
+						style: 'position:absolute;'+
+								'overflow: hidden;'
+								}, true);
+
+		//this.el.addClass(parentSlideZone.cls);
+		switch(this.type) {
+			case 'horizontal':
+				var w = Math.abs(this.value[0] - this.value[1]) / (parentSlideZone.maxValue - parentSlideZone.minValue) * parentSlideZone.size;
+				var h = parentSlideZone.sliderHeight;
+				var handles = 'e,w';
+				this.pointer = 'w-resize';
+				break;
+				
+			case 'vertical':
+				var w = parentSlideZone.sliderWidth;
+				var h = Math.abs(this.value[0] - this.value[1]) / (parentSlideZone.maxValue - parentSlideZone.minValue) * parentSlideZone.size;
+				var handles = 'n,s';
+				this.pointer = 'n-resize';
+				break;
+				
+			case 'area':
+				var w = Math.abs(this.value[0][0] - this.value[0][1]) / (parentSlideZone.maxValue[0] - parentSlideZone.minValue[0]) * parentSlideZone.size[0];
+				var h = Math.abs(this.value[1][0] - this.value[1][1]) / (parentSlideZone.maxValue[1] - parentSlideZone.minValue[1]) * parentSlideZone.size[1];
+				var handles = 'all';
+				this.pointer = 'move';
+				break;
+		}
+
+		this.resizable = new Ext.Resizable(el, {
+			wrap:false,
+			pinned:this.allowMove, 
+			width: w,
+			height: h,
+			minWidth: 20,
+			widthIncrement: parentSlideZone.sliderSnap[0],
+			heightIncrement: parentSlideZone.sliderSnap[1],
+			minHeight: 20,
+			dynamic: true,
+			handles: handles,
+			draggable: this.allowMove,
+			transparent: false,
+			constrainTo: parentSlideZone.el,
+			leftTravel: null,
+			rightTravel: null,
+      enabled: this.allowMove
+		});
+		var sliderInstance = this;
+		var slideZoneInstance = parentSlideZone;
+		
+		this.el = this.resizable.el;
+		this.el.addClass('x-range-slider-' + this.type);
+		this.el.addClass(this.cls);		
+
+    if(this.allowMove) {
+		  this.ddEl = this.resizable.dd;
+		
+
+		  this.resizable.on('beforeresize', function() {
+			  sliderInstance.fireEvent('dragstart', sliderInstance);	
+		  })
+		
+		  /* Parts of this.resizable.onMouseMove handler taken from:
+		   * http://extjs.com/forum/showthread.php?p=23122&highlight=resizable+constrainto#post23122
+		   */
+		  this.resizable.onMouseMove = function( e ) {
+				  var box = this.constrainTo.getRegion(), tgt = e.getXY();
+				  //redefine the constraining box if slider crossing resrictions
+				  if(!parentSlideZone.allowSliderCrossing) {
+					  if( parentSlideZone.type == 'vertical') {
+							  box = {left:   box.left,  right:  box.right,
+								     top:    this.startBox.y - this.leftTravel[0],
+								     bottom: this.startBox.y + this.startBox.height + this.rightTravel[0] }
+					  }
+					  if( parentSlideZone.type == 'horizontal') {
+							  box = {left:   this.startBox.x - this.leftTravel[0],
+								     right:  this.startBox.x + this.startBox.width + this.rightTravel[0],
+								     top:    box.top, bottom: box.bottom }
+					  }
+				  }
+
+				  e.xy = [
+					  tgt[0] - box.left < 0 ? box.left - this.startBox.x + this.startPoint[0] : tgt[0] - box.right > 0 ? box.right - this.startBox.right + this.startPoint[0] : tgt[0],
+					  tgt[1] - box.top < 0 ? box.top - this.startBox.y + this.startPoint[1] : tgt[1] - box.bottom > 0 ? box.bottom - this.startBox.bottom + this.startPoint[1] : tgt[1]
+				  ];
+
+				  Ext.Resizable.prototype.onMouseMove.call(this, e);
+				  slideZoneInstance.updateValues();
+				  sliderInstance.fireEvent('drag', sliderInstance);
+			  };
+			
+		  this.resizable.on('resize', function(width, height) {
+			  slideZoneInstance.updateConstraints();
+			  slideZoneInstance.updateValues();
+			  sliderInstance.fireEvent('dragend', sliderInstance);
+		  })
+		
+		  this.el.on('mouseover', function() {
+			  sliderInstance.fireEvent('mouseover', sliderInstance);
+			  sliderInstance.el.setStyle('cursor', sliderInstance.pointer); 
+		  }); 
+		  this.el.on('mouseout', function() { 
+			  sliderInstance.fireEvent('mouseout', sliderInstance);
+			  sliderInstance.el.setStyle('cursor', 'default'); 
+		  });
+  		this.ddEl.onMouseDown = function(x, y) { 
+	  		sliderInstance.fireEvent('dragstart', sliderInstance);
+	  	}; 
+	  	this.ddEl.onMouseUp = function(x, y) { 
+	  		slideZoneInstance.updateConstraints();
+	  		slideZoneInstance.updateValues();
+	  		sliderInstance.fireEvent('dragend', sliderInstance)
+	  	}; 
+	  	this.ddEl.onDrag = function(e) { 
+	  		slideZoneInstance.updateValues();
+	  		sliderInstance.fireEvent('drag', sliderInstance);
+	  	}; 
+    }
+		Ext.ux.ThumbSlider.superclass.init.call(parentSlideZone);
+
+	}
+});
diff --git a/skins/stone/rdisplay.tmpl b/skins/stone/rdisplay.tmpl
index 3ea09c8..ed992c3 100644
--- a/skins/stone/rdisplay.tmpl
+++ b/skins/stone/rdisplay.tmpl
@@ -253,11 +253,11 @@
 								</td>
 							</tr>
               <?% allowkeywords = allow('rk') %?>
-              <?% IF param.keywords.size > 0 %?>
+              <?% IF data.keywords && data.keywords.size > 0 %?>
 							<tr>
 								<td colspan="2">
                         <?% gettext('Keywords') %?>&nbsp;:&nbsp;
-		                    <?% FOREACH keyword = param.keywords %?>
+		                    <?% FOREACH keyword = data.keywords %?>
                             <?% IF allowkeywords %?>
                                     <a target="_top" href="?cmd=rk&amp;data=<?% keyword.0 %?>">
                             <?% END %?>
diff --git a/skins/xstyle/rdisplay.tmpl b/skins/xstyle/rdisplay.tmpl
index 2ede60f..967b5db 100644
--- a/skins/xstyle/rdisplay.tmpl
+++ b/skins/xstyle/rdisplay.tmpl
@@ -170,12 +170,12 @@
         </tr>
         <?% END %?>
         <?% allowkeywords = allow('rk') %?>
-        <?% IF param.keywords.size > 0 %?>
+        <?% IF data.keywords && data.keywords.size > 0 %?>
 				<tr>
           <td>&nbsp;</td>
 					<td>
                   <?% gettext('Keywords') %?>&nbsp;:&nbsp;
-                  <?% FOREACH keyword = param.keywords %?>
+                  <?% FOREACH keyword = data.keywords %?>
                       <?% IF allowkeywords %?>
                               <a href="?cmd=rk&amp;data=<?% keyword.0 %?>">
                       <?% END %?>