var engine_gallery_process = "webcpms/proc_gallery.php";


function setOpacity(obj, op) {
   if (obj == null) return;
   try {
      obj.filters.alpha.opacity = op;
   } catch (ex) {
   }
   try {
      obj.style.filter = 'alpha(opacity=' + op + ')';
   } catch (ex) {
   }
   try {
      obj.style.opacity = op / 100;
   } catch (ex) {
   }
}

function getOpacity(obj) {
   var op = 100;
   if (obj == null) return op;
   try {
      op = isNaN(obj.filters.alpha.opacity) ? 100 : obj.filters.alpha.opacity;
      return op;
   } catch (ex) {
   }
   try {
      if (obj.style.filter) if (obj.style.filter.alpha) op = isNaN(obj.style.filter.alpha.opacity) ? 100 : obj.style.filter.alpha.opacity;
      return op;
   } catch (ex) {
   }
   try {
      op = obj.style.opacity == "" ? 100 : Math.round(obj.style.opacity * 100);
      return op;
   } catch (ex) {
   }
   return op;
}





var _MOVE_FPS = 50;
var _MOVE_TIME = 1000 / _MOVE_FPS;

var PATH_LINEAR         = 1;
var PATH_ACCELERATING   = 2;
var PATH_SLOWING        = 4;
var PATH_GAUSSIAN       = 8;


function _moveObject(obj_id, steps_list, cur, on_ready) {
   var obj = document.getElementById(obj_id);
   if (obj == null) return;
   var steps = steps_list.split("|");
   if (cur * 2 + 1 <= steps.length) {
      obj.style.left = steps[cur * 2] + "px";
      obj.style.top = steps[cur * 2 + 1] + "px";
      window.setTimeout("_moveObject('" + obj_id + "', '" + steps_list + "', " + (++cur) + ", \"" + on_ready + "\");", _MOVE_TIME);
   } else {
      if (on_ready.length > 0) eval(on_ready);
   }
}

function moveObject(obj_id, new_x, new_y, total_time, path, on_ready) {
   var obj = document.getElementById(obj_id);
   if (obj == null) return;
   if (path == null) path = PATH_LINEAR;

   var x = getElementLeft(obj);
   var y = getElementTop(obj);

   var num_steps = total_time / _MOVE_TIME;
   var steps = new Array();

   var i;

   switch (path) {
      case PATH_LINEAR:
         var res_x = (new_x - x) / num_steps;
         var res_y = (new_y - y) / num_steps;
         for (i = 0; i < num_steps - 1; i++) {
            steps[i * 2] = x + Math.round(i * res_x);
            steps[i * 2 + 1] = y + Math.round(i * res_y);
         }
         steps[(num_steps - 1) * 2] = new_x;
         steps[(num_steps - 1) * 2 + 1] = new_y;
         break;
   }
   window.setTimeout("_moveObject('" + obj_id + "', '" + steps.join("|") + "', 0, \"" + (on_ready == null ? "" : on_ready) + "\");", _MOVE_TIME);
}



var fade_to = [];

function _fadeCancel(obj_id) {
   var i = 0;
   while (i < fade_to.length && fade_to[i][0] != obj_id) i++;
   if (i < fade_to.length) {
      window.clearTimeout(fade_to[i][1]);
      fade_to.splice(i, 1);
   }
}

function _fadeObject(obj_id, dir, op, remove) {
   var obj = document.getElementById(obj_id);
   if (obj == null) return;

   if (dir > 0) {
      op += 5;
      if (op < 100) {
         setOpacity(obj, op);
         var i = 0;
         while (i < fade_to.length && fade_to[i][0] != obj_id) i++;
         fade_to[i][1] = window.setTimeout("_fadeObject('" + obj_id + "', " + dir + ", " + op + ", " + remove + ");", _MOVE_TIME);
      } else {
         setOpacity(obj, 100);
         var i = 0;
         while (i < fade_to.length && fade_to[i][0] != obj_id) i++;
         if (fade_to[i][2]) eval(fade_to[i][2]);
         _fadeCancel(obj_id);
      }
   } else {
      op -= 5;
      if (op > 0) {
         setOpacity(obj, op);
         var i = 0;
         while (i < fade_to.length && fade_to[i][0] != obj_id) i++;
         fade_to[i][1] = window.setTimeout("_fadeObject('" + obj_id + "', " + dir + ", " + op + ", " + remove + ");", _MOVE_TIME);
      } else {
         if (remove == 2) {
            obj.parentNode.removeChild(obj);
         } else if (remove == 1) {
            toggle(obj.id, false);
            setOpacity(obj, 100);
         } else {
            setOpacity(obj, 0);
         }
         var i = 0;
         while (i < fade_to.length && fade_to[i][0] != obj_id) i++;
         if (fade_to[i][2]) eval(fade_to[i][2]);
         _fadeCancel(obj_id);
      }
   }

}

function fadeObject(obj_id, dir, remove, init_timeout, onfadecomplete) {
   var obj = document.getElementById(obj_id);
   if (obj == null) return;

   _fadeCancel(obj_id);

   if (remove == null) remove = 0;

   var op = dir < 0 ? 99 : 1;

   fade_to.push([obj_id, window.setTimeout("_fadeObject('" + obj_id + "', " + dir + ", " + op + ", " + remove + ");", init_timeout ? init_timeout : _MOVE_TIME), onfadecomplete]);
}



var crossfade_to = [];

function _crossFadeCancel(id) {
   var i = 0;
   while (i < crossfade_to.length && crossfade_to[i][0] != id) i++;
   if (i < crossfade_to.length) {
      window.clearTimeout(crossfade_to[i][1]);
      crossfade_to.splice(i, 1);
   }
}

function _crossFadeObjects(id, obj_list, cur_obj, period) {

   var objs = obj_list.split("|");

   var obj1 = document.getElementById(objs[cur_obj]);
   if (obj1 == null) return;

   var obj2 = document.getElementById(objs[cur_obj == objs.length - 1 ? 0 : cur_obj + 1]);
   if (obj2 == null) return;

   fade_to.push([obj1.id, window.setTimeout("_fadeObject('" + obj1.id + "', -1, 99, false);", _MOVE_TIME)]);
   fade_to.push([obj2.id, window.setTimeout("_fadeObject('" + obj2.id + "', 1, 1, false);", _MOVE_TIME)]);

   fade_to.push([id, window.setTimeout("_crossFadeObjects('" + id + "', '" + obj_list + "', " + (cur_obj == objs.length - 1 ? 0 : cur_obj + 1) + ", " + period + ");", period)]);
}

function crossFadeObjects(id, obj_ids, period) {
   var obj_list = "";
   if (obj_ids instanceof Array) {
      obj_list = obj_ids.join("|");
   } else {
      obj_list = obj_ids;
   }

   var objs = obj_list.split("|");

   setOpacity(objs[0].id, 100);
   var i;
   for (i = 1; i < objs.length; i++) {
      setOpacity(objs[i].id, 0);
   }

   fade_to.push([id, window.setTimeout("_crossFadeObjects('" + id + "', '" + obj_list + "', 0, " + period + ");", period)]);
}




function _toggleAnimate(obj_id, step, padding, orig_h) {
   var obj = document.getElementById(obj_id);
   var nh = obj.offsetHeight + step - padding;
   var cont = true;
   if (step < 0) {
      if (nh <= 0) {
         nh = 0;
         cont = false;
      }
   } else {
      if (nh >= orig_h) {
         nh = orig_h;
         cont = false;
      }
   }
   obj.style.height = nh + "px";
   if (cont) window.setTimeout("_toggleAnimate('" + obj_id + "', " + step + ", " + orig_h + ");", _MOVE_TIME);
}

function toggleAnimate(obj_id, total_time) {
   if (total_time == null) total_time = 1 * 200; // total_time in secs

   var obj = document.getElementById(obj_id);
   obj.style.overflow = "hidden";

   var h = obj.offsetHeight;

   var orig_h = document.getElementById(obj_id + "OriginalHeight");
   if (!orig_h) {
      if (h == 0) {
         return;
      }
      orig_h = document.createElement("input");
      orig_h.id = obj_id + "OriginalHeight";
      orig_h.type = "hidden";
      orig_h.value = h;
      obj.parentNode.insertBefore(orig_h, obj.nextSibling);
   }

   var step = Math.ceil((h == 0 ? orig_h.value : -h) / (total_time / _MOVE_TIME));

   var nh = h + step;
   obj.style.height = nh + "px";
   var padding = Math.abs(nh - obj.offsetHeight);

   window.setTimeout("_toggleAnimate('" + obj_id + "', " + step + ", " + padding + ", " + orig_h.value + ");", _MOVE_TIME);
}




function setImageSize(img, w, h) {
   if (w == null) w = -1;
   if (h == null) h = -1;
   if (w > -1 && h == -1) {
      img.height = Math.round(w / img.width * img.height);
      img.width = w;
   } else if (h > -1 && w == -1) {
      img.width = Math.round(h / img.height * img.width);
      img.height = h;
   } else if (w > -1 && h > -1) {
      img.width = w;
      img.height = h;
   }
}






function SlideShow(name) {
   this.name = name;
   this.imgs = new Array();
   this._frame = -1;
   this.host = document.getElementById(name + "SlideShow");
   this._width = -1;
   this._height = -1;
   this._timeout = -1;
   this._playing = false;

   this.setSize = function (width, height) {
      this._width = width;
      this._height = height;
   }

   this.add = function (img_src) {
      var img_list = img_src.split(";");
      var i;
      for (i = 0; i < img_list.length; i++) {
         this.imgs[this.imgs.length] = new Image();
         this.imgs[this.imgs.length - 1].src = img_list[i];
         setImageSize(this.imgs[this.imgs.length - 1], this._width, this._height);
      }
   }

   this._setFrame = function (delta, loop) {
      this._frame += delta;
      if (loop) {
         if (this._frame < 0) this._frame = this.imgs.length - 1;
            else if (this._frame >= this.imgs.length) this._frame = 0;
      } else {
         if (this._frame < 0) this._frame = 0;
            else if (this._frame >= this.imgs.length) this._frame = this.imgs.length - 1;
      }
   }

   this._draw = function () {
      if (this._width == -1 && this._height == -1) {
         setImageSize(this.imgs[this._frame], this.host.offsetWidth, -1);
      }
      removeAllChildren(this.host);
      this.host.appendChild(this.imgs[this._frame]);
   }

   this.prev = function (loop) {
      if (loop == null) loop = false;
      if (this.imgs.length > 0 && this.host != null) {
         this._setFrame(-1, loop);
         this._draw();
      }
   }

   this.next = function (loop) {
      if (loop == null) loop = false;
      if (this.imgs.length > 0 && this.host != null) {
         this._setFrame(1, loop);
         this._draw();
      }
   }

   this.nextFrame = function (timeout, loop) {
      if (this.imgs.length > 0 && this.host != null && timeout != null && timeout > 0) {
         this.next(loop);
         var playnext = true;
         if (this._frame >= this.imgs.length && !loop) {
            playnext = false;
         }
         if (playnext) this._timeout = window.setTimeout(this.name + ".nextFrame(" + timeout + ", " + (loop ? "true" : "false") + ")", timeout);
         this._playing = playnext;
      }
   }

   this.setFrame = function (img) {
      if (this.imgs.length > 0) {
         var f = this._frame;
         this._frame = 0;
         while (this._frame < this.imgs.length && this.imgs[this._frame].src.lastIndexOf(img) == -1) this._frame++;
         if (this._frame >= this.imgs.length) {
            this._frame = f;
         }
         this._draw();
      }
   }

   this.play = function (fps) {
      var timeout = Math.round(1000 / fps);
      this._timeout = window.setTimeout(this.name + ".nextFrame(" + timeout + ", false)", timeout);
      this._playing = true;
   }

   this.loop = function (fps) {
      var timeout = Math.round(1000 / fps);
      this._timeout = window.setTimeout(this.name + ".nextFrame(" + timeout + ", true)", timeout);
      this._playing = true;
   }

   this.pause = function () {
      window.clearTimeout(this._timeout);
      this._playing = false;
   }

   this.playPause = function (fps, loop) {
      this._playing = !this._playing;
      if (this._playing) {
         if (loop) {
            this.loop(fps);
         } else {
            this.play(fps);
         }
      } else {
         this.pause();
      }
   }
}




var IMAGESTRIP_ADDLINK     = 1;
var IMAGESTRIP_AUTOEXPAND  = 2;
var IMAGESTRIP_VERTICAL    = 0x10;


function ImageStrip(name, flags) {
   this.name = name;
   this.imgs = new Array();
   this._frame = 0;
   this.host = document.getElementById(name + "ImageStrip");
   this._offsetWidth = 0;
   this._offsetHeight = 0;
   this._className = "headstrip";
   this.offsetX = 0;
   this.offsetY = 0;
   this.url_base = "";
   this.dir = "";

   var _width = -1;
   var _height = -1;
   var _totalWidth = 0;
   var _totalHeight = 0;

   var ADDLINK = (flags & IMAGESTRIP_ADDLINK) > 0 ? true : false;
   var AUTOEXPAND = (flags & IMAGESTRIP_AUTOEXPAND) > 0 ? true : false;
   var VERTICAL = (flags & IMAGESTRIP_VERTICAL) > 0 ? true : false;

   var t = -1;

   this.setSize = function (width, height) {
      _width = width;
      _height = height;
   }

   this.setOffsets = function (ow, oh) {
      this._offsetWidth = ow;
      this._offsetHeight = oh;
   }

   this.setClassName = function (className) {
      this._className = className;
   }

   this.setLink = function (url_base, dir) {
      this.url_base = url_base;
      this.dir = dir;
   }


   this.add = function (img_src, descr) {
      var nimg = new Image();
      nimg.src = unSafeString(img_src);
      nimg.alt = descr ? unSafeString(descr) : "";
      nimg.title = descr ? unSafeString(descr) : "";
//      this.imgs[this.imgs.length] = new Image();
//      this.imgs[this.imgs.length - 1].src = img_src;
//      this.imgs[this.imgs.length - 1].alt = descr ? descr : "";
//      this.imgs[this.imgs.length - 1].title = descr ? descr : "";
//      if (this._className.length > 0) this.imgs[this.imgs.length - 1].className = this._className;
      if (this._className.length > 0) nimg.className = this._className;

//      this.imgs[this.imgs.length - 1].onload = function () {
      nimg.onload = function () {
         var _host = document.getElementById(name + "ImageStrip");
         setImageSize(this, _width, _height);
         if (VERTICAL) {
            if (this.width > _totalWidth) _totalWidth = this.width;
            _totalHeight += this.height + 2;
            if (AUTOEXPAND) {
               _host.style.height = _totalHeight + "px";
            }
         } else {
            _totalWidth += this.width + 2;
            if (this.height > _totalHeight) _totalHeight = this.height;
            if (AUTOEXPAND) {
               _host.style.width = _totalWidth + "px";
            }
         }
      }

//      if (this.imgs[this.imgs.length - 1].width > 0 && this.imgs[this.imgs.length - 1].height > 0) {
      if (nimg.width > 0 && nimg.height > 0) {
//         setImageSize(this.imgs[this.imgs.length - 1], _width, _height);
         setImageSize(nimg, _width, _height);
         if (VERTICAL) {
//            if (this.imgs[this.imgs.length - 1].width > _totalWidth) _totalWidth = this.imgs[this.imgs.length - 1].width;
            if (nimg.width > _totalWidth) _totalWidth = nimg.width;
//            _totalHeight += this.imgs[this.imgs.length - 1].height + 2;
            _totalHeight += nimg.height + 2;
            if (AUTOEXPAND) {
               this.host.style.height = _totalHeight + "px";
            }
         } else {
//            _totalWidth += this.imgs[this.imgs.length - 1].width + 2;
            _totalWidth += nimg.width + 2;
//            if (this.imgs[this.imgs.length - 1].height > _totalHeight) _totalHeight = this.imgs[this.imgs.length - 1].height;
            if (nimg.height > _totalHeight) _totalHeight = nimg.height;
            if (AUTOEXPAND) {
               this.host.style.width = _totalWidth + "px";
            }
         }
      }

      this.imgs.push(nimg);

      if (ADDLINK) {
         var a = document.createElement("a");
         a.style.cssFloat = "left";
         a.style.styleFloat = "left";
//         a.href = this.url_base + "&item=" + encodeURIComponent(this.imgs[this.imgs.length - 1].src.substr(this.imgs[this.imgs.length - 1].src.lastIndexOf(this.dir)));
         a.href = this.url_base + "&item=" + encodeURIComponent(nimg.src.substr(nimg.src.lastIndexOf(this.dir)));
//         a.appendChild(this.imgs[this.imgs.length - 1]);
         a.appendChild(nimg);
         this.host.appendChild(a);
      } else {
//         this.host.appendChild(this.imgs[this.imgs.length - 1]);
         this.host.appendChild(nimg);
      }

   }


   this._doscroll = function (sh, sv) {
      this.offsetX += sh;
      this.offsetY += sv;
      if (VERTICAL) {
         if (this.offsetY > 0) this.offsetY = 0;
         if (this.offsetY <= -_totalHeight + this._offsetHeight) this.offsetY = -_totalHeight + this._offsetHeight;
      } else {
         if (this.offsetX > 0) this.offsetX = 0;
         if (this.offsetX <= -_totalWidth + this._offsetWidth) this.offsetX = -_totalWidth + this._offsetWidth;
      }
      this.host.style.marginLeft = this.offsetX + "px";
      this.host.style.marginTop = this.offsetY + "px";
   }

   this.scroll = function (sh, sv) {
      this._doscroll(sh, sv);
      window.clearTimeout(t);
      t = window.setTimeout(this.name + ".scroll(" + sh + ", " + sv + ");", 40);
   }


   this._doflip = function (init_offset_x, init_offset_y, scroll) {
      if (this.offsetX >= init_offset_x - this.imgs[this._frame].width - scroll) {
         this._doscroll(scroll, 0);
         window.setTimeout(this.name + "._doflip(" + init_offset_x + ", " + init_offset_y + ", " + scroll + ")", 40);
      } else if (this.offsetX >= init_offset_x - this.imgs[this._frame].width) {
         this.offsetX = init_offset_x - this.imgs[this._frame].width - 2;
         this._frame++;
         if (this._frame == this.imgs.length) {
            this._frame = 0;
            this.offsetX = 0;
         }
         this.host.style.marginLeft = this.offsetX + "px";
      }
//document.getElementById('ImageStripLog').innerHTML = "offsetX: " + this.offsetX + "<br>offsetY: " + this.offsetY + "<br>frame: " + this._frame + "<br><span class='menuitem' onclick=\"Equipment.stop();\"></span>";
   }


   this.flip = function (show, scroll, running) {
      if (this.imgs.length == 0) {
         return;
      }
      if (show == null) show = 3000;
      if (scroll == null) scroll = -8;
      if (running) {
         this._doflip(this.offsetX, this.offsetY, scroll);
      }
      window.clearTimeout(t);
      t = window.setTimeout(this.name + ".flip(" + show + ", " + scroll + ", true)", show);
   }


   this.stop = function () {
      window.clearTimeout(t);
   }


//   this.scroll = function (sh, sv) {
//      this.offsetX += sh;
//      this.offsetY += sv;
//      if (VERTICAL) {
//         if (this.offsetY > 0) this.offsetY = 0;
//         if (this.offsetY <= -_totalHeight + this._offsetHeight) this.offsetY = -_totalHeight + this._offsetHeight;
//      } else {
//         if (this.offsetX > 0) this.offsetX = 0;
//         if (this.offsetX <= -_totalWidth + this._offsetWidth) this.offsetX = -_totalWidth + this._offsetWidth;
//      }
//      this.host.style.marginLeft = this.offsetX + "px";
//      this.host.style.marginTop = this.offsetY + "px";
//      window.clearTimeout(t);
//      t = window.setTimeout(this.name + ".scroll(" + sh + ", " + sv + ");", 40);
//   }
//
//   this.stop = function () {
//      window.clearTimeout(t);
//   }
}




function MediaGalleryWnd(name, fps, navbar_height) {
   this.name = name;
   this.fps = fps;
   this.navbar_height = navbar_height;
   this.host = document.getElementById(name);

   var _slideshow = null;
   var _imagestrip = null;

   var w4 = Math.round(this.host.offsetWidth / 4);
   var wn = 20;
   var opacityOut = 40, opacityOn = 70;

   var _image_to_show = "";

   var d = document.createElement("div");
   d.setAttribute("id", name + "ImageStrip");
   d.style.overflow = "hidden";
   d.style.height = navbar_height + "px";
   this.host.appendChild(d);

   d = document.createElement("div");
   d.setAttribute("id", name + "ImageStripNavLeftMost");
   d.className = "mediaviewer_scrollleft";
   d.style.position = "absolute";
   d.style.left = getElementLeft(document.getElementById(name)) + "px";
   d.style.top = getElementTop(document.getElementById(name)) + "px";
   d.style.width = wn + "px";
   d.style.height = navbar_height + "px";
   d.onmouseover = function () {
      if (_imagestrip) _imagestrip.scroll(-8, 0);
   }
   d.onmouseout = function () {
      if (_imagestrip) _imagestrip.stop();
   }
   this.host.appendChild(d);

   d = document.createElement("div");
   d.setAttribute("id", name + "ImageStripNavLeft");
   d.className = "mediaviewer_scrollleft";
   d.style.position = "absolute";
   d.style.left = getElementLeft(document.getElementById(name)) + wn + "px";
   d.style.top = getElementTop(document.getElementById(name)) + "px";
   d.style.width = wn + "px";
   d.style.height = navbar_height + "px";
   d.onmouseover = function () {
      if (_imagestrip) _imagestrip.scroll(-4, 0);
   }
   d.onmouseout = function () {
      if (_imagestrip) _imagestrip.stop();
   }
   this.host.appendChild(d);

   d = document.createElement("div");
   d.setAttribute("id", name + "ImageStripNavRight");
   d.className = "mediaviewer_scrollright";
   d.style.position = "absolute";
   d.style.left = getElementLeft(document.getElementById(name)) + (this.host.offsetWidth - 2 * wn) + "px";
   d.style.top = getElementTop(document.getElementById(name)) + "px";
   d.style.width = wn + "px";
   d.style.height = navbar_height + "px";
   d.onmouseover = function () {
      if (_imagestrip) _imagestrip.scroll(4, 0);
   }
   d.onmouseout = function () {
      if (_imagestrip) _imagestrip.stop();
   }
   this.host.appendChild(d);

   d = document.createElement("div");
   d.setAttribute("id", name + "ImageStripNavRightMost");
   d.className = "mediaviewer_scrollright";
   d.style.position = "absolute";
   d.style.left = getElementLeft(document.getElementById(name)) + (this.host.offsetWidth - wn) + "px";
   d.style.top = getElementTop(document.getElementById(name)) + "px";
   d.style.width = wn + "px";
   d.style.height = navbar_height + "px";
   d.onmouseover = function () {
      if (_imagestrip) _imagestrip.scroll(8, 0);
   }
   d.onmouseout = function () {
      if (_imagestrip) _imagestrip.stop();
   }
   this.host.appendChild(d);

   d = document.createElement("div");
   d.setAttribute("id", name + "SlideShow");
   d.style.paddingTop = "2px";
   d.style.textAlign = "center";
//   d.innerHTML = "<br /><img src='http://www.myetus.com/webcpms/icons/myetus/myetus_mediagallery_logo.png' alt='Myetus Media Gallery' title='Myetus Media Gallery' />";
   this.host.appendChild(d);

   d = document.createElement("div");
   d.setAttribute("id", name + "NavBar");
   d.className = "mediaviewer_navbar";
   d.style.position = "absolute";
   d.style.left = getElementLeft(document.getElementById(name + "SlideShow")) + "px";
   d.style.top = getElementTop(document.getElementById(name + "SlideShow")) + "px";
//   d.style.width = this.host.offsetWidth + "px";
   d.innerHTML = "<br /><img src='webcpms/icons/prev.gif' style='cursor: pointer;' onmouseover=\"this.src = 'webcpms/icons/prev_on.gif';\" onmouseout=\"this.src = 'webcpms/icons/prev.gif';\" onclick=\"" + name + ".prev(true);\" alt='Prev' title='Prev' />&nbsp;<img src='webcpms/icons/playpause.gif' style='cursor: pointer;' onmouseover=\"this.src = 'webcpms/icons/playpause_on.gif';\" onmouseout=\"this.src = 'webcpms/icons/playpause.gif';\" onclick=\"" + name + ".playPause(" + this.fps + ", true);\" alt='Play/Pause' title='Play/Pause' />&nbsp;<img src='webcpms/icons/next.gif' style='cursor: pointer;' onmouseover=\"this.src = 'webcpms/icons/next_on.gif';\" onmouseout=\"this.src = 'webcpms/icons/next.gif';\" onclick=\"" + name + ".next(true);\" alt='Next' title='Next' />";
   this.host.appendChild(d);


//   window.onresize = function () {
//      var w = document.getElementById(name).offsetWidth;
//      var d = document.getElementById(name + 'ImageStripNavLeftMost');
//      d.style.left = getElementLeft(document.getElementById(name + "ImageStrip")) + "px";
//      d = document.getElementById(name + 'ImageStripNavLeft');
//      d.style.left = getElementLeft(document.getElementById(name + "ImageStrip")) + wn + "px";
//      d = document.getElementById(name + 'ImageStripNavRight');
//      d.style.left = getElementLeft(document.getElementById(name + "ImageStrip")) + (w - 2 * wn) + "px";
//      d = document.getElementById(name + 'ImageStripNavRightMost');
//      d.style.left = getElementLeft(document.getElementById(name + "ImageStrip")) + (w - wn) + "px";
//   }

   this.load = function (dir, file_types, image_to_show) {
      _image_to_show = image_to_show;
      loadFileList(this.name, this.name + "._loaded", dir, file_types);
   }


   this._loaded = function (_name, _root, _filters, filenames, filesizes, filedates, fileexts) {
      _slideshow = new SlideShow(this.name);
      _imagestrip = new ImageStrip(this.name, IMAGESTRIP_AUTOEXPAND);
      _imagestrip.setSize(-1, this.navbar_height);
      _imagestrip.setOffsets(this.host.offsetWidth, this.host.offsetHeight);
      var i;
      for (i = 0; i < filenames.length; i++) {
         _slideshow.add('webcpms/' + _root + "/" + filenames[i]);
         _imagestrip.add('webcpms/' + _root + "/" + filenames[i]);
      }
      if (_image_to_show != null) {
         if (_image_to_show.length > 0) {
            _slideshow.setFrame(_image_to_show);
         }
      }
   }



   this.scroll = function (sh, sv) {
      if (_imagestrip) _imagestrip.scroll(sh, sv);
   }

   this.playPause = function (fps, loop) {
      if (_slideshow) _slideshow.playPause(fps, loop);
   }

   this.prev = function (loop) {
      if (_slideshow) _slideshow.prev(loop);
   }

   this.next = function (loop) {
      if (_slideshow) _slideshow.next(loop);
   }

   this.nextFrame = function (timeout, loop) {
      if (_slideshow) _slideshow.nextFrame(timeout, loop);
   }
}










/**********************************************************************************/


function saveGalleryItems(name, stg_key_name) {
   if (stg_key_name == null) stg_key_name = "gallery_images";
   var host = document.getElementById(name + 'Host');
   var num = document.getElementById(name + 'Num').value * 1;
   var i;
   var imgs = [];
   var notfilled = false;
   if (host.hasChildNodes()) {
      for (i = 0; i < host.childNodes.length; i++) {
         var n = host.childNodes[i];
         if (n.nodeType == 1) {
            var id = n.id.substr(n.id.lastIndexOf("_") + 1) * 1;
            var img = document.getElementById('Input_' + name + '_' + id);
            if (img) {
               if (img.value.length > 0) {
                  imgs.push("Item_" + id + "=" + safeString(img.value));
                  imgs.push("Descr_" + id + "=" + safeString(document.getElementById(name + 'Descr_' + id).value));
               } else {
                  notfilled = true;
               }
            }
         }
      }
   }
   var cont = true;
   if (notfilled) {
      cont = confirm("Some images are not specified.\nIf you proceed, those fields will be skipped.");
   }
   if (cont) {
      var settings = new Array();
      settings[0] = stg_key_name + "=" + encodeURIComponent(imgs.join("|"));
      saveSystemSettings(settings, false, "SystemSettingsIndicator");
   }
}


function updateGalleryItemProperties(name, num, filesize, filetype, fileprops) {
   var p = "";
   var err = false;
   if (filetype == "image" && filesize > 150000) err = true;
   p += "<span class='" + (err ? "issue_w2" : "issue_w1") + "'>Size: " + Math.round(filesize / 1024) + "kb" + (err ? " - Consider reducing file size below 150 kbytes" : "") + "</span><br />";
   if (filetype == "image") {
      err = false;
      var w = getProperty("Width", fileprops);
      var h = getProperty("Height", fileprops);
      if (w > 800 || h > 600) err = true;
      p += "<span class='" + (err ? "issue_w2" : "issue_w1") + "'>Dimensions: " + w + " x " + h + (err ? " - Consider reducing image dimensions below 800 x 600" : "") + "</span><br />";
   }
   if (filetype == "image") {
      var filename = document.getElementById('Input_' + name + "_" + num).value.substr(document.getElementById('Input_' + name + "_" + num).value.lastIndexOf("/") + 1);
      if (filename.toLowerCase().indexOf("untitled") > -1 || filename.indexOf("DSC") > -1 || filename.toLowerCase().indexOf("image") > -1 || filename.toLowerCase().indexOf("abcd") > -1) {
         var t = "";
         if (filename.toLowerCase().indexOf("untitled") > -1) t = "Untitled";
            else if (filename.indexOf("DSC") > -1) t = "DSC";
            else if (filename.toLowerCase().indexOf("image") > -1) t = "Image";
            else if (filename.toLowerCase().indexOf("abcd") > -1) t = "ABCD";
         p += "<span class='issue_w2'>Image file name should be more descriptive" + (t.length > 0 ? " - avoid terms like '" + t + "'" : "") + "</span>";
      }
   }
   p += "<span id='" + name + "PropsIndicator_" + num + "'></span>";
   document.getElementById(name + 'Props_' + num).innerHTML = p;
}

function updateGalleryItem(name, num, filesize, filetype, fileprops) {
   document.getElementById(name + "Thumb_" + num).innerHTML = "<img src='" + getMediaIcon(document.getElementById('Input_' + name + "_" + num).value) + "' height='" + document.getElementById(name + "Thumb_" + num).offsetHeight + "' />";
   if (filesize) {
      updateGalleryItemProperties(name, num, filesize, filetype, fileprops);
   } else {
      loadFileProperties(document.getElementById('Input_' + name + "_" + num).value, "loadedGalleryItemProperties", name + "_" + num, name + 'PropsIndicator_' + num, name + 'Props_' + num);
   }
}

function loadedGalleryItemProperties(host, proplist) {
   var filesize = getProperty("Size", proplist);
   var filetype = getProperty("Type", proplist);
   var nn = host.split("_");
   updateGalleryItemProperties(nn[0], nn[1], filesize, filetype, proplist);
}

function addGalleryItem(name, width, root_dir, filters, item, descr, filesize, filetype, fileprops) {
   if (width == null) width = 400;
   if (root_dir == null) root_dir = "";
   if (filters == null) filters = "";
   if (item == null) item = "";
   if (descr == null) descr = "";
   var num = document.getElementById(name + 'Num').value * 1;
   var host = document.getElementById(name + 'Host');
   var h = "";
   var d = document.createElement("div");
   d.setAttribute("id", name + "Host_" + num);
   d.style.marginBottom = "20px";
   h += "<input type='hidden' id='" + name + "FileSize_" + num + "' value='" + (filesize ? filesize : "") + "' />";
   h += "<input type='hidden' id='" + name + "FileType_" + num + "' value='" + (filetype ? filetype : "") + "' />";
   h += "<input type='hidden' id='" + name + "FileProperties_" + num + "' value='" + (fileprops ? fileprops : "") + "' />";
   h += "<div id='" + name + "Thumb_" + num + "' class='gallerymgr_thumb' style='width: " + Math.round(width / 5 / 3 * 4) + "px; height: " + Math.round(width / 5) + "px;'>" + (item.length > 0 ? "<img src='" + unSafeString(item) + "' height='" + Math.round(width / 5) + "' />" : "<span style='position: relative; top: 50%; font-size: 8pt; color: #808080;'>No preview</span>") + "</div><div>";
   h += getMediaManager(name + "_" + num, width, Math.round(width / 4 * 3), Math.round(width / 5), root_dir, filters, "updateGalleryItem('" + name + "', " + num + ", filesize, filetype, fileprops);", unSafeString(item));
   h += "<img src='webcpms/icons/icon_delete_big.gif' class='rte_dropdn' onclick=\"if (confirm('Are you sure you want to remove this item?')) { removeElement('" + name + "Host', " + num + "); }\" alt='Delete item' title='Delete item' />";
   h += "<img src='webcpms/icons/collapse_dbl.gif' class='rte_dropdn' onclick=\"moveElementUp('" + name + "Host', " + num + ")\" alt='Move item up' title='Move item up' /><img src='webcpms/icons/expand_dbl.gif' class='rte_dropdn' onclick=\"moveElementDown('" + name + "Host', " + num + ")\" alt='Move item down' title='Move item down' />\r\n";
   h += "</div><div><textarea id='" + name + "Descr_" + num + "' style='width: " + width + "px; height: " + Math.round(width / 5 - 20) + "px; padding-left: 2px;'>" + unSafeString(descr) + "</textarea></div>";
   h += "<div id='" + name + "Props_" + num + "'><span id='" + name + "PropsIndicator_" + num + "'></span></div>";
   d.innerHTML = h;
   host.appendChild(d);
   if (filesize) updateGalleryItemProperties(name, num, filesize, filetype, fileprops);
   document.getElementById(name + 'Num').value = ++num;
}


/**********************************************************************************/


function uploadedDocument(name) {
   var root = document.getElementById(name + 'RootDir').value;
   document.getElementById(name + 'UploaderHost').innerHTML = "";
   addFileUploader(name, root, true, '', 'uploadedDocument');
   loadDocumentList(name);
}

function loadDocumentList(name) {
   var root = document.getElementById(name + 'RootDir').value;
   loadFileList(name, 'printDocumentList', root, 'image;audio;video;web;doc;data');
}

function printDocumentList(name, root_dir, filters, filenames, filesizes, filedates, fileexts) {
   var host = document.getElementById('Host_' + name);
   var list = "";
   if (filenames.length == 0) {
      list = "<i>No files</i>";
   } else {
      list = "<input type='hidden' id='" + name + "Renaming' value='0' /><table cellpadding=0 cellspacing=0 style='width: 100%;'><tr><th class='mediahead_left'>File</th><th class='mediahead_right'>Size</th><th class='mediahead_right'>Date</th></tr>";
      var i;
      for (i = 0; i < filenames.length; i++) {
         list += "<tr><td id='" + name + "FileName_" + i + "' class='medialist_left' onmouseover=\"rolloverDocumentList('" + name + "', " + i + ", " + filenames.length + ");\"><input type='hidden' id='" + name + "FileNameValue_" + i + "' value=\"" + filenames[i] + "\" /><div style='float: left; margin-right: 10px;'><img src='" + getMediaIcon(root_dir + "/" + filenames[i]) + "' width='64' /></div><div id='" + name + "FileNameDisplay_" + i + "' style='display: block;'><a onclick=\"createFileDownloader('" + name + "Downloader_" + i + "', '" + root_dir + "/" + filenames[i] + "');return false;\" href='webcpms/" + root_dir + "/" + filenames[i] + "' target=new>" + filenames[i] + "</a></div>" + getMediaFileControls(name, i, 30, "loadDocumentList") + "</td><td id='" + name + "FileSize_" + i + "' class='medialist_mid' onmouseover=\"rolloverDocumentList('" + name + "', " + i + ", " + filenames.length + ");\">" + filesizes[i] + "</td><td id='" + name + "FileDate_" + i + "' class='medialist_right' onmouseover=\"rolloverDocumentList('" + name + "', " + i + ", " + filenames.length + ");\" >" + filedates[i] + "</td></tr>";
      }
      list += "</table>";
   }
   host.innerHTML = list;
}



function rolloverDocumentList(name, item, total) {
   if (document.getElementById(name + 'Renaming').value == 1) return;

   var i;
   for (i = 0; i < total; i++) {
      document.getElementById(name + 'FileName_' + i).className = "medialist_left";
      document.getElementById(name + 'FileSize_' + i).className = "medialist_mid";
      document.getElementById(name + 'FileDate_' + i).className = "medialist_right";
      toggle(name + i + "Controls", false);
//      toggle(name + "FileNameDisplay_" + i, true);
   }
   document.getElementById(name + 'FileName_' + item).className = "medialist_left_hover";
   document.getElementById(name + 'FileSize_' + item).className = "medialist_mid_hover";
   document.getElementById(name + 'FileDate_' + item).className = "medialist_right_hover";

   document.getElementById(name + item + "FileName").value = document.getElementById(name + "FileNameValue_" + item).value;
   document.getElementById(name + item + "Rename").value = document.getElementById(name + "FileNameValue_" + item).value;

   toggle(name + item + "Controls", true, "inline");
//   toggle(name + "FileNameDisplay_" + item, false);
}


/**********************************************************************************/




function showMediaManager(name, refobj_id, width, height, root_dir, filters) {
   var refobj = document.getElementById(refobj_id);
   if (refobj == null) return;
   var x = getElementLeft(refobj);
   var y = getElementTop(refobj);

   document.getElementById(name + 'RefObj').value = refobj_id;

   var host = document.getElementById('Host_' + name);
   host.style.position = "absolute";
   host.style.left = x + "px";
   host.style.top = (y * 1 + refobj.offsetHeight * 1) + "px";
   host.style.width = width + "px";
   host.style.height = height + "px";
   host.style.display = "block";

   showBackground(name, host);

   if (document.getElementById(name + 'Loaded').value == 0) {
      loadFileList(name, "printMediaSelector", document.getElementById(name + 'RootDir').value, document.getElementById(name + 'Filters').value);
   }
}




function hideMediaManager(name) {
   var host = document.getElementById("Host_" + name);
   if (host == null) host = top.document.getElementById("Host_" + name);
   if (host == null) host = top.frames[0].document.getElementById("Host_" + name);
   host.style.display = "none";
//   hideBackground(name);
   var topframe = top.frames["demo"] == null ? top : top.frames["demo"];

   var bg1 = topframe.document.getElementById(name + 'BG1');
   var bg2 = topframe.document.getElementById(name + 'BG2');
   var bg3 = topframe.document.getElementById(name + 'BG3');
   if (bg1 != null) bg1.style.display = "none";
   if (bg2 != null) bg2.style.display = "none";
   if (bg3 != null) bg3.style.display = "none";
}


function getMediaIcon(filename, size) {
   var type = getFileType(filename);
   var icon = "";
   switch (type) {
      case "image":
         icon = "webcpms/imaging.php?cmd=thumb&s=" + (size ? size : 64) + "&f=" + encodeURIComponent(filename);
         break;
      case "audio":
         icon = "webcpms/icons/icon_audio.png";
         break;
      case "video":
         icon = "";
         break;
      case "web":
         icon = "webcpms/icons/icon_web.png";
         break;
      case "doc":
         icon = "webcpms/icons/icon_data.png";
         break;
      case "data":
         icon = "webcpms/icons/icon_data.png";
         break;
   }
   return icon;
}


function getMediaFileControls(name, id, height, onready) {
   var c = "";
   c += "<div id='" + name + id + "Controls' style='height: " + height + "px; float: left; padding-left: 5px;'>";
//   c += "<input type='hidden' id='" + name + id + "FileName' /><input type='text' id='" + name + id + "Rename' /><input type='button' class='button_small' value='Rename' onclick=\"if (confirm('Really rename this file?')) setFileProperties(document.getElementById('" + name + "RootDir').value + '/' + document.getElementById('" + name + id + "FileName').value, 'rename', document.getElementById('" + name + "RootDir').value + '/' + document.getElementById('" + name + id + "Rename').value, '" + onready + "', '" + name + "', '" + name + id + "Indicator', '" + name + id + "Controls');\" />&nbsp;<input type='button' class='button_small' value='Delete' onclick=\"if (confirm('Really delete this file?')) setFileProperties(document.getElementById('" + name + "RootDir').value + '/' + document.getElementById('" + name + id + "FileName').value, 'delete', '', '" + onready + "', '" + name + "', '" + name + id + "Indicator', '" + name + id + "Controls');\" />";
   c += "<input type='hidden' id='" + name + id + "FileName' /><div id='" + name + id + "FileControls' style='display: block;'><img src='webcpms/icons/icon_edit_big.gif' title='Rename' onclick=\"document.getElementById('" + name + "Renaming').value=1;toggle('" + name + id + "FileControls');toggle('" + name + id + "RenameControls');document.getElementById('" + name + id + "Rename').focus();\" />&nbsp;<img src='webcpms/icons/icon_delete_big.gif' title='Delete' onclick=\"if (confirm('Really delete this file?')) setFileProperties(document.getElementById('" + name + "RootDir').value + '/' + document.getElementById('" + name + id + "FileName').value, 'delete', '', '" + onready + "', '" + name + "', '" + name + id + "Indicator', '" + name + id + "Controls');\" /></div><div id='" + name + id + "RenameControls' style='display: none;'><input type='text' id='" + name + id + "Rename' /><input type='button' class='button_small' value='Rename' onclick=\"if (confirm('Really rename this file?')) setFileProperties(document.getElementById('" + name + "RootDir').value + '/' + document.getElementById('" + name + id + "FileName').value, 'rename', document.getElementById('" + name + "RootDir').value + '/' + document.getElementById('" + name + id + "Rename').value, '" + onready + "', '" + name + "', '" + name + id + "Indicator', '" + name + id + "Controls');\" /> or <span class='menuitem' onclick=\"document.getElementById('" + name + "Renaming').value=0;toggle('" + name + id + "FileControls');toggle('" + name + id + "RenameControls');\">Cancel</span></div>";
   c += "</div><span id='" + name + id + "Indicator'></span>";
   return c;
}

function printMediaSelector(name, root_dir, filters, filenames, filesizes, filedates, fileexts) {
   var host = document.getElementById('Host_' + name);

   document.getElementById(name + 'Loaded').value = 1;

   document.getElementById(name + 'RootDir').value = root_dir;

   var filterlist = null;
   if (filters != null) filterlist = filters.split(";");

   var ch = 30;

   var i;

   var cur_tab = document.getElementById(name + 'CurrentTab') ? document.getElementById(name + 'CurrentTab').value : name + "MediaGallery";
   var cur_view = document.getElementById(name + 'CurrentView') ? document.getElementById(name + 'CurrentView').value : name + "Preview";

   var list = "<div class='" + (cur_tab == name + "MediaGallery" ? "mediatab_hover" : "mediatab") + "' id='" + name + "MediaGallery' onclick=\"setCurrentTab('" + name + "', this.id);\" onmouseover=\"rolloverMediaMgrTab('" + name + "', this.id, true);\" onmouseout=\"rolloverMediaMgrTab('" + name + "', this.id, false);\">Media Gallery</div>";
   list += "<div class='" + (cur_tab == name + "ExternalMedia" ? "mediatab_hover" : "mediatab") + "' id='" + name + "ExternalMedia' onclick=\"setCurrentTab('" + name + "', this.id);\" onmouseover=\"rolloverMediaMgrTab('" + name + "', this.id, true);\" onmouseout=\"rolloverMediaMgrTab('" + name + "', this.id, false);\">External media</div>";
   if (document.getElementById('SessionID').value != "") {
      list += "<div class='" + (cur_tab == name + "UploadFile" ? "mediatab_hover" : "mediatab") + "' id='" + name + "UploadFile' onclick=\"setCurrentTab('" + name + "', this.id);\" onmouseover=\"rolloverMediaMgrTab('" + name + "', this.id, true);\" onmouseout=\"rolloverMediaMgrTab('" + name + "', this.id, false);\">Upload a file</div>";
   }
   list += "<input type='hidden' id='" + name + "CurrentTab' name='" + name + "CurrentTab' value='" + cur_tab + "' />";

   list += "<div class='curdir_host'><span style='float: right;'><span class='changedir_left' onclick=\"switchMediaDirectory('" + name + "');\">&nbsp;</span><span class='changedir_right' onclick=\"switchMediaDirectory('" + name + "');\">&nbsp;</span></span><span class='curdir'><b>Current directory:</b> " + root_dir + "</span></div>";

   list += "<div id='" + name + "MediaGalleryPanel' style='height: " + (host.offsetHeight - 75) + "px; display: " + (cur_tab == name + "MediaGallery" ? "block" : "none") + "; border: solid 1px #a5acb2; padding: 3px;'>";
   list += "<div id='" + name + "PreviewPanel' style='height: " + (host.offsetHeight - 100) + "px; display: " + (cur_view == name + "Preview" ? "block" : "none") + "; border: solid 1px #a5acb2; padding: 3px;'>";
   var sidebarwidth = Math.floor(host.offsetWidth / 5);
   list += "<div style='width: " + sidebarwidth + "px; height: " + (host.offsetHeight - 100) + "px; float: left; overflow: auto;'>";
   for (i = 0; i < filenames.length; i++) {
      var src = getMediaIcon(root_dir + "/" + filenames[i]);
      list += "<div class='mediaitem' onclick=\"setMediaItem('" + name + "', '" + root_dir + "/" + filenames[i] + "');\" onmouseover=\"rolloverPreviewIcon('" + name + "', " + i + ", '" + root_dir + "', '" + filenames[i] + "');\"><img src='" + src + "' id='" + name + "PreviewIcon_" + i + "' width='" + (Math.floor(host.offsetWidth / 5) - 30) + "px' /><br />";
      list += filenames[i] + "</div>";
   }
   list += "</div><div id='" + name + "PreviewArea' style='width: auto; height: " + (host.offsetHeight - 100 - ch) + "px; padding-left: 5px; clear: right; overflow: auto;'>";
   list += "Item preview";
   list += "</div>";
   list += getMediaFileControls(name, "Preview", ch, "reloadFileList");
   list += "</div>";
   list += "<div id='" + name + "IconsPanel' style='height: " + (host.offsetHeight - 100) + "px; display: " + (cur_view == name + "Icons" ? "block" : "none") + "; border: solid 1px #a5acb2; padding: 3px; overflow: auto;'><div style='height: " + (host.offsetHeight - 100 - ch) + "px;'>";
   for (i = 0; i < filenames.length; i++) {
      var src = getMediaIcon(root_dir + "/" + filenames[i]);
      list += "<div class='mediaicon' onclick=\"setMediaItem('" + name + "', '" + root_dir + "/" + filenames[i] + "');\" onmouseover=\"document.getElementById(document.getElementById('" + name + "CurrentView').value + 'FileName').value = '" + filenames[i] + "';document.getElementById(document.getElementById('" + name + "CurrentView').value + 'Rename').value = '" + filenames[i] + "';\"><img src='" + src + "' height='64px' valign='bottom' /><br />";
      list += filenames[i] + "</div>";
   }
   list += "</div>";
   list += getMediaFileControls(name, "Icons", ch, "reloadFileList");
   list += "</div>";
   list += "<div id='" + name + "DetailsPanel' style='height: " + (host.offsetHeight - 100) + "px; display: " + (cur_view == name + "Details" ? "block" : "none") + "; border: solid 1px #a5acb2; padding: 3px; overflow: auto;'>";
   list += "<table cellpadding=0 cellspacing=0 style='width: 100%;'><tr><th class='mediahead_left'>File</th><th class='mediahead_right'>Size</th><th class='mediahead_right'>Date</th></tr>";
   for (i = 0; i < filenames.length; i++) {
      list += "<tr><td id='" + name + "FileName_" + i + "' class='medialist_left' onclick=\"setMediaItem('" + name + "', '" + root_dir + "/" + filenames[i] + "');\" onmouseover=\"rolloverMediaList('" + name + "', " + i + ", " + filenames.length + ", '" + filenames[i] + "');\" onmouseout=\"rolloverMediaList('" + name + "', " + i + ", " + filenames.length + ", '" + filenames[i] + "');\">" + filenames[i] + "</td><td id='" + name + "FileSize_" + i + "' class='medialist_mid' onclick=\"setMediaItem('" + name + "', '" + root_dir + "/" + filenames[i] + "');\" onmouseover=\"rolloverMediaList('" + name + "', " + i + ", " + filenames.length + ", '" + filenames[i] + "');\" onmouseout=\"rolloverMediaList('" + name + "', " + i + ", " + filenames.length + ", '" + filenames[i] + "');\">" + filesizes[i] + "</td><td id='" + name + "FileDate_" + i + "' class='medialist_right' onclick=\"setMediaItem('" + name + "', '" + root_dir + "/" + filenames[i] + "');\" onmouseover=\"rolloverMediaList('" + name + "', " + i + ", " + filenames.length + ", '" + filenames[i] + "');\" onmouseout=\"rolloverMediaList('" + name + "', " + i + ", " + filenames.length + ", '" + filenames[i] + "');\">" + filedates[i] + "</td></tr>";
   }
   list += "</table>";
   list += getMediaFileControls(name, "Details", ch, "reloadFileList");
   list += "</div>";
   list += "<div class='" + (cur_view == name + "Preview" ? "mediasubtab_hover" : "mediasubtab") + "' id='" + name + "Preview' onclick=\"setCurrentView('" + name + "', this.id);\" onmouseover=\"rolloverMediaMgrSubTab('" + name + "', this.id, true);\" onmouseout=\"rolloverMediaMgrSubTab('" + name + "', this.id, false);\">Preview</div>";
   list += "<div class='" + (cur_view == name + "Icons" ? "mediasubtab_hover" : "mediasubtab") + "' id='" + name + "Icons' onclick=\"setCurrentView('" + name + "', this.id);\" onmouseover=\"rolloverMediaMgrSubTab('" + name + "', this.id, true);\" onmouseout=\"rolloverMediaMgrSubTab('" + name + "', this.id, false);\">Icons</div>";
   list += "<div class='" + (cur_view == name + "Details" ? "mediasubtab_hover" : "mediasubtab") + "' id='" + name + "Details' onclick=\"setCurrentView('" + name + "', this.id);\" onmouseover=\"rolloverMediaMgrSubTab('" + name + "', this.id, true);\" onmouseout=\"rolloverMediaMgrSubTab('" + name + "', this.id, false);\">Details</div><input type='hidden' id='" + name + "CurrentView' name='" + name + "CurrentView' value='" + cur_view + "' /><input type='hidden' id='" + name + "Renaming' name='" + name + "Renaming' value='0' />";
   list += "</div>";

   list += "<div  id='" + name + "ExternalMediaPanel' style='height: auto; display: " + (cur_tab == name + "ExternalMedia" ? "block" : "none") + "; border: solid 1px #a5acb2; padding: 3px;'>";
   list += "Enter or paste the web address of an external media item or paste 'embed code' from a media server such as YouTube:<br />";
   list += "<input type='text' id='" + name + "ExternalInput' name='" + name + "ExternalInput' onchange=\"if (document.getElementById('Input_' + '" + name + "')) document.getElementById('Input_' + '" + name + "').value = this.value;setMediaItem('" + name + "');\" />";
   list += "</div>";

   if (document.getElementById('SessionID').value != "") {
      list += "<div id='" + name + "UploadFilePanel' style='height: auto; display: " + (cur_tab == name + "UploadFile" ? "block" : "none") + "; border: solid 1px #a5acb2; padding: 3px;'>";
      list += "Upload a file from your computer:<br />";
      list += "<div id='" + name + "UploaderHost'></div>";
      list += "</div>";
   }

   host.innerHTML = list + "<table style='width: 100%;'><tr><td class='button' onclick=\"hideMediaManager('" + name + "')\">Close</td></tr></table>";

   setButtonVisualStuff();

   setCurrentTab(name, cur_tab);

   var item = document.getElementById(name + 'Selection').value;
   if (item.length > 0) {
      var pos = item.lastIndexOf("/");
      var filename = pos == -1 ? item : item.substr(pos + 1);
      var i = 0;
      while (i < filenames.length && filename != filenames[i]) i++;
      if (i < filenames.length) {
         rolloverPreviewIcon(name, i, root_dir, filename);
      }
   }
}



function addFileUploader(name, root, uploadbtn, readypage, onready, counter) {
   if (readypage == null) readypage = "";
   if (onready == null) onready = "";

   var c = new Date().getTime();
   var u = counter == null ? "" : (document.getElementById(counter) ? "" : "<input type='hidden' id='" + counter + "' name='" + counter + "' value='0' />");
   u += "<input type='hidden' id='" + name + "RootDir' value=\"" + root + "\" /><iframe id='" + name + "FileUploadPlaceholder_" + c + "' name='" + name + "FileUploadPlaceholder_" + c + "' style='border: none; padding: 0px; margin: 0px; width: 330px; height: 35px; overflow: hidden; background-color: none;' frameborder='0' scrolling='no' onload=\"uploadedFile('" + name + "', " + c + ");\"></iframe>";

   document.getElementById(name + 'UploaderHost').innerHTML += u;

   var f = "<html><head><base href='" + getWebAddress() + "' /><script type='text/javascript' src='webcpms/webcpms.js'></script><script type='text/javascript' src='webcpms/proc_gallery.js'></script><style>.indicator_on { font-family: 'Tahoma', sans-serif; font-size: 12pt; font-weight: bold; background: white; text-align: center; opacity: 0.75; filter: alpha(opacity=75); -moz-opacity: 0.75; display: table-cell; vertical-align: middle; position: absolute; z-index: 131072; }</style></head><body style='margin: 0px; padding: 0px;'><form  method='post' action='webcpms/proc_gallery.php' id='UploaderForm' enctype='multipart/form-data'>";
   f += "<div id='UploaderInputHost'><input type='file' id='UploadInput' name='UploadInput' />&nbsp;";
   if (uploadbtn) {
      f += "<input type='button' class='button' value='Upload' onclick=\"uploadFile('" + name + "', true);\" /></div><span id='UploadIndicator'></span>";
   }
   f += "<input type='hidden' id='SessionID' name='SessionID' value='" + document.getElementById('SessionID').value + "' />";
   f += "<input type='hidden' id='UserID' name='UserID' value='' />";
   f += "<input type='hidden' id='ReadyPage' name='ReadyPage' value='" + readypage + "' />";
   f += "<input type='hidden' id='ReadyScript' name='ReadyScript' value='" + onready + "' />";
   f += "<input type='hidden' id='name' name='name' value='" + name + "' />";
   f += "<input type='hidden' id='cmd' name='cmd' value='cmdFileUpload' />";
   f += "<input type='hidden' id='root' name='root' value='" + root + "' />";
   f += "<input type='hidden' id='Counter' name='Counter' value='" + (counter ? counter : "") + "' />";
   f += "</form></body></html>";

   var uw = document.getElementById(name + 'FileUploadPlaceholder_' + c).contentWindow.document;
   uw.open();
   uw.write(f);
   uw.close();

   if (counter) {
      document.getElementById(counter).value++;
   }

   return name + 'FileUploadPlaceholder_' + c;
}



function setCurrentTab(name, tab_id) {
//   var cur_tab = document.getElementById(name + "CurrentTab").value;
//   if (cur_tab == tab_id) return;

   document.getElementById(name + "CurrentTab").value = tab_id;

   document.getElementById(name + "MediaGallery").className = "mediatab";
   document.getElementById(name + "ExternalMedia").className = "mediatab";
   if (document.getElementById(name + "UploadFile")) document.getElementById(name + "UploadFile").className = "mediatab";
   document.getElementById(tab_id).className = "mediatab_hover";

   document.getElementById(name + "MediaGalleryPanel").style.display = "none";
   document.getElementById(name + "ExternalMediaPanel").style.display = "none";
   if (document.getElementById(name + "UploadFilePanel")) document.getElementById(name + "UploadFilePanel").style.display = "none";
   document.getElementById(tab_id + "Panel").style.display = "block";

   document.getElementById('Host_' + name).style.height = tab_id == name + "MediaGallery" ? document.getElementById(name + 'Height').value + "px" : "auto";

   if (tab_id == name + "UploadFile" && document.getElementById('SessionID').value != "") {
      addFileUploader(name, document.getElementById(name + 'RootDir').value, true, "", "refreshFileList");
   }

   showBackground(name, document.getElementById('Host_' + name));
}

function setCurrentView(name, tab_id) {
   document.getElementById(name + "CurrentView").value = tab_id;

   document.getElementById(name + "Preview").className = "mediasubtab";
   document.getElementById(name + "Icons").className = "mediasubtab";
   document.getElementById(name + "Details").className = "mediasubtab";
   document.getElementById(tab_id).className = "mediasubtab_hover";

   document.getElementById(name + "PreviewPanel").style.display = "none";
   document.getElementById(name + "IconsPanel").style.display = "none";
   document.getElementById(name + "DetailsPanel").style.display = "none";
   document.getElementById(tab_id + "Panel").style.display = "block";
}


function rolloverMediaMgrTab(name, tab_id, over) {
   var curtab = document.getElementById(name + "CurrentTab").value;
   if (tab_id != curtab) document.getElementById(tab_id).className = over ? "mediatab_hover" : "mediatab";
}

function rolloverMediaMgrSubTab(name, tab_id, over) {
   var curview = document.getElementById(name + "CurrentView").value;
   if (tab_id != curview) document.getElementById(tab_id).className = over ? "mediasubtab_hover" : "mediasubtab";
}

function rolloverMediaList(name, item, total, file) {
   var i;
   for (i = 0; i < total; i++) {
      document.getElementById(name + 'FileName_' + i).className = "medialist_left";
      document.getElementById(name + 'FileSize_' + i).className = "medialist_mid";
      document.getElementById(name + 'FileDate_' + i).className = "medialist_right";
   }
   document.getElementById(name + 'FileName_' + item).className = "medialist_left_hover";
   document.getElementById(name + 'FileSize_' + item).className = "medialist_mid_hover";
   document.getElementById(name + 'FileDate_' + item).className = "medialist_right_hover";

   document.getElementById(document.getElementById(name + "CurrentView").value + "FileName").value = file;
   document.getElementById(document.getElementById(name + "CurrentView").value + "Rename").value = file;
}

function rolloverPreviewIcon(name, item, root_dir, file) {
   var img = document.getElementById(name + "PreviewIcon_" + item);
   var area = document.getElementById(name + 'PreviewArea');

   var w = area.offsetWidth - 10;
   var h = area.offsetHeight - 10;

//   area.innerHTML = "<img src='" + img.src + "' " + (img.width > img.height ? (img.width > w ? "width='" + w + "px'" : "") : (img.height > h ? "height='" + h + "px'" : "")) + " style=\"cursor: pointer;\" onclick=\"setMediaItem('" + name + "', '" + root_dir + "/" + file + "')\" />";
//   area.innerHTML = "<img src='" + img.src + "' " + (img.width > img.height ? "width='" + w + "px'" : "height='" + h + "px'") + " style=\"cursor: pointer;\" onclick=\"setMediaItem('" + name + "', '" + root_dir + "/" + file + "')\" />";

   var type = getFileType(file);
   var preview = "";

   switch (type) {
      case "image":
//         preview = "<img src='" + img.src + "' " + (img.width > img.height ? "width='" + w + "px'" : "height='" + h + "px'") + " style=\"cursor: pointer;\" onclick=\"setMediaItem('" + name + "', '" + root_dir + "/" + file + "')\" />";
         preview = "<img src='" + getMediaIcon(root_dir + "/" + file, 256) + "' height='" + h + "px' style=\"cursor: pointer;\" onclick=\"setMediaItem('" + name + "', '" + root_dir + "/" + file + "')\" />";
         break;
      case "audio":
         preview =  "<object width='150' height='45' classid='clsid:6bf52a52-394a-11d3-b153-00c04f79faa6' type='application/x-oleobject'>";
         preview += "<param name='url' value='webcpms/" + root_dir + "/" + file + "'>";
         preview += "<param name='autoStart' value='false'>";
         preview += "<param name='enabled' value='true'>";
         preview += "<param name='uiMode' value='mini'>";
         preview += "<param name='playCount' value='1'>";
         preview += "<embed src='webcpms/" + root_dir + "/" + file + "' width='150' height='45' autoplay='false' controller='true' loop='false'>";
         preview += "</object><br /><input type='checkbox' id='" + name + "AudioAutoPlay' /><label for='" + name + "AudioAutoPlay'>Play automatically</label><br />";
         preview += "<input type='checkbox' id='" + name + "AudioControlsEnabled' checked='checked' /><label for='" + name + "AudioControlsEnabled'>Controls enabled</label><br />";
         preview += "<input type='checkbox' id='" + name + "AudioLoop' /><label for='" + name + "AudioLoop'>Loop audio</label><br />";
         break;
      case "video":
         break;
      case "web":
         preview += "<span class='menuitem_small'>" + root_dir + "/" + file + "</span>";
         break;
      case "doc":
         preview += "<span class='menuitem_small'>" + root_dir + "/" + file + "</span>";
         break;
      case "data":
         preview += "<span class='menuitem_small'>" + root_dir + "/" + file + "</span>";
         break;
   }
   area.innerHTML = preview;

   document.getElementById(document.getElementById(name + "CurrentView").value + "FileName").value = file;
   document.getElementById(document.getElementById(name + "CurrentView").value + "Rename").value = file;
}



function setMediaItem(name, file) {
   if (document.getElementById('Input_' + name)) {
      if (top.frames["demo"] == null) {
         document.getElementById('Input_' + name).value = "webcpms/" + file;
      } else {
         document.getElementById('Input_' + name).value = file.substr(file.lastIndexOf("/") + 1);
      }
   }

   var data = "";

   var curtab = document.getElementById(name + 'CurrentTab').value;

   if (curtab == name + "MediaGallery") {
      var type = getFileType("webcpms/" + file);
      switch (type) {
         case "image":
            data = "<img src='webcpms/" + file + "' border='0' />";
            break;
         case "audio":
            var autoplay = document.getElementById(name + "AudioAutoPlay") ? document.getElementById(name + "AudioAutoPlay").checked : false;
            var controls = document.getElementById(name + "AudioControlsEnabled") ? document.getElementById(name + "AudioControlsEnabled").checked : true;
            var loop = document.getElementById(name + "AudioLoop") ? document.getElementById(name + "AudioLoop").checked : false;
            data =  "<object width='150' height='45' classid='clsid:6bf52a52-394a-11d3-b153-00c04f79faa6' type='application/x-oleobject'>\r\n";
            data += "<param name='url' value='webcpms/" + file + "'>\r\n";
            data += "<param name='autoStart' value='" + (autoplay ? "true" : "false") + "'>\r\n";
            data += "<param name='enabled' value='true'>\r\n";
            data += "<param name='uiMode' value='" + (controls ? "mini" : "none") + "'>\r\n";
            data += "<param name='playCount' value='" + (loop ? "99999" : "1") + "'>\r\n";
            data += "<embed src='webcpms/" + file + "' width='150' height='45' autoplay='" + (autoplay ? "true" : "false") + "' controller='" + (controls ? "true" : "false") + "' loop='" + (loop ? "true" : "false") + "'>\r\n";
            data += "</object>";
            break;
         case "video":
            break;
         case "web":
            data += "<a href='webcpms/" + file + "'>" + file + "</a>";
            break;
         case "doc":
            data += "<a href='webcpms/" + file + "'>" + file + "</a>";
            break;
         case "data":
            data += "<a href='webcpms/" + file + "'>" + file + "</a>";
            break;
      }
   } else if (curtab == name + "ExternalMedia") {
      data += document.getElementById(name + 'ExternalInput').value;
   }

   document.getElementById(name + "Selection").value = encodeURIComponent(data);
   var callback = document.getElementById(name + 'Callback').value;
   if (callback.length > 0) {
      var filesize = null;
      var filetype = null;
      var fileprops = null;
      eval(decodeURIComponent(callback));
   }
   hideMediaManager(name);
}


function uploadFile(name, checkfile) {
   var filename = document.getElementById("UploadInput").value;
   if (checkfile && filename == "") {
      alert("Please select a file from your computer to upload");
      return;
   }
   var sep = filename.lastIndexOf("/");
   if (sep == -1) sep = filename.lastIndexOf("\\");
   if (sep != -1) filename = filename.substr(sep + 1);
   var topframe = top.frames["demo"] == null ? top : top.frames["demo"];
   if (topframe.document.getElementById('Input_' + name)) {
      topframe.document.getElementById('Input_' + name).value = "Uploading " + filename + "...";
      hideMediaManager(name);
   } else {
      startIndicator("UploadIndicator", "Uploading", "UploaderInputHost");
   }

   document.getElementById('UploaderForm').submit();
}




function uploadedFile(name, c) {
//var frame = null;
//if (window.event) { // msie
//   frame = event.srcElement;
//} else { // other
//   frame = event.target;
//}
//alert(frame + "\n" + name);

   var framename = name + 'FileUploadPlaceholder_' + c;
   var topframe = top.frames["demo"] == null ? top : top.frames["demo"];

   if (!topframe.frames[framename]) {
      return;
   } else if (!topframe.frames[framename].document) {
      return;
   }

//   if (top.frames[framename].document.getElementById("UploadedFileSuccess")) {
   if (topframe.frames[framename].document.getElementById("UploadedFileSuccess")) {
//      var success = top.frames[framename].document.getElementById("UploadedFileSuccess").value;
      var success = topframe.frames[framename].document.getElementById("UploadedFileSuccess").value;
      if (success != "uploaded") {
         if (topframe.document.getElementById('Input_' + name) != null) {
            topframe.document.getElementById('Input_' + name).value = "";
         }
         if (success == "no_right") {
            alert("File upload failed.\nYou do not have permission to upload files to this server.");
         } else if (success == "no_upload") {
            alert("File upload failed.\nThere may be not enough room on the server to store this file.");
         }
         if (topframe.document.getElementById('Input_' + name) != null) {
            stopIndicator("UploadIndicator");
         }
         return;
      }
   }

//   var filehost = top.frames[framename].document.getElementById("UploadedFile");
   var filehost = topframe.frames[framename].document.getElementById("UploadedFile");
   if (filehost != null){

      var counter = topframe.frames[framename].document.getElementById("Counter").value;
      if (counter.length > 0) topframe.document.getElementById(counter).value--;

      var user = topframe.frames[framename].document.getElementById("UserID").value;

      var file = filehost.value;
      if (top.frames["demo"] == null) {
         file = "webcpms/" + file;
      } else {
         file = file.substr(file.lastIndexOf("/") + 1);
      }
      if (topframe.document.getElementById('Input_' + name) != null) {
         topframe.document.getElementById('Input_' + name).value = file;
      } else {
         stopIndicator("UploadIndicator");
      }
//      var onready = top.frames[framename].document.getElementById('ReadyScript');
      var onready = topframe.frames[framename].document.getElementById('ReadyScript');
      if (onready != null) {
         if (onready.value.length > 0) {
            eval("topframe." + decodeURIComponent(onready.value) + "('" + name + "', '" + file + "', " + user + ", " + (counter.length > 0 ? topframe.document.getElementById(counter).value : "null") + ", " + topframe.frames[framename].document.getElementById("UploadedSize").value + ", '" + topframe.frames[framename].document.getElementById("UploadedType").value + "', '" + topframe.frames[framename].document.getElementById("UploadedProperties").value + "')");
         }
      }
//      var readypage = top.frames[framename].document.getElementById('ReadyPage');
      var readypage = topframe.frames[framename].document.getElementById('ReadyPage');
      if (readypage != null) {
         if (readypage.value.length > 0) {
            topframe.location.replace(decodeURIComponent(readypage.value));
         }
      }
   }
}




function switchMediaDirectory(name) {
   var sid = document.getElementById('SessionID').value;
   if (sid.length == 0) {
      return;
   }

   var root_orig = document.getElementById(name + 'RootDirOrig').value;
   if (root_orig == sid) {
      return;
   }
   var root = document.getElementById(name + 'RootDir').value;

   if (root_orig.length > 0) {
      if (root_orig == root) {
         document.getElementById(name + 'RootDir').value = "!";
      } else {
         document.getElementById(name + 'RootDir').value = root_orig;
      }
   }
   loadFileList(name, "printMediaSelector", document.getElementById(name + 'RootDir').value, document.getElementById(name + 'Filters').value);
}



function refreshFileList(name, file, user, counter, filesize, filetype, fileprops) {
   var callback = document.getElementById(name + 'Callback').value;
   if (callback.length > 0) {
//      callback = callback.replace(/filesize/, filesize);
//      callback = callback.replace(/filetype/, filetype);
//      callback = callback.replace(/fileprops/, fileprops);
      eval(decodeURIComponent(callback));
   }

   var topframe = top.frames["demo"] == null ? top : top.frames["demo"];
   if (!topframe.document.getElementById('Input_' + name)) {
      reloadFileList(name);
   }
}


function reloadFileList(name) {
   setCurrentTab(name, name + "MediaGallery");
   loadFileList(name, 'printMediaSelector', document.getElementById(name + 'RootDir').value, document.getElementById(name + 'Filters').value);
}